@ark-ui/svelte 5.0.4 → 5.1.0

package/dist/components/qr-code/qr-code-pattern.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { HTMLProps, PolymorphicProps } from '../../types'
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface QrCodePatternBaseProps extends PolymorphicProps<'path'> {}
+  export interface QrCodePatternBaseProps extends PolymorphicProps<'path'>, RefAttribute {}
   export interface QrCodePatternProps extends HTMLProps<'path'>, QrCodePatternBaseProps {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useQrCodeContext } from './use-qr-code-context'
 
-  const props: QrCodePatternProps = $props()
+  let { ref = $bindable(null), ...props }: QrCodePatternProps = $props()
   const qrCode = useQrCodeContext()
   const mergedProps = $derived(mergeProps(qrCode().getPatternProps(), props))
 </script>
 
-<Ark as="path" {...mergedProps} />
+<Ark as="path" bind:ref {...mergedProps} />

package/dist/components/qr-code/qr-code-pattern.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { HTMLProps, PolymorphicProps } from '../../types';
-export interface QrCodePatternBaseProps extends PolymorphicProps<'path'> {
+import type { HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface QrCodePatternBaseProps extends PolymorphicProps<'path'>, RefAttribute {
 }
 export interface QrCodePatternProps extends HTMLProps<'path'>, QrCodePatternBaseProps {
 }
-declare const QrCodePattern: import("svelte").Component<QrCodePatternProps, {}, "">;
+declare const QrCodePattern: import("svelte").Component<QrCodePatternProps, {}, "ref">;
 type QrCodePattern = ReturnType<typeof QrCodePattern>;
 export default QrCodePattern;

package/dist/components/qr-code/qr-code-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps } from '../../types'
+  import type { Assign, HTMLProps, RefAttribute } from '../../types'
   import type { UseQrCodeReturn } from './use-qr-code.svelte'
 
   interface RootProviderProps {
     value: UseQrCodeReturn
   }
 
-  export interface QrCodeRootProviderBaseProps extends RootProviderProps {}
+  export interface QrCodeRootProviderBaseProps extends RootProviderProps, RefAttribute {}
   export interface QrCodeRootProviderProps extends Assign<HTMLProps<'div'>, QrCodeRootProviderBaseProps> {}
 </script>
 
@@ -15,11 +15,11 @@
   import { Ark } from '../factory'
   import { QrCodeProvider } from './use-qr-code-context'
 
-  const props: QrCodeRootProviderProps = $props()
+  let { ref = $bindable(null), ...props }: QrCodeRootProviderProps = $props()
   const { value: qrCode, ...localProps } = props
   const mergedProps = $derived(mergeProps(qrCode().getRootProps(), localProps))
 
   QrCodeProvider(qrCode)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/qr-code/qr-code-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps } from '../../types';
+import type { Assign, HTMLProps, RefAttribute } from '../../types';
 import type { UseQrCodeReturn } from './use-qr-code.svelte';
 interface RootProviderProps {
     value: UseQrCodeReturn;
 }
-export interface QrCodeRootProviderBaseProps extends RootProviderProps {
+export interface QrCodeRootProviderBaseProps extends RootProviderProps, RefAttribute {
 }
 export interface QrCodeRootProviderProps extends Assign<HTMLProps<'div'>, QrCodeRootProviderBaseProps> {
 }
-declare const QrCodeRootProvider: import("svelte").Component<QrCodeRootProviderProps, {}, "">;
+declare const QrCodeRootProvider: import("svelte").Component<QrCodeRootProviderProps, {}, "ref">;
 type QrCodeRootProvider = ReturnType<typeof QrCodeRootProvider>;
 export default QrCodeRootProvider;

package/dist/components/qr-code/qr-code-root.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseQrCodeProps } from './use-qr-code.svelte'
 
-  export interface QrCodeRootBaseProps extends Optional<UseQrCodeProps, 'id'>, PolymorphicProps<'div'> {}
+  export interface QrCodeRootBaseProps extends Optional<UseQrCodeProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface QrCodeRootProps extends Assign<HTMLProps<'div'>, QrCodeRootBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { QrCodeProvider } from './use-qr-code-context'
   import { useQrCode } from './use-qr-code.svelte'
 
-  let { value = $bindable(), ...props }: QrCodeRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: QrCodeRootProps = $props()
   const providedId = $props.id()
 
   const [useQrCodeProps, localProps] = $derived(
@@ -33,8 +33,8 @@
     id: providedId,
     value,
     onValueChange(details) {
-      value = details.value
       useQrCodeProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
     },
   })
 
@@ -44,4 +44,4 @@
   QrCodeProvider(qrCode)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/qr-code/qr-code-root.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, Optional, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseQrCodeProps } from './use-qr-code.svelte';
-export interface QrCodeRootBaseProps extends Optional<UseQrCodeProps, 'id'>, PolymorphicProps<'div'> {
+export interface QrCodeRootBaseProps extends Optional<UseQrCodeProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface QrCodeRootProps extends Assign<HTMLProps<'div'>, QrCodeRootBaseProps> {
 }
-declare const QrCodeRoot: import("svelte").Component<QrCodeRootProps, {}, "value">;
+declare const QrCodeRoot: import("svelte").Component<QrCodeRootProps, {}, "ref" | "value">;
 type QrCodeRoot = ReturnType<typeof QrCodeRoot>;
 export default QrCodeRoot;

package/dist/components/radio-group/radio-group-indicator.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RadioGroupIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface RadioGroupIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface RadioGroupIndicatorProps extends Assign<HTMLProps<'div'>, RadioGroupIndicatorBaseProps> {}
 </script>
 
@@ -10,10 +10,10 @@
   import { Ark } from '../factory'
   import { useRadioGroupContext } from './use-radio-group-context'
 
-  const props: RadioGroupIndicatorProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupIndicatorProps = $props()
 
   const radioGroup = useRadioGroupContext()
   const mergedProps = $derived(mergeProps(radioGroup().getIndicatorProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-indicator.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RadioGroupIndicatorBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RadioGroupIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RadioGroupIndicatorProps extends Assign<HTMLProps<'div'>, RadioGroupIndicatorBaseProps> {
 }
-declare const RadioGroupIndicator: import("svelte").Component<RadioGroupIndicatorProps, {}, "">;
+declare const RadioGroupIndicator: import("svelte").Component<RadioGroupIndicatorProps, {}, "ref">;
 type RadioGroupIndicator = ReturnType<typeof RadioGroupIndicator>;
 export default RadioGroupIndicator;

package/dist/components/radio-group/radio-group-item-control.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RadioGroupItemControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface RadioGroupItemControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface RadioGroupItemControlProps extends Assign<HTMLProps<'div'>, RadioGroupItemControlBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useRadioGroupContext } from './use-radio-group-context'
   import { useRadioGroupItemPropsContext } from './use-radio-group-item-props-context'
 
-  const props: RadioGroupItemControlProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupItemControlProps = $props()
 
   const radioGroup = useRadioGroupContext()
   const itemProps = useRadioGroupItemPropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(radioGroup().getItemControlProps(itemProps()), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-item-control.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RadioGroupItemControlBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RadioGroupItemControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RadioGroupItemControlProps extends Assign<HTMLProps<'div'>, RadioGroupItemControlBaseProps> {
 }
-declare const RadioGroupItemControl: import("svelte").Component<RadioGroupItemControlProps, {}, "">;
+declare const RadioGroupItemControl: import("svelte").Component<RadioGroupItemControlProps, {}, "ref">;
 type RadioGroupItemControl = ReturnType<typeof RadioGroupItemControl>;
 export default RadioGroupItemControl;

package/dist/components/radio-group/radio-group-item-hidden-input.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RadioGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface RadioGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface RadioGroupItemHiddenInputProps
     extends Assign<HTMLProps<'input'>, RadioGroupItemHiddenInputBaseProps> {}
 </script>
@@ -12,7 +12,7 @@
   import { useRadioGroupContext } from './use-radio-group-context'
   import { useRadioGroupItemPropsContext } from './use-radio-group-item-props-context'
 
-  const props: RadioGroupItemHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupItemHiddenInputProps = $props()
 
   const radioGroup = useRadioGroupContext()
   const itemProps = useRadioGroupItemPropsContext()
@@ -20,4 +20,4 @@
   const mergedProps = $derived(mergeProps(radioGroup().getItemHiddenInputProps(itemProps()), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

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

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RadioGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RadioGroupItemHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
 }
 export interface RadioGroupItemHiddenInputProps extends Assign<HTMLProps<'input'>, RadioGroupItemHiddenInputBaseProps> {
 }
-declare const RadioGroupItemHiddenInput: import("svelte").Component<RadioGroupItemHiddenInputProps, {}, "">;
+declare const RadioGroupItemHiddenInput: import("svelte").Component<RadioGroupItemHiddenInputProps, {}, "ref">;
 type RadioGroupItemHiddenInput = ReturnType<typeof RadioGroupItemHiddenInput>;
 export default RadioGroupItemHiddenInput;

package/dist/components/radio-group/radio-group-item-text.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RadioGroupItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface RadioGroupItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
   export interface RadioGroupItemTextProps extends Assign<HTMLProps<'span'>, RadioGroupItemTextBaseProps> {}
 </script>
 
@@ -11,7 +11,7 @@
   import { useRadioGroupContext } from './use-radio-group-context'
   import { useRadioGroupItemPropsContext } from './use-radio-group-item-props-context'
 
-  const props: RadioGroupItemTextProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupItemTextProps = $props()
 
   const radioGroup = useRadioGroupContext()
   const itemProps = useRadioGroupItemPropsContext()
@@ -19,4 +19,4 @@
   const mergedProps = $derived(mergeProps(radioGroup().getItemTextProps(itemProps()), props))
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-item-text.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RadioGroupItemTextBaseProps extends PolymorphicProps<'span'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RadioGroupItemTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
 }
 export interface RadioGroupItemTextProps extends Assign<HTMLProps<'span'>, RadioGroupItemTextBaseProps> {
 }
-declare const RadioGroupItemText: import("svelte").Component<RadioGroupItemTextProps, {}, "">;
+declare const RadioGroupItemText: import("svelte").Component<RadioGroupItemTextProps, {}, "ref">;
 type RadioGroupItemText = ReturnType<typeof RadioGroupItemText>;
 export default RadioGroupItemText;

package/dist/components/radio-group/radio-group-item.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ItemProps } from '@zag-js/radio-group'
 
-  export interface RadioGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {}
+  export interface RadioGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'>, RefAttribute {}
   export interface RadioGroupItemProps extends Assign<HTMLProps<'label'>, RadioGroupItemBaseProps> {}
 </script>
 
@@ -13,7 +13,7 @@
   import { RadioGroupItemProvider } from './use-radio-group-item-context'
   import { RadioGroupItemPropsProvider } from './use-radio-group-item-props-context'
 
-  const props: RadioGroupItemProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupItemProps = $props()
   const radioGroup = useRadioGroupContext()
 
   const itemState = $derived(radioGroup().getItemState(props))
@@ -23,4 +23,4 @@
   RadioGroupItemPropsProvider(() => props)
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-item.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/radio-group';
-export interface RadioGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'> {
+export interface RadioGroupItemBaseProps extends ItemProps, PolymorphicProps<'label'>, RefAttribute {
 }
 export interface RadioGroupItemProps extends Assign<HTMLProps<'label'>, RadioGroupItemBaseProps> {
 }
-declare const RadioGroupItem: import("svelte").Component<RadioGroupItemProps, {}, "">;
+declare const RadioGroupItem: import("svelte").Component<RadioGroupItemProps, {}, "ref">;
 type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
 export default RadioGroupItem;

package/dist/components/radio-group/radio-group-label.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RadioGroupLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface RadioGroupLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface RadioGroupLabelProps extends Assign<HTMLProps<'label'>, RadioGroupLabelBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useRadioGroupContext } from './use-radio-group-context'
 
-  const props: RadioGroupLabelProps = $props()
+  let { ref = $bindable(null), ...props }: RadioGroupLabelProps = $props()
   const radioGroup = useRadioGroupContext()
   const mergedProps = $derived(mergeProps(radioGroup().getLabelProps(), props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-label.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RadioGroupLabelBaseProps extends PolymorphicProps<'label'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RadioGroupLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {
 }
 export interface RadioGroupLabelProps extends Assign<HTMLProps<'label'>, RadioGroupLabelBaseProps> {
 }
-declare const RadioGroupLabel: import("svelte").Component<RadioGroupLabelProps, {}, "">;
+declare const RadioGroupLabel: import("svelte").Component<RadioGroupLabelProps, {}, "ref">;
 type RadioGroupLabel = ReturnType<typeof RadioGroupLabel>;
 export default RadioGroupLabel;

package/dist/components/radio-group/radio-group-root-provider.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseRadioGroupReturn } from './use-radio-group.svelte'
 
   interface RootProviderProps {
     value: UseRadioGroupReturn
   }
 
-  export interface RadioGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface RadioGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface RadioGroupRootProviderProps extends Assign<HTMLProps<'div'>, RadioGroupRootProviderBaseProps> {}
 </script>
 
@@ -15,11 +15,11 @@
   import { Ark } from '../factory'
   import { RadioGroupProvider } from './use-radio-group-context'
 
-  let { value, ...props }: RadioGroupRootProviderProps = $props()
+  let { ref = $bindable(null), value, ...props }: RadioGroupRootProviderProps = $props()
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
   RadioGroupProvider(value)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-root-provider.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseRadioGroupReturn } from './use-radio-group.svelte';
 interface RootProviderProps {
     value: UseRadioGroupReturn;
 }
-export interface RadioGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+export interface RadioGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RadioGroupRootProviderProps extends Assign<HTMLProps<'div'>, RadioGroupRootProviderBaseProps> {
 }
-declare const RadioGroupRootProvider: import("svelte").Component<RadioGroupRootProviderProps, {}, "">;
+declare const RadioGroupRootProvider: import("svelte").Component<RadioGroupRootProviderProps, {}, "ref">;
 type RadioGroupRootProvider = ReturnType<typeof RadioGroupRootProvider>;
 export default RadioGroupRootProvider;

package/dist/components/radio-group/radio-group-root.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ValueChangeDetails } from '@zag-js/radio-group'
   import type { UseRadioGroupProps } from './use-radio-group.svelte'
 
@@ -7,7 +7,7 @@
     valueChange: ValueChangeDetails
   }
 
-  export interface RadioGroupRootBaseProps extends UseRadioGroupProps, PolymorphicProps<'div'> {}
+  export interface RadioGroupRootBaseProps extends UseRadioGroupProps, PolymorphicProps<'div'>, RefAttribute {}
   export interface RadioGroupRootProps extends Assign<HTMLProps<'div'>, RadioGroupRootBaseProps> {}
 </script>
 
@@ -18,7 +18,7 @@
   import { RadioGroupProvider } from './use-radio-group-context'
   import { useRadioGroup } from './use-radio-group.svelte'
 
-  let { value = $bindable(), ...props }: RadioGroupRootProps = $props()
+  let { ref = $bindable(null), value = $bindable(), ...props }: RadioGroupRootProps = $props()
   const providedId = $props.id()
 
   const [radioGroupProps, localProps] = $derived(
@@ -52,4 +52,4 @@
   RadioGroupProvider(radioGroup)
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/radio-group/radio-group-root.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ValueChangeDetails } from '@zag-js/radio-group';
 import type { UseRadioGroupProps } from './use-radio-group.svelte';
 export interface RadioGroupRootEmits {
     valueChange: ValueChangeDetails;
 }
-export interface RadioGroupRootBaseProps extends UseRadioGroupProps, PolymorphicProps<'div'> {
+export interface RadioGroupRootBaseProps extends UseRadioGroupProps, PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RadioGroupRootProps extends Assign<HTMLProps<'div'>, RadioGroupRootBaseProps> {
 }
-declare const RadioGroupRoot: import("svelte").Component<RadioGroupRootProps, {}, "value">;
+declare const RadioGroupRoot: import("svelte").Component<RadioGroupRootProps, {}, "ref" | "value">;
 type RadioGroupRoot = ReturnType<typeof RadioGroupRoot>;
 export default RadioGroupRoot;

package/dist/components/rating-group/rating-group-context.svelte

@@ -14,4 +14,4 @@
   const context = useRatingGroupContext()
 </script>
 
-{@render render(context)} 
+{@render render(context)}

package/dist/components/rating-group/rating-group-control.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RatingGroupControlBaseProps extends PolymorphicProps<'div'> {}
+  export interface RatingGroupControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
   export interface RatingGroupControlProps extends Assign<HTMLProps<'div'>, RatingGroupControlBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useRatingGroupContext } from './use-rating-group-context'
 
-  const props: RatingGroupControlProps = $props()
+  let { ref = $bindable(null), ...props }: RatingGroupControlProps = $props()
   const ratingGroup = useRatingGroupContext()
   const mergedProps = $derived(mergeProps(ratingGroup().getControlProps(), props))
 </script>
 
-<Ark as="div" {...mergedProps} />
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-control.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RatingGroupControlBaseProps extends PolymorphicProps<'div'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RatingGroupControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {
 }
 export interface RatingGroupControlProps extends Assign<HTMLProps<'div'>, RatingGroupControlBaseProps> {
 }
-declare const RatingGroupControl: import("svelte").Component<RatingGroupControlProps, {}, "">;
+declare const RatingGroupControl: import("svelte").Component<RatingGroupControlProps, {}, "ref">;
 type RatingGroupControl = ReturnType<typeof RatingGroupControl>;
 export default RatingGroupControl;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RatingGroupHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface RatingGroupHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
   export interface RatingGroupHiddenInputProps extends Assign<HTMLProps<'input'>, RatingGroupHiddenInputBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useRatingGroupContext } from './use-rating-group-context'
 
-  const props: RatingGroupHiddenInputProps = $props()
+  let { ref = $bindable(null), ...props }: RatingGroupHiddenInputProps = $props()
   const ratingGroup = useRatingGroupContext()
   const mergedProps = $derived(mergeProps(ratingGroup().getHiddenInputProps(), props))
 </script>
 
-<Ark as="input" {...mergedProps} />
+<Ark as="input" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-hidden-input.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RatingGroupHiddenInputBaseProps extends PolymorphicProps<'input'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RatingGroupHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
 }
 export interface RatingGroupHiddenInputProps extends Assign<HTMLProps<'input'>, RatingGroupHiddenInputBaseProps> {
 }
-declare const RatingGroupHiddenInput: import("svelte").Component<RatingGroupHiddenInputProps, {}, "">;
+declare const RatingGroupHiddenInput: import("svelte").Component<RatingGroupHiddenInputProps, {}, "ref">;
 type RatingGroupHiddenInput = ReturnType<typeof RatingGroupHiddenInput>;
 export default RatingGroupHiddenInput;

package/dist/components/rating-group/rating-group-item.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { ItemProps } from '@zag-js/rating-group'
 
-  export interface RatingGroupItemBaseProps extends ItemProps, PolymorphicProps<'span'> {}
+  export interface RatingGroupItemBaseProps extends ItemProps, PolymorphicProps<'span'>, RefAttribute {}
   export interface RatingGroupItemProps extends Assign<HTMLProps<'span'>, RatingGroupItemBaseProps> {}
 </script>
 
@@ -12,7 +12,7 @@
   import { useRatingGroupContext } from './use-rating-group-context'
   import { RatingGroupItemProvider } from './use-rating-group-item-context'
 
-  const props: RatingGroupItemProps = $props()
+  let { ref = $bindable(null), ...props }: RatingGroupItemProps = $props()
   const ratingGroup = useRatingGroupContext()
 
   const itemState = $derived(ratingGroup().getItemState(props))
@@ -21,4 +21,4 @@
   RatingGroupItemProvider(() => itemState)
 </script>
 
-<Ark as="span" {...mergedProps} />
+<Ark as="span" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-item.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { ItemProps } from '@zag-js/rating-group';
-export interface RatingGroupItemBaseProps extends ItemProps, PolymorphicProps<'span'> {
+export interface RatingGroupItemBaseProps extends ItemProps, PolymorphicProps<'span'>, RefAttribute {
 }
 export interface RatingGroupItemProps extends Assign<HTMLProps<'span'>, RatingGroupItemBaseProps> {
 }
-declare const RatingGroupItem: import("svelte").Component<RatingGroupItemProps, {}, "">;
+declare const RatingGroupItem: import("svelte").Component<RatingGroupItemProps, {}, "ref">;
 type RatingGroupItem = ReturnType<typeof RatingGroupItem>;
 export default RatingGroupItem;

package/dist/components/rating-group/rating-group-label.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
-  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
-  export interface RatingGroupLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface RatingGroupLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
   export interface RatingGroupLabelProps extends Assign<HTMLProps<'label'>, RatingGroupLabelBaseProps> {}
 </script>
 
@@ -10,9 +10,9 @@
   import { Ark } from '../factory'
   import { useRatingGroupContext } from './use-rating-group-context'
 
-  const props: RatingGroupLabelProps = $props()
+  let { ref = $bindable(null), ...props }: RatingGroupLabelProps = $props()
   const ratingGroup = useRatingGroupContext()
   const mergedProps = $derived(mergeProps(ratingGroup().getLabelProps(), props))
 </script>
 
-<Ark as="label" {...mergedProps} />
+<Ark as="label" bind:ref {...mergedProps} />

package/dist/components/rating-group/rating-group-label.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
-export interface RatingGroupLabelBaseProps extends PolymorphicProps<'label'> {
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface RatingGroupLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {
 }
 export interface RatingGroupLabelProps extends Assign<HTMLProps<'label'>, RatingGroupLabelBaseProps> {
 }
-declare const RatingGroupLabel: import("svelte").Component<RatingGroupLabelProps, {}, "">;
+declare const RatingGroupLabel: import("svelte").Component<RatingGroupLabelProps, {}, "ref">;
 type RatingGroupLabel = ReturnType<typeof RatingGroupLabel>;
 export default RatingGroupLabel;