[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
add emoji picker, small fixes
+410
-55
+14
pnpm-lock.yaml
+14
pnpm-lock.yaml
···
408
408
bits-ui:
409
409
specifier: ^1.4.3
410
410
version: 1.4.3(svelte@5.28.1)
411
+
emoji-picker-element:
412
+
specifier: ^1.26.3
413
+
version: 1.26.3
411
414
hls.js:
412
415
specifier: ^1.6.2
413
416
version: 1.6.2
417
+
is-emoji-supported:
418
+
specifier: ^0.0.5
419
+
version: 0.0.5
414
420
plyr:
415
421
specifier: ^3.7.8
416
422
version: 3.7.8
···
2255
2261
resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==, tarball: https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz}
2256
2262
dev: false
2257
2263
2264
+
/emoji-picker-element@1.26.3:
2265
+
resolution: {integrity: sha512-fOMG44d/3OqTe1pPqlu5H4ZtWg7gK4Le6Bt24JTKtDyce5+EO3Mo8WA95cKHbPSsSsg7ehM12M1x3Y6U6fgvTQ==, tarball: https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.26.3.tgz}
2266
+
dev: false
2267
+
2258
2268
/encoding-sniffer@0.2.0:
2259
2269
resolution: {integrity: sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==, tarball: https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz}
2260
2270
dependencies:
···
2711
2721
2712
2722
/inline-style-parser@0.2.4:
2713
2723
resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==, tarball: https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz}
2724
+
dev: false
2725
+
2726
+
/is-emoji-supported@0.0.5:
2727
+
resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==, tarball: https://registry.npmjs.org/is-emoji-supported/-/is-emoji-supported-0.0.5.tgz}
2714
2728
dev: false
2715
2729
2716
2730
/is-extglob@2.1.1:
+10
.changeset/sour-crabs-taste.md
+10
.changeset/sour-crabs-taste.md
+17
-4
packages/3d/package.json
+17
-4
packages/3d/package.json
···
23
23
],
24
24
"exports": {
25
25
".": {
26
-
"types": "./dist/types.d.ts",
27
-
"svelte": "./dist/index.js"
26
+
"types": "./src/lib/types.d.ts",
27
+
"svelte": "./src/lib/index.ts"
28
28
}
29
29
},
30
-
"types": "./dist/types.d.ts",
31
-
"svelte": "./dist/index.js",
30
+
"types": "./src/lib/types.d.ts",
31
+
"svelte": "./src/lib/index.ts",
32
+
"publishOverrides": {
33
+
"files": [
34
+
"dist"
35
+
],
36
+
"svelte": "./dist/index.js",
37
+
"exports": {
38
+
".": {
39
+
"types": "./dist/types.d.ts",
40
+
"svelte": "./dist/index.js"
41
+
}
42
+
},
43
+
"types": "./dist/types.d.ts"
44
+
},
32
45
"devDependencies": {
33
46
"@eslint/compat": "^1.2.5",
34
47
"@eslint/js": "^9.18.0",
+17
-4
packages/base/package.json
+17
-4
packages/base/package.json
···
23
23
],
24
24
"exports": {
25
25
".": {
26
-
"types": "./dist/types.d.ts",
27
-
"svelte": "./dist/index.js"
26
+
"types": "./src/lib/types.d.ts",
27
+
"svelte": "./src/lib/index.ts"
28
28
}
29
29
},
30
-
"types": "./dist/types.d.ts",
31
-
"svelte": "./dist/index.js",
30
+
"types": "./src/lib/types.d.ts",
31
+
"svelte": "./src/lib/index.ts",
32
+
"publishOverrides": {
33
+
"files": [
34
+
"dist"
35
+
],
36
+
"svelte": "./dist/index.js",
37
+
"exports": {
38
+
".": {
39
+
"types": "./dist/types.d.ts",
40
+
"svelte": "./dist/index.js"
41
+
}
42
+
},
43
+
"types": "./dist/types.d.ts"
44
+
},
32
45
"devDependencies": {
33
46
"@eslint/compat": "^1.2.5",
34
47
"@eslint/js": "^9.18.0",
+17
-4
packages/colors/package.json
+17
-4
packages/colors/package.json
···
24
24
],
25
25
"exports": {
26
26
".": {
27
-
"types": "./dist/types.d.ts",
28
-
"svelte": "./dist/index.js"
27
+
"types": "./src/lib/types.d.ts",
28
+
"svelte": "./src/lib/index.ts"
29
29
}
30
30
},
31
-
"types": "./dist/types.d.ts",
32
-
"svelte": "./dist/index.js",
31
+
"types": "./src/lib/types.d.ts",
32
+
"svelte": "./src/lib/index.ts",
33
+
"publishOverrides": {
34
+
"files": [
35
+
"dist"
36
+
],
37
+
"svelte": "./dist/index.js",
38
+
"exports": {
39
+
".": {
40
+
"types": "./dist/types.d.ts",
41
+
"svelte": "./dist/index.js"
42
+
}
43
+
},
44
+
"types": "./dist/types.d.ts"
45
+
},
33
46
"devDependencies": {
34
47
"@eslint/compat": "^1.2.5",
35
48
"@eslint/js": "^9.18.0",
+17
-4
packages/time/package.json
+17
-4
packages/time/package.json
···
23
23
],
24
24
"exports": {
25
25
".": {
26
-
"types": "./dist/types.d.ts",
27
-
"svelte": "./dist/index.js"
26
+
"types": "./src/lib/types.d.ts",
27
+
"svelte": "./src/lib/index.ts"
28
28
}
29
29
},
30
-
"types": "./dist/types.d.ts",
31
-
"svelte": "./dist/index.js",
30
+
"types": "./src/lib/types.d.ts",
31
+
"svelte": "./src/lib/index.ts",
32
+
"publishOverrides": {
33
+
"files": [
34
+
"dist"
35
+
],
36
+
"svelte": "./dist/index.js",
37
+
"exports": {
38
+
".": {
39
+
"types": "./dist/types.d.ts",
40
+
"svelte": "./dist/index.js"
41
+
}
42
+
},
43
+
"types": "./dist/types.d.ts"
44
+
},
32
45
"devDependencies": {
33
46
"@eslint/compat": "^1.2.5",
34
47
"@eslint/js": "^9.18.0",
+17
-4
packages/visual/package.json
+17
-4
packages/visual/package.json
···
23
23
],
24
24
"exports": {
25
25
".": {
26
-
"types": "./dist/types.d.ts",
27
-
"svelte": "./dist/index.js"
26
+
"types": "./src/lib/types.d.ts",
27
+
"svelte": "./src/lib/index.ts"
28
28
}
29
29
},
30
-
"types": "./dist/types.d.ts",
31
-
"svelte": "./dist/index.js",
30
+
"types": "./src/lib/types.d.ts",
31
+
"svelte": "./src/lib/index.ts",
32
+
"publishOverrides": {
33
+
"files": [
34
+
"dist"
35
+
],
36
+
"svelte": "./dist/index.js",
37
+
"exports": {
38
+
".": {
39
+
"types": "./dist/types.d.ts",
40
+
"svelte": "./dist/index.js"
41
+
}
42
+
},
43
+
"types": "./dist/types.d.ts"
44
+
},
32
45
"devDependencies": {
33
46
"@eslint/compat": "^1.2.5",
34
47
"@eslint/js": "^9.18.0",
-2
apps/docs/src/lib/site-components/API.svelte
-2
apps/docs/src/lib/site-components/API.svelte
+10
apps/docs/src/routes/(main)/+layout.svelte
+10
apps/docs/src/routes/(main)/+layout.svelte
···
2
2
import Navbar from '$lib/site-components/Navbar.svelte';
3
3
import Sidebar from '$lib/site-components/Sidebar.svelte';
4
4
import Container from '$lib/site-components/Container.svelte';
5
+
import { AddCopyCodeButtons } from '@fuxui/base';
6
+
import { afterNavigate } from '$app/navigation';
5
7
6
8
let { children } = $props();
9
+
10
+
let addButton = $state(() => {})
11
+
12
+
afterNavigate(() => {
13
+
addButton?.();
14
+
});
7
15
</script>
8
16
9
17
<Navbar hasSidebar showLogo={false} />
···
12
20
<Container id="content">
13
21
{@render children()}
14
22
</Container>
23
+
24
+
<AddCopyCodeButtons bind:addButton />
+1
packages/base/src/lib/components/index.ts
+1
packages/base/src/lib/components/index.ts
+27
-12
packages/base/src/lib/components/prose/Prose.svelte
+27
-12
packages/base/src/lib/components/prose/Prose.svelte
···
1
1
<script lang="ts">
2
-
import { AddCopyCodeButtons } from '../copy-code-button';
2
+
import type { Snippet } from 'svelte';
3
+
import { cn } from '../../utils';
3
4
4
-
let { children } = $props();
5
-
6
-
// this is fucking hacky, todo fix that
5
+
let { children, class: className }: { children: Snippet; class?: string } = $props();
7
6
</script>
8
7
9
8
<div
10
-
class="prose prose-base prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full max-w-2xl dark:hidden"
9
+
class={cn(
10
+
'prose dark:prose-invert prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full max-w-2xl',
11
+
className
12
+
)}
11
13
>
12
14
{@render children?.()}
13
15
</div>
14
-
<div
15
-
class="prose prose-sm prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl hidden w-full max-w-2xl dark:block"
16
-
>
17
-
{@render children?.()}
18
-
</div>
19
-
20
-
<AddCopyCodeButtons />
21
16
22
17
<style>
23
18
.prose-base {
···
39
34
--tw-prose-pre-bg: var(--color-base-800);
40
35
--tw-prose-th-borders: var(--color-base-300);
41
36
--tw-prose-td-borders: var(--color-base-200);
37
+
38
+
39
+
--tw-prose-invert-body: var(--color-base-300);
40
+
--tw-prose-invert-headings: var(--color-white);
41
+
--tw-prose-invert-lead: var(--color-base-400);
42
+
--tw-prose-invert-links: var(--color-white);
43
+
--tw-prose-invert-bold: var(--color-white);
44
+
--tw-prose-invert-counters: var(--color-base-400);
45
+
--tw-prose-invert-bullets: var(--color-base-600);
46
+
--tw-prose-invert-hr: var(--color-base-700);
47
+
--tw-prose-invert-quotes: var(--color-base-100);
48
+
--tw-prose-invert-quote-borders: var(--color-base-700);
49
+
--tw-prose-invert-captions: var(--color-base-400);
50
+
--tw-prose-invert-kbd: var(--color-white);
51
+
--tw-prose-invert-kbd-shadows: var(--color-white);
52
+
--tw-prose-invert-code: var(--color-white);
53
+
--tw-prose-invert-pre-code: var(--color-base-300);
54
+
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
55
+
--tw-prose-invert-th-borders: var(--color-base-600);
56
+
--tw-prose-invert-td-borders: var(--color-base-700);
42
57
}
43
58
44
59
.prose-base-dark {
+12
packages/base/src/lib/components/prose/ProseCopyButton.svelte
+12
packages/base/src/lib/components/prose/ProseCopyButton.svelte
···
1
+
<script lang="ts">
2
+
import { AddCopyCodeButtons } from "../copy-code-button";
3
+
import Prose from "./Prose.svelte";
4
+
import type { Snippet } from "svelte";
5
+
6
+
let { children, class: className }: { children: Snippet; class?: string } = $props();
7
+
</script>
8
+
<Prose class={className}>
9
+
{@render children?.()}
10
+
</Prose>
11
+
12
+
<AddCopyCodeButtons />
-1
packages/visual/src/lib/components/image-masonry/ImageMasonry.svelte
-1
packages/visual/src/lib/components/image-masonry/ImageMasonry.svelte
-4
apps/docs/src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
-4
apps/docs/src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
···
27
27
updateColors(oklch);
28
28
29
29
theme.subscribe(() => {
30
-
console.log('theme changed');
31
30
const accentColor = theme.getCSSVar('--color-accent-500');
32
31
let oklch = oklch_string_to_oklch(accentColor);
33
32
updateColors(oklch);
···
59
58
<ColorGradientPicker
60
59
class="not-prose mt-8"
61
60
bind:colors
62
-
onchange={() => {
63
-
console.log('hello there');
64
-
}}
65
61
/>
66
62
67
63
<h3>Small</h3>