ui-ingredients 0.0.3 → 0.0.5

package/README.md

@@ -63,7 +63,7 @@ npm install ui-ingredients
 - ⚪ SignaturePad
 - 🟢 Slider
 - ⚪ Splitter
-- ⚪ Steps
+- 🟢 Steps
 - 🟢 Switch
 - 🟢 Tabs
 - 🟡 TagsInput

package/dist/index.d.ts

@@ -32,6 +32,8 @@ export * as Select from './select/index.js';
 export type { SelectClearTriggerProps, SelectContentProps, SelectControlProps, SelectHiddenSelectProps, SelectIndicatorProps, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueTextProps, } from './select/index.js';
 export * as Slider from './slider/index.js';
 export type { SliderControlProps, SliderHiddenInputProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueTextProps, } from './slider/index.js';
+export * as Steps from './steps/index.js';
+export type { StepsContentProps, StepsIndicatorProps, StepsItemProps, StepsListProps, StepsNextTriggerProps, StepsPrevTriggerProps, StepsProgressProps, StepsProps, StepsSeparatorProps, StepsTriggerProps, } from './steps/index.js';
 export * as Switch from './switch/index.js';
 export type { SwitchControlProps, SwitchHiddenInputProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, } from './switch/index.js';
 export * as Tabs from './tabs/index.js';

package/dist/index.js

@@ -15,6 +15,7 @@ export * as Progress from './progress/index.js';
 export * as RadioGroup from './radio-group/index.js';
 export * as Select from './select/index.js';
 export * as Slider from './slider/index.js';
+export * as Steps from './steps/index.js';
 export * as Switch from './switch/index.js';
 export * as Tabs from './tabs/index.js';
 export * as ToggleGroup from './toggle-group/index.js';

package/dist/steps/content.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext } from "./context.svelte.js";
+let { index, children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getContentProps({ index })));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/content.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Assign } from '../types.js';
+import type { ItemProps } from '@zag-js/steps';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsContentProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Content: $$__sveltets_2_IsomorphicComponent<StepsContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Content = InstanceType<typeof Content>;
+export default Content;

package/dist/steps/context.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as steps from '@zag-js/steps';
+export interface CreateStepsContextProps extends steps.Context {
+}
+export interface CreateStepsContextReturn extends ReturnType<typeof createStepsContext> {
+}
+export declare function createStepsContext(props: CreateStepsContextProps): any;
+export declare function setStepsContext(value: CreateStepsContextReturn): void;
+export declare function useStepsContext(): CreateStepsContextReturn;
+export declare function setStepsItemContext(value: steps.ItemProps): void;
+export declare function useStepsItemContext(): steps.ItemProps;

package/dist/steps/context.svelte.js

@@ -0,0 +1,20 @@
+import * as steps from '@zag-js/steps';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createStepsContext(props) {
+    const [state, send] = useMachine(steps.machine(props));
+    const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setStepsContext(value) {
+    setContext('Steps', value);
+}
+export function useStepsContext() {
+    return getContext('Steps');
+}
+export function setStepsItemContext(value) {
+    setContext('StepsItem', value);
+}
+export function useStepsItemContext() {
+    return getContext('StepsItem');
+}

package/dist/steps/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Content, type StepsContentProps } from './content.svelte';
+export { default as Indicator, type StepsIndicatorProps } from './indicator.svelte';
+export { default as Item, type StepsItemProps } from './item.svelte';
+export { default as List, type StepsListProps } from './list.svelte';
+export { default as NextTrigger, type StepsNextTriggerProps } from './next-trigger.svelte';
+export { default as PrevTrigger, type StepsPrevTriggerProps } from './prev-trigger.svelte';
+export { default as Progress, type StepsProgressProps } from './progress.svelte';
+export { default as Root, type StepsProps } from './root.svelte';
+export { default as Separator, type StepsSeparatorProps } from './separator.svelte';
+export { default as Trigger, type StepsTriggerProps } from './trigger.svelte';

package/dist/steps/index.js

@@ -0,0 +1,10 @@
+export { default as Content } from './content.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as Item } from './item.svelte';
+export { default as List } from './list.svelte';
+export { default as NextTrigger } from './next-trigger.svelte';
+export { default as PrevTrigger } from './prev-trigger.svelte';
+export { default as Progress } from './progress.svelte';
+export { default as Root } from './root.svelte';
+export { default as Separator } from './separator.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/steps/indicator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let itemContext = useStepsItemContext();
+let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/indicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsIndicatorProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Indicator: $$__sveltets_2_IsomorphicComponent<StepsIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Indicator = InstanceType<typeof Indicator>;
+export default Indicator;

package/dist/steps/item.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { setStepsItemContext, useStepsContext } from "./context.svelte.js";
+let { index, children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getItemProps({ index })));
+setStepsItemContext({ index });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/item.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Assign } from '../types.js';
+import type { ItemProps } from '@zag-js/steps';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Item: $$__sveltets_2_IsomorphicComponent<StepsItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Item = InstanceType<typeof Item>;
+export default Item;

package/dist/steps/list.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getListProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/list.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsListProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const List: $$__sveltets_2_IsomorphicComponent<StepsListProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type List = InstanceType<typeof List>;
+export default List;

package/dist/steps/next-trigger.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/steps/next-trigger.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsNextTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NextTrigger: $$__sveltets_2_IsomorphicComponent<StepsNextTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NextTrigger = InstanceType<typeof NextTrigger>;
+export default NextTrigger;

package/dist/steps/prev-trigger.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/steps/prev-trigger.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsPrevTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrevTrigger: $$__sveltets_2_IsomorphicComponent<StepsPrevTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type PrevTrigger = InstanceType<typeof PrevTrigger>;
+export default PrevTrigger;

package/dist/steps/progress.svelte

@@ -0,0 +1,12 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let attrs = $derived(mergeProps(props, context.getProgressProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/progress.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsProgressProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Progress: $$__sveltets_2_IsomorphicComponent<StepsProgressProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Progress = InstanceType<typeof Progress>;
+export default Progress;

package/dist/steps/root.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
+import { createStepsContext, setStepsContext } from "./context.svelte.js";
+let {
+  id = uuid(),
+  ids,
+  dir,
+  step,
+  count,
+  linear,
+  orientation,
+  onStepChange,
+  onStepComplete,
+  getRootNode,
+  children,
+  ...props
+} = $props();
+let context = createStepsContext({
+  id,
+  ids,
+  dir,
+  step,
+  count,
+  linear,
+  orientation,
+  onStepChange,
+  onStepComplete,
+  getRootNode
+});
+let attrs = $derived(mergeProps(props, context.getRootProps()));
+setStepsContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/steps/root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { CreateStepsContextProps, CreateStepsContextReturn } from './context.svelte.js';
+export interface StepsProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateStepsContextProps>> {
+    children?: Snippet<[CreateStepsContextReturn]>;
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<StepsProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/steps/separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let itemContext = useStepsItemContext();
+let attrs = $derived(mergeProps(props, context.getSeparatorProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/separator.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsSeparatorProps extends Assign<SvelteHTMLElements['div'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Separator: $$__sveltets_2_IsomorphicComponent<StepsSeparatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Separator = InstanceType<typeof Separator>;
+export default Separator;

package/dist/steps/trigger.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts">import { mergeProps } from "@zag-js/svelte";
+import { useStepsContext, useStepsItemContext } from "./context.svelte.js";
+let { children, ...props } = $props();
+let context = useStepsContext();
+let itemContext = useStepsItemContext();
+let attrs = $derived(mergeProps(props, context.getTriggerProps(itemContext)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/steps/trigger.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign } from '../types.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+export interface StepsTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<StepsTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Trigger = InstanceType<typeof Trigger>;
+export default Trigger;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type Assign<T, U> = Omit<T, keyof U> & U;
+export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
 export type OptionalId<T> = Assign<T, {
     id?: string;
 }>;

package/dist/utils.svelte.js

@@ -1,3 +1,2 @@
-import hyperid from 'hyperid';
-const h = hyperid();
-export const uuid = () => h.uuid;
+import { nanoid } from 'nanoid/non-secure';
+export const uuid = () => nanoid(8);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:calvo-jp/ui-ingredients.git"
+    "url": "git+https://github.com/calvo-jp/ui-ingredients.git"
   },
   "bugs": {
     "url": "https://github.com/calvo-jp/ui-ingredients/issues",
@@ -122,7 +122,7 @@
     "@zag-js/toast": "0.65.0",
     "@zag-js/toggle-group": "0.65.0",
     "@zag-js/tooltip": "0.65.0",
-    "hyperid": "3.2.0"
+    "nanoid": "5.0.7"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0-next.200"