@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.0

package/dist/components/Collapsible.svelte

@@ -0,0 +1,46 @@
+<script>
+  // Collapsible — a chevron + trigger row that shows/hides child content.
+  // Batteries-included version of Chevron: manages its own open state.
+  //
+  //   <Collapsible title="Details">
+  //     …content…
+  //   </Collapsible>
+  let {
+    open     = $bindable(false),
+    title    = undefined,        // simple text trigger
+    disabled = false,
+    trigger,                     // optional snippet(open) for custom trigger content
+    children,
+    ...restProps
+  } = $props();
+
+  function toggle() {
+    if (disabled) return;
+    open = !open;
+  }
+</script>
+
+<div class="collapsible" {...restProps}>
+  <button
+    type="button"
+    class="collapsible-trigger"
+    {disabled}
+    aria-expanded={open}
+    onclick={toggle}
+  >
+    <span class="chevron collapsible-chevron" class:expanded={open} aria-hidden="true">
+      <span class="material-symbols-outlined">chevron_right</span>
+    </span>
+    {#if trigger}
+      {@render trigger(open)}
+    {:else}
+      <span class="collapsible-title">{title}</span>
+    {/if}
+  </button>
+
+  {#if open}
+    <div class="collapsible-content">
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,19 @@
+export default Collapsible;
+type Collapsible = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Collapsible: import("svelte").Component<{
+    open?: boolean;
+    title?: any;
+    disabled?: boolean;
+    trigger: any;
+    children: any;
+} & Record<string, any>, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    title?: any;
+    disabled?: boolean;
+    trigger: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/ConfirmDialog.svelte

@@ -0,0 +1,70 @@
+<script>
+  let {
+    open          = $bindable(false),
+    variant       = 'danger',
+    title         = 'Are you sure?',
+    message       = '',
+    confirmLabel  = 'Confirm',
+    cancelLabel   = 'Cancel',
+    onconfirm     = () => {},
+    oncancel      = () => {},
+    children,
+  } = $props();
+
+  const icons = { danger: 'delete', warning: 'warning', info: 'info' };
+
+  let closing = $state(false);
+
+  function close() {
+    closing = true;
+    setTimeout(() => { closing = false; open = false; }, 200);
+  }
+
+  function confirm() {
+    onconfirm();
+    close();
+  }
+
+  function cancel() {
+    oncancel();
+    close();
+  }
+
+  let backdropClass = $derived(
+    ['modal-backdrop', closing ? 'closing' : ''].filter(Boolean).join(' ')
+  );
+
+  let confirmClass = $derived(
+    ['btn',
+      variant === 'danger'  ? 'btn-danger'  : '',
+      variant === 'warning' ? 'btn-primary' : '',
+      variant === 'info'    ? 'btn-primary' : '',
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+{#if open || closing}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div class={backdropClass} onclick={cancel} role="dialog" aria-modal="true">
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div class="modal modal-sm modal-confirm" onclick={(e) => e.stopPropagation()}>
+
+      <div class="modal-body">
+        <div class="modal-confirm-icon modal-confirm-icon-{variant}">
+          <span class="material-symbols-outlined">{icons[variant]}</span>
+        </div>
+        <div>
+          <p class="modal-confirm-title">{title}</p>
+          {#if message}<p class="modal-confirm-message">{message}</p>{/if}
+          {@render children?.()}
+        </div>
+      </div>
+
+      <div class="modal-footer modal-footer-split">
+        <button class="btn btn-secondary" onclick={cancel}>{cancelLabel}</button>
+        <button class={confirmClass} onclick={confirm}>{confirmLabel}</button>
+      </div>
+
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,27 @@
+export default ConfirmDialog;
+type ConfirmDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ConfirmDialog: import("svelte").Component<{
+    open?: boolean;
+    variant?: string;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onconfirm?: Function;
+    oncancel?: Function;
+    children: any;
+}, {}, "open">;
+type $$ComponentProps = {
+    open?: boolean;
+    variant?: string;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onconfirm?: Function;
+    oncancel?: Function;
+    children: any;
+};

package/dist/components/DatePicker.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Calendar from './Calendar.svelte';
+
+  // DatePicker — a field that opens a Calendar popover to pick a date.
+  // Simple: no keyboard nav, no min/max, no time.
+  let {
+    value       = $bindable(null),   // JS Date or null
+    placeholder = 'Select a date',
+    disabled    = false,
+    format      = defaultFormat,      // (date) => string
+    ...restProps
+  } = $props();
+
+  let open = $state(false);
+  let root;
+
+  function defaultFormat(d) {
+    if (!d) return '';
+    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  let display = $derived(value ? format(value) : '');
+
+  function toggle() { if (!disabled) open = !open; }
+  function onSelect() { open = false; }
+
+  $effect(() => {
+    if (!open) return;
+    function onDoc(e) { if (root && !root.contains(e.target)) open = false; }
+    function onKey(e) { if (e.key === 'Escape') open = false; }
+    document.addEventListener('pointerdown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
+</script>
+
+<div class="datepicker" bind:this={root}>
+  <button
+    type="button"
+    class="input datepicker-trigger"
+    class:datepicker-placeholder={!value}
+    {disabled}
+    onclick={toggle}
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    {...restProps}
+  >
+    <span class="material-symbols-outlined datepicker-icon">calendar_today</span>
+    <span class="datepicker-value">{display || placeholder}</span>
+  </button>
+
+  {#if open}
+    <div class="datepicker-popover">
+      <Calendar bind:value onselect={onSelect} />
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+export default DatePicker;
+type DatePicker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DatePicker: import("svelte").Component<{
+    value?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    format?: (d: any) => any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    format?: (d: any) => any;
+} & Record<string, any>;

package/dist/components/Divider.svelte

@@ -0,0 +1,25 @@
+<script>
+  // Divider — a horizontal or vertical separator, optionally with a
+  // centered label. Uses the existing divider tokens.
+  let {
+    vertical = false,
+    strong   = false,
+    label    = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  const hasLabel = $derived(!!(label || children));
+</script>
+
+{#if vertical}
+  <span class="divider-vertical" class:divider-strong={strong} role="separator" aria-orientation="vertical" {...restProps}></span>
+{:else if hasLabel}
+  <div class="divider-labeled" role="separator" {...restProps}>
+    <span class="divider-line" class:divider-strong={strong}></span>
+    <span class="divider-text">{#if label}{label}{:else}{@render children?.()}{/if}</span>
+    <span class="divider-line" class:divider-strong={strong}></span>
+  </div>
+{:else}
+  <hr class="divider" class:divider-strong={strong} {...restProps} />
+{/if}

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

@@ -0,0 +1,17 @@
+export default Divider;
+type Divider = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Divider: import("svelte").Component<{
+    vertical?: boolean;
+    strong?: boolean;
+    label?: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    vertical?: boolean;
+    strong?: boolean;
+    label?: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,100 @@
+<script>
+  // Dropdown — a menu of actions triggered by a button/element.
+  // Distinct from Select (which is a form field). Use for row actions,
+  // overflow "⋯" menus, etc.
+  //
+  // items: [{ label, icon?, onclick?, href?, danger?, disabled?, divider? }]
+  // Or use the `trigger` and `menu` snippets for full control.
+
+  let {
+    items      = [],
+    align      = 'start',      // 'start' | 'end'
+    label      = 'Options',
+    disabled   = false,
+    trigger,                   // optional snippet(open) for a custom trigger
+    menu,                      // optional snippet(close) for custom menu content
+    ...restProps
+  } = $props();
+
+  let open = $state(false);
+  let root;
+
+  function toggle() { if (!disabled) open = !open; }
+  function close() { open = false; }
+
+  function runItem(item) {
+    if (item.disabled) return;
+    close();
+    item.onclick?.();
+  }
+
+  $effect(() => {
+    if (!open) return;
+    function onDoc(e) { if (root && !root.contains(e.target)) close(); }
+    function onKey(e) { if (e.key === 'Escape') close(); }
+    document.addEventListener('pointerdown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
+</script>
+
+<div class="dropdown" bind:this={root}>
+  {#if trigger}
+    <div class="dropdown-trigger-wrap" onclick={toggle} role="button" tabindex="0">
+      {@render trigger(open)}
+    </div>
+  {:else}
+    <button
+      type="button"
+      class="btn btn-secondary dropdown-trigger"
+      aria-haspopup="menu"
+      aria-expanded={open}
+      {disabled}
+      onclick={toggle}
+      {...restProps}
+    >
+      {label}
+      <span class="material-symbols-outlined dropdown-caret" class:open>expand_more</span>
+    </button>
+  {/if}
+
+  {#if open}
+    <div class="dropdown-menu" class:dropdown-menu-end={align === 'end'} role="menu">
+      {#if menu}
+        {@render menu(close)}
+      {:else}
+        {#each items as item}
+          {#if item.divider}
+            <div class="dropdown-divider"></div>
+          {:else if item.href}
+            <a
+              class="dropdown-item"
+              class:dropdown-item-danger={item.danger}
+              href={item.href}
+              role="menuitem"
+              onclick={close}
+            >
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              <span class="dropdown-item-label">{item.label}</span>
+            </a>
+          {:else}
+            <button
+              type="button"
+              class="dropdown-item"
+              class:dropdown-item-danger={item.danger}
+              disabled={item.disabled}
+              role="menuitem"
+              onclick={() => runItem(item)}
+            >
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              <span class="dropdown-item-label">{item.label}</span>
+            </button>
+          {/if}
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,21 @@
+export default Dropdown;
+type Dropdown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Dropdown: import("svelte").Component<{
+    items?: any[];
+    align?: string;
+    label?: string;
+    disabled?: boolean;
+    trigger: any;
+    menu: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    items?: any[];
+    align?: string;
+    label?: string;
+    disabled?: boolean;
+    trigger: any;
+    menu: any;
+} & Record<string, any>;

package/dist/components/Form/Checkbox.svelte

@@ -0,0 +1,37 @@
+<script>
+  let {
+    checked      = $bindable(false),
+    indeterminate = false,
+    label        = undefined,
+    disabled     = false,
+    children,
+    ...restProps
+  } = $props();
+
+  let inputEl = $state();
+
+  // Reflect the indeterminate prop onto the DOM node (not an HTML attribute).
+  $effect(() => {
+    if (inputEl) inputEl.indeterminate = indeterminate;
+  });
+</script>
+
+<label class="checkbox" class:checkbox-disabled={disabled}>
+  <input
+    bind:this={inputEl}
+    type="checkbox"
+    bind:checked
+    {disabled}
+    {...restProps}
+  />
+  <span class="checkbox-box">
+    <span class="material-symbols-outlined checkbox-icon">
+      {indeterminate ? 'remove' : 'check'}
+    </span>
+  </span>
+  {#if label}
+    <span class="checkbox-label">{label}</span>
+  {:else if children}
+    <span class="checkbox-label">{@render children()}</span>
+  {/if}
+</label>

package/dist/components/Form/Checkbox.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Checkbox;
+type Checkbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Checkbox: import("svelte").Component<{
+    checked?: boolean;
+    indeterminate?: boolean;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>, {}, "checked">;
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    label?: any;
+    disabled?: boolean;
+    children: any;
+} & Record<string, any>;

package/dist/components/Form/Field.svelte

@@ -0,0 +1,28 @@
+<script>
+  let {
+    label    = undefined,
+    required = false,
+    optional = false,
+    hint     = undefined,
+    error    = undefined,
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+<div class="field" {...restProps}>
+  {#if label}
+    <label class="label" class:label-required={required} class:label-optional={optional}>
+      {label}
+    </label>
+  {/if}
+  {@render children?.()}
+  {#if error}
+    <span class="field-error">
+      <span class="material-symbols-outlined" style="font-size:0.9rem">error</span>
+      {error}
+    </span>
+  {:else if hint}
+    <span class="field-hint">{hint}</span>
+  {/if}
+</div>

package/dist/components/Form/Field.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Field;
+type Field = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Field: import("svelte").Component<{
+    label?: any;
+    required?: boolean;
+    optional?: boolean;
+    hint?: any;
+    error?: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    label?: any;
+    required?: boolean;
+    optional?: boolean;
+    hint?: any;
+    error?: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Form/Input.svelte

@@ -0,0 +1,56 @@
+<script>
+  let {
+    value     = $bindable(''),
+    type      = 'text',
+    placeholder = '',
+    disabled  = false,
+    readonly  = false,
+    error     = false,
+    success   = false,
+    iconLeft  = undefined,
+    iconRight = undefined,
+    size      = 'md',
+    ...restProps
+  } = $props();
+
+  const sizeClass = { sm: 'input-sm', md: '', lg: 'input-lg' };
+
+  let inputClass = $derived([
+    'input',
+    sizeClass[size],
+    error   ? 'input-error'   : '',
+    success ? 'input-success' : '',
+    iconLeft  ? 'input-has-icon-left'  : '',
+    iconRight ? 'input-has-icon-right' : '',
+  ].filter(Boolean).join(' '));
+</script>
+
+{#if iconLeft || iconRight}
+  <div class="input-wrapper">
+    {#if iconLeft}
+      <span class="material-symbols-outlined input-icon-left">{iconLeft}</span>
+    {/if}
+    <input
+      class={inputClass}
+      {type}
+      {placeholder}
+      {disabled}
+      {readonly}
+      bind:value
+      {...restProps}
+    />
+    {#if iconRight}
+      <span class="material-symbols-outlined input-icon-right">{iconRight}</span>
+    {/if}
+  </div>
+{:else}
+  <input
+    class={inputClass}
+    {type}
+    {placeholder}
+    {disabled}
+    {readonly}
+    bind:value
+    {...restProps}
+  />
+{/if}

package/dist/components/Form/Input.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Input;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Input: import("svelte").Component<{
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    success?: boolean;
+    iconLeft?: any;
+    iconRight?: any;
+    size?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    success?: boolean;
+    iconLeft?: any;
+    iconRight?: any;
+    size?: string;
+} & Record<string, any>;