ui-ingredients 0.0.14 → 0.0.15

package/README.md

@@ -60,7 +60,7 @@ npm install ui-ingredients
 - 🟢 RadioGroup
 - 🟢 RatingGroup
 - 🟢 Select
-- 🟡 SegmentGroup
+- 🟢 SegmentGroup
 - ⚪ SignaturePad
 - 🟢 Slider
 - ⚪ Splitter

package/dist/segment-group/anatomy.js

@@ -1,2 +1,3 @@
 import { anatomy } from '@zag-js/radio-group';
 export const segmentGroupAnatomy = anatomy.rename('segment-group');
+export const parts = segmentGroupAnatomy.build();

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

@@ -1,33 +1,10 @@
 import * as segmentGroup from '@zag-js/radio-group';
-import { mergeProps, normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { normalizeProps, 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;
+    return api;
 }
 export function setSegmentGroupContext(value) {
     setContext('SegmentGroup', value);

package/dist/segment-group/indicator.svelte

@@ -7,6 +7,7 @@
 
 <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();
@@ -16,6 +17,6 @@
   let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
 </script>
 
-<span {...attrs}>
+<span {...attrs} {...parts.indicator.attrs}>
   {@render children?.()}
 </span>

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

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

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

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

package/dist/segment-group/item.svelte

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

package/dist/segment-group/label.svelte

@@ -6,6 +6,7 @@
 
 <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();
@@ -15,6 +16,6 @@
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>
 
-<span {...attrs}>
+<span {...attrs} {...parts.label.attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/root.svelte

@@ -20,6 +20,7 @@
   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,
@@ -63,6 +64,6 @@
   setSegmentGroupContext(context);
 </script>
 
-<div {...attrs}>
+<div {...attrs} {...parts.root.attrs}>
   {@render children?.(context)}
 </div>

package/package.json

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

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

@@ -1,10 +0,0 @@
-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;