kumo-svelte 0.2.0 → 0.3.0

package/dist/components/radio/RadioGroup.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
+<script lang="ts" generics="Value = string">
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import { setContext } from 'svelte';
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils/cn';
   import type { RadioAppearance, RadioControlPosition } from './Radio.svelte';
 
-  interface Props {
+  export interface Props<Value = string> {
     children?: Snippet;
     legend?: string;
     orientation?: 'vertical' | 'horizontal';
     appearance?: RadioAppearance;
     error?: string;
     description?: string | Snippet;
-    value?: string;
-    defaultValue?: string;
+    value?: Value;
+    defaultValue?: Value;
     disabled?: boolean;
     required?: boolean;
     controlPosition?: RadioControlPosition;
     name?: string;
     class?: string;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: Value, eventDetails?: unknown) => void;
   }
 
   let {
@@ -30,14 +30,16 @@
     error,
     description,
     defaultValue,
-    value = $bindable(defaultValue ?? ''),
+    value = $bindable(defaultValue),
     disabled = false,
     required,
     controlPosition,
     name,
     class: className,
     onValueChange
-  }: Props = $props();
+  }: Props<Value> = $props();
+
+  const serializedValues = new Map<string, unknown>();
 
   $effect(() => {
     if (value === undefined && defaultValue !== undefined) {
@@ -45,17 +47,44 @@
     }
   });
 
+  function serializeValue(itemValue: unknown) {
+    if (typeof itemValue === 'string') return itemValue;
+
+    const serialized = `kumo-radio:${typeof itemValue}:${String(itemValue)}`;
+    serializedValues.set(serialized, itemValue);
+    return serialized;
+  }
+
+  function deserializeValue(serializedValue: string) {
+    return serializedValues.has(serializedValue) ? serializedValues.get(serializedValue) : serializedValue;
+  }
+
+  const primitiveValue = $derived(value === undefined ? undefined : serializeValue(value));
+  function handleValueChange(nextValue: string, eventDetails?: unknown) {
+    const deserializedValue = deserializeValue(nextValue) as Value;
+    value = deserializedValue;
+    onValueChange?.(deserializedValue, eventDetails);
+  }
+
   setContext('kumo-radio-group', {
     get controlPosition() {
       return controlPosition;
     },
     get appearance() {
       return appearance;
-    }
+    },
+    serializeValue
   });
 </script>
 
-<RadioGroupPrimitive.Root bind:value {orientation} {disabled} {required} {name} {onValueChange}>
+<RadioGroupPrimitive.Root
+  value={primitiveValue}
+  {orientation}
+  {disabled}
+  {required}
+  {name}
+  onValueChange={handleValueChange}
+>
   <fieldset class={cn('flex flex-col gap-4', className)} {disabled}>
     {#if legend}
       <legend class="text-base font-medium text-kumo-default">

package/dist/components/radio/RadioGroup.svelte.d.ts

@@ -1,21 +1,42 @@
 import type { Snippet } from 'svelte';
 import type { RadioAppearance, RadioControlPosition } from './Radio.svelte';
-interface Props {
+export interface Props<Value = string> {
     children?: Snippet;
     legend?: string;
     orientation?: 'vertical' | 'horizontal';
     appearance?: RadioAppearance;
     error?: string;
     description?: string | Snippet;
-    value?: string;
-    defaultValue?: string;
+    value?: Value;
+    defaultValue?: Value;
     disabled?: boolean;
     required?: boolean;
     controlPosition?: RadioControlPosition;
     name?: string;
     class?: string;
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: Value, eventDetails?: unknown) => void;
 }
-declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
-type RadioGroup = ReturnType<typeof RadioGroup>;
+declare function $$render<Value = string>(): {
+    props: Props<Value>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Value = string> {
+    props(): ReturnType<typeof $$render<Value>>['props'];
+    events(): ReturnType<typeof $$render<Value>>['events'];
+    slots(): ReturnType<typeof $$render<Value>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Value = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Value>['props']>, ReturnType<__sveltets_Render<Value>['events']>, ReturnType<__sveltets_Render<Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Value>['exports']>;
+    <Value = string>(internal: unknown, props: ReturnType<__sveltets_Render<Value>['props']> & {}): ReturnType<__sveltets_Render<Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioGroup: $$IsomorphicComponent;
+type RadioGroup<Value = string> = InstanceType<typeof RadioGroup<Value>>;
 export default RadioGroup;

package/dist/components/radio/RadioItem.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="Value = unknown">
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import { getContext } from 'svelte';
   import type { Snippet } from 'svelte';
@@ -8,9 +8,10 @@
   interface RadioGroupContext {
     readonly controlPosition: RadioControlPosition | undefined;
     readonly appearance: RadioAppearance;
+    serializeValue: (value: unknown) => string;
   }
 
-  interface Props {
+  export interface Props<Value = unknown> {
     children?: Snippet;
     class?: string;
     disabled?: boolean;
@@ -18,7 +19,7 @@
     appearance?: RadioAppearance;
     label: string | Snippet;
     description?: string | Snippet;
-    value: string;
+    value: Value;
   }
 
   let {
@@ -30,18 +31,19 @@
     label,
     description,
     value
-  }: Props = $props();
+  }: Props<Value> = $props();
 
   const group = getContext<RadioGroupContext | undefined>('kumo-radio-group');
   const appearance = $derived(appearanceProp ?? group?.appearance ?? 'default');
   const isCard = $derived(appearance === 'card');
   const effectiveControlPosition = $derived(group?.controlPosition ?? (isCard ? 'end' : 'start'));
   const controlAtStart = $derived(effectiveControlPosition === 'start');
+  const primitiveValue = $derived(group?.serializeValue(value) ?? (typeof value === 'string' ? value : String(value)));
 </script>
 
 {#snippet control()}
   <RadioGroupPrimitive.Item
-    {value}
+    value={primitiveValue}
     {disabled}
     data-kumo-component="Radio"
     data-kumo-part="item"

package/dist/components/radio/RadioItem.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { RadioAppearance, RadioVariant } from './Radio.svelte';
-interface Props {
+export interface Props<Value = unknown> {
     children?: Snippet;
     class?: string;
     disabled?: boolean;
@@ -8,8 +8,29 @@ interface Props {
     appearance?: RadioAppearance;
     label: string | Snippet;
     description?: string | Snippet;
-    value: string;
+    value: Value;
 }
-declare const RadioItem: import("svelte").Component<Props, {}, "">;
-type RadioItem = ReturnType<typeof RadioItem>;
+declare function $$render<Value = unknown>(): {
+    props: Props<Value>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Value = unknown> {
+    props(): ReturnType<typeof $$render<Value>>['props'];
+    events(): ReturnType<typeof $$render<Value>>['events'];
+    slots(): ReturnType<typeof $$render<Value>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Value = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Value>['props']>, ReturnType<__sveltets_Render<Value>['events']>, ReturnType<__sveltets_Render<Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Value>['exports']>;
+    <Value = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<Value>['props']> & {}): ReturnType<__sveltets_Render<Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioItem: $$IsomorphicComponent;
+type RadioItem<Value = unknown> = InstanceType<typeof RadioItem<Value>>;
 export default RadioItem;

package/dist/components/radio/RadioTypedValueTestHost.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import RadioGroup from './RadioGroup.svelte';
+  import RadioItem from './RadioItem.svelte';
+
+  let pageSize = $state<number>(10);
+</script>
+
+<RadioGroup legend="Items per page" bind:value={pageSize}>
+  <RadioItem label="10" value={10} />
+  <RadioItem label="25" value={25} />
+  <RadioItem label="50" value={50} />
+</RadioGroup>
+
+<output aria-label="Selected page size">{pageSize}</output>

package/dist/components/radio/RadioTypedValueTestHost.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const RadioTypedValueTestHost: import("svelte").Component<Record<string, never>, {}, "">;
+type RadioTypedValueTestHost = ReturnType<typeof RadioTypedValueTestHost>;
+export default RadioTypedValueTestHost;

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

@@ -9,3 +9,5 @@ export declare const Radio: typeof RadioRoot & {
 };
 export { RadioGroup, RadioItem, RadioLegend };
 export type { RadioAppearance, RadioControlPosition, RadioVariant } from './Radio.svelte';
+export type { Props as RadioGroupProps } from './RadioGroup.svelte';
+export type { Props as RadioItemProps } from './RadioItem.svelte';

package/dist/components/radio/radio.test.d.ts

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

package/dist/components/radio/radio.test.js

@@ -0,0 +1,11 @@
+// @vitest-environment happy-dom
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import RadioTypedValueTestHost from './RadioTypedValueTestHost.svelte';
+describe('Radio', () => {
+    it('round-trips non-string values through the radio group', async () => {
+        render(RadioTypedValueTestHost);
+        await fireEvent.click(screen.getByLabelText('25'));
+        expect(screen.getByLabelText('Selected page size').textContent).toBe('25');
+    });
+});

package/dist/components/sidebar/SidebarContent.svelte

@@ -8,7 +8,7 @@
 <div
   data-sidebar="content"
   class={cn(
-    'relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-[11px] py-3 transition-[padding] duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:px-3.5 group-data-[state=collapsed]/sidebar:overflow-x-hidden!',
+    'relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden! px-[11px] py-3 transition-[padding] duration-(--sidebar-animation-duration) group-not-data-[state=collapsed]/sidebar:px-3.5',
     'group-data-[mobile=true]/sidebar:px-3.5',
     className
   )}

package/dist/components/sidebar/SidebarGroupLabel.svelte

@@ -15,7 +15,7 @@
   {...rest}
 >
   <div class="min-h-0 min-w-0">
-    <div class="truncate px-3 mt-6 mb-2 text-sm font-medium text-kumo-subtle [[data-sidebar=group]:first-child_&]:mt-2">
+    <div class="truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-subtle [[data-sidebar=group]:first-child_&]:mt-2">
       {@render children?.()}
     </div>
   </div>

package/dist/components/toolbar/Toolbar.svelte

@@ -0,0 +1,68 @@
+<script module lang="ts">
+  export {
+    KUMO_TOOLBAR_DEFAULT_VARIANTS,
+    KUMO_TOOLBAR_VARIANTS,
+    type ToolbarSize
+  } from './context';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+  import {
+    KUMO_TOOLBAR_DEFAULT_VARIANTS,
+    KUMO_TOOLBAR_VARIANTS,
+    setToolbarContext,
+    type ToolbarSize
+  } from './context';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    size?: ToolbarSize;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    size = KUMO_TOOLBAR_DEFAULT_VARIANTS.size,
+    ...rest
+  }: Props = $props();
+
+  setToolbarContext({
+    get size() {
+      return size;
+    }
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+    const root = event.currentTarget as HTMLElement;
+    const controls = Array.from(
+      root.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((element) => !element.hasAttribute('aria-hidden'));
+    const index = controls.indexOf(event.target as HTMLElement);
+    if (index === -1) return;
+
+    event.preventDefault();
+    const direction = event.key === 'ArrowRight' ? 1 : -1;
+    controls[(index + direction + controls.length) % controls.length]?.focus();
+  }
+</script>
+
+<div
+  data-kumo-component="Toolbar"
+  role="toolbar"
+  class={cn(
+    'inline-flex w-fit items-stretch rounded-lg bg-kumo-control shadow-xs ring ring-kumo-line',
+    KUMO_TOOLBAR_VARIANTS.size[size].classes,
+    className
+  )}
+  onkeydown={handleKeydown}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,12 @@
+export { KUMO_TOOLBAR_DEFAULT_VARIANTS, KUMO_TOOLBAR_VARIANTS, type ToolbarSize } from './context';
+import type { Snippet } from 'svelte';
+import { type ToolbarSize } from './context';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    size?: ToolbarSize;
+    [key: string]: unknown;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/toolbar/ToolbarButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import Button from '../button/Button.svelte';
+  import { getToolbarContext, toolbarControlClassName } from './context';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: Component;
+    shape?: 'base' | 'square' | 'circle';
+    type?: 'button' | 'submit' | 'reset';
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    disabled = false,
+    loading = false,
+    icon,
+    shape,
+    type = 'button',
+    ...rest
+  }: Props = $props();
+
+  const toolbar = getToolbarContext();
+  const size = $derived(toolbar?.size ?? 'base');
+  const resolvedShape = $derived(shape ?? (!children && icon ? 'square' : 'base'));
+</script>
+
+<Button
+  class={toolbarControlClassName(className)}
+  {disabled}
+  {icon}
+  {loading}
+  shape={resolvedShape}
+  {size}
+  {type}
+  variant="ghost"
+  componentName="Toolbar.Button"
+  {...rest}
+>
+  {@render children?.()}
+</Button>

package/dist/components/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from 'svelte';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: Component;
+    shape?: 'base' | 'square' | 'circle';
+    type?: 'button' | 'submit' | 'reset';
+    [key: string]: unknown;
+}
+declare const ToolbarButton: Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/components/toolbar/ToolbarInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Input from '../input/Input.svelte';
+  import { getToolbarContext, toolbarControlClassName } from './context';
+
+  export interface Props {
+    class?: string;
+    value?: string | number;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+  }
+
+  let { class: className, value = $bindable(''), onValueChange, ...rest }: Props = $props();
+
+  const toolbar = getToolbarContext();
+  const size = $derived(toolbar?.size ?? 'base');
+</script>
+
+<Input bind:value {onValueChange} class={toolbarControlClassName(className)} {size} {...rest} />

package/dist/components/toolbar/ToolbarInput.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface Props {
+    class?: string;
+    value?: string | number;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const ToolbarInput: import("svelte").Component<Props, {}, "value">;
+type ToolbarInput = ReturnType<typeof ToolbarInput>;
+export default ToolbarInput;

package/dist/components/toolbar/ToolbarInputGroup.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { InputGroup } from '../input-group';
+  import { getToolbarContext, toolbarControlClassName } from './context';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+
+  const toolbar = getToolbarContext();
+  const size = $derived(toolbar?.size ?? 'base');
+</script>
+
+<InputGroup class={toolbarControlClassName(className)} {size} {...rest}>
+  {@render children?.()}
+</InputGroup>

package/dist/components/toolbar/ToolbarInputGroup.svelte.d.ts

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

package/dist/components/toolbar/ToolbarTestHost.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Input } from '../input';
+  import { InputGroup } from '../input-group';
+  import { Toolbar } from './index';
+</script>
+
+<Toolbar size="sm">
+  <Toolbar.Input aria-label="Toolbar input" />
+  <Input aria-label="Direct input" size="lg" />
+</Toolbar>
+
+<Toolbar size="sm">
+  <Toolbar.InputGroup aria-label="Hostname">
+    <InputGroup.Input placeholder="example" aria-label="Hostname" />
+    <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
+  </Toolbar.InputGroup>
+  <InputGroup>
+    <InputGroup.Input placeholder="plain" aria-label="Plain" />
+  </InputGroup>
+</Toolbar>
+
+<Toolbar>
+  <Toolbar.InputGroup aria-label="Search DNS records">
+    <InputGroup.Input placeholder="Search DNS records" />
+  </Toolbar.InputGroup>
+  <Toolbar.Button aria-label="Filter">Filter</Toolbar.Button>
+  <Toolbar.Button aria-label="Settings">Settings</Toolbar.Button>
+</Toolbar>
+
+<Toolbar>
+  <Toolbar.InputGroup aria-label="Worker subdomain">
+    <InputGroup.Input placeholder="my-worker" />
+    <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
+  </Toolbar.InputGroup>
+  <Toolbar.Button>Visit</Toolbar.Button>
+</Toolbar>

package/dist/components/toolbar/ToolbarTestHost.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToolbarTestHost: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToolbarTestHost = InstanceType<typeof ToolbarTestHost>;
+export default ToolbarTestHost;

package/dist/components/toolbar/context.d.ts

@@ -0,0 +1,30 @@
+export declare const KUMO_TOOLBAR_VARIANTS: {
+    readonly size: {
+        readonly xs: {
+            readonly classes: "text-xs";
+            readonly description: "Extra small toolbar for compact UIs";
+        };
+        readonly sm: {
+            readonly classes: "text-xs";
+            readonly description: "Small toolbar for secondary controls";
+        };
+        readonly base: {
+            readonly classes: "text-base";
+            readonly description: "Default toolbar size";
+        };
+        readonly lg: {
+            readonly classes: "text-base";
+            readonly description: "Large toolbar for prominent controls";
+        };
+    };
+};
+export declare const KUMO_TOOLBAR_DEFAULT_VARIANTS: {
+    readonly size: "base";
+};
+export type ToolbarSize = keyof typeof KUMO_TOOLBAR_VARIANTS.size;
+export interface ToolbarContextValue {
+    size: ToolbarSize;
+}
+export declare function setToolbarContext(context: ToolbarContextValue): void;
+export declare function getToolbarContext(): ToolbarContextValue | undefined;
+export declare function toolbarControlClassName(className?: string): string;

package/dist/components/toolbar/context.js

@@ -0,0 +1,35 @@
+import { getContext, setContext } from 'svelte';
+import { cn } from '../../utils/cn';
+export const KUMO_TOOLBAR_VARIANTS = {
+    size: {
+        xs: {
+            classes: 'text-xs',
+            description: 'Extra small toolbar for compact UIs'
+        },
+        sm: {
+            classes: 'text-xs',
+            description: 'Small toolbar for secondary controls'
+        },
+        base: {
+            classes: 'text-base',
+            description: 'Default toolbar size'
+        },
+        lg: {
+            classes: 'text-base',
+            description: 'Large toolbar for prominent controls'
+        }
+    }
+};
+export const KUMO_TOOLBAR_DEFAULT_VARIANTS = {
+    size: 'base'
+};
+const TOOLBAR_CONTEXT = 'kumo-toolbar';
+export function setToolbarContext(context) {
+    setContext(TOOLBAR_CONTEXT, context);
+}
+export function getToolbarContext() {
+    return getContext(TOOLBAR_CONTEXT);
+}
+export function toolbarControlClassName(className) {
+    return cn('relative min-w-0 border-0 bg-transparent shadow-none ring-0 focus:z-2 focus-within:z-2 focus-visible:z-2', 'rounded-none first:rounded-l-lg last:rounded-r-lg only:rounded-lg', 'not-first:border-l not-first:border-kumo-line', 'focus:ring-kumo-focus/50 focus:ring-[1.5px] focus-visible:ring-2 focus-visible:ring-kumo-brand', 'focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]', className);
+}

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

@@ -0,0 +1,16 @@
+import Root from './Toolbar.svelte';
+import Button from './ToolbarButton.svelte';
+import Input from './ToolbarInput.svelte';
+import InputGroup from './ToolbarInputGroup.svelte';
+declare const Toolbar: typeof Root & {
+    Root: typeof Root;
+    Button: typeof Button;
+    Input: typeof Input;
+    InputGroup: typeof InputGroup;
+};
+export { Toolbar, Root as ToolbarRoot, Button as ToolbarButton, Input as ToolbarInput, InputGroup as ToolbarInputGroup };
+export { KUMO_TOOLBAR_DEFAULT_VARIANTS, KUMO_TOOLBAR_VARIANTS, type ToolbarSize } from './context';
+export type { Props as ToolbarProps } from './Toolbar.svelte';
+export type { Props as ToolbarButtonProps } from './ToolbarButton.svelte';
+export type { Props as ToolbarInputProps } from './ToolbarInput.svelte';
+export type { Props as ToolbarInputGroupProps } from './ToolbarInputGroup.svelte';

package/dist/components/toolbar/index.js

@@ -0,0 +1,12 @@
+import Root from './Toolbar.svelte';
+import Button from './ToolbarButton.svelte';
+import Input from './ToolbarInput.svelte';
+import InputGroup from './ToolbarInputGroup.svelte';
+const Toolbar = Object.assign(Root, {
+    Root,
+    Button,
+    Input,
+    InputGroup
+});
+export { Toolbar, Root as ToolbarRoot, Button as ToolbarButton, Input as ToolbarInput, InputGroup as ToolbarInputGroup };
+export { KUMO_TOOLBAR_DEFAULT_VARIANTS, KUMO_TOOLBAR_VARIANTS } from './context';

package/dist/components/toolbar/toolbar.test.d.ts

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