ui-ingredients 0.0.15 → 0.0.16

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

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

package/dist/segment-group/indicator.svelte

@@ -7,7 +7,6 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {useSegmentGroupContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupIndicatorProps = $props();
@@ -17,6 +16,6 @@
   let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
 </script>
 
-<span {...attrs} {...parts.indicator.attrs}>
+<span {...attrs}>
   {@render children?.()}
 </span>

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

@@ -7,7 +7,6 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {
     useSegmentGroupContext,
     useSegmentGroupItemPropsContext,
@@ -24,6 +23,6 @@
   );
 </script>
 
-<div {...attrs} {...parts.itemControl.attrs}>
+<div {...attrs}>
   {@render children?.()}
 </div>

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

@@ -7,7 +7,6 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {
     useSegmentGroupContext,
     useSegmentGroupItemPropsContext,
@@ -22,6 +21,6 @@
   let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs} {...parts.itemText.attrs}>
+<span {...attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/item.svelte

@@ -11,7 +11,6 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {
     setSegmentGroupItemPropsContext,
     useSegmentGroupContext,
@@ -54,6 +53,6 @@
   });
 </script>
 
-<label {...attrs} {...parts.item.attrs}>
+<label {...attrs}>
   {@render children?.(state)}
 </label>

package/dist/segment-group/label.svelte

@@ -6,7 +6,6 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {useSegmentGroupContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupLabelProps = $props();
@@ -16,6 +15,6 @@
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>
 
-<span {...attrs} {...parts.label.attrs}>
+<span {...attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/root.svelte

@@ -20,7 +20,6 @@
   import {useLocaleContext} from '../locale-provider/index.js';
   import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {parts} from './anatomy.js';
   import {
     createSegmentGroupContext,
     setSegmentGroupContext,
@@ -64,6 +63,6 @@
   setSegmentGroupContext(context);
 </script>
 
-<div {...attrs} {...parts.root.attrs}>
+<div {...attrs}>
   {@render children?.(context)}
 </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",