@colletdev/svelte 0.1.3

package/src/split-button.svelte.d.ts

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js';
+
+interface SplitButtonProps {
+  id: string;
+  label: string;
+  entries?: SplitMenuEntry[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  iconLeading?: string;
+  disabled?: boolean;
+  primaryDisabled?: boolean;
+  triggerDisabled?: boolean;
+  triggerLabel?: string;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+}
+
+declare const SplitButton: Component<SplitButtonProps, {
+  /** Opens the dropdown menu. */
+  open(): void;
+  /** Closes the dropdown menu. */
+  close(): void;
+}>;
+export default SplitButton;

package/src/stepper.svelte

@@ -0,0 +1,48 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-stepper> -->
+<script lang="ts">
+  import type { SelectDetail, StepperStep } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  steps?: StepperStep[] | string;
+  current?: number;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  linear?: boolean;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  }
+
+  let { id, label, steps, current, variant, shape, orientation, size, linear, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (steps != null) el.setAttribute('steps', typeof steps === 'object' ? JSON.stringify(steps) : String(steps));
+    else el.removeAttribute('steps');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+
+</script>
+
+<cx-stepper
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  current={typeof current === 'object' && current != null ? JSON.stringify(current) : current}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  orientation={typeof orientation === 'object' && orientation != null ? JSON.stringify(orientation) : orientation}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  linear={linear || undefined}
+/>

package/src/stepper.svelte.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { SelectDetail, StepperStep } from './types.js';
+
+interface StepperProps {
+  id?: string;
+  label?: string;
+  steps?: StepperStep[] | string;
+  current?: number;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  linear?: boolean;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+}
+
+declare const Stepper: Component<StepperProps, {}>;
+export default Stepper;

package/src/switch.svelte

@@ -0,0 +1,85 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-switch> -->
+<script lang="ts">
+  import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Boolean checked state (unlike Checkbox, which uses a string). */
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  description?: string;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<CheckedDetail>) => void;
+  onChange?: (event: CustomEvent<CheckedDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, shape, size, checked, disabled, required, helperText, error, description, unlabeled, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+  /** Focuses the switch input. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-switch
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  checked={checked || undefined}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  unlabeled={unlabeled || undefined}
+/>

package/src/switch.svelte.d.ts

@@ -0,0 +1,30 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+
+interface SwitchProps {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Boolean checked state (unlike Checkbox, which uses a string). */
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  description?: string;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<CheckedDetail>) => void;
+  onChange?: (event: CustomEvent<CheckedDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Switch: Component<SwitchProps, {
+  /** Focuses the switch input. */
+  focus(): void;
+}>;
+export default Switch;

package/src/table.svelte

@@ -0,0 +1,133 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-table> -->
+<script lang="ts">
+  import type { EmptyStateConfig, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  caption: string;
+  columns?: TableColumn[] | string;
+  rows?: TableRow[] | string;
+  variant?: 'plain' | 'striped' | 'bordered';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selectable?: string;
+  selected?: string[] | string;
+  sorts?: SortState[] | string;
+  pagination?: PaginationConfig | string;
+  hoverable?: boolean;
+  stickyHeader?: boolean;
+  footer?: FooterRow[] | string;
+  emptyState?: EmptyStateConfig | string;
+  columnOrder?: string[] | string;
+  disabled?: boolean;
+  loading?: number;
+  error?: string;
+  onSort?: (event: CustomEvent<SortDetail>) => void;
+  onSelect?: (event: CustomEvent<TableSelectDetail>) => void;
+  onExpand?: (event: CustomEvent<TableExpandDetail>) => void;
+  onPage?: (event: CustomEvent<PageDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, caption, columns, rows, variant, size, selectable, selected, sorts, pagination, hoverable, stickyHeader, footer, emptyState, columnOrder, disabled, loading, error, onSort, onSelect, onExpand, onPage, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (loading != null) el.setAttribute('loading', String(loading));
+    else el.removeAttribute('loading');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (columns != null) el.setAttribute('columns', typeof columns === 'object' ? JSON.stringify(columns) : String(columns));
+    else el.removeAttribute('columns');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (rows != null) el.setAttribute('rows', typeof rows === 'object' ? JSON.stringify(rows) : String(rows));
+    else el.removeAttribute('rows');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (selected != null) el.setAttribute('selected', typeof selected === 'object' ? JSON.stringify(selected) : String(selected));
+    else el.removeAttribute('selected');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (sorts != null) el.setAttribute('sorts', typeof sorts === 'object' ? JSON.stringify(sorts) : String(sorts));
+    else el.removeAttribute('sorts');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (pagination != null) el.setAttribute('pagination', typeof pagination === 'object' ? JSON.stringify(pagination) : String(pagination));
+    else el.removeAttribute('pagination');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (footer != null) el.setAttribute('footer', typeof footer === 'object' ? JSON.stringify(footer) : String(footer));
+    else el.removeAttribute('footer');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (emptyState != null) el.setAttribute('empty-state', typeof emptyState === 'object' ? JSON.stringify(emptyState) : String(emptyState));
+    else el.removeAttribute('empty-state');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (columnOrder != null) el.setAttribute('column-order', typeof columnOrder === 'object' ? JSON.stringify(columnOrder) : String(columnOrder));
+    else el.removeAttribute('column-order');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onSort?.(e as CustomEvent);
+    el.addEventListener('cx-sort', handler);
+    return () => el.removeEventListener('cx-sort', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onSelect?.(e as CustomEvent);
+    el.addEventListener('cx-select', handler);
+    return () => el.removeEventListener('cx-select', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onExpand?.(e as CustomEvent);
+    el.addEventListener('cx-expand', handler);
+    return () => el.removeEventListener('cx-expand', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onPage?.(e as CustomEvent);
+    el.addEventListener('cx-page', handler);
+    return () => el.removeEventListener('cx-page', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+
+</script>
+
+<cx-table
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  caption={typeof caption === 'object' && caption != null ? JSON.stringify(caption) : caption}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  selectable={typeof selectable === 'object' && selectable != null ? JSON.stringify(selectable) : selectable}
+  hoverable={hoverable || undefined}
+  sticky-header={stickyHeader || undefined}
+  disabled={disabled || undefined}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+/>

package/src/table.svelte.d.ts

@@ -0,0 +1,33 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { EmptyStateConfig, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail } from './types.js';
+
+interface TableProps {
+  id?: string;
+  caption: string;
+  columns?: TableColumn[] | string;
+  rows?: TableRow[] | string;
+  variant?: 'plain' | 'striped' | 'bordered';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selectable?: string;
+  selected?: string[] | string;
+  sorts?: SortState[] | string;
+  pagination?: PaginationConfig | string;
+  hoverable?: boolean;
+  stickyHeader?: boolean;
+  footer?: FooterRow[] | string;
+  emptyState?: EmptyStateConfig | string;
+  columnOrder?: string[] | string;
+  disabled?: boolean;
+  loading?: number;
+  error?: string;
+  onSort?: (event: CustomEvent<SortDetail>) => void;
+  onSelect?: (event: CustomEvent<TableSelectDetail>) => void;
+  onExpand?: (event: CustomEvent<TableExpandDetail>) => void;
+  onPage?: (event: CustomEvent<PageDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Table: Component<TableProps, {}>;
+export default Table;

package/src/tabs.svelte

@@ -0,0 +1,51 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-tabs> -->
+<script lang="ts">
+  import type { SelectDetail, TabItem } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  items?: TabItem[] | string;
+  defaultTab?: string;
+  variant?: 'underline' | 'enclosed' | 'pill';
+  orientation?: 'horizontal' | 'vertical';
+  width?: 'auto' | 'full';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  }
+
+  let { id, label, items, defaultTab, variant, orientation, width, size, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (width != null) el.setAttribute('width', String(width));
+    else el.removeAttribute('width');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (items != null) el.setAttribute('items', typeof items === 'object' ? JSON.stringify(items) : String(items));
+    else el.removeAttribute('items');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  /** Focuses the active tab. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-tabs
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  default-tab={typeof defaultTab === 'object' && defaultTab != null ? JSON.stringify(defaultTab) : defaultTab}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  orientation={typeof orientation === 'object' && orientation != null ? JSON.stringify(orientation) : orientation}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+/>

package/src/tabs.svelte.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { SelectDetail, TabItem } from './types.js';
+
+interface TabsProps {
+  id?: string;
+  label?: string;
+  items?: TabItem[] | string;
+  defaultTab?: string;
+  variant?: 'underline' | 'enclosed' | 'pill';
+  orientation?: 'horizontal' | 'vertical';
+  width?: 'auto' | 'full';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+}
+
+declare const Tabs: Component<TabsProps, {
+  /** Focuses the active tab. */
+  focus(): void;
+}>;
+export default Tabs;

package/src/text-input.svelte

@@ -0,0 +1,126 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-text-input> -->
+<script lang="ts">
+  import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+  kind?: 'text' | 'email' | 'password' | 'search' | 'multiline';
+  placeholder?: string;
+  /** Controlled value. Set via onInput callback. */
+  value?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  clearable?: boolean;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  passwordToggle?: boolean;
+  passwordVisible?: boolean;
+  name?: string;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  autocomplete?: string;
+  rows?: number;
+  autoGrow?: boolean;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<InputDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, variant, shape, size, kind, placeholder, value, helperText, error, disabled, readonly, required, clearable, prefixIcon, suffixIcon, passwordToggle, passwordVisible, name, minLength, maxLength, pattern, autocomplete, rows, autoGrow, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (value != null) el.setAttribute('value', String(value));
+    else el.removeAttribute('value');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (name != null) el.setAttribute('name', String(name));
+    else el.removeAttribute('name');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+  /** Focuses the inner input or textarea. */
+  export function focus() { (el as any)?.focus(); }
+  /** Blurs the inner input or textarea. */
+  export function blur() { (el as any)?.blur(); }
+  /** Selects all text in the input. */
+  export function select() { (el as any)?.select(); }
+</script>
+
+<cx-text-input
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  kind={typeof kind === 'object' && kind != null ? JSON.stringify(kind) : kind}
+  placeholder={typeof placeholder === 'object' && placeholder != null ? JSON.stringify(placeholder) : placeholder}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+  disabled={disabled || undefined}
+  readonly={readonly || undefined}
+  required={required || undefined}
+  clearable={clearable || undefined}
+  prefix-icon={typeof prefixIcon === 'object' && prefixIcon != null ? JSON.stringify(prefixIcon) : prefixIcon}
+  suffix-icon={typeof suffixIcon === 'object' && suffixIcon != null ? JSON.stringify(suffixIcon) : suffixIcon}
+  password-toggle={passwordToggle || undefined}
+  password-visible={passwordVisible || undefined}
+  min-length={typeof minLength === 'object' && minLength != null ? JSON.stringify(minLength) : minLength}
+  max-length={typeof maxLength === 'object' && maxLength != null ? JSON.stringify(maxLength) : maxLength}
+  pattern={typeof pattern === 'object' && pattern != null ? JSON.stringify(pattern) : pattern}
+  autocomplete={typeof autocomplete === 'object' && autocomplete != null ? JSON.stringify(autocomplete) : autocomplete}
+  rows={typeof rows === 'object' && rows != null ? JSON.stringify(rows) : rows}
+  auto-grow={autoGrow || undefined}
+/>

package/src/text-input.svelte.d.ts

@@ -0,0 +1,49 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+
+interface TextInputProps {
+  id?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+  kind?: 'text' | 'email' | 'password' | 'search' | 'multiline';
+  placeholder?: string;
+  /** Controlled value. Set via onInput callback. */
+  value?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  clearable?: boolean;
+  prefixIcon?: string;
+  suffixIcon?: string;
+  passwordToggle?: boolean;
+  passwordVisible?: boolean;
+  name?: string;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  autocomplete?: string;
+  rows?: number;
+  autoGrow?: boolean;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<InputDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const TextInput: Component<TextInputProps, {
+  /** Focuses the inner input or textarea. */
+  focus(): void;
+  /** Blurs the inner input or textarea. */
+  blur(): void;
+  /** Selects all text in the input. */
+  select(): void;
+}>;
+export default TextInput;