[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
small fixes
+323
-18
+1
-1
.github/workflows/deploy_all.yml
+1
-1
.github/workflows/deploy_all.yml
+1
-1
.github/workflows/deploy_docs.yml
+1
-1
.github/workflows/deploy_docs.yml
+199
-4
package-lock.json
+199
-4
package-lock.json
···
1
1
{
2
-
"name": "duckui",
3
-
"version": "0.0.5",
2
+
"name": "fuchs",
3
+
"version": "0.0.9",
4
4
"lockfileVersion": 3,
5
5
"requires": true,
6
6
"packages": {
7
7
"": {
8
-
"name": "duckui",
9
-
"version": "0.0.5",
8
+
"name": "fuchs",
9
+
"version": "0.0.9",
10
10
"license": "MIT",
11
11
"dependencies": {
12
12
"@atproto/api": "^0.14.7",
···
22
22
"hls.js": "^1.5.20",
23
23
"layerchart": "^1.0.0",
24
24
"paneforge": "^0.0.6",
25
+
"pdfjs-dist": "^5.0.375",
25
26
"plyr": "^3.7.8",
26
27
"simplex-noise": "^4.0.3",
27
28
"svelte-sonner": "^0.3.28",
···
1507
1508
"d3-array": "^3.2.4",
1508
1509
"date-fns": "^4.1.0",
1509
1510
"lodash-es": "^4.17.21"
1511
+
}
1512
+
},
1513
+
"node_modules/@napi-rs/canvas": {
1514
+
"version": "0.1.68",
1515
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.68.tgz",
1516
+
"integrity": "sha512-LQESrePLEBLvhuFkXx9jjBXRC2ClYsO5mqQ1m/puth5z9SOuM3N/B3vDuqnC3RJFktDktyK9khGvo7dTkqO9uQ==",
1517
+
"license": "MIT",
1518
+
"optional": true,
1519
+
"engines": {
1520
+
"node": ">= 10"
1521
+
},
1522
+
"optionalDependencies": {
1523
+
"@napi-rs/canvas-android-arm64": "0.1.68",
1524
+
"@napi-rs/canvas-darwin-arm64": "0.1.68",
1525
+
"@napi-rs/canvas-darwin-x64": "0.1.68",
1526
+
"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.68",
1527
+
"@napi-rs/canvas-linux-arm64-gnu": "0.1.68",
1528
+
"@napi-rs/canvas-linux-arm64-musl": "0.1.68",
1529
+
"@napi-rs/canvas-linux-riscv64-gnu": "0.1.68",
1530
+
"@napi-rs/canvas-linux-x64-gnu": "0.1.68",
1531
+
"@napi-rs/canvas-linux-x64-musl": "0.1.68",
1532
+
"@napi-rs/canvas-win32-x64-msvc": "0.1.68"
1533
+
}
1534
+
},
1535
+
"node_modules/@napi-rs/canvas-android-arm64": {
1536
+
"version": "0.1.68",
1537
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.68.tgz",
1538
+
"integrity": "sha512-h1KcSR4LKLfRfzeBH65xMxbWOGa1OtMFQbCMVlxPCkN1Zr+2gK+70pXO5ktojIYcUrP6KDcOwoc8clho5ccM/w==",
1539
+
"cpu": [
1540
+
"arm64"
1541
+
],
1542
+
"license": "MIT",
1543
+
"optional": true,
1544
+
"os": [
1545
+
"android"
1546
+
],
1547
+
"engines": {
1548
+
"node": ">= 10"
1549
+
}
1550
+
},
1551
+
"node_modules/@napi-rs/canvas-darwin-arm64": {
1552
+
"version": "0.1.68",
1553
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.68.tgz",
1554
+
"integrity": "sha512-/VURlrAD4gDoxW1GT/b0nP3fRz/fhxmHI/xznTq2FTwkQLPOlLkDLCvTmQ7v6LtGKdc2Ed6rvYpRan+JXThInQ==",
1555
+
"cpu": [
1556
+
"arm64"
1557
+
],
1558
+
"license": "MIT",
1559
+
"optional": true,
1560
+
"os": [
1561
+
"darwin"
1562
+
],
1563
+
"engines": {
1564
+
"node": ">= 10"
1565
+
}
1566
+
},
1567
+
"node_modules/@napi-rs/canvas-darwin-x64": {
1568
+
"version": "0.1.68",
1569
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.68.tgz",
1570
+
"integrity": "sha512-tEpvGR6vCLTo1Tx9wmDnoOKROpw57wiCWwCpDOuVlj/7rqEJOUYr9ixW4aRJgmeGBrZHgevI0EURys2ER6whmg==",
1571
+
"cpu": [
1572
+
"x64"
1573
+
],
1574
+
"license": "MIT",
1575
+
"optional": true,
1576
+
"os": [
1577
+
"darwin"
1578
+
],
1579
+
"engines": {
1580
+
"node": ">= 10"
1581
+
}
1582
+
},
1583
+
"node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
1584
+
"version": "0.1.68",
1585
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.68.tgz",
1586
+
"integrity": "sha512-U9xbJsumPOiAYeAFZMlHf62b9dGs2HJ6Q5xt7xTB0uEyPeurwhgYBWGgabdsEidyj38YuzI/c3LGBbSQB3vagw==",
1587
+
"cpu": [
1588
+
"arm"
1589
+
],
1590
+
"license": "MIT",
1591
+
"optional": true,
1592
+
"os": [
1593
+
"linux"
1594
+
],
1595
+
"engines": {
1596
+
"node": ">= 10"
1597
+
}
1598
+
},
1599
+
"node_modules/@napi-rs/canvas-linux-arm64-gnu": {
1600
+
"version": "0.1.68",
1601
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.68.tgz",
1602
+
"integrity": "sha512-KFkn8wEm3mPnWD4l8+OUUkxylSJuN5q9PnJRZJgv15RtCA1bgxIwTkBhI/+xuyVMcHqON9sXq7cDkEJtHm35dg==",
1603
+
"cpu": [
1604
+
"arm64"
1605
+
],
1606
+
"license": "MIT",
1607
+
"optional": true,
1608
+
"os": [
1609
+
"linux"
1610
+
],
1611
+
"engines": {
1612
+
"node": ">= 10"
1613
+
}
1614
+
},
1615
+
"node_modules/@napi-rs/canvas-linux-arm64-musl": {
1616
+
"version": "0.1.68",
1617
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.68.tgz",
1618
+
"integrity": "sha512-IQzts91rCdOALXBWQxLZRCEDrfFTGDtNRJMNu+2SKZ1uT8cmPQkPwVk5rycvFpvgAcmiFiOSCp1aRrlfU8KPpQ==",
1619
+
"cpu": [
1620
+
"arm64"
1621
+
],
1622
+
"license": "MIT",
1623
+
"optional": true,
1624
+
"os": [
1625
+
"linux"
1626
+
],
1627
+
"engines": {
1628
+
"node": ">= 10"
1629
+
}
1630
+
},
1631
+
"node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
1632
+
"version": "0.1.68",
1633
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.68.tgz",
1634
+
"integrity": "sha512-e9AS5UttoIKqXSmBzKZdd3NErSVyOEYzJfNOCGtafGk1//gibTwQXGlSXmAKuErqMp09pyk9aqQRSYzm1AQfBw==",
1635
+
"cpu": [
1636
+
"riscv64"
1637
+
],
1638
+
"license": "MIT",
1639
+
"optional": true,
1640
+
"os": [
1641
+
"linux"
1642
+
],
1643
+
"engines": {
1644
+
"node": ">= 10"
1645
+
}
1646
+
},
1647
+
"node_modules/@napi-rs/canvas-linux-x64-gnu": {
1648
+
"version": "0.1.68",
1649
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.68.tgz",
1650
+
"integrity": "sha512-Pa/I36VE3j57I3Obhrr+J48KGFfkZk2cJN/2NmW/vCgmoF7kCP6aTVq5n+cGdGWLd/cN9CJ9JvNwEoMRDghu0g==",
1651
+
"cpu": [
1652
+
"x64"
1653
+
],
1654
+
"license": "MIT",
1655
+
"optional": true,
1656
+
"os": [
1657
+
"linux"
1658
+
],
1659
+
"engines": {
1660
+
"node": ">= 10"
1661
+
}
1662
+
},
1663
+
"node_modules/@napi-rs/canvas-linux-x64-musl": {
1664
+
"version": "0.1.68",
1665
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.68.tgz",
1666
+
"integrity": "sha512-9c6rkc5195wNxuUHJdf4/mmnq433OQey9TNvQ9LspJazvHbfSkTij8wtKjASVQsJyPDva4fkWOeV/OQ7cLw0GQ==",
1667
+
"cpu": [
1668
+
"x64"
1669
+
],
1670
+
"license": "MIT",
1671
+
"optional": true,
1672
+
"os": [
1673
+
"linux"
1674
+
],
1675
+
"engines": {
1676
+
"node": ">= 10"
1677
+
}
1678
+
},
1679
+
"node_modules/@napi-rs/canvas-win32-x64-msvc": {
1680
+
"version": "0.1.68",
1681
+
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.68.tgz",
1682
+
"integrity": "sha512-Fc5Dez23u0FoSATurT6/w1oMytiRnKWEinHivdMvXpge6nG4YvhrASrtqMk8dGJMVQpHr8QJYF45rOrx2YU2Aw==",
1683
+
"cpu": [
1684
+
"x64"
1685
+
],
1686
+
"license": "MIT",
1687
+
"optional": true,
1688
+
"os": [
1689
+
"win32"
1690
+
],
1691
+
"engines": {
1692
+
"node": ">= 10"
1510
1693
}
1511
1694
},
1512
1695
"node_modules/@nodelib/fs.scandir": {
···
5332
5515
"dependencies": {
5333
5516
"array-source": "0.0",
5334
5517
"file-source": "0.6"
5518
+
}
5519
+
},
5520
+
"node_modules/pdfjs-dist": {
5521
+
"version": "5.0.375",
5522
+
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.0.375.tgz",
5523
+
"integrity": "sha512-QDRlEVldf/cX88CElGAyRhjqNOO69kmB3HZlalDAfqJ/IvmqJNkipomhBZy4cWATfLVlkQTXE3H4yFvMF2uPsg==",
5524
+
"license": "Apache-2.0",
5525
+
"engines": {
5526
+
"node": ">=20"
5527
+
},
5528
+
"optionalDependencies": {
5529
+
"@napi-rs/canvas": "^0.1.67"
5335
5530
}
5336
5531
},
5337
5532
"node_modules/picocolors": {
+1
package.json
+1
package.json
+105
src/docs/wip/pdf-viewer/PDFViewer.svelte
+105
src/docs/wip/pdf-viewer/PDFViewer.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { Button } from '$lib/components/base/button';
4
+
import type { PDFDocumentProxy } from 'pdfjs-dist';
5
+
import * as PDFJS from 'pdfjs-dist';
6
+
import { onMount } from 'svelte';
7
+
8
+
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
9
+
'pdfjs-dist/build/pdf.worker.mjs',
10
+
import.meta.url
11
+
).toString();
12
+
13
+
let loaded = $state(false);
14
+
15
+
let currentPage: number = $state(1);
16
+
17
+
let pdf: PDFDocumentProxy | undefined;
18
+
19
+
let pageCount: number | undefined;
20
+
21
+
async function loadPDF(node: HTMLCanvasElement, data: { url: string }) {
22
+
if (!pdf) {
23
+
const loadingTask = PDFJS.getDocument(data.url);
24
+
pdf = await loadingTask.promise;
25
+
pageCount = pdf.numPages;
26
+
loaded = true;
27
+
}
28
+
const page = await pdf.getPage(currentPage);
29
+
const scale = window.devicePixelRatio;
30
+
31
+
const viewport = page.getViewport({ scale });
32
+
const canvas = node;
33
+
34
+
const context = canvas.getContext('2d')!;
35
+
36
+
canvas.height = viewport.height;
37
+
canvas.width = viewport.width;
38
+
39
+
const renderContext = {
40
+
canvasContext: context,
41
+
42
+
viewport: viewport
43
+
};
44
+
45
+
await page.render(renderContext);
46
+
}
47
+
48
+
let canvas: HTMLCanvasElement | undefined = $state();
49
+
50
+
onMount(async () => {
51
+
loadPDF(canvas!, { url: base + '/test.pdf' });
52
+
});
53
+
</script>
54
+
55
+
<div class="relative max-w-full mx-auto">
56
+
<canvas bind:this={canvas} class="max-w-full max-h-[calc(100vh-8rem)] dark:invert"></canvas>
57
+
58
+
{#if loaded}
59
+
<Button
60
+
onclick={() => {
61
+
currentPage = Math.max(1, currentPage - 1);
62
+
loadPDF(canvas!, { url: base + '/test.pdf' });
63
+
}}
64
+
class="absolute bottom-0 left-0"
65
+
size="iconLg"
66
+
disabled={currentPage === 1}
67
+
>
68
+
<svg
69
+
xmlns="http://www.w3.org/2000/svg"
70
+
viewBox="0 0 24 24"
71
+
fill="currentColor"
72
+
class="size-6"
73
+
>
74
+
<path
75
+
fill-rule="evenodd"
76
+
d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
77
+
clip-rule="evenodd"
78
+
/>
79
+
</svg>
80
+
</Button>
81
+
82
+
<Button
83
+
onclick={() => {
84
+
currentPage = Math.min(pageCount!, currentPage + 1);
85
+
loadPDF(canvas!, { url: base + '/test.pdf' });
86
+
}}
87
+
class="absolute right-0 bottom-0"
88
+
size="iconLg"
89
+
disabled={currentPage === pageCount}
90
+
>
91
+
<svg
92
+
xmlns="http://www.w3.org/2000/svg"
93
+
viewBox="0 0 24 24"
94
+
fill="currentColor"
95
+
class="size-6"
96
+
>
97
+
<path
98
+
fill-rule="evenodd"
99
+
d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
100
+
clip-rule="evenodd"
101
+
/>
102
+
</svg>
103
+
</Button>
104
+
{/if}
105
+
</div>
+4
-4
src/routes/components/extras/color-select/ColorSelect.md
+4
-4
src/routes/components/extras/color-select/ColorSelect.md
···
17
17
18
18
<ColorSelect
19
19
colors={[
20
-
{ class: 'text-accent-700', label: 'dark' },
21
-
{ class: 'text-accent-500', label: 'medium' },
22
-
{ class: 'text-accent-300', label: 'light' },
23
-
{ class: 'text-accent-100', label: 'lightest' }
20
+
{ class: 'text-red-700', label: 'red' },
21
+
{ class: 'text-green-700', label: 'green' },
22
+
{ class: 'text-blue-700', label: 'blue' },
23
+
{ class: 'text-yellow-700', label: 'yellow' }
24
24
]}
25
25
/>
26
26
+4
-4
src/routes/components/extras/color-select/Example.svelte
+4
-4
src/routes/components/extras/color-select/Example.svelte
···
4
4
5
5
<ColorSelect
6
6
colors={[
7
-
{ class: 'text-accent-700', label: 'dark' },
8
-
{ class: 'text-accent-500', label: 'medium' },
9
-
{ class: 'text-accent-300', label: 'light' },
10
-
{ class: 'text-accent-100', label: 'lightest' }
7
+
{ class: 'text-accent-500', label: '1' },
8
+
{ label: '2', value: 'oklch(from var(--color-accent-500) l c calc(h + 20))' },
9
+
{ label: '3', value: 'oklch(from var(--color-accent-500) l c calc(h + 40))' },
10
+
{ label: '4', value: 'oklch(from var(--color-accent-500) l c calc(h + 60))' },
11
11
]}
12
12
/>
+4
src/routes/components/extras/pdf-viewer/+page.svelte
+4
src/routes/components/extras/pdf-viewer/+page.svelte
+3
-3
src/routes/components/extras/undraw/Undraw.md
+3
-3
src/routes/components/extras/undraw/Undraw.md
···
19
19
20
20
21
21
1. Download a svg illustration from [undraw](https://undraw.co/illustrations) leaving the theme color as it is (#6c63ff).
22
-
2. Import that svg and use it with the undraw component. This will automatically change the theme color to your theme color.
22
+
2. Import that svg with the `?raw` extension and use it with the undraw component. The theme color will automatically change to your theme color, all other colors will have to be manually changed using the `colorMap` prop (or if not using dark mode, leave as is).
23
23
24
24
```svelte
25
25
<script lang="ts">
26
-
import Undraw from '$lib/components/extra/undraw/Undraw.svelte';
26
+
import { Undraw } from 'fuchs';
27
27
28
-
import svg from '$docs/assets/undraw_yoga.svg?raw';
28
+
import svg from './your-illustration.svg?raw';
29
29
</script>
30
30
31
31
<Undraw
+1
-1
src/routes/docs/philosophy/Philosophy.md
+1
-1
src/routes/docs/philosophy/Philosophy.md
···
35
35
36
36
## Lots of components
37
37
38
-
While currently only the base components are visible, there are lots of components in the pipeline.
38
+
While currently only the base and some extra components are visible, there are lots of components in the pipeline.
39
39
The aim is to have a component library that has lots of components that are useful for building
40
40
webapps/websites/games, all in a consistent style/theme.
41
41
static/test.pdf
static/test.pdf
This is a binary file and will not be displayed.