compote-ui 0.0.1 → 0.0.2
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/README.md +38 -52
- package/dist/components/button/Button.svelte +33 -0
- package/dist/components/button/Button.svelte.d.ts +9 -0
- package/dist/components/checkbox/Checkbox.svelte +42 -0
- package/dist/components/checkbox/Checkbox.svelte.d.ts +5 -0
- package/dist/components/checkbox/checkbox-props.d.ts +7 -0
- package/dist/components/checkbox/checkbox-props.js +1 -0
- package/dist/index.d.ts +0 -1
- package/dist/theme.css +65 -0
- package/package.json +15 -7
package/README.md
CHANGED
|
@@ -1,79 +1,65 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Svelte library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Creating a project
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
- **Additional components** that fill gaps in the Ark UI ecosystem
|
|
11
|
-
- **Tailwind CSS integration** for easy customization
|
|
12
|
-
- **TypeScript support** with full type definitions
|
|
13
|
-
- **Accessibility-first** approach, building on Ark UI's strong foundation
|
|
9
|
+
If you're seeing this, you've probably already done this step. Congrats!
|
|
14
10
|
|
|
15
|
-
|
|
11
|
+
```sh
|
|
12
|
+
# create a new project in the current directory
|
|
13
|
+
npx sv create
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
# create a new project in my-app
|
|
16
|
+
npx sv create my-app
|
|
19
17
|
```
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
To recreate this project with the same configuration:
|
|
22
20
|
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
bun add compote-ui
|
|
21
|
+
```sh
|
|
22
|
+
# recreate this project
|
|
23
|
+
bun x sv@0.13.0 create --template library --types ts --add prettier eslint tailwindcss="plugins:none" --install bun compote-ui
|
|
27
24
|
```
|
|
28
25
|
|
|
29
|
-
##
|
|
26
|
+
## Developing
|
|
30
27
|
|
|
31
|
-
|
|
28
|
+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
32
29
|
|
|
33
|
-
|
|
30
|
+
```sh
|
|
31
|
+
npm run dev
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
import { Button, Card } from 'compote-ui';
|
|
38
|
-
</script>
|
|
39
|
-
|
|
40
|
-
<Card>
|
|
41
|
-
<h1>Hello from Compote UI</h1>
|
|
42
|
-
<Button variant="primary">Click me</Button>
|
|
43
|
-
</Card>
|
|
33
|
+
# or start the server and open the app in a new browser tab
|
|
34
|
+
npm run dev -- --open
|
|
44
35
|
```
|
|
45
36
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
- ✅ **Built on Ark UI** - Leveraging battle-tested accessible primitives
|
|
49
|
-
- 🎨 **Tailwind CSS** - Easy theming and customization
|
|
50
|
-
- 🔧 **TypeScript** - Full type safety and autocomplete
|
|
51
|
-
- ♿ **Accessible** - WCAG compliant components
|
|
52
|
-
- 🚀 **Svelte 5** - Modern Svelte with runes and enhanced reactivity
|
|
53
|
-
- 📦 **Tree-shakeable** - Only bundle what you use
|
|
54
|
-
|
|
55
|
-
## Components
|
|
37
|
+
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
|
|
56
38
|
|
|
57
|
-
|
|
39
|
+
## Building
|
|
58
40
|
|
|
59
|
-
|
|
41
|
+
To build your library:
|
|
60
42
|
|
|
61
|
-
|
|
43
|
+
```sh
|
|
44
|
+
npm pack
|
|
45
|
+
```
|
|
62
46
|
|
|
63
|
-
|
|
47
|
+
To create a production version of your showcase app:
|
|
64
48
|
|
|
65
|
-
|
|
66
|
-
|
|
49
|
+
```sh
|
|
50
|
+
npm run build
|
|
51
|
+
```
|
|
67
52
|
|
|
68
|
-
|
|
53
|
+
You can preview the production build with `npm run preview`.
|
|
69
54
|
|
|
70
|
-
|
|
55
|
+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
|
71
56
|
|
|
72
|
-
##
|
|
57
|
+
## Publishing
|
|
73
58
|
|
|
74
|
-
MIT
|
|
59
|
+
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
75
60
|
|
|
76
|
-
|
|
61
|
+
To publish your library to [npm](https://www.npmjs.com):
|
|
77
62
|
|
|
78
|
-
|
|
79
|
-
|
|
63
|
+
```sh
|
|
64
|
+
npm publish
|
|
65
|
+
```
|
|
@@ -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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:opacity-50 disabled:pointer-events-none',
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
solid: 'bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active',
|
|
10
|
+
outline: 'border border-border text-foreground hover:bg-subtle hover:border-border-hover',
|
|
11
|
+
ghost: 'text-foreground hover:bg-subtle'
|
|
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,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Checkbox } from '@ark-ui/svelte/checkbox';
|
|
3
|
+
import { tv } from 'tailwind-variants';
|
|
4
|
+
import PhCheck from '~icons/ph/check-bold';
|
|
5
|
+
import type { CheckboxProps as Props } from './checkbox-props.js';
|
|
6
|
+
|
|
7
|
+
const checkbox = tv({
|
|
8
|
+
slots: {
|
|
9
|
+
root: 'inline-flex items-center gap-2 cursor-pointer',
|
|
10
|
+
control:
|
|
11
|
+
'flex items-center justify-center border border-border rounded-sm bg-background transition-colors data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-focus-ring',
|
|
12
|
+
label: 'text-foreground select-none data-[disabled]:opacity-50',
|
|
13
|
+
icon: 'text-primary-contrast'
|
|
14
|
+
},
|
|
15
|
+
variants: {
|
|
16
|
+
size: {
|
|
17
|
+
sm: { root: 'gap-1.5', control: 'size-4', label: 'text-sm', icon: 'size-3' },
|
|
18
|
+
md: { root: 'gap-2', control: 'size-5', label: 'text-base', icon: 'size-3.5' },
|
|
19
|
+
lg: { root: 'gap-2.5', control: 'size-6', label: 'text-lg', icon: 'size-4' }
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: { size: 'md' }
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
let { size, label, children, ...rest }: Props = $props();
|
|
26
|
+
|
|
27
|
+
const styles = $derived(checkbox({ size }));
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<Checkbox.Root class={styles.root()} {...rest}>
|
|
31
|
+
<Checkbox.Control class={styles.control()}>
|
|
32
|
+
<Checkbox.Indicator>
|
|
33
|
+
<PhCheck class={styles.icon()} />
|
|
34
|
+
</Checkbox.Indicator>
|
|
35
|
+
</Checkbox.Control>
|
|
36
|
+
{#if label}
|
|
37
|
+
<Checkbox.Label class={styles.label()}>{label}</Checkbox.Label>
|
|
38
|
+
{:else if children}
|
|
39
|
+
<Checkbox.Label class={styles.label()}>{@render children()}</Checkbox.Label>
|
|
40
|
+
{/if}
|
|
41
|
+
<Checkbox.HiddenInput />
|
|
42
|
+
</Checkbox.Root>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { CheckboxRootBaseProps } from '@ark-ui/svelte/checkbox';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
export interface CheckboxProps extends Omit<CheckboxRootBaseProps, 'children' | 'asChild' | 'ref'> {
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
label?: string;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@layer compote.tokens {
|
|
2
|
+
:root {
|
|
3
|
+
/* Colors */
|
|
4
|
+
--compote-color-primary: oklch(0.55 0.2 260);
|
|
5
|
+
--compote-color-primary-hover: oklch(0.48 0.2 260);
|
|
6
|
+
--compote-color-primary-active: oklch(0.42 0.2 260);
|
|
7
|
+
--compote-color-primary-contrast: #fff;
|
|
8
|
+
--compote-color-bg: #fff;
|
|
9
|
+
--compote-color-bg-subtle: oklch(0.97 0 0);
|
|
10
|
+
--compote-color-text: oklch(0.15 0 0);
|
|
11
|
+
--compote-color-text-muted: oklch(0.45 0 0);
|
|
12
|
+
--compote-color-border: oklch(0.85 0 0);
|
|
13
|
+
--compote-color-border-hover: oklch(0.7 0 0);
|
|
14
|
+
--compote-color-error: oklch(0.55 0.22 25);
|
|
15
|
+
--compote-color-focus-ring: oklch(0.55 0.2 260 / 0.5);
|
|
16
|
+
|
|
17
|
+
/* Radius */
|
|
18
|
+
--compote-radius-sm: 0.25rem;
|
|
19
|
+
--compote-radius-md: 0.375rem;
|
|
20
|
+
--compote-radius-lg: 0.5rem;
|
|
21
|
+
|
|
22
|
+
/* Font sizes */
|
|
23
|
+
--compote-font-size-sm: 0.875rem;
|
|
24
|
+
--compote-font-size-md: 1rem;
|
|
25
|
+
--compote-font-size-lg: 1.125rem;
|
|
26
|
+
|
|
27
|
+
/* Spacing */
|
|
28
|
+
--compote-spacing-sm: 0.5rem;
|
|
29
|
+
|
|
30
|
+
/* Shadows */
|
|
31
|
+
--compote-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.dark {
|
|
35
|
+
--compote-color-primary: oklch(0.7 0.18 260);
|
|
36
|
+
--compote-color-bg: oklch(0.15 0 0);
|
|
37
|
+
--compote-color-bg-subtle: oklch(0.2 0 0);
|
|
38
|
+
--compote-color-text: oklch(0.92 0 0);
|
|
39
|
+
--compote-color-text-muted: oklch(0.65 0 0);
|
|
40
|
+
--compote-color-border: oklch(0.3 0 0);
|
|
41
|
+
--compote-color-border-hover: oklch(0.45 0 0);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Map tokens into Tailwind @theme */
|
|
46
|
+
@theme {
|
|
47
|
+
--color-primary: var(--compote-color-primary);
|
|
48
|
+
--color-primary-hover: var(--compote-color-primary-hover);
|
|
49
|
+
--color-primary-active: var(--compote-color-primary-active);
|
|
50
|
+
--color-primary-contrast: var(--compote-color-primary-contrast);
|
|
51
|
+
--color-background: var(--compote-color-bg);
|
|
52
|
+
--color-subtle: var(--compote-color-bg-subtle);
|
|
53
|
+
--color-foreground: var(--compote-color-text);
|
|
54
|
+
--color-muted: var(--compote-color-text-muted);
|
|
55
|
+
--color-border: var(--compote-color-border);
|
|
56
|
+
--color-border-hover: var(--compote-color-border-hover);
|
|
57
|
+
--color-error: var(--compote-color-error);
|
|
58
|
+
--color-focus-ring: var(--compote-color-focus-ring);
|
|
59
|
+
|
|
60
|
+
--radius-sm: var(--compote-radius-sm);
|
|
61
|
+
--radius-md: var(--compote-radius-md);
|
|
62
|
+
--radius-lg: var(--compote-radius-lg);
|
|
63
|
+
|
|
64
|
+
--shadow-sm: var(--compote-shadow-sm);
|
|
65
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "compote-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
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,18 @@
|
|
|
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
|
+
"tailwind-merge": "^3.5.0",
|
|
69
|
+
"tailwind-variants": "^3.2.2"
|
|
70
|
+
}
|
|
63
71
|
}
|