@dryui/ui 0.3.0 → 0.4.1

package/dist/tags-input/tags-input-tag-delete-button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getTagsInputCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		index: number;
+		value?: string;
+	}
+
+	let { index, value = '', onclick, ...rest }: Props = $props();
+
+	const ctx = getTagsInputCtx();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) return;
+		ctx.removeTag(index);
+		if (onclick) {
+			(onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
+		}
+	}
+</script>
+
+<CloseButtonBase
+	aria-label="Remove tag: {value}"
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={handleClick}
+/>

package/dist/tags-input/tags-input-tag-delete-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    index: number;
+    value?: string;
+}
+declare const TagsInputTagDeleteButton: import("svelte").Component<Props, {}, "">;
+type TagsInputTagDeleteButton = ReturnType<typeof TagsInputTagDeleteButton>;
+export default TagsInputTagDeleteButton;

package/dist/tags-input/tags-input-tag.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	index: number;
-	value: string;
-	children?: Snippet;
+    index: number;
+    value: string;
+    children?: Snippet;
 }
-declare const TagsInputTag: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputTag: import("svelte").Component<Props, {}, "">;
 type TagsInputTag = ReturnType<typeof TagsInputTag>;
 export default TagsInputTag;

package/dist/text/text.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	as?: 'p' | 'span' | 'div';
-	color?: 'default' | 'muted' | 'secondary';
-	size?: 'xs' | 'sm' | 'md' | 'lg';
-	font?: 'sans' | 'mono';
-	weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-	variant?: 'default' | 'label';
-	children: Snippet;
+    as?: 'p' | 'span' | 'div';
+    color?: 'default' | 'muted' | 'secondary';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    font?: 'sans' | 'mono';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    variant?: 'default' | 'label';
+    children: Snippet;
 }
-declare const Text: import('svelte').Component<Props, {}, ''>;
+declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/textarea/textarea.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 interface Props extends HTMLTextareaAttributes {
-	value?: string;
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
 }
-declare const Textarea: import('svelte').Component<Props, {}, 'value'>;
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/time-input/time-input.svelte.d.ts

@@ -1,4 +1,11 @@
-import type { TimeInputProps } from './index.js';
-declare const TimeInput: import('svelte').Component<TimeInputProps, {}, 'value'>;
+interface Props {
+    value?: string;
+    disabled?: boolean;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    class?: string;
+}
+declare const TimeInput: import("svelte").Component<Props, {}, "value">;
 type TimeInput = ReturnType<typeof TimeInput>;
 export default TimeInput;

package/dist/timeline/timeline-content.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TimelineContent: import('svelte').Component<Props, {}, ''>;
+declare const TimelineContent: import("svelte").Component<Props, {}, "">;
 type TimelineContent = ReturnType<typeof TimelineContent>;
 export default TimelineContent;

package/dist/timeline/timeline-description.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLParagraphElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TimelineDescription: import('svelte').Component<Props, {}, ''>;
+declare const TimelineDescription: import("svelte").Component<Props, {}, "">;
 type TimelineDescription = ReturnType<typeof TimelineDescription>;
 export default TimelineDescription;

package/dist/timeline/timeline-icon.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children?: Snippet;
+    children?: Snippet;
 }
-declare const TimelineIcon: import('svelte').Component<Props, {}, ''>;
+declare const TimelineIcon: import("svelte").Component<Props, {}, "">;
 type TimelineIcon = ReturnType<typeof TimelineIcon>;
 export default TimelineIcon;

package/dist/timeline/timeline-item.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TimelineItem: import('svelte').Component<Props, {}, ''>;
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
 type TimelineItem = ReturnType<typeof TimelineItem>;
 export default TimelineItem;

package/dist/timeline/timeline-root.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	orientation?: 'vertical' | 'horizontal';
-	children: Snippet;
+    orientation?: 'vertical' | 'horizontal';
+    children: Snippet;
 }
-declare const TimelineRoot: import('svelte').Component<Props, {}, ''>;
+declare const TimelineRoot: import("svelte").Component<Props, {}, "">;
 type TimelineRoot = ReturnType<typeof TimelineRoot>;
 export default TimelineRoot;

package/dist/timeline/timeline-time.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTimeElement> {
-	datetime?: string;
-	children: Snippet;
+    datetime?: string;
+    children: Snippet;
 }
-declare const TimelineTime: import('svelte').Component<Props, {}, ''>;
+declare const TimelineTime: import("svelte").Component<Props, {}, "">;
 type TimelineTime = ReturnType<typeof TimelineTime>;
 export default TimelineTime;

package/dist/timeline/timeline-title.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
-	level?: 1 | 2 | 3 | 4 | 5 | 6;
-	children: Snippet;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    children: Snippet;
 }
-declare const TimelineTitle: import('svelte').Component<Props, {}, ''>;
+declare const TimelineTitle: import("svelte").Component<Props, {}, "">;
 type TimelineTitle = ReturnType<typeof TimelineTitle>;
 export default TimelineTitle;

package/dist/toast/index.d.ts

@@ -4,8 +4,8 @@ import ToastProvider from './toast-provider.svelte';
 import ToastRoot from './toast-root.svelte';
 import ToastTitle from './toast-title.svelte';
 import ToastDescription from './toast-description.svelte';
-import ToastClose from './toast-close.svelte';
-import ToastAction from './toast-action.svelte';
+import ToastClose from './toast-close-button.svelte';
+import ToastAction from './toast-action-button.svelte';
 export declare const Toast: {
     Provider: typeof ToastProvider;
     Root: typeof ToastRoot;

package/dist/toast/index.js

@@ -3,8 +3,8 @@ import ToastProvider from './toast-provider.svelte';
 import ToastRoot from './toast-root.svelte';
 import ToastTitle from './toast-title.svelte';
 import ToastDescription from './toast-description.svelte';
-import ToastClose from './toast-close.svelte';
-import ToastAction from './toast-action.svelte';
+import ToastClose from './toast-close-button.svelte';
+import ToastAction from './toast-action-button.svelte';
 export const Toast = {
     Provider: ToastProvider,
     Root: ToastRoot,

package/dist/toast/toast-action-button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		children: Snippet;
+		onclick?: () => void;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+<Button variant="trigger" size="sm" type="button" data-toast-action {...rest}>
+	{@render children()}
+</Button>

package/dist/toast/toast-action-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLButtonElement> {
+    children: Snippet;
+    onclick?: () => void;
+}
+declare const ToastActionButton: import("svelte").Component<Props, {}, "">;
+type ToastActionButton = ReturnType<typeof ToastActionButton>;
+export default ToastActionButton;

package/dist/toast/toast-close-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { toastStore } from '@dryui/primitives';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getToastCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getToastCtx();
+</script>
+
+<CloseButtonBase
+	aria-label="Close notification"
+	{...rest}
+	onclick={() => toastStore.remove(ctx.id)}
+>
+	{@render children()}
+</CloseButtonBase>

package/dist/toast/toast-close-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children: Snippet;
+}
+declare const ToastCloseButton: import("svelte").Component<Props, {}, "">;
+type ToastCloseButton = ReturnType<typeof ToastCloseButton>;
+export default ToastCloseButton;

package/dist/toast/toast-description.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLParagraphElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ToastDescription: import('svelte').Component<Props, {}, ''>;
+declare const ToastDescription: import("svelte").Component<Props, {}, "">;
 type ToastDescription = ReturnType<typeof ToastDescription>;
 export default ToastDescription;

package/dist/toast/toast-provider.svelte

@@ -5,7 +5,7 @@
 	import ToastRoot from './toast-root.svelte';
 	import ToastTitle from './toast-title.svelte';
 	import ToastDescription from './toast-description.svelte';
-	import ToastClose from './toast-close.svelte';
+	import ToastClose from './toast-close-button.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		position?:

package/dist/toast/toast-provider.svelte.d.ts

@@ -1,15 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	position?:
-		| 'top-right'
-		| 'top-left'
-		| 'bottom-right'
-		| 'bottom-left'
-		| 'top-center'
-		| 'bottom-center';
-	children?: Snippet;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    children?: Snippet;
 }
-declare const ToastProvider: import('svelte').Component<Props, {}, ''>;
+declare const ToastProvider: import("svelte").Component<Props, {}, "">;
 type ToastProvider = ReturnType<typeof ToastProvider>;
 export default ToastProvider;

package/dist/toast/toast-root.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	id: string;
-	variant?: 'info' | 'success' | 'warning' | 'error';
-	persistent?: boolean;
-	progress?: number;
-	children: Snippet;
+    id: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    persistent?: boolean;
+    progress?: number;
+    children: Snippet;
 }
-declare const ToastRoot: import('svelte').Component<Props, {}, ''>;
+declare const ToastRoot: import("svelte").Component<Props, {}, "">;
 type ToastRoot = ReturnType<typeof ToastRoot>;
 export default ToastRoot;

package/dist/toast/toast-title.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLParagraphElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ToastTitle: import('svelte').Component<Props, {}, ''>;
+declare const ToastTitle: import("svelte").Component<Props, {}, "">;
 type ToastTitle = ReturnType<typeof ToastTitle>;
 export default ToastTitle;

package/dist/toggle/index.d.ts

@@ -4,4 +4,4 @@ export interface ToggleProps extends PrimitiveToggleProps {
     size?: 'sm' | 'md' | 'lg';
     icon?: Snippet;
 }
-export { default as Toggle } from './toggle.svelte';
+export { default as Toggle } from './toggle-button.svelte';

package/dist/toggle/index.js

@@ -1 +1 @@
-export { default as Toggle } from './toggle.svelte';
+export { default as Toggle } from './toggle-button.svelte';

package/dist/toggle/toggle-button.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getFormControlCtx } from '@dryui/primitives';
+
+	interface Props extends HTMLButtonAttributes {
+		pressed?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		children?: Snippet;
+		icon?: Snippet;
+		class?: ClassValue;
+	}
+
+	type ToggleClickEvent = Parameters<NonNullable<HTMLButtonAttributes['onclick']>>[0];
+
+	let {
+		pressed = $bindable(false),
+		size = 'md',
+		disabled,
+		class: className,
+		children,
+		icon,
+		onclick,
+		...rest
+	}: Props = $props();
+
+	const ctx = getFormControlCtx();
+	const isDisabled = $derived(disabled || ctx?.disabled || false);
+
+	function handleClick(event: ToggleClickEvent) {
+		onclick?.(event);
+
+		if (event.defaultPrevented || isDisabled) {
+			return;
+		}
+
+		pressed = !pressed;
+	}
+</script>
+
+<span
+	class={['root', className]}
+	data-size={size}
+	data-state={pressed ? 'on' : 'off'}
+	data-disabled={isDisabled || undefined}
+>
+	<Button
+		variant="bare"
+		type="button"
+		role="switch"
+		aria-checked={pressed}
+		id={ctx?.id}
+		disabled={isDisabled}
+		aria-describedby={ctx?.describedBy}
+		aria-invalid={ctx?.hasError || undefined}
+		aria-errormessage={ctx?.errorMessageId}
+		onclick={handleClick}
+		{...rest}
+	>
+		<span class="thumb">
+			<svg viewBox="0 0 32 32" aria-hidden="true">
+				<circle
+					cx="16"
+					cy="16"
+					r="15"
+					fill="var(--dry-toggle-thumb-bg)"
+					stroke="var(--_thumb-stroke)"
+					stroke-width="2"
+				/>
+			</svg>
+			{#if icon}
+				<span class="thumb-icon">
+					{@render icon()}
+				</span>
+			{/if}
+		</span>
+	</Button>
+	{#if children}
+		<span class="label" data-disabled={(isDisabled && !pressed) || undefined}>
+			{@render children()}
+		</span>
+	{/if}
+</span>
+
+<style>
+	.root {
+		display: inline-grid;
+		grid-template-columns: var(--_track-w) max-content;
+		align-items: center;
+		gap: var(--_gap);
+		padding-inline-end: var(--_gap);
+		--dry-btn-bg: var(--dry-toggle-track-bg, var(--dry-color-fill-weak));
+		--dry-btn-border: var(--dry-toggle-track-stroke, var(--dry-color-stroke-strong));
+		--dry-btn-radius: var(--_track-w);
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		--dry-btn-justify: start;
+		--dry-btn-min-height: var(--_track-h);
+	}
+
+	.root[data-state='on'] {
+		--dry-btn-bg: var(--dry-toggle-selected-bg, var(--dry-color-fill-selected));
+	}
+
+	.root[data-disabled]:not([data-state='on']) {
+		--dry-btn-border: var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled));
+	}
+
+	.root[data-disabled][data-state='on'] {
+		--dry-btn-bg: var(--dry-toggle-disabled-fill, var(--dry-color-fill-disabled));
+	}
+
+	.thumb {
+		--_thumb-stroke: var(--dry-toggle-track-stroke, var(--dry-color-stroke-strong));
+
+		display: inline-grid;
+		position: relative;
+		height: var(--_thumb-size);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		box-shadow: var(--dry-shadow-raised);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		pointer-events: none;
+	}
+
+	.root[data-state='on'] .thumb {
+		--_thumb-stroke: var(--dry-toggle-selected-stroke, var(--dry-color-stroke-selected));
+		transform: translateX(var(--_thumb-travel));
+	}
+
+	.root[data-disabled] .thumb {
+		--_thumb-stroke: var(--dry-toggle-disabled-stroke, var(--dry-color-stroke-disabled));
+	}
+
+	.thumb > svg {
+		display: block;
+		height: 100%;
+	}
+
+	.thumb-icon {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		pointer-events: none;
+		color: var(--dry-color-icon);
+		transition: color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	.root[data-state='on'] .thumb-icon {
+		color: var(--dry-color-text-brand);
+	}
+
+	.root[data-disabled] .thumb-icon {
+		color: var(--dry-color-text-disabled);
+	}
+
+	.label {
+		font-family: var(--dry-font-sans);
+		font-weight: 400;
+		font-size: var(--_label-size);
+		line-height: var(--_label-leading);
+		color: var(--dry-toggle-label-color, var(--dry-color-text-strong));
+		white-space: nowrap;
+	}
+
+	.label[data-disabled] {
+		color: var(--dry-toggle-label-disabled-color, var(--dry-color-text-disabled));
+	}
+
+	.root[data-size='sm'] {
+		--_track-w: 48px;
+		--_track-h: 24px;
+		--_thumb-size: 24px;
+		--_thumb-travel: calc(48px - 24px - 2px);
+		--_gap: var(--dry-space-2);
+		--_label-size: var(--dry-type-tiny-size);
+		--_label-leading: var(--dry-type-tiny-leading);
+	}
+
+	.root[data-size='md'] {
+		--_track-w: 64px;
+		--_track-h: 32px;
+		--_thumb-size: 32px;
+		--_thumb-travel: calc(64px - 32px - 2px);
+		--_gap: var(--dry-space-3);
+		--_label-size: var(--dry-type-small-size);
+		--_label-leading: var(--dry-type-small-leading);
+	}
+
+	.root[data-size='lg'] {
+		--_track-w: 76px;
+		--_track-h: 38px;
+		--_thumb-size: 36px;
+		--_thumb-travel: calc(76px - 36px - 2px);
+		--_gap: var(--dry-space-4);
+		--_label-size: var(--dry-type-small-size);
+		--_label-leading: var(--dry-type-small-leading);
+	}
+</style>

package/dist/toggle/toggle-button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    pressed?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    children?: Snippet;
+    icon?: Snippet;
+    class?: ClassValue;
+}
+declare const ToggleButton: import("svelte").Component<Props, {}, "pressed">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;

package/dist/toggle-group/index.d.ts

@@ -4,7 +4,7 @@ export interface ToggleGroupRootProps extends PrimitiveToggleGroupRootProps {
     size?: 'sm' | 'md' | 'lg';
 }
 import ToggleGroupRoot from './toggle-group-root.svelte';
-import ToggleGroupItem from './toggle-group-item.svelte';
+import ToggleGroupItem from './toggle-group-item-button.svelte';
 export declare const ToggleGroup: {
     Root: typeof ToggleGroupRoot;
     Item: typeof ToggleGroupItem;

package/dist/toggle-group/index.js

@@ -1,5 +1,5 @@
 import ToggleGroupRoot from './toggle-group-root.svelte';
-import ToggleGroupItem from './toggle-group-item.svelte';
+import ToggleGroupItem from './toggle-group-item-button.svelte';
 export const ToggleGroup = {
     Root: ToggleGroupRoot,
     Item: ToggleGroupItem

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getToggleGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { value, disabled = false, children, ...rest }: Props = $props();
+
+	const ctx = getToggleGroupCtx();
+
+	let isDisabled = $derived(disabled || ctx.disabled);
+	let isSelected = $derived(ctx.isSelected(value));
+</script>
+
+<Button
+	variant="toggle"
+	type="button"
+	aria-pressed={isSelected}
+	disabled={isDisabled}
+	data-state={isSelected ? 'on' : 'off'}
+	data-orientation={ctx.orientation}
+	{...rest}
+	onclick={() => {
+		if (!isDisabled) {
+			ctx.toggle(value);
+		}
+	}}
+>
+	{@render children()}
+</Button>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    value: string;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const ToggleGroupItemButton: import("svelte").Component<Props, {}, "">;
+type ToggleGroupItemButton = ReturnType<typeof ToggleGroupItemButton>;
+export default ToggleGroupItemButton;