@c15t/svelte 3.0.0-alpha.0

package/dist/primitives/preference-item/preference-item-root.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import {
+		getDataDisabled,
+		getPreferenceItemState,
+		PREFERENCE_ITEM_SLOTS,
+		togglePreferenceItemValue,
+	} from '@c15t/ui/primitives';
+	import { preferenceItemVariants } from '@c15t/ui/styles/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getThemeContext } from '../../context.svelte';
+	import { setPreferenceItemContext } from './context';
+
+	const componentId = $props.id();
+	const theme = getThemeContext();
+	const variants = preferenceItemVariants();
+
+	let {
+		children,
+		class: className,
+		disabled = false,
+		noStyle: localNoStyle,
+		open = $bindable(false),
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+		disabled?: boolean;
+		noStyle?: boolean;
+		open?: boolean;
+	} = $props();
+
+	const noStyle = $derived(localNoStyle ?? theme.noStyle ?? false);
+	const rootClassName = $derived(
+		noStyle ? className : variants.root({ class: className })
+	);
+	const dataState = $derived(getPreferenceItemState(open));
+	const dataDisabled = $derived(getDataDisabled(disabled));
+	const contentId = `c15t-preference-item-content-${componentId}`;
+	const triggerId = `c15t-preference-item-trigger-${componentId}`;
+
+	const setOpen = function setOpen(nextOpen: boolean) {
+		open = nextOpen;
+	};
+
+	const toggle = function toggle() {
+		if (!disabled) {
+			setOpen(togglePreferenceItemValue(open));
+		}
+	};
+
+	setPreferenceItemContext({
+		get contentId() {
+			return contentId;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get noStyle() {
+			return noStyle;
+		},
+		get open() {
+			return open;
+		},
+		setOpen,
+		toggle,
+		get triggerId() {
+			return triggerId;
+		},
+	});
+</script>
+
+<div
+	class={rootClassName}
+	data-slot={PREFERENCE_ITEM_SLOTS.root}
+	data-state={dataState}
+	data-disabled={dataDisabled}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/primitives/preference-item/preference-item-root.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    noStyle?: boolean;
+    open?: boolean;
+};
+declare const PreferenceItemRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type PreferenceItemRoot = ReturnType<typeof PreferenceItemRoot>;
+export default PreferenceItemRoot;

package/dist/primitives/preference-item/preference-item-title.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { PREFERENCE_ITEM_SLOTS } from '@c15t/ui/primitives';
+	import { preferenceItemVariants } from '@c15t/ui/styles/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getPreferenceItemContext } from './context';
+
+	const context = getPreferenceItemContext();
+	const variants = preferenceItemVariants();
+
+	let {
+		children,
+		class: localClassName,
+		...restProps
+	}: HTMLAttributes<HTMLHeadingElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	const noStyle = $derived(context.noStyle);
+	const className = $derived.by(() =>
+		noStyle ? localClassName : variants.title({ class: localClassName })
+	);
+</script>
+
+<h3
+	class={className}
+	data-slot={PREFERENCE_ITEM_SLOTS.title}
+	{...restProps}
+>
+	{@render children?.()}
+</h3>

package/dist/primitives/preference-item/preference-item-title.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLHeadingElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const PreferenceItemTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type PreferenceItemTitle = ReturnType<typeof PreferenceItemTitle>;
+export default PreferenceItemTitle;

package/dist/primitives/preference-item/preference-item-trigger.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import {
+		getDataDisabled,
+		getPreferenceItemState,
+		PREFERENCE_ITEM_SLOTS,
+	} from '@c15t/ui/primitives';
+	import { preferenceItemVariants } from '@c15t/ui/styles/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getPreferenceItemContext } from './context';
+
+	const context = getPreferenceItemContext();
+	const variants = preferenceItemVariants();
+
+	let {
+		children,
+		class: localClassName,
+		onclick,
+		type = 'button',
+		...restProps
+	}: HTMLAttributes<HTMLButtonElement> & {
+		children?: Snippet;
+		class?: string;
+		type?: 'button' | 'submit' | 'reset';
+	} = $props();
+
+	const handleClick = function handleClick(
+		event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		context.toggle();
+		onclick?.(event);
+	};
+
+	const open = $derived(context.open);
+	const disabled = $derived(context.disabled);
+	const noStyle = $derived(context.noStyle);
+	const triggerId = $derived(context.triggerId);
+	const contentId = $derived(context.contentId);
+	const className = $derived.by(() =>
+		noStyle ? localClassName : variants.trigger({ class: localClassName })
+	);
+	const dataState = $derived(getPreferenceItemState(open));
+	const dataDisabled = $derived(getDataDisabled(disabled));
+</script>
+
+<button
+	{type}
+	id={triggerId}
+	aria-controls={contentId}
+	aria-disabled={disabled || undefined}
+	aria-expanded={open}
+	class={className}
+	data-slot={PREFERENCE_ITEM_SLOTS.trigger}
+	data-state={dataState}
+	data-disabled={dataDisabled}
+	{disabled}
+	{...restProps}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>

package/dist/primitives/preference-item/preference-item-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: Snippet;
+    class?: string;
+    type?: 'button' | 'submit' | 'reset';
+};
+declare const PreferenceItemTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type PreferenceItemTrigger = ReturnType<typeof PreferenceItemTrigger>;
+export default PreferenceItemTrigger;

package/dist/primitives/switch/context.d.ts

@@ -0,0 +1,7 @@
+export interface SwitchRootContextValue {
+    readonly checked: boolean;
+    readonly disabled: boolean;
+    toggle: () => void;
+}
+export declare const setSwitchRootContext: (value: SwitchRootContextValue) => void;
+export declare const getSwitchRootContext: () => SwitchRootContextValue;

package/dist/primitives/switch/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const SWITCH_ROOT_CONTEXT_KEY = Symbol('c15t-svelte-switch-root');
+export const setSwitchRootContext = function setSwitchRootContext(value) {
+    setContext(SWITCH_ROOT_CONTEXT_KEY, value);
+};
+export const getSwitchRootContext = function getSwitchRootContext() {
+    const context = getContext(SWITCH_ROOT_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Switch primitives must be used within Switch.Root');
+    }
+    return context;
+};

package/dist/primitives/switch/index.d.ts

@@ -0,0 +1,25 @@
+import Control from './switch-control.svelte';
+import HiddenInput from './switch-hidden-input.svelte';
+import Root from './switch-root.svelte';
+import Thumb from './switch-thumb.svelte';
+export declare const Switch: {
+    Control: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLSpanElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+    }, {}, "">;
+    HiddenInput: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLInputElement> & {
+        name?: string;
+        value?: string;
+    }, {}, "">;
+    Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLButtonElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        checked?: boolean;
+        disabled?: boolean;
+        type?: "button" | "submit" | "reset";
+    }, {}, "checked">;
+    Thumb: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLSpanElement> & {
+        class?: string;
+    }, {}, "">;
+};
+export { Control, HiddenInput, Root, Thumb };

package/dist/primitives/switch/index.js

@@ -0,0 +1,11 @@
+import Control from './switch-control.svelte';
+import HiddenInput from './switch-hidden-input.svelte';
+import Root from './switch-root.svelte';
+import Thumb from './switch-thumb.svelte';
+export const Switch = {
+    Control,
+    HiddenInput,
+    Root,
+    Thumb,
+};
+export { Control, HiddenInput, Root, Thumb };

package/dist/primitives/switch/switch-control.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<span
+	class={className}
+	data-slot="switch-track"
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/primitives/switch/switch-control.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const SwitchControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwitchControl = ReturnType<typeof SwitchControl>;
+export default SwitchControl;

package/dist/primitives/switch/switch-hidden-input.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getSwitchRootContext } from './context';
+
+	const root = getSwitchRootContext();
+
+	const checked = $derived(root.checked);
+	const disabled = $derived(root.disabled);
+
+	let {
+		name,
+		value = 'on',
+		...restProps
+	}: HTMLAttributes<HTMLInputElement> & {
+		name?: string;
+		value?: string;
+	} = $props();
+</script>
+
+<input
+	type="checkbox"
+	{name}
+	{value}
+	{checked}
+	{disabled}
+	tabindex={-1}
+	aria-hidden="true"
+	style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;"
+	{...restProps}
+/>

package/dist/primitives/switch/switch-hidden-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLInputElement> & {
+    name?: string;
+    value?: string;
+};
+declare const SwitchHiddenInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwitchHiddenInput = ReturnType<typeof SwitchHiddenInput>;
+export default SwitchHiddenInput;

package/dist/primitives/switch/switch-root.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import {
+		getDataDisabled,
+		getSwitchState,
+		toggleSwitchValue,
+	} from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { setSwitchRootContext } from './context';
+
+	let {
+		children,
+		class: className,
+		checked = $bindable(false),
+		disabled = false,
+		onclick,
+		onkeydown,
+		type = 'button',
+		...restProps
+	}: HTMLAttributes<HTMLButtonElement> & {
+		children?: Snippet;
+		class?: string;
+		checked?: boolean;
+		disabled?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+	} = $props();
+
+	const dataState = $derived(getSwitchState(checked));
+	const dataDisabled = $derived(getDataDisabled(disabled));
+
+	const setChecked = function setChecked(nextChecked: boolean) {
+		if (disabled) {
+			return;
+		}
+
+		checked = nextChecked;
+	};
+
+	const toggle = function toggle() {
+		setChecked(toggleSwitchValue(checked));
+	};
+
+	const handleClick = function handleClick(
+		event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		toggle();
+		onclick?.(event);
+	};
+
+	const handleKeyDown = function handleKeyDown(
+		event: KeyboardEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			toggle();
+		}
+		onkeydown?.(event);
+	};
+
+	setSwitchRootContext({
+		get checked() {
+			return checked;
+		},
+		get disabled() {
+			return disabled;
+		},
+		toggle,
+	});
+</script>
+
+<button
+	{type}
+	role="switch"
+	aria-checked={checked}
+	class={className}
+	data-slot="switch"
+	data-state={dataState}
+	data-disabled={dataDisabled}
+	{disabled}
+	{...restProps}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+>
+	{@render children?.()}
+</button>

package/dist/primitives/switch/switch-root.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: Snippet;
+    class?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+};
+declare const SwitchRoot: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type SwitchRoot = ReturnType<typeof SwitchRoot>;
+export default SwitchRoot;

package/dist/primitives/switch/switch-thumb.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & { class?: string } = $props();
+</script>
+
+<span
+	class={className}
+	data-slot="switch-thumb"
+	{...restProps}
+></span>

package/dist/primitives/switch/switch-thumb.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    class?: string;
+};
+declare const SwitchThumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwitchThumb = ReturnType<typeof SwitchThumb>;
+export default SwitchThumb;

package/dist/primitives/tabs/context.d.ts

@@ -0,0 +1,11 @@
+import type { TabsOrientation } from '@c15t/ui/primitives';
+export interface TabsRootContextValue {
+    readonly baseId: string;
+    readonly disabled: boolean;
+    readonly loop: boolean;
+    readonly orientation: TabsOrientation;
+    readonly value: string | null;
+    setValue: (value: string) => void;
+}
+export declare const setTabsRootContext: (value: TabsRootContextValue) => void;
+export declare const getTabsRootContext: () => TabsRootContextValue;

package/dist/primitives/tabs/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const TABS_ROOT_CONTEXT_KEY = Symbol('c15t-svelte-tabs-root');
+export const setTabsRootContext = function setTabsRootContext(value) {
+    setContext(TABS_ROOT_CONTEXT_KEY, value);
+};
+export const getTabsRootContext = function getTabsRootContext() {
+    const context = getContext(TABS_ROOT_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Tabs primitives must be used within Tabs.Root');
+    }
+    return context;
+};

package/dist/primitives/tabs/index.d.ts

@@ -0,0 +1,32 @@
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Root from './tabs-root.svelte';
+import Trigger from './tabs-trigger.svelte';
+export declare const Tabs: {
+    Content: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        forceMount?: boolean;
+        value: string;
+    }, {}, "">;
+    List: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        orientation?: "horizontal" | "vertical";
+    }, {}, "">;
+    Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        disabled?: boolean;
+        loop?: boolean;
+        orientation?: import("@c15t/ui/primitives").TabsOrientation;
+        value?: string | null;
+    }, {}, "value">;
+    Trigger: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLButtonElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        type?: "button" | "submit" | "reset";
+        value: string;
+    }, {}, "">;
+};
+export { Content, List, Root, Trigger };

package/dist/primitives/tabs/index.js

@@ -0,0 +1,11 @@
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Root from './tabs-root.svelte';
+import Trigger from './tabs-trigger.svelte';
+export const Tabs = {
+    Content,
+    List,
+    Root,
+    Trigger,
+};
+export { Content, List, Root, Trigger };

package/dist/primitives/tabs/tabs-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { getTabPanelState } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getTabsRootContext } from './context';
+
+	const root = getTabsRootContext();
+
+	let {
+		children,
+		class: className,
+		forceMount = false,
+		value,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+		forceMount?: boolean;
+		value: string;
+	} = $props();
+
+	const baseId = $derived(root.baseId);
+	const selectedValue = $derived(root.value);
+	const isSelected = $derived(selectedValue === value);
+	const dataState = $derived(getTabPanelState(isSelected));
+	const contentId = $derived(`${baseId}-content-${value}`);
+	const triggerId = $derived(`${baseId}-trigger-${value}`);
+</script>
+
+{#if forceMount || isSelected}
+	<div
+		id={contentId}
+		role="tabpanel"
+		tabindex={0}
+		hidden={!isSelected}
+		aria-labelledby={triggerId}
+		class={className}
+		data-slot="tabs-content"
+		data-state={dataState}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/primitives/tabs/tabs-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+    forceMount?: boolean;
+    value: string;
+};
+declare const TabsContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/primitives/tabs/tabs-list.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getDataDisabled } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getTabsRootContext } from './context';
+
+	const root = getTabsRootContext();
+
+	const disabled = $derived(root.disabled);
+	const rootOrientation = $derived(root.orientation);
+	const dataDisabled = $derived(getDataDisabled(disabled));
+
+	let {
+		children,
+		class: className,
+		orientation: orientationProp,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+		orientation?: 'horizontal' | 'vertical';
+	} = $props();
+
+	const orientation = $derived(orientationProp ?? rootOrientation);
+</script>
+
+<div
+	role="tablist"
+	aria-orientation={orientation}
+	class={className}
+	data-slot="tabs-list"
+	data-orientation={orientation}
+	data-disabled={dataDisabled}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/primitives/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+    orientation?: 'horizontal' | 'vertical';
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;