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
@@ -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 Table: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Table: $$__sveltets_2_IsomorphicComponent<DatePickerTableProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Table = InstanceType<typeof Table>;
18
18
  export default Table;
@@ -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 DatePickerTriggerProps 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}: DatePickerTriggerProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getTriggerProps()));
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 Trigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const Trigger: $$__sveltets_2_IsomorphicComponent<DatePickerTriggerProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type Trigger = InstanceType<typeof Trigger>;
18
18
  export default Trigger;
@@ -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 DatePickerViewControlProps extends HtmlProps<'div'> {}
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import {mergeProps} from '@zag-js/svelte';
9
+ import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
10
+
11
+ let {children, ...props}: DatePickerViewControlProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let viewProps = datePickerViewPropsContext.get();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getViewControlProps(viewProps)));
18
+ </script>
19
+
20
+ <div {...attrs}>
21
+ {@render children?.()}
22
+ </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 ViewControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const ViewControl: $$__sveltets_2_IsomorphicComponent<DatePickerViewControlProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type ViewControl = InstanceType<typeof ViewControl>;
18
18
  export default ViewControl;
@@ -0,0 +1,24 @@
1
+ <script lang="ts" module>
2
+ import type {Assign, HtmlProps} from '../types.js';
3
+ import type {ViewProps} from '@zag-js/date-picker';
4
+
5
+ export interface DatePickerViewProps extends Assign<HtmlProps<'div'>, ViewProps> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import {mergeProps} from '@zag-js/svelte';
10
+ import {parts} from './anatomy.js';
11
+ import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
12
+
13
+ let {view = 'day', children, ...props}: DatePickerViewProps = $props();
14
+
15
+ let context = datePickerContext.get();
16
+
17
+ let attrs = $derived(mergeProps(props, parts.view.attrs));
18
+
19
+ datePickerViewPropsContext.set(() => ({view}));
20
+ </script>
21
+
22
+ <div hidden={context.view !== view} {...attrs}>
23
+ {@render children?.()}
24
+ </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 ViewTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const View: $$__sveltets_2_IsomorphicComponent<DatePickerViewProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type ViewTrigger = InstanceType<typeof ViewTrigger>;
18
- export default ViewTrigger;
16
+ }, {}, {}, "">;
17
+ type View = InstanceType<typeof View>;
18
+ export default View;
@@ -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 DatePickerYearSelectProps 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}: DatePickerYearSelectProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let attrs = $derived(mergeProps(props, context.getYearSelectProps()));
16
+
17
+ function getYears() {
18
+ const currentYear = new Date().getFullYear();
19
+
20
+ const start = currentYear - 1000;
21
+ const until = currentYear + 1000;
22
+
23
+ const years = [];
24
+
25
+ for (let i = start; i <= until; i++) {
26
+ years.unshift(i);
27
+ }
28
+
29
+ return years;
30
+ }
31
+ </script>
32
+
33
+ <select {...attrs}>
34
+ {#if children}
35
+ {@render children()}
36
+ {:else}
37
+ {#each getYears() as year}
38
+ <option value={year}>{year}</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 YearSelect: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const YearSelect: $$__sveltets_2_IsomorphicComponent<DatePickerYearSelectProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type YearSelect = InstanceType<typeof YearSelect>;
18
18
  export default YearSelect;
@@ -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 DatePickerYearTableCellTriggerProps 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}: DatePickerYearTableCellTriggerProps = $props();
12
+
13
+ let context = datePickerContext.get();
14
+
15
+ let tableCellProps = datePickerTableCellPropsContext.get();
16
+
17
+ let attrs = $derived(mergeProps(props, context.getYearTableCellTriggerProps(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 YearTableCellTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const YearTableCellTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerYearTableCellTriggerProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type YearTableCellTrigger = InstanceType<typeof YearTableCellTrigger>;
18
18
  export default YearTableCellTrigger;
@@ -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 {TableCellProps, TableCellState} from '@zag-js/date-picker';
4
+ import type {Snippet} from 'svelte';
2
5
 
3
- <script lang="ts"></script>
6
+ export interface DatePickerYearTableCellProps
7
+ extends Assign<Omit<HtmlProps<'div'>, 'children'>, TableCellProps> {
8
+ children?: Snippet<[state: TableCellState]>;
9
+ }
10
+ </script>
11
+
12
+ <script lang="ts">
13
+ import {mergeProps} from '@zag-js/svelte';
14
+ import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
15
+
16
+ let {
17
+ /**/
18
+ value,
19
+ disabled,
20
+ columns,
21
+ children,
22
+ ...props
23
+ }: DatePickerYearTableCellProps = $props();
24
+
25
+ let context = datePickerContext.get();
26
+
27
+ let tableCellProps: TableCellProps = $derived({
28
+ value,
29
+ disabled,
30
+ columns,
31
+ });
32
+
33
+ let state = $derived(context.getYearTableCellState(tableCellProps));
34
+ let attrs = $derived(mergeProps(props, context.getYearTableCellProps(tableCellProps)));
35
+
36
+ datePickerTableCellPropsContext.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 YearTableCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
14
+ declare const YearTableCell: $$__sveltets_2_IsomorphicComponent<DatePickerYearTableCellProps, {
15
15
  [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
16
+ }, {}, {}, "">;
17
17
  type YearTableCell = InstanceType<typeof YearTableCell>;
18
18
  export default YearTableCell;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
- "version": "0.0.19",
4
+ "version": "0.0.20",
5
5
  "packageManager": "pnpm@9.7.0",
6
6
  "svelte": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -140,7 +140,7 @@
140
140
  "postcss": "8.4.41",
141
141
  "publint": "0.2.10",
142
142
  "release-it": "17.6.0",
143
- "svelte": "5.0.0-next.238",
143
+ "svelte": "5.0.0-next.236",
144
144
  "svelte-check": "3.8.6",
145
145
  "tailwindcss": "3.4.10",
146
146
  "typescript": "5.5.4",
@@ -1,3 +0,0 @@
1
- <script lang="ts" module></script>
2
-
3
- <script lang="ts"></script>