compote-ui 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/Button.svelte +33 -0
- package/dist/components/button/Button.svelte.d.ts +9 -0
- package/dist/components/checkbox/Checkbox.svelte +24 -0
- package/dist/components/checkbox/Checkbox.svelte.d.ts +5 -0
- package/dist/components/checkbox/checkbox-props.d.ts +6 -0
- package/dist/components/checkbox/checkbox-props.js +1 -0
- package/dist/index.d.ts +0 -1
- package/dist/theme.css +89 -0
- package/package.json +16 -7
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
|
+
import { tv } from 'tailwind-variants';
|
|
4
|
+
|
|
5
|
+
const button = tv({
|
|
6
|
+
base: 'inline-flex items-center justify-center font-medium transition-colors cursor-pointer bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50 disabled:pointer-events-none',
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
solid: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
|
|
10
|
+
outline: 'border border-border text-foreground hover:bg-muted',
|
|
11
|
+
ghost: 'text-foreground hover:bg-muted'
|
|
12
|
+
},
|
|
13
|
+
size: {
|
|
14
|
+
sm: 'h-8 px-3 text-sm rounded-sm gap-1.5',
|
|
15
|
+
md: 'h-10 px-4 text-base rounded-md gap-2',
|
|
16
|
+
lg: 'h-12 px-6 text-lg rounded-lg gap-2.5'
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: { variant: 'solid', size: 'md' }
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
type Props = Omit<HTMLButtonAttributes, 'class'> & {
|
|
23
|
+
variant?: 'solid' | 'outline' | 'ghost';
|
|
24
|
+
size?: 'sm' | 'md' | 'lg';
|
|
25
|
+
class?: string;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
let { variant, size, class: className, children, ...rest }: Props = $props();
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<button class={button({ variant, size, class: className })} {...rest}>
|
|
32
|
+
{@render children?.()}
|
|
33
|
+
</button>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
2
|
+
type Props = Omit<HTMLButtonAttributes, 'class'> & {
|
|
3
|
+
variant?: 'solid' | 'outline' | 'ghost';
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
class?: string;
|
|
6
|
+
};
|
|
7
|
+
declare const Button: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Button = ReturnType<typeof Button>;
|
|
9
|
+
export default Button;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Checkbox } from '@ark-ui/svelte/checkbox';
|
|
3
|
+
import PhCheck from '~icons/ph/check-bold';
|
|
4
|
+
import type { CheckboxProps as Props } from './checkbox-props.js';
|
|
5
|
+
|
|
6
|
+
let { label, children, ...rest }: Props = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<Checkbox.Root class="inline-flex cursor-pointer items-start gap-2" {...rest}>
|
|
10
|
+
<Checkbox.Control class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary">
|
|
11
|
+
<Checkbox.Indicator>
|
|
12
|
+
<PhCheck class="size-3.5 text-primary-foreground" />
|
|
13
|
+
</Checkbox.Indicator>
|
|
14
|
+
</Checkbox.Control>
|
|
15
|
+
{#if label}
|
|
16
|
+
<div class="flex flex-col gap-0.5">
|
|
17
|
+
<Checkbox.Label class="select-none text-base text-foreground data-disabled:opacity-50">{label}</Checkbox.Label>
|
|
18
|
+
{#if children}
|
|
19
|
+
<span class="text-sm text-foreground/60">{@render children()}</span>
|
|
20
|
+
{/if}
|
|
21
|
+
</div>
|
|
22
|
+
{/if}
|
|
23
|
+
<Checkbox.HiddenInput />
|
|
24
|
+
</Checkbox.Root>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--background: oklch(0.9885 0.0057 84.5659);
|
|
3
|
+
--foreground: oklch(0.366 0.0251 49.6085);
|
|
4
|
+
--card: oklch(0.9686 0.0091 78.2818);
|
|
5
|
+
--card-foreground: oklch(0.366 0.0251 49.6085);
|
|
6
|
+
--popover: oklch(0.9686 0.0091 78.2818);
|
|
7
|
+
--popover-foreground: oklch(0.366 0.0251 49.6085);
|
|
8
|
+
--primary: oklch(0.5553 0.1455 48.9975);
|
|
9
|
+
--primary-foreground: oklch(1 0 0);
|
|
10
|
+
--secondary: oklch(0.8276 0.0752 74.44);
|
|
11
|
+
--secondary-foreground: oklch(0.4444 0.0096 73.639);
|
|
12
|
+
--muted: oklch(0.9363 0.0218 83.2637);
|
|
13
|
+
--muted-foreground: oklch(0.5534 0.0116 58.0708);
|
|
14
|
+
--accent: oklch(0.9 0.05 74.9889);
|
|
15
|
+
--accent-foreground: oklch(0.4444 0.0096 73.639);
|
|
16
|
+
--destructive: oklch(0.4437 0.1613 26.8994);
|
|
17
|
+
--destructive-foreground: oklch(1 0 0);
|
|
18
|
+
--border: oklch(0.8866 0.0404 89.6994);
|
|
19
|
+
--input: oklch(0.8866 0.0404 89.6994);
|
|
20
|
+
--ring: oklch(0.5553 0.1455 48.9975);
|
|
21
|
+
--font-sans: 'Wix Madefor Text Variable', sans-serif;
|
|
22
|
+
--font-serif: Merriweather, serif;
|
|
23
|
+
--font-mono: Fira Code, monospace;
|
|
24
|
+
--radius: 0.3rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (prefers-color-scheme: dark) {
|
|
28
|
+
:root {
|
|
29
|
+
--background: oklch(26.21% 0.009 248.19);
|
|
30
|
+
--foreground: oklch(0.9699 0.0013 106.4238);
|
|
31
|
+
--card: oklch(34.51% 0.013 248.21);
|
|
32
|
+
--card-foreground: oklch(0.9699 0.0013 106.4238);
|
|
33
|
+
--popover: oklch(0.2685 0.0063 34.2976);
|
|
34
|
+
--popover-foreground: oklch(0.9699 0.0013 106.4238);
|
|
35
|
+
--primary: oklch(0.7049 0.1867 47.6044);
|
|
36
|
+
--primary-foreground: oklch(1 0 0);
|
|
37
|
+
--secondary: oklch(0.4444 0.0096 73.639);
|
|
38
|
+
--secondary-foreground: oklch(0.9232 0.0026 48.7171);
|
|
39
|
+
--muted: oklch(0.233 0.0073 67.4563);
|
|
40
|
+
--muted-foreground: oklch(0.7161 0.0091 56.259);
|
|
41
|
+
--accent: oklch(0.3598 0.0497 229.3202);
|
|
42
|
+
--accent-foreground: oklch(0.9232 0.0026 48.7171);
|
|
43
|
+
--destructive: oklch(0.5771 0.2152 27.325);
|
|
44
|
+
--destructive-foreground: oklch(1 0 0);
|
|
45
|
+
--border: oklch(42.76% 0.015 248.17);
|
|
46
|
+
--input: oklch(0.3741 0.0087 67.5582);
|
|
47
|
+
--ring: oklch(0.7049 0.1867 47.6044);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@theme inline {
|
|
52
|
+
--color-background: var(--background);
|
|
53
|
+
--color-foreground: var(--foreground);
|
|
54
|
+
--color-card: var(--card);
|
|
55
|
+
--color-card-foreground: var(--card-foreground);
|
|
56
|
+
--color-popover: var(--popover);
|
|
57
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
58
|
+
--color-primary: var(--primary);
|
|
59
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
60
|
+
--color-secondary: var(--secondary);
|
|
61
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
62
|
+
--color-muted: var(--muted);
|
|
63
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
64
|
+
--color-accent: var(--accent);
|
|
65
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
66
|
+
--color-destructive: var(--destructive);
|
|
67
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
68
|
+
--color-border: var(--border);
|
|
69
|
+
--color-input: var(--input);
|
|
70
|
+
--color-ring: var(--ring);
|
|
71
|
+
|
|
72
|
+
--font-sans: var(--font-sans);
|
|
73
|
+
--font-mono: var(--font-mono);
|
|
74
|
+
--font-serif: var(--font-serif);
|
|
75
|
+
|
|
76
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
77
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
78
|
+
--radius-lg: var(--radius);
|
|
79
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@layer base {
|
|
83
|
+
* {
|
|
84
|
+
@apply border-border outline-ring/50;
|
|
85
|
+
}
|
|
86
|
+
body {
|
|
87
|
+
@apply bg-background text-foreground;
|
|
88
|
+
}
|
|
89
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "compote-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run prepack",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
".": {
|
|
28
28
|
"types": "./dist/index.d.ts",
|
|
29
29
|
"svelte": "./dist/index.js"
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
|
+
"./theme.css": "./dist/theme.css"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"svelte": "^5.0.0"
|
|
@@ -35,12 +36,13 @@
|
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@eslint/compat": "^2.0.3",
|
|
37
38
|
"@eslint/js": "^10.0.1",
|
|
39
|
+
"@iconify-json/ph": "^1.2.2",
|
|
38
40
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
39
41
|
"@sveltejs/kit": "^2.50.2",
|
|
40
42
|
"@sveltejs/package": "^2.5.7",
|
|
41
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
43
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
42
44
|
"@tailwindcss/vite": "^4.1.18",
|
|
43
|
-
"@types/node": "^
|
|
45
|
+
"@types/node": "^22",
|
|
44
46
|
"eslint": "^10.0.3",
|
|
45
47
|
"eslint-config-prettier": "^10.1.8",
|
|
46
48
|
"eslint-plugin-svelte": "^3.15.2",
|
|
@@ -52,12 +54,19 @@
|
|
|
52
54
|
"svelte": "^5.54.0",
|
|
53
55
|
"svelte-check": "^4.4.2",
|
|
54
56
|
"tailwindcss": "^4.1.18",
|
|
55
|
-
"typescript": "^
|
|
57
|
+
"typescript": "^5.9.3",
|
|
56
58
|
"typescript-eslint": "^8.57.0",
|
|
57
|
-
"
|
|
59
|
+
"unplugin-icons": "^23.0.1",
|
|
60
|
+
"vite": "^7.3.1",
|
|
58
61
|
"vite-plugin-devtools-json": "^1.0.0"
|
|
59
62
|
},
|
|
60
63
|
"keywords": [
|
|
61
64
|
"svelte"
|
|
62
|
-
]
|
|
65
|
+
],
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"@ark-ui/svelte": "^5.20.0",
|
|
68
|
+
"@fontsource-variable/wix-madefor-text": "^5.2.8",
|
|
69
|
+
"tailwind-merge": "^3.5.0",
|
|
70
|
+
"tailwind-variants": "^3.2.2"
|
|
71
|
+
}
|
|
63
72
|
}
|