ui-ingredients 0.0.19 → 0.0.20

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -140,7 +140,7 @@
     "postcss": "8.4.41",
     "publint": "0.2.10",
     "release-it": "17.6.0",
-    "svelte": "5.0.0-next.238",
+    "svelte": "5.0.0-next.236",
     "svelte-check": "3.8.6",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",

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

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