compote-ui 0.2.0 → 0.5.0

package/dist/icons/PhUploadSimple.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0M93.66 77.66L120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhUploadSimple.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhUploadSimple: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhUploadSimple = ReturnType<typeof PhUploadSimple>;
+export default PhUploadSimple;

package/dist/icons/PhUser.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhUser.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhUser: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhUser = ReturnType<typeof PhUser>;
+export default PhUser;

package/dist/icons/PhVideoCamera.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+	><!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+	<path
+		fill="currentColor"
+		d="M251.77 73a8 8 0 0 0-8.21.39L208 97.05V72a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-25l35.56 23.71A8 8 0 0 0 248 184a8 8 0 0 0 8-8V80a8 8 0 0 0-4.23-7M192 184H32V72h160zm48-22.95l-32-21.33v-23.44L240 95Z"
+	/>
+</svg>

package/dist/icons/PhVideoCamera.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhVideoCamera: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhVideoCamera = ReturnType<typeof PhVideoCamera>;
+export default PhVideoCamera;

package/dist/index.d.ts

@@ -1,4 +1,17 @@
-export { default as Button } from './components/button/Button.svelte';
-export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
-export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
-export { default as Combobox } from './components/combobox/Combobox.svelte';
+export { default as Button } from './components/button/button.svelte';
+export { default as Carousel } from './components/carousel/carousel.svelte';
+export { default as Checkbox } from './components/checkbox/checkbox.svelte';
+export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
+export { default as Combobox } from './components/combobox/combobox.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
+export { default as Listbox } from './components/listbox/listbox.svelte';
+export { default as NumberInput } from './components/number-input/number-input.svelte';
+export { default as Select } from './components/select/select.svelte';
+export { default as Spliter } from './components/splitter/splitter.svelte';
+export { default as Switch } from './components/switch/switch.svelte';
+export * as Tabs from './components/tabs';
+export * as Menu from './components/menu';
+export * as Field from './components/field';
+export { default as TreeView } from './components/tree-view/tree-view.svelte';

package/dist/index.js

@@ -1,5 +1,18 @@
 // Reexport your entry components here
-export { default as Button } from './components/button/Button.svelte';
-export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
-export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
-export { default as Combobox } from './components/combobox/Combobox.svelte';
+export { default as Button } from './components/button/button.svelte';
+export { default as Carousel } from './components/carousel/carousel.svelte';
+export { default as Checkbox } from './components/checkbox/checkbox.svelte';
+export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
+export { default as Combobox } from './components/combobox/combobox.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
+export { default as Listbox } from './components/listbox/listbox.svelte';
+export { default as NumberInput } from './components/number-input/number-input.svelte';
+export { default as Select } from './components/select/select.svelte';
+export { default as Spliter } from './components/splitter/splitter.svelte';
+export { default as Switch } from './components/switch/switch.svelte';
+export * as Tabs from './components/tabs';
+export * as Menu from './components/menu';
+export * as Field from './components/field';
+export { default as TreeView } from './components/tree-view/tree-view.svelte';

package/dist/open-props/props.colors-oklch-hues.css

@@ -0,0 +1,14 @@
+:where(html) {
+	--hue-red: 25;
+	--hue-pink: 350;
+	--hue-purple: 310;
+	--hue-violet: 290;
+	--hue-indigo: 270;
+	--hue-blue: 240;
+	--hue-cyan: 210;
+	--hue-teal: 185;
+	--hue-green: 145;
+	--hue-lime: 125;
+	--hue-yellow: 100;
+	--hue-orange: 75;
+}

package/dist/open-props/props.colors-oklch.css

@@ -0,0 +1,19 @@
+:where(*) {
+	--color-0: oklch(99% 0.03 var(--color-hue, 0));
+	--color-1: oklch(95% 0.06 var(--color-hue, 0));
+	--color-2: oklch(88% 0.12 var(--color-hue, 0));
+	--color-3: oklch(80% 0.14 var(--color-hue, 0));
+	--color-4: oklch(74% 0.16 var(--color-hue, 0));
+	--color-5: oklch(68% 0.19 var(--color-hue, 0));
+	--color-6: oklch(63% 0.2 var(--color-hue, 0));
+	--color-7: oklch(58% 0.21 var(--color-hue, 0));
+	--color-8: oklch(53% 0.2 var(--color-hue, 0));
+	--color-9: oklch(49% 0.19 var(--color-hue, 0));
+	--color-10: oklch(42% 0.17 var(--color-hue, 0));
+	--color-11: oklch(35% 0.15 var(--color-hue, 0));
+	--color-12: oklch(27% 0.12 var(--color-hue, 0));
+	--color-13: oklch(20% 0.09 var(--color-hue, 0));
+	--color-14: oklch(14% 0.07 var(--color-hue, 0));
+	--color-15: oklch(11% 0.05 var(--color-hue, 0));
+	--color-bright: oklch(65% 0.3 var(--color-hue, 0));
+}

package/dist/open-props/props.gray-oklch.css

@@ -0,0 +1,18 @@
+:where(*) {
+	--gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
+	--gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
+}

package/dist/theme.css

@@ -1,6 +1,8 @@
-@import './props.colors-oklch-hues.css';
-@import './props.colors-oklch.css';
-@import './props.gray-oklch.css';
+@import './open-props/props.colors-oklch-hues.css';
+@import './open-props/props.colors-oklch.css';
+@import './open-props/props.gray-oklch.css';
+
+@source './components/**/*.svelte';
 
 :root {
 	--dim: 0.3;
@@ -20,7 +22,11 @@
 	--compote-surface-document: var(--gray-2);
 	--compote-well: var(--gray-1);
 
-	--compote-primary: var(--color-7);
+	--compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
+	--compote-danger: oklch(from var(--color-7) l c var(--hue-red));
+	--compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
+	--compote-success: oklch(from var(--color-7) l c var(--hue-green));
+	--compote-info: oklch(from var(--color-7) l c var(--hue-blue));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -33,7 +39,11 @@
 		--compote-surface-document: var(--gray-14);
 		--compote-well: var(--gray-15);
 
-		--compote-primary: var(--color-7);
+		--compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
+		--compote-danger: oklch(from var(--color-7) l c var(--hue-red));
+		--compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
+		--compote-success: oklch(from var(--color-7) l c var(--hue-green));
+		--compote-info: oklch(from var(--color-7) l c var(--hue-blue));
 	}
 }
 
@@ -47,6 +57,10 @@
 	--color-well: var(--compote-well);
 
 	--color-primary: var(--compote-primary);
+	--color-danger: var(--compote-danger);
+	--color-warning: var(--compote-warning);
+	--color-success: var(--compote-success);
+	--color-info: var(--compote-info);
 
 	--font-sans: var(--font-sans);
 	--font-mono: var(--font-mono);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.2.0",
+	"version": "0.5.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -51,8 +51,8 @@
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"publint": "^0.3.17",
-		"svelte": "^5.54.0",
-		"svelte-check": "^4.4.2",
+		"svelte": "^5.55.1",
+		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.57.0",
@@ -66,6 +66,7 @@
 	"dependencies": {
 		"@ark-ui/svelte": "^5.20.0",
 		"@fontsource-variable/wix-madefor-text": "^5.2.8",
+		"runed": "^0.37.1",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2"
 	}

package/dist/components/button/Button.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { tv } from 'tailwind-variants';
-
-	const button = tv({
-		base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
-		variants: {
-			variant: {
-				solid: 'text-primary-foreground bg-primary hover:bg-primary/90 active:bg-primary/80',
-				outline: 'border-border text-foreground hover:bg-muted border',
-				ghost: 'text-foreground hover:bg-muted'
-			},
-			size: {
-				sm: 'h-8 gap-1.5 px-2 text-sm',
-				md: 'h-9 gap-2 px-3 text-base',
-				lg: 'h-10 gap-2.5 px-4 text-lg'
-			}
-		},
-		defaultVariants: { variant: 'solid', size: 'md' }
-	});
-
-	type Props = Omit<HTMLButtonAttributes, 'class'> & {
-		variant?: 'solid' | 'outline' | 'ghost';
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-	};
-
-	let { variant, size, class: className, children, ...rest }: Props = $props();
-</script>
-
-<button class={button({ variant, size, class: className })} {...rest}>
-	{@render children?.()}
-</button>

package/dist/gray-oklch.min.css

@@ -1 +0,0 @@
-:where(*){--gray-0:oklch(99% var(--gray-chroma,none) var(--gray-hue,none));--gray-1:oklch(95% var(--gray-chroma,none) var(--gray-hue,none));--gray-2:oklch(88% var(--gray-chroma,none) var(--gray-hue,none));--gray-3:oklch(80% var(--gray-chroma,none) var(--gray-hue,none));--gray-4:oklch(74% var(--gray-chroma,none) var(--gray-hue,none));--gray-5:oklch(68% var(--gray-chroma,none) var(--gray-hue,none));--gray-6:oklch(63% var(--gray-chroma,none) var(--gray-hue,none));--gray-7:oklch(58% var(--gray-chroma,none) var(--gray-hue,none));--gray-8:oklch(53% var(--gray-chroma,none) var(--gray-hue,none));--gray-9:oklch(49% var(--gray-chroma,none) var(--gray-hue,none));--gray-10:oklch(43% var(--gray-chroma,none) var(--gray-hue,none));--gray-11:oklch(37% var(--gray-chroma,none) var(--gray-hue,none));--gray-12:oklch(31% var(--gray-chroma,none) var(--gray-hue,none));--gray-13:oklch(25% var(--gray-chroma,none) var(--gray-hue,none));--gray-14:oklch(18% var(--gray-chroma,none) var(--gray-hue,none));--gray-15:oklch(10% var(--gray-chroma,none) var(--gray-hue,none))}

package/dist/green-hsl.min.css

@@ -1 +0,0 @@
-:where(html){--green-0-hsl:131 67% 95%;--green-1-hsl:128 76% 90%;--green-2-hsl:128 71% 82%;--green-3-hsl:129 68% 73%;--green-4-hsl:130 61% 64%;--green-5-hsl:130 57% 56%;--green-6-hsl:131 50% 50%;--green-7-hsl:131 53% 46%;--green-8-hsl:131 54% 40%;--green-9-hsl:132 52% 35%;--green-10-hsl:132 52% 29%;--green-11-hsl:132 53% 22%;--green-12-hsl:131 53% 16%}

package/dist/props.colors-oklch-hues.css

@@ -1,14 +0,0 @@
-:where(html) {
-  --hue-red: 25;
-  --hue-pink: 350;
-  --hue-purple: 310;
-  --hue-violet: 290;
-  --hue-indigo: 270;
-  --hue-blue: 240;
-  --hue-cyan: 210;
-  --hue-teal: 185;
-  --hue-green: 145;
-  --hue-lime: 125;
-  --hue-yellow: 100;
-  --hue-orange: 75;
-}

package/dist/props.colors-oklch.css

@@ -1,19 +0,0 @@
-:where(*) {
-  --color-0: oklch(99% .03 var(--color-hue, 0));
-  --color-1: oklch(95% .06 var(--color-hue, 0));
-  --color-2: oklch(88% .12 var(--color-hue, 0));
-  --color-3: oklch(80% .14 var(--color-hue, 0));
-  --color-4: oklch(74% .16 var(--color-hue, 0));
-  --color-5: oklch(68% .19 var(--color-hue, 0));
-  --color-6: oklch(63% .20 var(--color-hue, 0));
-  --color-7: oklch(58% .21 var(--color-hue, 0));
-  --color-8: oklch(53% .20 var(--color-hue, 0));
-  --color-9: oklch(49% .19 var(--color-hue, 0));
-  --color-10: oklch(42% .17 var(--color-hue, 0));
-  --color-11: oklch(35% .15 var(--color-hue, 0));
-  --color-12: oklch(27% .12 var(--color-hue, 0));
-  --color-13: oklch(20% .09 var(--color-hue, 0));
-  --color-14: oklch(14% .07 var(--color-hue, 0));
-  --color-15: oklch(11% .05 var(--color-hue, 0));
-  --color-bright: oklch(65% .3 var(--color-hue, 0));
-}

package/dist/props.gray-oklch.css

@@ -1,18 +0,0 @@
-:where(*) {
-  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
-  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
-}