ui-ingredients 0.0.19 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +1 -1
  2. package/dist/collapsible/root.svelte +2 -2
  3. package/dist/collapsible/trigger.svelte +2 -2
  4. package/dist/date-picker/anatomy.js +3 -0
  5. package/dist/date-picker/clear-trigger.svelte +19 -2
  6. package/dist/date-picker/clear-trigger.svelte.d.ts +3 -3
  7. package/dist/date-picker/content.svelte +19 -2
  8. package/dist/date-picker/content.svelte.d.ts +3 -3
  9. package/dist/date-picker/context.svelte.d.ts +8 -8
  10. package/dist/date-picker/context.svelte.js +6 -14
  11. package/dist/date-picker/control.svelte +19 -2
  12. package/dist/date-picker/control.svelte.d.ts +3 -3
  13. package/dist/date-picker/create-date-picker.svelte.d.ts +14 -0
  14. package/dist/date-picker/create-date-picker.svelte.js +24 -0
  15. package/dist/date-picker/date-picker.d.ts +3 -3
  16. package/dist/date-picker/date-picker.js +3 -3
  17. package/dist/date-picker/day-table-cell-trigger.svelte +21 -2
  18. package/dist/date-picker/day-table-cell-trigger.svelte.d.ts +3 -3
  19. package/dist/date-picker/day-table-cell.svelte +40 -2
  20. package/dist/date-picker/day-table-cell.svelte.d.ts +3 -3
  21. package/dist/date-picker/index.d.ts +29 -0
  22. package/dist/date-picker/index.js +2 -0
  23. package/dist/date-picker/input.svelte +18 -2
  24. package/dist/date-picker/input.svelte.d.ts +3 -3
  25. package/dist/date-picker/label.svelte +20 -2
  26. package/dist/date-picker/label.svelte.d.ts +3 -3
  27. package/dist/date-picker/month-select.svelte +40 -2
  28. package/dist/date-picker/month-select.svelte.d.ts +3 -3
  29. package/dist/date-picker/month-table-cell-trigger.svelte +21 -2
  30. package/dist/date-picker/month-table-cell-trigger.svelte.d.ts +3 -3
  31. package/dist/date-picker/month-table-cell.svelte +40 -2
  32. package/dist/date-picker/month-table-cell.svelte.d.ts +3 -3
  33. package/dist/date-picker/next-trigger.svelte +21 -2
  34. package/dist/date-picker/next-trigger.svelte.d.ts +3 -3
  35. package/dist/date-picker/positioner.svelte +19 -2
  36. package/dist/date-picker/positioner.svelte.d.ts +3 -3
  37. package/dist/date-picker/preset-trigger.svelte +21 -2
  38. package/dist/date-picker/preset-trigger.svelte.d.ts +3 -3
  39. package/dist/date-picker/prev-trigger.svelte +21 -2
  40. package/dist/date-picker/prev-trigger.svelte.d.ts +3 -3
  41. package/dist/date-picker/range-text.svelte +23 -2
  42. package/dist/date-picker/range-text.svelte.d.ts +3 -3
  43. package/dist/date-picker/root.svelte +85 -2
  44. package/dist/date-picker/root.svelte.d.ts +3 -3
  45. package/dist/date-picker/table-body.svelte +21 -2
  46. package/dist/date-picker/table-body.svelte.d.ts +3 -3
  47. package/dist/date-picker/table-head.svelte +21 -2
  48. package/dist/date-picker/table-head.svelte.d.ts +3 -3
  49. package/dist/date-picker/table-header.svelte +21 -2
  50. package/dist/date-picker/table-header.svelte.d.ts +3 -3
  51. package/dist/date-picker/table-row.svelte +21 -2
  52. package/dist/date-picker/table-row.svelte.d.ts +3 -3
  53. package/dist/date-picker/table.svelte +31 -2
  54. package/dist/date-picker/table.svelte.d.ts +3 -3
  55. package/dist/date-picker/trigger.svelte +19 -2
  56. package/dist/date-picker/trigger.svelte.d.ts +3 -3
  57. package/dist/date-picker/view-control.svelte +21 -2
  58. package/dist/date-picker/view-control.svelte.d.ts +3 -3
  59. package/dist/date-picker/view.svelte +24 -0
  60. package/dist/date-picker/{view-trigger.svelte.d.ts → view.svelte.d.ts} +5 -5
  61. package/dist/date-picker/year-select.svelte +40 -2
  62. package/dist/date-picker/year-select.svelte.d.ts +3 -3
  63. package/dist/date-picker/year-table-cell-trigger.svelte +21 -2
  64. package/dist/date-picker/year-table-cell-trigger.svelte.d.ts +3 -3
  65. package/dist/date-picker/year-table-cell.svelte +40 -2
  66. package/dist/date-picker/year-table-cell.svelte.d.ts +3 -3
  67. package/package.json +2 -2
  68. package/dist/date-picker/view-trigger.svelte +0 -3
package/README.md CHANGED
@@ -43,7 +43,7 @@ npm install ui-ingredients
43
43
  - 🟢 Collapsible
44
44
  - ⚪ ColorPicker
45
45
  - 🟢 Combobox
46
- - 🟡 DatePicker
46
+ - 🟢 DatePicker
47
47
  - 🟢 Dialog
48
48
  - 🟢 Editable
49
49
  - 🟡 FileUpload
@@ -39,11 +39,11 @@
39
39
  onExitComplete,
40
40
  });
41
41
 
42
- let mergedProps = $derived(mergeProps(props, context.getRootProps()));
42
+ let attrs = $derived(mergeProps(props, context.getRootProps()));
43
43
 
44
44
  collapsibleContext.set(context);
45
45
  </script>
46
46
 
47
- <div {...mergedProps}>
47
+ <div {...attrs}>
48
48
  {@render children?.(context)}
49
49
  </div>
@@ -12,9 +12,9 @@
12
12
 
13
13
  let context = collapsibleContext.get();
14
14
 
15
- let mergedProps = $derived(mergeProps(props, context.getTriggerProps()));
15
+ let attrs = $derived(mergeProps(props, context.getTriggerProps()));
16
16
  </script>
17
17
 
18
- <button type="button" {...mergedProps}>
18
+ <button type="button" {...attrs}>
19
19
  {@render children?.()}
20
20
  </button>
@@ -0,0 +1,3 @@
1
+ import { anatomy } from '@zag-js/date-picker';
2
+ export const datePickerAnatomy = anatomy.extendWith('view');
3
+ export const parts = datePickerAnatomy.build();
@@ -1,3 +1,20 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerClearTriggerProps extends HtmlProps<'button'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerClearTriggerProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
16
+ </script>
17
+
18
+ <button type="button" {...attrs}>
19
+ {@render children?.()}
20
+ </button>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerClearTriggerProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type ClearTrigger = InstanceType<typeof ClearTrigger>;
18
18
  export default ClearTrigger;
@@ -1,3 +1,20 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerContentProps extends HtmlProps<'div'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerContentProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getContentProps()));
16
+ </script>
17
+
18
+ <div {...attrs}>
19
+ {@render children?.()}
20
+ </div>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const Content: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Content: $$__sveltets_2_IsomorphicComponent<DatePickerContentProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Content = InstanceType<typeof Content>;
18
18
  export default Content;
@@ -1,8 +1,8 @@
1
- import * as datePicker from '@zag-js/date-picker';
2
- export interface CreateDatePickerContextProps extends datePicker.Context {
3
- }
4
- export interface CreateDatePickerContextReturn extends ReturnType<typeof createDatePickerContext> {
5
- }
6
- export declare function createDatePickerContext(props: CreateDatePickerContextProps): any;
7
- export declare function setDatePickerContext(value: CreateDatePickerContextReturn): void;
8
- export declare function useDatePickerContext(): CreateDatePickerContextReturn;
1
+ import { Context } from '../utils.svelte.js';
2
+ import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
3
+ import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
4
+ export declare const datePickerContext: Context<CreateDatePickerReturn>;
5
+ export declare const datePickerViewPropsContext: Context<ViewProps>;
6
+ export declare const datePickerTablePropsContext: Context<TableProps>;
7
+ export declare const datePickerTableCellPropsContext: Context<TableCellProps>;
8
+ export declare const datePickerDayTableCellPropsContext: Context<DayTableCellProps>;
@@ -1,14 +1,6 @@
1
- import * as datePicker from '@zag-js/date-picker';
2
- import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
3
- import { getContext, setContext } from 'svelte';
4
- export function createDatePickerContext(props) {
5
- const [state, send] = useMachine(datePicker.machine(props));
6
- const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
7
- return api;
8
- }
9
- export function setDatePickerContext(value) {
10
- setContext('DatePicker', value);
11
- }
12
- export function useDatePickerContext() {
13
- return getContext('DatePicker');
14
- }
1
+ import { Context } from '../utils.svelte.js';
2
+ export const datePickerContext = new Context('DatePicker');
3
+ export const datePickerViewPropsContext = new Context('DatePickerView');
4
+ export const datePickerTablePropsContext = new Context('DatePickerTable');
5
+ export const datePickerTableCellPropsContext = new Context('DatePickerTableCell');
6
+ export const datePickerDayTableCellPropsContext = new Context('DatePickerDayTableCell');
@@ -1,3 +1,20 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerControlProps extends HtmlProps<'div'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerControlProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getControlProps()));
16
+ </script>
17
+
18
+ <div {...attrs}>
19
+ {@render children?.()}
20
+ </div>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const Control: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Control: $$__sveltets_2_IsomorphicComponent<DatePickerControlProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Control = InstanceType<typeof Control>;
18
18
  export default Control;
@@ -0,0 +1,14 @@
1
+ import * as datePicker from '@zag-js/date-picker';
2
+ type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'locale' | 'getRootNode' | 'open.controlled';
3
+ export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
4
+ id?: string | null;
5
+ min?: string | Date;
6
+ max?: string | Date;
7
+ value?: string[] | Date[];
8
+ focusedValue?: string | Date;
9
+ defaultOpen?: boolean;
10
+ }
11
+ export interface CreateDatePickerReturn extends datePicker.Api {
12
+ }
13
+ export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
14
+ export {};
@@ -0,0 +1,24 @@
1
+ import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
2
+ import { getLocaleContext } from '../locale-provider/context.svelte.js';
3
+ import { createUniqueId } from '../utils.svelte.js';
4
+ import * as datePicker from '@zag-js/date-picker';
5
+ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
6
+ export function createDatePicker(props) {
7
+ const localeContext = getLocaleContext();
8
+ const environmentContext = getEnvironmentContext();
9
+ const [state, send] = useMachine(datePicker.machine({
10
+ ...props,
11
+ id: props.id ?? createUniqueId(),
12
+ dir: localeContext?.dir,
13
+ min: props.min ? datePicker.parse(props.min) : undefined,
14
+ max: props.max ? datePicker.parse(props.max) : undefined,
15
+ value: props.value ? datePicker.parse(props.value) : undefined,
16
+ focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
17
+ open: props.defaultOpen,
18
+ 'open.controlled': props.open != null,
19
+ locale: localeContext?.locale,
20
+ getRootNode: environmentContext?.getRootNode,
21
+ }));
22
+ const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
23
+ return api;
24
+ }
@@ -1,8 +1,8 @@
1
1
  export { default as ClearTrigger } from './clear-trigger.svelte';
2
2
  export { default as Content } from './content.svelte';
3
3
  export { default as Control } from './control.svelte';
4
- export { default as TableCellTrigger } from './day-table-cell-trigger.svelte';
5
- export { default as TableCell } from './day-table-cell.svelte';
4
+ export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
5
+ export { default as DayTableCell } from './day-table-cell.svelte';
6
6
  export { default as Input } from './input.svelte';
7
7
  export { default as Label } from './label.svelte';
8
8
  export { default as MonthSelect } from './month-select.svelte';
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
21
21
  export { default as Table } from './table.svelte';
22
22
  export { default as Trigger } from './trigger.svelte';
23
23
  export { default as ViewControl } from './view-control.svelte';
24
- export { default as ViewTrigger } from './view-trigger.svelte';
24
+ export { default as View } from './view.svelte';
25
25
  export { default as YearSelect } from './year-select.svelte';
26
26
  export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
27
27
  export { default as YearTableCell } from './year-table-cell.svelte';
@@ -1,8 +1,8 @@
1
1
  export { default as ClearTrigger } from './clear-trigger.svelte';
2
2
  export { default as Content } from './content.svelte';
3
3
  export { default as Control } from './control.svelte';
4
- export { default as TableCellTrigger } from './day-table-cell-trigger.svelte';
5
- export { default as TableCell } from './day-table-cell.svelte';
4
+ export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
5
+ export { default as DayTableCell } from './day-table-cell.svelte';
6
6
  export { default as Input } from './input.svelte';
7
7
  export { default as Label } from './label.svelte';
8
8
  export { default as MonthSelect } from './month-select.svelte';
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
21
21
  export { default as Table } from './table.svelte';
22
22
  export { default as Trigger } from './trigger.svelte';
23
23
  export { default as ViewControl } from './view-control.svelte';
24
- export { default as ViewTrigger } from './view-trigger.svelte';
24
+ export { default as View } from './view.svelte';
25
25
  export { default as YearSelect } from './year-select.svelte';
26
26
  export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
27
27
  export { default as YearTableCell } from './year-table-cell.svelte';
@@ -1,3 +1,22 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let tableCellProps = datePickerDayTableCellPropsContext.get();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getDayTableCellTriggerProps(tableCellProps)));
18
+ </script>
19
+
20
+ <button type="button" {...attrs}>
21
+ {@render children?.()}
22
+ </button>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellTriggerProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type DayTableCellTrigger = InstanceType<typeof DayTableCellTrigger>;
18
18
  export default DayTableCellTrigger;
@@ -1,3 +1,41 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlProps} from '../types.js';
3
+ import type {DayTableCellProps, DayTableCellState} from '@zag-js/date-picker';
4
+ import type {Snippet} from 'svelte';
2
5
 
3
- <script lang="ts"></script>
6
+ export interface DatePickerDayTableCellProps
7
+ extends Assign<Omit<HtmlProps<'div'>, 'children'>, DayTableCellProps> {
8
+ children?: Snippet<[state: DayTableCellState]>;
9
+ }
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import {mergeProps} from '@zag-js/svelte';
14
+ import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
15
+
16
+ let {
17
+ /**/
18
+ value,
19
+ disabled,
20
+ visibleRange,
21
+ children,
22
+ ...props
23
+ }: DatePickerDayTableCellProps = $props();
24
+
25
+ let context = datePickerContext.get();
26
+
27
+ let tableCellProps: DayTableCellProps = $derived({
28
+ value,
29
+ disabled,
30
+ visibleRange,
31
+ });
32
+
33
+ let state = $derived(context.getDayTableCellState(tableCellProps));
34
+ let attrs = $derived(mergeProps(props, context.getDayTableCellProps(tableCellProps)));
35
+
36
+ datePickerDayTableCellPropsContext.set(() => tableCellProps);
37
+ </script>
38
+
39
+ <div {...attrs}>
40
+ {@render children?.(state)}
41
+ </div>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const DayTableCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const DayTableCell: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type DayTableCell = InstanceType<typeof DayTableCell>;
18
18
  export default DayTableCell;
@@ -1 +1,30 @@
1
+ export { parse as parseDate } from '@zag-js/date-picker';
2
+ export { datePickerAnatomy } from './anatomy.js';
1
3
  export * as DatePicker from './date-picker.js';
4
+ export type { DatePickerClearTriggerProps } from './clear-trigger.svelte';
5
+ export type { DatePickerContentProps } from './content.svelte';
6
+ export type { DatePickerControlProps } from './control.svelte';
7
+ export type { DatePickerDayTableCellTriggerProps } from './day-table-cell-trigger.svelte';
8
+ export type { DatePickerDayTableCellProps } from './day-table-cell.svelte';
9
+ export type { DatePickerInputProps } from './input.svelte';
10
+ export type { DatePickerLabelProps } from './label.svelte';
11
+ export type { DatePickerMonthSelectProps } from './month-select.svelte';
12
+ export type { DatePickerMonthTableCellTriggerProps } from './month-table-cell-trigger.svelte';
13
+ export type { DatePickerMonthTableCellProps } from './month-table-cell.svelte';
14
+ export type { DatePickerNextTriggerProps } from './next-trigger.svelte';
15
+ export type { DatePickerPositionerProps } from './positioner.svelte';
16
+ export type { DatePickerPresetTriggerProps } from './preset-trigger.svelte';
17
+ export type { DatePickerPrevTriggerProps } from './prev-trigger.svelte';
18
+ export type { DatePickerRangeTextProps } from './range-text.svelte';
19
+ export type { DatePickerProps } from './root.svelte';
20
+ export type { DatePickerTableBodyProps } from './table-body.svelte';
21
+ export type { DatePickerTableHeadProps } from './table-head.svelte';
22
+ export type { DatePickerTableHeaderProps } from './table-header.svelte';
23
+ export type { DatePickerTableRowProps } from './table-row.svelte';
24
+ export type { DatePickerTableProps } from './table.svelte';
25
+ export type { DatePickerTriggerProps } from './trigger.svelte';
26
+ export type { DatePickerViewControlProps } from './view-control.svelte';
27
+ export type { DatePickerViewProps } from './view.svelte';
28
+ export type { DatePickerYearSelectProps } from './year-select.svelte';
29
+ export type { DatePickerYearTableCellTriggerProps } from './year-table-cell-trigger.svelte';
30
+ export type { DatePickerYearTableCellProps } from './year-table-cell.svelte';
@@ -1 +1,3 @@
1
+ export { parse as parseDate } from '@zag-js/date-picker';
2
+ export { datePickerAnatomy } from './anatomy.js';
1
3
  export * as DatePicker from './date-picker.js';
@@ -1,3 +1,19 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlProps} from '../types.js';
3
+ import type {InputProps} from '@zag-js/date-picker';
2
4
 
3
- <script lang="ts"></script>
5
+ export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {datePickerContext} from './context.svelte.js';
11
+
12
+ let {index, children, ...props}: DatePickerInputProps = $props();
13
+
14
+ let context = datePickerContext.get();
15
+
16
+ let attrs = $derived(mergeProps(props, context.getInputProps({index})));
17
+ </script>
18
+
19
+ <input {...attrs} />
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Input: $$__sveltets_2_IsomorphicComponent<DatePickerInputProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Input = InstanceType<typeof Input>;
18
18
  export default Input;
@@ -1,3 +1,21 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlProps} from '../types.js';
3
+ import type {LabelProps} from '@zag-js/date-picker';
2
4
 
3
- <script lang="ts"></script>
5
+ export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {datePickerContext} from './context.svelte.js';
11
+
12
+ let {index, children, ...props}: DatePickerLabelProps = $props();
13
+
14
+ let context = datePickerContext.get();
15
+
16
+ let attrs = $derived(mergeProps(props, context.getLabelProps({index})));
17
+ </script>
18
+
19
+ <label {...attrs}>
20
+ {@render children?.()}
21
+ </label>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Label: $$__sveltets_2_IsomorphicComponent<DatePickerLabelProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Label = InstanceType<typeof Label>;
18
18
  export default Label;
@@ -1,3 +1,41 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerMonthSelectProps extends HtmlProps<'select'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerMonthSelectProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getMonthSelectProps()));
16
+
17
+ const months = [
18
+ 'January',
19
+ 'February',
20
+ 'March',
21
+ 'April',
22
+ 'May',
23
+ 'June',
24
+ 'July',
25
+ 'August',
26
+ 'September',
27
+ 'October',
28
+ 'November',
29
+ 'December',
30
+ ];
31
+ </script>
32
+
33
+ <select {...attrs}>
34
+ {#if children}
35
+ {@render children()}
36
+ {:else}
37
+ {#each months as month, index}
38
+ <option value={index}>{month}</option>
39
+ {/each}
40
+ {/if}
41
+ </select>
@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
2
2
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
3
  $$bindings?: Bindings;
4
4
  } & Exports;
5
- (internal: unknown, props: {
5
+ (internal: unknown, props: Props & {
6
6
  $$events?: Events;
7
7
  $$slots?: Slots;
8
8
  }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
11
11
  };
12
12
  z_$$bindings?: Bindings;
13
13
  }
14
- declare const MonthSelect: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const MonthSelect: $$__sveltets_2_IsomorphicComponent<DatePickerMonthSelectProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type MonthSelect = InstanceType<typeof MonthSelect>;
18
18
  export default MonthSelect;
@@ -1,3 +1,22 @@
1
- <script lang="ts" module></script>
1
+ <script lang="ts" module>
2
+ import type {HtmlProps} from '../types.js';
2
3
 
3
- <script lang="ts"></script>
4
+ export interface DatePickerMonthTableCellTriggerProps extends HtmlProps<'button'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerMonthTableCellTriggerProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let tableCellProps = datePickerTableCellPropsContext.get();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getMonthTableCellTriggerProps(tableCellProps)));
18
+ </script>
19
+
20
+ <button type="button" {...attrs}>
21
+ {@render children?.()}
22
+ </button>