ui-ingredients 0.0.11 → 0.0.13

package/dist/rating-group/control.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface RatingGroupControlProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useRatingGroupContext} from './context.svelte.js';
-
-  let {children, ...props}: RatingGroupControlProps = $props();
-
-  let context = useRatingGroupContext();
-
-  let attrs = $derived(mergeProps(props, context.getControlProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface RatingGroupControlProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {children, ...props}: RatingGroupControlProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/rating-group/hidden-input.svelte

@@ -1,19 +1,19 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface RatingGroupHiddenInputProps
-    extends HtmlIngredientProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useRatingGroupContext} from './context.svelte.js';
-
-  let {...props}: RatingGroupHiddenInputProps = $props();
-
-  let context = useRatingGroupContext();
-
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface RatingGroupHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {...props}: RatingGroupHiddenInputProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

package/dist/rating-group/item.svelte

@@ -1,27 +1,27 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/rating-group';
-  import type {Snippet} from 'svelte';
-
-  export interface RatingGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
-    children: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useRatingGroupContext} from './context.svelte.js';
-
-  let {index, children, ...props}: RatingGroupItemProps = $props();
-
-  let context = useRatingGroupContext();
-
-  let state = $derived(context.getItemState({index}));
-
-  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
-</script>
-
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/rating-group';
+  import type {Snippet} from 'svelte';
+
+  export interface RatingGroupItemProps
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+    children: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {index, children, ...props}: RatingGroupItemProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let state = $derived(context.getItemState({index}));
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/rating-group/label.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface RatingGroupLabelProps extends HtmlIngredientProps<'label'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useRatingGroupContext} from './context.svelte.js';
-
-  let {children, ...props}: RatingGroupLabelProps = $props();
-
-  let context = useRatingGroupContext();
-
-  let attrs = $derived(mergeProps(props, context.getLabelProps()));
-</script>
-
-<label {...attrs}>
-  {@render children?.()}
-</label>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface RatingGroupLabelProps extends HtmlIngredientProps<'label'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {children, ...props}: RatingGroupLabelProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getLabelProps()));
+</script>
+
+<label {...attrs}>
+  {@render children?.()}
+</label>

package/dist/rating-group/root.svelte

@@ -1,73 +1,78 @@
-<script lang="ts" context="module">
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateRatingGroupContextProps,
-    CreateRatingGroupContextReturn,
-  } from './context.svelte.js';
-
-  export interface RatingGroupProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateRatingGroupContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateRatingGroupContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {
-    createRatingGroupContext,
-    setRatingGroupContext,
-  } from './context.svelte.js';
-
-  let {
-    id,
-    ids,
-    dir,
-    form,
-    name,
-    count,
-    value,
-    disabled,
-    readOnly,
-    required,
-    autoFocus,
-    allowHalf,
-    translations,
-    onHoverChange,
-    onValueChange,
-    getRootNode,
-    children,
-    ...props
-  }: RatingGroupProps = $props();
-
-  let context = createRatingGroupContext({
-    id: id ?? uuid(),
-    ids,
-    dir,
-    form,
-    name,
-    count,
-    value: $state.snapshot(value),
-    disabled,
-    readOnly,
-    required,
-    autoFocus,
-    allowHalf,
-    translations,
-    onHoverChange,
-    onValueChange,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setRatingGroupContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateRatingGroupContextProps,
+    CreateRatingGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface RatingGroupProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'div'>, 'children'>,
+      Omit<CreateRatingGroupContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateRatingGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {useLocaleContext} from '../locale-provider/index.js';
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    createRatingGroupContext,
+    setRatingGroupContext,
+  } from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    count,
+    value,
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    allowHalf,
+    translations,
+    onHoverChange,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: RatingGroupProps = $props();
+
+  let localeContext = useLocaleContext();
+  let environmentContext = useEnvironmentContext();
+
+  let context = createRatingGroupContext({
+    id: id ?? uuid(),
+    ids,
+    dir: dir ?? localeContext?.dir,
+    form,
+    name,
+    count,
+    value: $state.snapshot(value),
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    allowHalf,
+    translations,
+    onHoverChange,
+    onValueChange,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setRatingGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/segment-group/context.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as segmentGroup from '@zag-js/radio-group';
+export interface CreateSegmentGroupContextProps extends segmentGroup.Context {
+}
+export interface CreateSegmentGroupContextReturn extends ReturnType<typeof createSegmentGroupContext> {
+}
+export declare function createSegmentGroupContext(props: CreateSegmentGroupContextProps): any;
+export declare function setSegmentGroupContext(value: CreateSegmentGroupContextReturn): void;
+export declare function useSegmentGroupContext(): CreateSegmentGroupContextReturn;
+export declare function setSegmentGroupItemPropsContext(value: segmentGroup.ItemProps): void;
+export declare function useSegmentGroupItemPropsContext(): segmentGroup.ItemProps;

package/dist/segment-group/context.svelte.js

@@ -0,0 +1,43 @@
+import * as segmentGroup from '@zag-js/radio-group';
+import { mergeProps, normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+import { segmentGroupAnatomy } from './anatomy.js';
+export function createSegmentGroupContext(props) {
+    const parts = $derived(segmentGroupAnatomy.build());
+    const [state, send] = useMachine(segmentGroup.machine(props));
+    const api = $derived(segmentGroup.connect(state, send, normalizeProps));
+    const modified = $derived(reflect(() => ({
+        ...api,
+        getIndicatorProps() {
+            return mergeProps(api.getIndicatorProps(), parts.indicator.attrs);
+        },
+        getItemControlProps(props) {
+            return mergeProps(api.getItemControlProps(props), parts.itemControl.attrs);
+        },
+        getItemProps(props) {
+            return mergeProps(api.getItemProps(props), parts.item.attrs);
+        },
+        getItemTextProps(props) {
+            return mergeProps(api.getItemTextProps(props), parts.itemText.attrs);
+        },
+        getLabelProps() {
+            return mergeProps(api.getLabelProps(), parts.label.attrs);
+        },
+        getRootProps() {
+            return mergeProps(api.getRootProps(), parts.root.attrs);
+        },
+    })));
+    return modified;
+}
+export function setSegmentGroupContext(value) {
+    setContext('SegmentGroup', value);
+}
+export function useSegmentGroupContext() {
+    return getContext('SegmentGroup');
+}
+export function setSegmentGroupItemPropsContext(value) {
+    setContext('SegmentGroupItem', value);
+}
+export function useSegmentGroupItemPropsContext() {
+    return getContext('SegmentGroupItem');
+}

package/dist/segment-group/index.d.ts

@@ -1,2 +1,9 @@
-export { RadioGroup as SegmentGroup, type RadioGroupIndicatorProps as SegmentGroupIndicatorProps, type RadioGroupItemControlProps as SegmentGroupItemControlProps, type RadioGroupItemHiddenInputProps as SegmentGroupItemHiddenInputProps, type RadioGroupItemProps as SegmentGroupItemProps, type RadioGroupItemTextProps as SegmentGroupItemTextProps, type RadioGroupLabelProps as SegmentGroupLabelProps, type RadioGroupProps as SegmentGroupProps, } from '../radio-group/index.js';
-export * from './anatomy.js';
+export { segmentGroupAnatomy } from './anatomy.js';
+export type { SegmentGroupIndicatorProps } from './indicator.svelte';
+export type { SegmentGroupItemControlProps } from './item-control.svelte';
+export type { SegmentGroupItemHiddenInputProps } from './item-hidden-input.svelte';
+export type { SegmentGroupItemTextProps } from './item-text.svelte';
+export type { SegmentGroupItemProps } from './item.svelte';
+export type { SegmentGroupLabelProps } from './label.svelte';
+export type { SegmentGroupProps } from './root.svelte';
+export * as SegmentGroup from './segment-group.js';

package/dist/segment-group/index.js

@@ -1,2 +1,2 @@
-export { RadioGroup as SegmentGroup, } from '../radio-group/index.js';
-export * from './anatomy.js';
+export { segmentGroupAnatomy } from './anatomy.js';
+export * as SegmentGroup from './segment-group.js';

package/dist/segment-group/indicator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SegmentGroupIndicatorProps
+    extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSegmentGroupContext} from './context.svelte.js';
+
+  let {children, ...props}: SegmentGroupIndicatorProps = $props();
+
+  let context = useSegmentGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/segment-group/indicator.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SegmentGroupIndicatorProps extends HtmlIngredientProps<'span'> {
+}
+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<SegmentGroupIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Indicator = InstanceType<typeof Indicator>;
+export default Indicator;

package/dist/segment-group/item-control.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SegmentGroupItemControlProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useSegmentGroupContext,
+    useSegmentGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: SegmentGroupItemControlProps = $props();
+
+  let context = useSegmentGroupContext();
+
+  let itemProps = useSegmentGroupItemPropsContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemControlProps(itemProps)),
+  );
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/segment-group/item-control.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SegmentGroupItemControlProps extends HtmlIngredientProps<'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 ItemControl: $$__sveltets_2_IsomorphicComponent<SegmentGroupItemControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemControl = InstanceType<typeof ItemControl>;
+export default ItemControl;

package/dist/segment-group/item-hidden-input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SegmentGroupItemHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useSegmentGroupContext,
+    useSegmentGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {...props}: SegmentGroupItemHiddenInputProps = $props();
+
+  let context = useSegmentGroupContext();
+
+  let itemProps = useSegmentGroupItemPropsContext();
+
+  let attrs = $derived(
+    mergeProps(props, context.getItemHiddenInputProps(itemProps)),
+  );
+</script>
+
+<input {...attrs} />

package/dist/segment-group/item-hidden-input.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SegmentGroupItemHiddenInputProps extends HtmlIngredientProps<'input'> {
+}
+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 ItemHiddenInput: $$__sveltets_2_IsomorphicComponent<SegmentGroupItemHiddenInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemHiddenInput = InstanceType<typeof ItemHiddenInput>;
+export default ItemHiddenInput;

package/dist/segment-group/item-text.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SegmentGroupItemTextProps
+    extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    useSegmentGroupContext,
+    useSegmentGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: SegmentGroupItemTextProps = $props();
+
+  let context = useSegmentGroupContext();
+
+  let itemProps = useSegmentGroupItemPropsContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/segment-group/item-text.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface SegmentGroupItemTextProps extends HtmlIngredientProps<'span'> {
+}
+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 ItemText: $$__sveltets_2_IsomorphicComponent<SegmentGroupItemTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemText = InstanceType<typeof ItemText>;
+export default ItemText;

package/dist/segment-group/item.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/radio-group';
+  import type {Snippet} from 'svelte';
+
+  export interface SegmentGroupItemProps
+    extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    setSegmentGroupItemPropsContext,
+    useSegmentGroupContext,
+  } from './context.svelte.js';
+
+  let {
+    /**/
+    value,
+    invalid,
+    disabled,
+    children,
+    ...props
+  }: SegmentGroupItemProps = $props();
+
+  let context = useSegmentGroupContext();
+
+  let state = $derived(
+    context.getItemState({
+      value,
+      invalid,
+      disabled,
+    }),
+  );
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        value,
+        invalid,
+        disabled,
+      }),
+    ),
+  );
+
+  setSegmentGroupItemPropsContext({
+    value,
+    invalid,
+    disabled,
+  });
+</script>
+
+<label {...attrs}>
+  {@render children?.(state)}
+</label>