compote-ui 0.31.1 → 0.33.0

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Popover } from '@ark-ui/svelte/popover';
+	import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+	import type { ClassValue } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface Props extends PopoverTriggerBaseProps {
+		class?: ClassValue;
+		children: Snippet;
+	}
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Popover.Trigger class={className} {...restProps}>
+	{@render children()}
+</Popover.Trigger>

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

@@ -0,0 +1,10 @@
+import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends PopoverTriggerBaseProps {
+    class?: ClassValue;
+    children: Snippet;
+}
+declare const PopoverTrigger: import("svelte").Component<Props, {}, "">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

package/dist/components/scroll-area/scroll-area-content.svelte

@@ -10,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<ScrollArea.Content {...rest} class={cn('pe-3', className)}>
+<ScrollArea.Content {...rest} class={cn('py-3 ps-4 pe-6', className)}>
 	{@render children?.()}
 </ScrollArea.Content>

package/dist/components/toggle/toggle.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Toggle as ArkToggle } from '@ark-ui/svelte/toggle';
+	import type { ToggleProps } from './types';
+	import { toggle } from './toggle.variants';
+
+	let {
+		class: className,
+		children,
+		pressed = $bindable(),
+		size,
+		...rootProps
+	}: ToggleProps = $props();
+</script>
+
+<ArkToggle.Root {...rootProps} bind:pressed class={toggle({ size, class: className as never })}>
+	{@render children?.()}
+</ArkToggle.Root>

package/dist/components/toggle/toggle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToggleProps } from './types';
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

@@ -0,0 +1,21 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;

package/dist/components/toggle/toggle.variants.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+export const toggle = tv({
+    base: 'inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm [&_svg]:shrink-0',
+    variants: {
+        size: {
+            sm: 'h-7 min-w-7 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
+            md: 'h-8 min-w-8 gap-1.5 px-2 text-sm [&_svg]:size-4',
+            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5'
+        }
+    },
+    defaultVariants: { size: 'md' }
+});

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

@@ -0,0 +1,8 @@
+import type { ToggleRootProps } from '@ark-ui/svelte/toggle';
+import type { ClassValue } from 'svelte/elements';
+import type { ToggleSize } from './toggle.variants';
+export interface ToggleProps extends ToggleRootProps {
+    class?: ClassValue | null;
+    size?: ToggleSize;
+}
+export type { ToggleSize };

package/dist/components/toggle/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toggle-group/toggle-group-context.d.ts

@@ -0,0 +1,8 @@
+import type { ToggleSize } from '../toggle/toggle.variants';
+export declare const getToggleGroupContext: () => {
+    readonly size: ToggleSize;
+}, setToggleGroupContext: (context: {
+    readonly size: ToggleSize;
+}) => {
+    readonly size: ToggleSize;
+};

package/dist/components/toggle-group/toggle-group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getToggleGroupContext, setToggleGroupContext] = createContext();

package/dist/components/toggle-group/toggle-group-item.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
 	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 	import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
-	import { cn } from 'tailwind-variants';
 	import type { ClassValue } from 'svelte/elements';
+	import { toggle, type ToggleSize } from '../toggle/toggle.variants';
+	import { getToggleGroupContext } from './toggle-group-context';
 
 	interface Props extends ToggleGroupItemBaseProps {
 		class?: ClassValue | null;
+		size?: ToggleSize;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, size, ...rest }: Props = $props();
+	const groupContext = getToggleGroupContext();
+	const itemSize = $derived(size ?? groupContext.size);
 </script>
 
 <ToggleGroup.Item
 	{...rest}
-	class={cn(
-		'inline-flex h-8 min-w-8 items-center justify-center rounded-md text-sm text-ink-dim transition-colors select-none hover:bg-surface-2 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm',
-		className as never
-	)}
+	class={toggle({ size: itemSize, class: ['rounded-none', className] as never })}
 >
 	{@render children?.()}
 </ToggleGroup.Item>

package/dist/components/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { ToggleGroupItemBaseProps } from '@ark-ui/svelte/toggle-group';
 import type { ClassValue } from 'svelte/elements';
+import { type ToggleSize } from '../toggle/toggle.variants';
 interface Props extends ToggleGroupItemBaseProps {
     class?: ClassValue | null;
+    size?: ToggleSize;
 }
 declare const ToggleGroupItem: import("svelte").Component<Props, {}, "">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;

package/dist/components/toggle-group/toggle-group.svelte

@@ -2,19 +2,34 @@
 	import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 	import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
 	import { cn } from 'tailwind-variants';
+	import type { ToggleSize } from '../toggle/toggle.variants';
+	import { setToggleGroupContext } from './toggle-group-context';
 
 	interface Props extends ToggleGroupRootBaseProps {
 		class?: string;
+		size?: ToggleSize;
 	}
 
-	let { class: className, children, value = $bindable(), ...rootProps }: Props = $props();
+	let {
+		class: className,
+		children,
+		value = $bindable(),
+		size = 'md',
+		...rootProps
+	}: Props = $props();
+
+	setToggleGroupContext({
+		get size() {
+			return size;
+		}
+	});
 </script>
 
 <ToggleGroup.Root
 	{...rootProps}
 	bind:value
 	class={cn(
-		'inline-flex gap-px rounded-lg border border-border p-0.5 data-[orientation=vertical]:flex-col',
+		'inline-flex w-fit rounded border border-border data-[orientation=vertical]:flex-col [&>:not([hidden])~:not([hidden])]:border-border data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-s data-[orientation=horizontal]:[&>:not([hidden])~:not([hidden])]:border-e-0 data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-t data-[orientation=vertical]:[&>:not([hidden])~:not([hidden])]:border-b-0',
 		className
 	)}
 >

package/dist/components/toggle-group/toggle-group.svelte.d.ts

@@ -1,7 +1,9 @@
 import { ToggleGroup } from '@ark-ui/svelte/toggle-group';
 import type { ToggleGroupRootBaseProps } from '@ark-ui/svelte/toggle-group';
+import type { ToggleSize } from '../toggle/toggle.variants';
 interface Props extends ToggleGroupRootBaseProps {
     class?: string;
+    size?: ToggleSize;
 }
 declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

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

@@ -1,14 +1,12 @@
 <script lang="ts">
 	import { Tooltip } from '@ark-ui/svelte/tooltip';
-	import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
-	import type { Snippet } from 'svelte';
+	import type { TooltipTriggerProps } from '@ark-ui/svelte/tooltip';
 	import { button, type ButtonSize, type ButtonVariant } from '../button/button.variants';
 
-	type Props = TooltipTriggerBaseProps & {
+	type Props = Omit<TooltipTriggerProps, 'class'> & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
 		class?: string;
-		children?: Snippet;
 	};
 
 	const {

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

@@ -1,11 +1,9 @@
-import type { TooltipTriggerBaseProps } from '@ark-ui/svelte/tooltip';
-import type { Snippet } from 'svelte';
+import type { TooltipTriggerProps } from '@ark-ui/svelte/tooltip';
 import { type ButtonSize, type ButtonVariant } from '../button/button.variants';
-type Props = TooltipTriggerBaseProps & {
+type Props = Omit<TooltipTriggerProps, 'class'> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
     class?: string;
-    children?: Snippet;
 };
 declare const TooltipTrigger: import("svelte").Component<Props, {}, "">;
 type TooltipTrigger = ReturnType<typeof TooltipTrigger>;

package/dist/components/tree-view/tree-view.svelte

@@ -112,7 +112,7 @@
 				{#snippet render(tree)}
 					<Button
 						variant="outline"
-						size="icon"
+						size="icon-lg"
 						title="Collapse all"
 						onclick={() => tree().collapse()}
 					>

package/dist/icons/PhArrowSquareOut.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 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

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

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

package/dist/icons/index.d.ts

@@ -2,6 +2,7 @@ export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
 export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
 export { default as PhArrowLeft } from './PhArrowLeft.svelte';
 export { default as PhArrowRight } from './PhArrowRight.svelte';
+export { default as PhArrowSquareOut } from './PhArrowSquareOut.svelte';
 export { default as PhArrowsInSimple } from './PhArrowsInSimple.svelte';
 export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';

package/dist/icons/index.js

@@ -2,6 +2,7 @@ export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
 export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
 export { default as PhArrowLeft } from './PhArrowLeft.svelte';
 export { default as PhArrowRight } from './PhArrowRight.svelte';
+export { default as PhArrowSquareOut } from './PhArrowSquareOut.svelte';
 export { default as PhArrowsInSimple } from './PhArrowsInSimple.svelte';
 export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';

package/dist/index.d.ts

@@ -25,11 +25,14 @@ export type { ImageCropDialogProps } from './components/image-crop-dialog/types'
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';
+export * as Popover from './components/popover';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as Toggle } from './components/toggle/toggle.svelte';
+export type { ToggleProps, ToggleSize } from './components/toggle/types';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
 export * as Tooltip from './components/tooltip';

package/dist/index.js

@@ -19,10 +19,12 @@ export { default as ImageCropper } from './components/image-cropper/image-croppe
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
+export * as Popover from './components/popover';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as Toggle } from './components/toggle/toggle.svelte';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
 export * as Tooltip from './components/tooltip';

package/dist/theme.css

@@ -19,7 +19,7 @@
 	--compote-ink: light-dark(var(--gray-15), var(--gray-1));
 	--compote-ink-dim: light-dark(var(--gray-11), var(--gray-5));
 	--compote-ink-inverse: white;
-	--compote-surface-3: light-dark(var(--gray-5), var(--gray-11));
+	--compote-surface-3: light-dark(var(--gray-5), var(--gray-10));
 	--compote-surface-2: light-dark(var(--gray-4), var(--gray-12));
 	--compote-surface-1: light-dark(var(--gray-3), var(--gray-13));
 	--compote-surface-document: light-dark(var(--gray-2), var(--gray-14));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.31.1",
+	"version": "0.33.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -29,11 +29,21 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
+		"./data-table": {
+			"types": "./dist/components/data-table/index.d.ts",
+			"svelte": "./dist/components/data-table/index.js"
+		},
 		"./theme.css": "./dist/theme.css"
 	},
 	"peerDependencies": {
+		"@tanstack/svelte-table": "^9.0.0-alpha.41",
 		"svelte": "^5.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@tanstack/svelte-table": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
 		"@eslint/compat": "^2.0.5",
 		"@eslint/js": "^10.0.1",
@@ -43,6 +53,7 @@
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "7.0.0",
 		"@tailwindcss/vite": "^4.2.4",
+		"@tanstack/svelte-table": "9.0.0-alpha.41",
 		"@types/node": "^22",
 		"eslint": "^10.2.1",
 		"eslint-config-prettier": "^10.1.8",