ui-ingredients 0.0.4 → 0.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion/context.svelte.js +1 -1
  3. package/dist/clipboard/root.svelte +1 -1
  4. package/dist/combobox/context.svelte.js +3 -3
  5. package/dist/combobox/root.svelte +1 -1
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +1 -0
  8. package/dist/number-input/root.svelte +1 -1
  9. package/dist/radio-group/context.svelte.js +1 -1
  10. package/dist/select/context.svelte.js +3 -3
  11. package/dist/slider/context.svelte.js +1 -1
  12. package/dist/steps/content.svelte +12 -0
  13. package/dist/steps/content.svelte.d.ts +23 -0
  14. package/dist/steps/context.svelte.d.ts +10 -0
  15. package/dist/steps/context.svelte.js +20 -0
  16. package/dist/steps/index.d.ts +10 -0
  17. package/dist/steps/index.js +10 -0
  18. package/dist/steps/indicator.svelte +13 -0
  19. package/dist/steps/indicator.svelte.d.ts +22 -0
  20. package/dist/steps/item.svelte +13 -0
  21. package/dist/steps/item.svelte.d.ts +23 -0
  22. package/dist/steps/list.svelte +12 -0
  23. package/dist/steps/list.svelte.d.ts +22 -0
  24. package/dist/steps/next-trigger.svelte +12 -0
  25. package/dist/steps/next-trigger.svelte.d.ts +22 -0
  26. package/dist/steps/prev-trigger.svelte +12 -0
  27. package/dist/steps/prev-trigger.svelte.d.ts +22 -0
  28. package/dist/steps/progress.svelte +12 -0
  29. package/dist/steps/progress.svelte.d.ts +22 -0
  30. package/dist/steps/root.svelte +38 -0
  31. package/dist/steps/root.svelte.d.ts +25 -0
  32. package/dist/steps/separator.svelte +13 -0
  33. package/dist/steps/separator.svelte.d.ts +22 -0
  34. package/dist/steps/trigger.svelte +13 -0
  35. package/dist/steps/trigger.svelte.d.ts +22 -0
  36. package/dist/types.d.ts +1 -1
  37. package/package.json +1 -1
  38. package/dist/steps/.gitkeep +0 -0
package/README.md CHANGED
@@ -63,7 +63,7 @@ npm install ui-ingredients
63
63
  - ⚪ SignaturePad
64
64
  - 🟢 Slider
65
65
  - ⚪ Splitter
66
- - Steps
66
+ - 🟢 Steps
67
67
  - 🟢 Switch
68
68
  - 🟢 Tabs
69
69
  - 🟡 TagsInput
@@ -13,7 +13,7 @@ export function useAccordionContext() {
13
13
  return getContext('Accordion');
14
14
  }
15
15
  export function setAccordionItemContext(value) {
16
- setContext('AccordionItem', reflect(() => value));
16
+ setContext('AccordionItem', value);
17
17
  }
18
18
  export function useAccordionItemContext() {
19
19
  return getContext('AccordionItem');
@@ -16,7 +16,7 @@ let {
16
16
  let context = createClipboardContext({
17
17
  id,
18
18
  ids,
19
- value,
19
+ value: $state.snapshot(value),
20
20
  timeout,
21
21
  onStatusChange,
22
22
  getRootNode
@@ -19,19 +19,19 @@ export function createComboboxContext(props) {
19
19
  return api;
20
20
  }
21
21
  export function setComboboxContext(value) {
22
- setContext('Combobox', reflect(() => value));
22
+ setContext('Combobox', value);
23
23
  }
24
24
  export function useComboboxContext() {
25
25
  return getContext('Combobox');
26
26
  }
27
27
  export function setComboboxItemContext(value) {
28
- setContext('ComboboxItem', reflect(() => value));
28
+ setContext('ComboboxItem', value);
29
29
  }
30
30
  export function useComboboxItemContext() {
31
31
  return getContext('ComboboxItem');
32
32
  }
33
33
  export function setComboboxItemGroupContext(value) {
34
- setContext('ComboboxItemGroup', reflect(() => value));
34
+ setContext('ComboboxItemGroup', value);
35
35
  }
36
36
  export function useComboboxItemGroupContext() {
37
37
  return getContext('ComboboxItemGroup');
@@ -59,7 +59,7 @@ let context = createComboboxContext({
59
59
  open,
60
60
  "open.controlled": openControlled,
61
61
  items,
62
- value,
62
+ value: $state.snapshot(value),
63
63
  invalid,
64
64
  disabled,
65
65
  multiple,
package/dist/index.d.ts CHANGED
@@ -32,6 +32,8 @@ export * as Select from './select/index.js';
32
32
  export type { SelectClearTriggerProps, SelectContentProps, SelectControlProps, SelectHiddenSelectProps, SelectIndicatorProps, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueTextProps, } from './select/index.js';
33
33
  export * as Slider from './slider/index.js';
34
34
  export type { SliderControlProps, SliderHiddenInputProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueTextProps, } from './slider/index.js';
35
+ export * as Steps from './steps/index.js';
36
+ export type { StepsContentProps, StepsIndicatorProps, StepsItemProps, StepsListProps, StepsNextTriggerProps, StepsPrevTriggerProps, StepsProgressProps, StepsProps, StepsSeparatorProps, StepsTriggerProps, } from './steps/index.js';
35
37
  export * as Switch from './switch/index.js';
36
38
  export type { SwitchControlProps, SwitchHiddenInputProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, } from './switch/index.js';
37
39
  export * as Tabs from './tabs/index.js';
package/dist/index.js CHANGED
@@ -15,6 +15,7 @@ export * as Progress from './progress/index.js';
15
15
  export * as RadioGroup from './radio-group/index.js';
16
16
  export * as Select from './select/index.js';
17
17
  export * as Slider from './slider/index.js';
18
+ export * as Steps from './steps/index.js';
18
19
  export * as Switch from './switch/index.js';
19
20
  export * as Tabs from './tabs/index.js';
20
21
  export * as ToggleGroup from './toggle-group/index.js';
@@ -43,7 +43,7 @@ let context = createNumberInputContext({
43
43
  step,
44
44
  name,
45
45
  form,
46
- value,
46
+ value: $state.snapshot(value),
47
47
  locale,
48
48
  pattern,
49
49
  invalid,
@@ -13,7 +13,7 @@ export function useRadioGroupContext() {
13
13
  return getContext('RadioGroup');
14
14
  }
15
15
  export function setRadioGroupItemContext(value) {
16
- setContext('RadioGroupItem', reflect(() => value));
16
+ setContext('RadioGroupItem', value);
17
17
  }
18
18
  export function useRadioGroupItemContext() {
19
19
  return getContext('RadioGroupItem');
@@ -19,19 +19,19 @@ export function createSelectContext(props) {
19
19
  return api;
20
20
  }
21
21
  export function setSelectContext(value) {
22
- setContext('Select', reflect(() => value));
22
+ setContext('Select', value);
23
23
  }
24
24
  export function useSelectContext() {
25
25
  return getContext('Select');
26
26
  }
27
27
  export function setSelectItemGroupContext(value) {
28
- setContext('SelectItemGroup', reflect(() => value));
28
+ setContext('SelectItemGroup', value);
29
29
  }
30
30
  export function useSelectItemGroupContext() {
31
31
  return getContext('SelectItemGroup');
32
32
  }
33
33
  export function setSelectItemContext(value) {
34
- setContext('SelectItem', reflect(() => value));
34
+ setContext('SelectItem', value);
35
35
  }
36
36
  export function useSelectItemContext() {
37
37
  return getContext('SelectItem');
@@ -13,7 +13,7 @@ export function useSliderContext() {
13
13
  return getContext('Slider');
14
14
  }
15
15
  export function setSliderThumbContext(value) {
16
- setContext('SliderThumb', reflect(() => value));
16
+ setContext('SliderThumb', value);
17
17
  }
18
18
  export function useSliderThumbContext() {
19
19
  return getContext('SliderThumb');
@@ -0,0 +1,12 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext } from "./context.svelte.js";
5
+ let { index, children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getContentProps({ index })));
8
+ </script>
9
+
10
+ <div {...attrs}>
11
+ {@render children?.()}
12
+ </div>
@@ -0,0 +1,23 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { ItemProps } from '@zag-js/steps';
3
+ import type { SvelteHTMLElements } from 'svelte/elements';
4
+ export interface StepsContentProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
5
+ }
6
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
7
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
8
+ $$bindings?: Bindings;
9
+ } & Exports;
10
+ (internal: unknown, props: Props & {
11
+ $$events?: Events;
12
+ $$slots?: Slots;
13
+ }): Exports & {
14
+ $set?: any;
15
+ $on?: any;
16
+ };
17
+ z_$$bindings?: Bindings;
18
+ }
19
+ declare const Content: $$__sveltets_2_IsomorphicComponent<StepsContentProps, {
20
+ [evt: string]: CustomEvent<any>;
21
+ }, {}, {}, "">;
22
+ type Content = InstanceType<typeof Content>;
23
+ export default Content;
@@ -0,0 +1,10 @@
1
+ import * as steps from '@zag-js/steps';
2
+ export interface CreateStepsContextProps extends steps.Context {
3
+ }
4
+ export interface CreateStepsContextReturn extends ReturnType<typeof createStepsContext> {
5
+ }
6
+ export declare function createStepsContext(props: CreateStepsContextProps): any;
7
+ export declare function setStepsContext(value: CreateStepsContextReturn): void;
8
+ export declare function useStepsContext(): CreateStepsContextReturn;
9
+ export declare function setStepsItemContext(value: steps.ItemProps): void;
10
+ export declare function useStepsItemContext(): steps.ItemProps;
@@ -0,0 +1,20 @@
1
+ import * as steps from '@zag-js/steps';
2
+ import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
3
+ import { getContext, setContext } from 'svelte';
4
+ export function createStepsContext(props) {
5
+ const [state, send] = useMachine(steps.machine(props));
6
+ const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
7
+ return api;
8
+ }
9
+ export function setStepsContext(value) {
10
+ setContext('Steps', value);
11
+ }
12
+ export function useStepsContext() {
13
+ return getContext('Steps');
14
+ }
15
+ export function setStepsItemContext(value) {
16
+ setContext('StepsItem', value);
17
+ }
18
+ export function useStepsItemContext() {
19
+ return getContext('StepsItem');
20
+ }
@@ -0,0 +1,10 @@
1
+ export { default as Content, type StepsContentProps } from './content.svelte';
2
+ export { default as Indicator, type StepsIndicatorProps } from './indicator.svelte';
3
+ export { default as Item, type StepsItemProps } from './item.svelte';
4
+ export { default as List, type StepsListProps } from './list.svelte';
5
+ export { default as NextTrigger, type StepsNextTriggerProps } from './next-trigger.svelte';
6
+ export { default as PrevTrigger, type StepsPrevTriggerProps } from './prev-trigger.svelte';
7
+ export { default as Progress, type StepsProgressProps } from './progress.svelte';
8
+ export { default as Root, type StepsProps } from './root.svelte';
9
+ export { default as Separator, type StepsSeparatorProps } from './separator.svelte';
10
+ export { default as Trigger, type StepsTriggerProps } from './trigger.svelte';
@@ -0,0 +1,10 @@
1
+ export { default as Content } from './content.svelte';
2
+ export { default as Indicator } from './indicator.svelte';
3
+ export { default as Item } from './item.svelte';
4
+ export { default as List } from './list.svelte';
5
+ export { default as NextTrigger } from './next-trigger.svelte';
6
+ export { default as PrevTrigger } from './prev-trigger.svelte';
7
+ export { default as Progress } from './progress.svelte';
8
+ export { default as Root } from './root.svelte';
9
+ export { default as Separator } from './separator.svelte';
10
+ export { default as Trigger } from './trigger.svelte';
@@ -0,0 +1,13 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let itemContext = useStepsItemContext();
8
+ let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemContext)));
9
+ </script>
10
+
11
+ <div {...attrs}>
12
+ {@render children?.()}
13
+ </div>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsIndicatorProps extends Assign<SvelteHTMLElements['div'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const Indicator: $$__sveltets_2_IsomorphicComponent<StepsIndicatorProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type Indicator = InstanceType<typeof Indicator>;
22
+ export default Indicator;
@@ -0,0 +1,13 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { setStepsItemContext, useStepsContext } from "./context.svelte.js";
5
+ let { index, children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getItemProps({ index })));
8
+ setStepsItemContext({ index });
9
+ </script>
10
+
11
+ <div {...attrs}>
12
+ {@render children?.()}
13
+ </div>
@@ -0,0 +1,23 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { ItemProps } from '@zag-js/steps';
3
+ import type { SvelteHTMLElements } from 'svelte/elements';
4
+ export interface StepsItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
5
+ }
6
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
7
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
8
+ $$bindings?: Bindings;
9
+ } & Exports;
10
+ (internal: unknown, props: Props & {
11
+ $$events?: Events;
12
+ $$slots?: Slots;
13
+ }): Exports & {
14
+ $set?: any;
15
+ $on?: any;
16
+ };
17
+ z_$$bindings?: Bindings;
18
+ }
19
+ declare const Item: $$__sveltets_2_IsomorphicComponent<StepsItemProps, {
20
+ [evt: string]: CustomEvent<any>;
21
+ }, {}, {}, "">;
22
+ type Item = InstanceType<typeof Item>;
23
+ export default Item;
@@ -0,0 +1,12 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getListProps()));
8
+ </script>
9
+
10
+ <div {...attrs}>
11
+ {@render children?.()}
12
+ </div>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsListProps extends Assign<SvelteHTMLElements['div'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const List: $$__sveltets_2_IsomorphicComponent<StepsListProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type List = InstanceType<typeof List>;
22
+ export default List;
@@ -0,0 +1,12 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
8
+ </script>
9
+
10
+ <button type="button" {...attrs}>
11
+ {@render children?.()}
12
+ </button>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const NextTrigger: $$__sveltets_2_IsomorphicComponent<StepsNextTriggerProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type NextTrigger = InstanceType<typeof NextTrigger>;
22
+ export default NextTrigger;
@@ -0,0 +1,12 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
8
+ </script>
9
+
10
+ <button type="button" {...attrs}>
11
+ {@render children?.()}
12
+ </button>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const PrevTrigger: $$__sveltets_2_IsomorphicComponent<StepsPrevTriggerProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type PrevTrigger = InstanceType<typeof PrevTrigger>;
22
+ export default PrevTrigger;
@@ -0,0 +1,12 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let attrs = $derived(mergeProps(props, context.getProgressProps()));
8
+ </script>
9
+
10
+ <div {...attrs}>
11
+ {@render children?.()}
12
+ </div>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsProgressProps extends Assign<SvelteHTMLElements['div'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const Progress: $$__sveltets_2_IsomorphicComponent<StepsProgressProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type Progress = InstanceType<typeof Progress>;
22
+ export default Progress;
@@ -0,0 +1,38 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { uuid } from "../utils.svelte.js";
4
+ import { mergeProps } from "@zag-js/svelte";
5
+ import { createStepsContext, setStepsContext } from "./context.svelte.js";
6
+ let {
7
+ id = uuid(),
8
+ ids,
9
+ dir,
10
+ step,
11
+ count,
12
+ linear,
13
+ orientation,
14
+ onStepChange,
15
+ onStepComplete,
16
+ getRootNode,
17
+ children,
18
+ ...props
19
+ } = $props();
20
+ let context = createStepsContext({
21
+ id,
22
+ ids,
23
+ dir,
24
+ step,
25
+ count,
26
+ linear,
27
+ orientation,
28
+ onStepChange,
29
+ onStepComplete,
30
+ getRootNode
31
+ });
32
+ let attrs = $derived(mergeProps(props, context.getRootProps()));
33
+ setStepsContext(context);
34
+ </script>
35
+
36
+ <div {...attrs}>
37
+ {@render children?.(context)}
38
+ </div>
@@ -0,0 +1,25 @@
1
+ import type { Assign, OptionalId, WithoutChildren } from '../types.js';
2
+ import type { Snippet } from 'svelte';
3
+ import type { SvelteHTMLElements } from 'svelte/elements';
4
+ import type { CreateStepsContextProps, CreateStepsContextReturn } from './context.svelte.js';
5
+ export interface StepsProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateStepsContextProps>> {
6
+ children?: Snippet<[CreateStepsContextReturn]>;
7
+ }
8
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
9
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
10
+ $$bindings?: Bindings;
11
+ } & Exports;
12
+ (internal: unknown, props: Props & {
13
+ $$events?: Events;
14
+ $$slots?: Slots;
15
+ }): Exports & {
16
+ $set?: any;
17
+ $on?: any;
18
+ };
19
+ z_$$bindings?: Bindings;
20
+ }
21
+ declare const Root: $$__sveltets_2_IsomorphicComponent<StepsProps, {
22
+ [evt: string]: CustomEvent<any>;
23
+ }, {}, {}, "">;
24
+ type Root = InstanceType<typeof Root>;
25
+ export default Root;
@@ -0,0 +1,13 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let itemContext = useStepsItemContext();
8
+ let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemContext)));
9
+ </script>
10
+
11
+ <div {...attrs}>
12
+ {@render children?.()}
13
+ </div>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsSeparatorProps extends Assign<SvelteHTMLElements['div'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const Separator: $$__sveltets_2_IsomorphicComponent<StepsSeparatorProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type Separator = InstanceType<typeof Separator>;
22
+ export default Separator;
@@ -0,0 +1,13 @@
1
+ <script lang="ts" context="module"></script>
2
+
3
+ <script lang="ts">import { mergeProps } from "@zag-js/svelte";
4
+ import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
5
+ let { children, ...props } = $props();
6
+ let context = useStepsContext();
7
+ let itemContext = useStepsItemContext();
8
+ let attrs = $derived(mergeProps(props, context.getTriggerProps(itemContext)));
9
+ </script>
10
+
11
+ <button type="button" {...attrs}>
12
+ {@render children?.()}
13
+ </button>
@@ -0,0 +1,22 @@
1
+ import type { Assign } from '../types.js';
2
+ import type { SvelteHTMLElements } from 'svelte/elements';
3
+ export interface StepsTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
4
+ }
5
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
7
+ $$bindings?: Bindings;
8
+ } & Exports;
9
+ (internal: unknown, props: Props & {
10
+ $$events?: Events;
11
+ $$slots?: Slots;
12
+ }): Exports & {
13
+ $set?: any;
14
+ $on?: any;
15
+ };
16
+ z_$$bindings?: Bindings;
17
+ }
18
+ declare const Trigger: $$__sveltets_2_IsomorphicComponent<StepsTriggerProps, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, "">;
21
+ type Trigger = InstanceType<typeof Trigger>;
22
+ export default Trigger;
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type Assign<T, U> = Omit<T, keyof U> & U;
1
+ export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
2
2
  export type OptionalId<T> = Assign<T, {
3
3
  id?: string;
4
4
  }>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ui-ingredients",
3
3
  "type": "module",
4
- "version": "0.0.4",
4
+ "version": "0.0.6",
5
5
  "packageManager": "pnpm@9.7.0",
6
6
  "svelte": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
File without changes