compote-ui 0.0.2 → 0.0.4

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.
Files changed (8) hide show
  1. package/README.md +52 -38
  2. package/dist/components/button/Button.svelte +4 -4
  3. package/dist/components/checkbox/Checkbox.svelte +10 -28
  4. package/dist/components/checkbox/checkbox-props.d.ts +0 -1
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +2 -1
  7. package/dist/theme.css +81 -57
  8. package/package.json +2 -1
package/README.md CHANGED
@@ -1,65 +1,79 @@
1
- # Svelte library
1
+ # Compote UI
2
2
 
3
- Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
3
+ An opinionated UI component library for Svelte, built on top of [Ark UI](https://ark-ui.com) with additional components and features not available in the core Ark UI library.
4
4
 
5
- Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
5
+ ## About
6
6
 
7
- ## Creating a project
7
+ Compote UI provides a set of accessible, customizable, and well-styled UI components for Svelte applications. While Ark UI offers excellent headless components with robust accessibility, Compote UI goes a step further by:
8
8
 
9
- If you're seeing this, you've probably already done this step. Congrats!
9
+ - **Opinionated defaults** with sensible styling out of the box
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
10
14
 
11
- ```sh
12
- # create a new project in the current directory
13
- npx sv create
15
+ ## Installation
14
16
 
15
- # create a new project in my-app
16
- npx sv create my-app
17
+ ```bash
18
+ npm install compote-ui
17
19
  ```
18
20
 
19
- To recreate this project with the same configuration:
21
+ Or with other package managers:
20
22
 
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
23
+ ```bash
24
+ pnpm add compote-ui
25
+ yarn add compote-ui
26
+ bun add compote-ui
24
27
  ```
25
28
 
26
- ## Developing
29
+ ## Peer Dependencies
27
30
 
28
- Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
31
+ Compote UI requires Svelte 5 or later:
29
32
 
30
- ```sh
31
- npm run dev
33
+ ## Quick Start
32
34
 
33
- # or start the server and open the app in a new browser tab
34
- npm run dev -- --open
35
+ ```svelte
36
+ <script>
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>
35
44
  ```
36
45
 
37
- Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
46
+ ## Features
38
47
 
39
- ## Building
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
40
54
 
41
- To build your library:
55
+ ## Components
42
56
 
43
- ```sh
44
- npm pack
45
- ```
57
+ Compote UI includes all Ark UI components plus additional components:
46
58
 
47
- To create a production version of your showcase app:
59
+ ### From Ark UI
48
60
 
49
- ```sh
50
- npm run build
51
- ```
61
+ - Accordion, Avatar, Checkbox, Collapsible, Combobox, Dialog, Dropdown Menu, Hover Card, Menu, Pagination, Popover, Progress, Radio Group, Select, Slider, Switch, Tabs, Toast, Toggle, Tooltip, and more...
52
62
 
53
- You can preview the production build with `npm run preview`.
63
+ ### Additional Components
54
64
 
55
- > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
65
+ - _Additional components that extend Ark UI functionality_
66
+ - _Custom styled variants with opinionated defaults_
56
67
 
57
- ## Publishing
68
+ ## Theming
58
69
 
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/)).
70
+ Compote UI uses Tailwind CSS, making it easy to customize the appearance to match your brand:
60
71
 
61
- To publish your library to [npm](https://www.npmjs.com):
72
+ ## License
62
73
 
63
- ```sh
64
- npm publish
65
- ```
74
+ MIT
75
+
76
+ ## Links
77
+
78
+ - [GitHub](https://github.com/@tihomir971/compote-ui)
79
+ - [Issues](https://github.com/@tihomir971/compote-ui/issues)
package/dist/components/button/Button.svelte CHANGED
@@ -3,12 +3,12 @@
3
3
  import { tv } from 'tailwind-variants';
4
4
 
5
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',
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
7
  variants: {
8
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'
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
12
  },
13
13
  size: {
14
14
  sm: 'h-8 px-3 text-sm rounded-sm gap-1.5',
package/dist/components/checkbox/Checkbox.svelte CHANGED
@@ -1,42 +1,24 @@
1
1
  <script lang="ts">
2
2
  import { Checkbox } from '@ark-ui/svelte/checkbox';
3
- import { tv } from 'tailwind-variants';
4
3
  import PhCheck from '~icons/ph/check-bold';
5
4
  import type { CheckboxProps as Props } from './checkbox-props.js';
6
5
 
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 }));
6
+ let { label, children, ...rest }: Props = $props();
28
7
  </script>
29
8
 
30
- <Checkbox.Root class={styles.root()} {...rest}>
31
- <Checkbox.Control class={styles.control()}>
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">
32
11
  <Checkbox.Indicator>
33
- <PhCheck class={styles.icon()} />
12
+ <PhCheck class="size-3.5 text-primary-foreground" />
34
13
  </Checkbox.Indicator>
35
14
  </Checkbox.Control>
36
15
  {#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>
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>
40
22
  {/if}
41
23
  <Checkbox.HiddenInput />
42
24
  </Checkbox.Root>
package/dist/components/checkbox/checkbox-props.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { CheckboxRootBaseProps } from '@ark-ui/svelte/checkbox';
2
2
  import type { Snippet } from 'svelte';
3
3
  export interface CheckboxProps extends Omit<CheckboxRootBaseProps, 'children' | 'asChild' | 'ref'> {
4
- size?: 'sm' | 'md' | 'lg';
5
4
  label?: string;
6
5
  children?: Snippet;
7
6
  }
package/dist/index.d.ts CHANGED
@@ -0,0 +1,2 @@
1
+ export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
2
+ export { default as Button } from './components/button/Button.svelte';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
- "use strict";
2
1
  // Reexport your entry components here
2
+ export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
3
+ export { default as Button } from './components/button/Button.svelte';
package/dist/theme.css CHANGED
@@ -1,65 +1,89 @@
1
- @layer compote.tokens {
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) {
2
28
  :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);
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
+ }
16
50
 
17
- /* Radius */
18
- --compote-radius-sm: 0.25rem;
19
- --compote-radius-md: 0.375rem;
20
- --compote-radius-lg: 0.5rem;
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);
21
71
 
22
- /* Font sizes */
23
- --compote-font-size-sm: 0.875rem;
24
- --compote-font-size-md: 1rem;
25
- --compote-font-size-lg: 1.125rem;
72
+ --font-sans: var(--font-sans);
73
+ --font-mono: var(--font-mono);
74
+ --font-serif: var(--font-serif);
26
75
 
27
- /* Spacing */
28
- --compote-spacing-sm: 0.5rem;
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
+ }
29
81
 
30
- /* Shadows */
31
- --compote-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
82
+ @layer base {
83
+ * {
84
+ @apply border-border outline-ring/50;
32
85
  }
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);
86
+ body {
87
+ @apply bg-background text-foreground;
42
88
  }
43
89
  }
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.2",
3
+ "version": "0.0.4",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run prepack",
@@ -65,6 +65,7 @@
65
65
  ],
66
66
  "dependencies": {
67
67
  "@ark-ui/svelte": "^5.20.0",
68
+ "@fontsource-variable/wix-madefor-text": "^5.2.8",
68
69
  "tailwind-merge": "^3.5.0",
69
70
  "tailwind-variants": "^3.2.2"
70
71
  }