compote-ui 0.28.0 → 0.30.0

package/dist/components/button/button.variants.d.ts

@@ -11,7 +11,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         lg: string;
         icon: string;
-        "icon-xs": string;
+        'icon-xs': string;
         'icon-sm': string;
         'icon-lg': string;
     };
@@ -27,7 +27,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         lg: string;
         icon: string;
-        "icon-xs": string;
+        'icon-xs': string;
         'icon-sm': string;
         'icon-lg': string;
     };
@@ -43,7 +43,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         default: string;
         lg: string;
         icon: string;
-        "icon-xs": string;
+        'icon-xs': string;
         'icon-sm': string;
         'icon-lg': string;
     };

package/dist/components/button/button.variants.js

@@ -12,10 +12,10 @@ export const button = tv({
             sm: 'h-8 gap-1.5 px-2',
             default: 'h-9 gap-2 px-3',
             lg: 'h-10 gap-2.5 px-4',
-            icon: 'size-9',
-            "icon-xs": "size-6",
-            'icon-sm': 'size-8',
-            'icon-lg': 'size-10'
+            icon: 'size-8',
+            'icon-xs': 'size-6',
+            'icon-sm': 'size-7',
+            'icon-lg': 'size-9'
         }
     },
     defaultVariants: { variant: 'default', size: 'default' }

package/dist/components/dialog/dialog-close-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
+	import { PhX } from '../../icons';
+
+	interface Props extends DialogCloseTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.CloseTrigger
+	{...rest}
+	class={className ??
+		'absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50'}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhX class="size-4" />
+		<span class="sr-only">Close</span>
+	{/if}
+</Dialog.CloseTrigger>

package/dist/components/dialog/dialog-close-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
+interface Props extends DialogCloseTriggerBaseProps {
+    class?: string;
+}
+declare const DialogCloseTrigger: import("svelte").Component<Props, {}, "">;
+type DialogCloseTrigger = ReturnType<typeof DialogCloseTrigger>;
+export default DialogCloseTrigger;

package/dist/components/dialog/dialog-description.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogDescriptionBaseProps } from '@ark-ui/svelte/dialog';
+
+	interface Props extends DialogDescriptionBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
+	{@render children?.()}
+</Dialog.Description>

package/dist/components/dialog/dialog-description.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogDescriptionBaseProps } from '@ark-ui/svelte/dialog';
+interface Props extends DialogDescriptionBaseProps {
+    class?: string;
+}
+declare const DialogDescription: import("svelte").Component<Props, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/components/dialog/dialog-footer.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: className, children }: Props = $props();
+</script>
+
+<div class={className ?? 'mt-4 flex justify-end gap-3'}>
+	{@render children()}
+</div>

package/dist/components/dialog/dialog-footer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children: Snippet;
+}
+declare const DialogFooter: import("svelte").Component<Props, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/components/dialog/dialog-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogTitleBaseProps } from '@ark-ui/svelte/dialog';
+
+	interface Props extends DialogTitleBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.Title {...rest} class={className ?? 'text-lg font-semibold'}>
+	{@render children?.()}
+</Dialog.Title>

package/dist/components/dialog/dialog-title.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogTitleBaseProps } from '@ark-ui/svelte/dialog';
+interface Props extends DialogTitleBaseProps {
+    class?: string;
+}
+declare const DialogTitle: import("svelte").Component<Props, {}, "">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/dialog/dialog-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import type { DialogTriggerBaseProps } from '@ark-ui/svelte/dialog';
+
+	interface Props extends DialogTriggerBaseProps {
+		class?: string;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<Dialog.Trigger {...rest} class={className}>
+	{@render children?.()}
+</Dialog.Trigger>

package/dist/components/dialog/dialog-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogTriggerBaseProps } from '@ark-ui/svelte/dialog';
+interface Props extends DialogTriggerBaseProps {
+    class?: string;
+}
+declare const DialogTrigger: import("svelte").Component<Props, {}, "">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

package/dist/components/dialog/dialog.svelte

@@ -2,15 +2,11 @@
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
-	import { PhX } from '../../icons';
 	import type { DialogProps } from './dialog.types';
 
 	let {
 		open = $bindable(),
-		title,
-		description,
 		children,
-		footer,
 		contentClass,
 		lazyMount = true,
 		unmountOnExit = true,
@@ -30,29 +26,7 @@
 					contentClass
 				)}
 			>
-				<Dialog.Title class="text-lg font-semibold">{title}</Dialog.Title>
-				{#if description}
-					<Dialog.Description class="mt-1 text-sm text-ink-dim">
-						{description}
-					</Dialog.Description>
-				{/if}
-
-				<div class="mt-4">
-					{@render children()}
-				</div>
-
-				{#if footer}
-					<div class="mt-4 flex justify-end gap-3">
-						{@render footer()}
-					</div>
-				{/if}
-
-				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
-				>
-					<PhX class="size-4" />
-					<span class="sr-only">Close</span>
-				</Dialog.CloseTrigger>
+				{@render children()}
 			</Dialog.Content>
 		</Dialog.Positioner>
 	</Portal>

package/dist/components/dialog/dialog.types.d.ts

@@ -4,10 +4,7 @@ export type { DialogRootBaseProps };
 type DialogSharedProps = Pick<DialogRootBaseProps, 'closeOnEscape' | 'closeOnInteractOutside' | 'onOpenChange' | 'lazyMount' | 'unmountOnExit'>;
 export interface DialogProps extends DialogSharedProps {
     open: boolean;
-    title: string;
-    description?: string;
     children: Snippet;
-    footer?: Snippet;
     contentClass?: string;
     initialFocusEl?: DialogRootBaseProps['initialFocusEl'];
 }

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './dialog.svelte';
+export { default as Title } from './dialog-title.svelte';
+export { default as Description } from './dialog-description.svelte';
+export { default as Trigger } from './dialog-trigger.svelte';
+export { default as CloseTrigger } from './dialog-close-trigger.svelte';
+export { default as Footer } from './dialog-footer.svelte';
+export type { DialogProps, AlertDialogProps, DialogRootBaseProps } from './dialog.types';

package/dist/components/dialog/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './dialog.svelte';
+export { default as Title } from './dialog-title.svelte';
+export { default as Description } from './dialog-description.svelte';
+export { default as Trigger } from './dialog-trigger.svelte';
+export { default as CloseTrigger } from './dialog-close-trigger.svelte';
+export { default as Footer } from './dialog-footer.svelte';

package/dist/components/drawer/drawer-close-trigger.svelte

@@ -11,7 +11,7 @@
 
 <Drawer.CloseTrigger
 	{...rest}
-	onclick={()=>console.log("Click:")}
+	onclick={() => console.log('Click:')}
 	class={className ??
 		'absolute top-12 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-dim hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-[-1px]'}
 >

package/dist/components/select/select.svelte

@@ -13,6 +13,7 @@
 		label,
 		placeholder,
 		layout = 'vertical',
+		size = 'default',
 		name,
 		...restProps
 	}: SelectProps<T> = $props();
@@ -45,7 +46,10 @@
 	{/if}
 	<Select.Control>
 		<Select.Trigger
-			class="flex h-9 w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+			class={cn(
+				'flex w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger',
+				size === 'sm' ? 'h-8' : 'h-9'
+			)}
 		>
 			<div class="flex items-center gap-2">
 				<Select.ValueText

package/dist/components/select/types.d.ts

@@ -6,4 +6,5 @@ export interface SelectProps<T extends ListItem> extends Omit<SelectRootBaseProp
     label?: string;
     placeholder?: string;
     layout?: 'vertical' | 'horizontal';
+    size?: 'default' | 'sm';
 }

package/dist/index.d.ts

@@ -11,9 +11,9 @@ export * as Carousel from './components/carousel';
 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 * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
-export type { DialogProps, AlertDialogProps } from './components/dialog/dialog.types';
+export type { AlertDialogProps } from './components/dialog/dialog.types';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';

package/dist/index.js

@@ -10,7 +10,7 @@ export * as Carousel from './components/carousel';
 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 * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "compote-ui",
-	"version": "0.28.0",
+	"version": "0.30.0",
 	"license": "MIT",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --open",
 		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
@@ -50,13 +50,13 @@
 		"globals": "^17.5.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.4.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
+		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.17",
 		"svelte": "^5.55.4",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.4",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.58.2",
+		"typescript-eslint": "^8.59.1",
 		"unplugin-icons": "^23.0.1",
 		"vite": "^8.0.10"
 	},