ui-ingredients 0.0.18 → 0.0.20

package/dist/date-picker/table.svelte

@@ -1,3 +1,32 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {TableProps} from '@zag-js/date-picker';
 
-<script lang="ts"></script>
+  export interface DatePickerTableProps
+    extends Assign<HtmlProps<'div'>, Omit<TableProps, 'view'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    datePickerContext,
+    datePickerTablePropsContext,
+    datePickerViewPropsContext,
+  } from './context.svelte.js';
+
+  let {id, columns, children, ...props}: DatePickerTableProps = $props();
+
+  let context = datePickerContext.get();
+
+  let viewProps = datePickerViewPropsContext.get();
+
+  let tableProps: TableProps = $derived({...viewProps, id, columns});
+
+  let attrs = $derived(mergeProps(props, context.getTableProps(tableProps)));
+
+  datePickerTablePropsContext.set(() => tableProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/table.svelte.d.ts

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

package/dist/date-picker/trigger.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/trigger.svelte.d.ts

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

package/dist/date-picker/view-control.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerViewControlProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerViewControlProps = $props();
+
+  let context = datePickerContext.get();
+
+  let viewProps = datePickerViewPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getViewControlProps(viewProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/view-control.svelte.d.ts

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

package/dist/date-picker/view.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ViewProps} from '@zag-js/date-picker';
+
+  export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
+  import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
+
+  let {view = 'day', children, ...props}: DatePickerViewProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, parts.view.attrs));
+
+  datePickerViewPropsContext.set(() => ({view}));
+</script>
+
+<div hidden={context.view !== view} {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/{view-trigger.svelte.d.ts → view.svelte.d.ts}

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ViewTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const View: $$__sveltets_2_IsomorphicComponent<DatePickerViewProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ViewTrigger = InstanceType<typeof ViewTrigger>;
-export default ViewTrigger;
+}, {}, {}, "">;
+type View = InstanceType<typeof View>;
+export default View;

package/dist/date-picker/year-select.svelte

@@ -1,3 +1,41 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerYearSelectProps extends HtmlProps<'select'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerYearSelectProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getYearSelectProps()));
+
+  function getYears() {
+    const currentYear = new Date().getFullYear();
+
+    const start = currentYear - 1000;
+    const until = currentYear + 1000;
+
+    const years = [];
+
+    for (let i = start; i <= until; i++) {
+      years.unshift(i);
+    }
+
+    return years;
+  }
+</script>
+
+<select {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each getYears() as year}
+      <option value={year}>{year}</option>
+    {/each}
+  {/if}
+</select>

package/dist/date-picker/year-select.svelte.d.ts

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

package/dist/date-picker/year-table-cell-trigger.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerYearTableCellTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerYearTableCellTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableCellProps = datePickerTableCellPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getYearTableCellTriggerProps(tableCellProps)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/year-table-cell-trigger.svelte.d.ts

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

package/dist/date-picker/year-table-cell.svelte

@@ -1,3 +1,41 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {TableCellProps, TableCellState} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-<script lang="ts"></script>
+  export interface DatePickerYearTableCellProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, TableCellProps> {
+    children?: Snippet<[state: TableCellState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
+
+  let {
+    /**/
+    value,
+    disabled,
+    columns,
+    children,
+    ...props
+  }: DatePickerYearTableCellProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableCellProps: TableCellProps = $derived({
+    value,
+    disabled,
+    columns,
+  });
+
+  let state = $derived(context.getYearTableCellState(tableCellProps));
+  let attrs = $derived(mergeProps(props, context.getYearTableCellProps(tableCellProps)));
+
+  datePickerTableCellPropsContext.set(() => tableCellProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/date-picker/year-table-cell.svelte.d.ts

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

package/dist/dialog/create-dialog.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as dialog from '@zag-js/dialog';
 export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateDialogReturn extends dialog.Api {
 }

package/dist/dialog/create-dialog.svelte.js

@@ -10,6 +10,7 @@ export function createDialog(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/editable/create-editable.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as editable from '@zag-js/editable';
 export interface CreateEditableProps extends Omit<editable.Context, 'id' | 'dir' | 'getRootNode' | 'edit.controlled'> {
     id?: string | null;
+    defaultEdit?: boolean;
 }
 export interface CreateEditableReturn extends editable.Api {
 }

package/dist/editable/create-editable.svelte.js

@@ -10,6 +10,7 @@ export function createEditable(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        edit: props.defaultEdit,
         getRootNode: environmentContext?.getRootNode,
         'edit.controlled': props.edit != null,
     }));

package/dist/hover-card/create-hover-card.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as hoverCard from '@zag-js/hover-card';
 export interface CreateHoverCardProps extends Omit<hoverCard.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateHoverCardReturn extends hoverCard.Api {
 }

package/dist/hover-card/create-hover-card.svelte.js

@@ -10,6 +10,7 @@ export function createHoverCard(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/menu/create-menu.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as menu from '@zag-js/menu';
 export interface CreateMenuProps extends Omit<menu.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateMenuReturn extends menu.Api {
 }

package/dist/menu/create-menu.svelte.js

@@ -10,6 +10,7 @@ export function createMenu(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/menu/option-item.svelte

@@ -1,13 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps, PickPartial} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {OptionItemProps, OptionItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuOptionItemProps
-    extends Assign<
-      Omit<HtmlProps<'div'>, 'children'>,
-      PickPartial<OptionItemProps, 'type' | 'checked'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, OptionItemProps> {
     children?: Snippet<[state: OptionItemState]>;
   }
 </script>
@@ -17,9 +14,9 @@
   import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
   let {
-    type = 'checkbox',
+    type,
     value,
-    checked = false,
+    checked,
     disabled,
     valueText,
     closeOnSelect,
@@ -30,7 +27,7 @@
 
   let context = menuContext.get();
 
-  let itemProps = $derived({
+  let itemProps: OptionItemProps = $derived({
     type,
     value,
     checked,

package/dist/popover/create-popover.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as popover from '@zag-js/popover';
 export interface CreatePopoverProps extends Omit<popover.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreatePopoverReturn extends popover.Api {
 }

package/dist/popover/create-popover.svelte.js

@@ -10,6 +10,7 @@ export function createPopover(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/select/create-select.svelte.d.ts

@@ -5,6 +5,7 @@ export interface CreateSelectProps<T> extends Omit<select.Context, 'id' | 'dir'
     itemToString?: (item: T) => string;
     itemToValue?: (item: T) => string;
     isItemDisabled?: (item: T) => boolean;
+    defaultOpen?: boolean;
 }
 export interface CreateSelectReturn extends select.Api {
 }

package/dist/select/create-select.svelte.js

@@ -16,6 +16,7 @@ export function createSelect(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         collection,
         'open.controlled': props.open != null,

package/dist/select/root.svelte

@@ -20,6 +20,7 @@
     form,
     name,
     open,
+    defaultOpen,
     value,
     items,
     invalid,
@@ -52,6 +53,7 @@
     form,
     name,
     open,
+    defaultOpen,
     value: $state.snapshot(value),
     items,
     invalid,

package/dist/tooltip/create-tooltip.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as tooltip from '@zag-js/tooltip';
 export interface CreateTooltipProps extends Omit<tooltip.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateTooltipReturn extends tooltip.Api {
 }

package/dist/tooltip/create-tooltip.svelte.js

@@ -10,6 +10,7 @@ export function createTooltip(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/types.d.ts

@@ -1,9 +1,7 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
 export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
-type KnownKeys<T> = keyof {
-    [K in keyof T as string extends K ? never : number extends K ? never : K]: string;
+type IntrinsicElements = keyof {
+    [K in keyof SvelteHTMLElements as string extends K ? never : number extends K ? never : K]: string;
 };
-type IntrinsicElements = KnownKeys<SvelteHTMLElements>;
 export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
-export type PickPartial<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/date-picker/view-trigger.svelte

@@ -1,3 +0,0 @@
-<script lang="ts" module></script>
-
-<script lang="ts"></script>