@ark-ui/solid 3.2.2 → 3.4.0

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
 var dialog$1 = require('@zag-js/dialog');
 var editable$1 = require('@zag-js/editable');
+var domQuery = require('@zag-js/dom-query');
 var fileUpload$1 = require('@zag-js/file-upload');
 var i18nUtils = require('@zag-js/i18n-utils');
 var hoverCard$1 = require('@zag-js/hover-card');
@@ -25,9 +26,11 @@ var pagination$1 = require('@zag-js/pagination');
 var pinInput$1 = require('@zag-js/pin-input');
 var popover$1 = require('@zag-js/popover');
 var progress$1 = require('@zag-js/progress');
+var qrCode$1 = require('@zag-js/qr-code');
 var radio = require('@zag-js/radio-group');
 var rating = require('@zag-js/rating-group');
 var select$1 = require('@zag-js/select');
+var signaturePad$1 = require('@zag-js/signature-pad');
 var slider$1 = require('@zag-js/slider');
 var splitter$1 = require('@zag-js/splitter');
 var zagSwitch = require('@zag-js/switch');
@@ -37,7 +40,6 @@ var toast$1 = require('@zag-js/toast');
 var toggleGroup$1 = require('@zag-js/toggle-group');
 var tooltip$1 = require('@zag-js/tooltip');
 var treeView$1 = require('@zag-js/tree-view');
-var domQuery = require('@zag-js/dom-query');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -76,9 +78,11 @@ var pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination$1);
 var pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput$1);
 var popover__namespace = /*#__PURE__*/_interopNamespaceDefault(popover$1);
 var progress__namespace = /*#__PURE__*/_interopNamespaceDefault(progress$1);
+var qrCode__namespace = /*#__PURE__*/_interopNamespaceDefault(qrCode$1);
 var radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 var rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select$1);
+var signaturePad__namespace = /*#__PURE__*/_interopNamespaceDefault(signaturePad$1);
 var slider__namespace = /*#__PURE__*/_interopNamespaceDefault(slider$1);
 var splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter$1);
 var zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
@@ -198,7 +202,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   })
 });
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
@@ -215,7 +219,7 @@ const EnvironmentProvider = props => {
           return !props.value;
         },
         get children() {
-          var _el$ = _tmpl$$4();
+          var _el$ = _tmpl$$5();
           web.use(setSpanRef, _el$);
           return _el$;
         }
@@ -646,10 +650,282 @@ const CheckboxControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+function useControllableState(props) {
+  const [uncontrolledValue, setUncontrolledValue] = solidJs.createSignal(runIfFn(props.defaultValue));
+  const controlled = solidJs.createMemo(() => props.value?.() !== undefined);
+  const currentValue = solidJs.createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
+  const setValue = next => {
+    solidJs.untrack(() => {
+      const nextValue = runIfFn(next, currentValue());
+      if (controlled()) {
+        return props.onChange?.(nextValue);
+      }
+      setUncontrolledValue(nextValue);
+      return props.onChange?.(nextValue);
+    });
+  };
+  return [currentValue, setValue];
+}
+
+function useCheckboxGroup(props = {}) {
+  const interative = solidJs.createMemo(() => !(props.disabled || props.readOnly));
+  const [value, setValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue || [],
+    onChange: props.onValueChange
+  });
+  return solidJs.createMemo(() => {
+    const isChecked = val => {
+      return value().some(v => String(v) === String(val));
+    };
+    const toggleValue = val => {
+      isChecked(val) ? removeValue(val) : addValue(val);
+    };
+    const addValue = val => {
+      if (!interative()) return;
+      if (isChecked(val)) return;
+      setValue(value().concat(val));
+    };
+    const removeValue = val => {
+      if (!interative()) return;
+      setValue(value().filter(v => String(v) !== String(val)));
+    };
+    const getItemProps = itemProps => {
+      return {
+        checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
+        onCheckedChange() {
+          if (itemProps.value != null) {
+            toggleValue(itemProps.value);
+          }
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly
+      };
+    };
+    return {
+      isChecked,
+      value,
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      setValue,
+      addValue,
+      toggleValue,
+      getItemProps
+    };
+  });
+}
+
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
+  hookName: 'useCheckboxGroupContext',
+  providerName: '<CheckboxGroupProvider />',
+  strict: false
+});
+
+const CheckboxGroup = props => {
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly']);
+  const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
+  return web.createComponent(CheckboxGroupContextProvider, {
+    value: checkboxGroup,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps({
+        role: "group"
+      }, localProps, () => anatomy.checkboxAnatomy.build().group.attrs));
+    }
+  });
+};
+
+const [FieldProvider, useFieldContext] = createContext({
+  hookName: 'useFieldContext',
+  providerName: '<FieldProvider />',
+  strict: false
+});
+
+const FieldContext = props => props.children(useFieldContext());
+
+const FieldErrorText = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field().getErrorTextProps(), props);
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return field?.().invalid;
+    },
+    get children() {
+      return web.createComponent(ark.span, mergedProps);
+    }
+  });
+};
+
+const FieldHelperText = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field().getHelperTextProps(), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
+const FieldInput = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getInputProps(), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const FieldLabel = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getLabelProps(), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const FieldSelect = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getSelectProps(), props);
+  return web.createComponent(ark.select, mergedProps);
+};
+
+const parts = anatomy.fieldAnatomy.build();
+const useField = props => {
+  const {
+    required = false,
+    disabled = false,
+    invalid = false,
+    readOnly = false
+  } = props;
+  const [hasErrorText, setHasErrorText] = solidJs.createSignal(false);
+  const [hasHelperText, setHasHelperText] = solidJs.createSignal(false);
+  const id = props.id ?? `field-${Math.random().toString(36).substr(2, 9)}`;
+  let rootRef;
+  const errorTextId = `field::${id}::error-text`;
+  const helperTextId = `field::${id}::helper-text`;
+  const labelId = `field::${id}::label`;
+  solidJs.createEffect(() => {
+    return;
+  });
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    role: 'group',
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
+    'data-readonly': dataAttr(readOnly)
+  });
+  const getLabelProps = () => ({
+    ...parts.label.attrs,
+    id: labelId,
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
+    'data-readonly': dataAttr(readOnly),
+    htmlFor: id
+  });
+  const labelIds = [];
+  if (hasErrorText() && invalid) labelIds.push(errorTextId);
+  if (hasHelperText()) labelIds.push(helperTextId);
+  const getControlProps = () => ({
+    'aria-describedby': labelIds.join(' ') || undefined,
+    'aria-invalid': ariaAttr(invalid),
+    'aria-required': ariaAttr(required),
+    'aria-readonly': ariaAttr(readOnly),
+    id,
+    required,
+    disabled,
+    readOnly
+  });
+  const getInputProps = () => ({
+    ...getControlProps(),
+    ...parts.input.attrs
+  });
+  const getTextareaProps = () => ({
+    ...getControlProps(),
+    ...parts.textarea.attrs
+  });
+  const getSelectProps = () => ({
+    ...getControlProps(),
+    ...parts.select.attrs
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    'aria-live': 'polite'
+  });
+  return solidJs.createMemo(() => ({
+    ariaDescribedby: labelIds.join(' '),
+    ids: {
+      control: id,
+      label: labelId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
+    refs: {
+      rootRef
+    },
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    getLabelProps,
+    getRootProps,
+    getInputProps,
+    getTextareaProps,
+    getSelectProps,
+    getHelperTextProps,
+    getErrorTextProps
+  }));
+};
+const dataAttr = condition => condition ? '' : undefined;
+const ariaAttr = condition => condition ? true : undefined;
+
+const FieldRoot = props => {
+  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid', 'readOnly', 'required']);
+  const field = useField(useFieldProps);
+  const mergedProps = solid.mergeProps(() => field().getRootProps(), localProps);
+  return web.createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FieldRootProvider = props => {
+  const [{
+    value: field
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => field().getRootProps(), localProps);
+  return web.createComponent(FieldProvider, {
+    value: field,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const FieldTextarea = props => {
+  const field = useFieldContext();
+  const mergedProps = solid.mergeProps(() => field?.().getTextareaProps(), props);
+  return web.createComponent(ark.textarea, mergedProps);
+};
+
+var field = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Context: FieldContext,
+  ErrorText: FieldErrorText,
+  HelperText: FieldHelperText,
+  Input: FieldInput,
+  Label: FieldLabel,
+  Root: FieldRoot,
+  RootProvider: FieldRootProvider,
+  Select: FieldSelect,
+  Textarea: FieldTextarea
+});
+
 const CheckboxHiddenInput = props => {
   const checkbox = useCheckboxContext();
   const mergedProps = solid.mergeProps(() => checkbox().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const CheckboxIndicator = props => {
@@ -669,16 +945,31 @@ const CheckboxLabel = props => {
   return web.createComponent(ark.span, mergedProps);
 };
 
-const useCheckbox = props => {
+const useCheckbox = ownProps => {
+  const checkboxGroup = useCheckboxGroupContext();
+  const props = solidJs.createMemo(() => {
+    return solid.mergeProps(ownProps, checkboxGroup?.().getItemProps({
+      value: ownProps.value
+    }) ?? {});
+  }, [ownProps, checkboxGroup]);
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
-    checked: props.defaultChecked,
-    ...props
+    checked: props().defaultChecked,
+    ...props()
   }));
   const [state, send] = solid.useMachine(checkbox__namespace.machine(context()), {
     context
@@ -715,6 +1006,7 @@ var checkbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: CheckboxContext,
   Control: CheckboxControl,
+  Group: CheckboxGroup,
   HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
@@ -876,10 +1168,18 @@ const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = cre
   providerName: '<ColorPickerChannelSliderProvider />'
 });
 
+const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext({
+  hookName: 'useColorPickerFormatPropsContext',
+  providerName: '<ColorPickerFormatPropsProvider />',
+  strict: false
+});
+
 const ColorPickerChannelSlider = props => {
   const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+  const formatProps = useColorPickerFormatPropsContext();
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderProps(channelSliderProps), localProps);
   return web.createComponent(ColorPickerChannelPropsProvider, {
     value: channelProps,
     get children() {
@@ -888,21 +1188,44 @@ const ColorPickerChannelSlider = props => {
   });
 };
 
+const ColorPickerChannelSliderLabel = props => {
+  const colorPicker = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().getChannelSliderLabelProps(channelProps), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
 const ColorPickerChannelSliderThumb = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(channelProps), props);
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderThumbProps(channelSliderProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
   const api = useColorPickerContext();
+  const formatProps = useColorPickerFormatPropsContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(channelProps), props);
+  const channelSliderProps = solid.mergeProps(channelProps, formatProps);
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(channelSliderProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
-const splitPresenceProps = props => createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+const ColorPickerChannelSliderValueText = props => {
+  const colorPicker = useColorPickerContext();
+  const localeContext = useLocaleContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().getChannelSliderValueTextProps(channelProps), props);
+  return web.createComponent(ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return props.children || colorPicker().getChannelValueText(channelProps.channel, localeContext().locale);
+    }
+  }));
+};
+
+const splitPresenceProps = props => createSplitProps()(props, ['immediate', 'lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
 
 const usePresence = props => {
   const [renderStrategyProps, context] = splitRenderStrategyProps(props);
@@ -1005,7 +1328,12 @@ const ColorPickerFormatTrigger = props => {
 const ColorPickerHiddenInput = props => {
   const colorPicker = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => colorPicker().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const ColorPickerLabel = props => {
@@ -1031,10 +1359,18 @@ const ColorPickerPositioner = props => {
 const useColorPicker = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
+  const field = useFieldContext();
   const id = solidJs.createUniqueId();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     open: props.defaultOpen,
     'open.controlled': props.open !== undefined,
@@ -1049,7 +1385,7 @@ const useColorPicker = props => {
 
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'defaultOpen', 'defaultValue', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'required', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1140,6 +1476,26 @@ const ColorPickerTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerValueSwatch = props => {
+  const [{
+    respectAlpha
+  }, localProps] = createSplitProps()(props, ['respectAlpha']);
+  const colorPicker = useColorPickerContext();
+  const swatchProps = solidJs.createMemo(() => ({
+    respectAlpha,
+    value: colorPicker().value
+  }));
+  const mergedProps = solid.mergeProps(() => colorPicker().getSwatchProps(swatchProps()), localProps);
+  return web.createComponent(ColorPickerSwatchPropsProvider, {
+    get value() {
+      return swatchProps();
+    },
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const ColorPickerValueText = props => {
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().valueText.attrs, props);
@@ -1152,17 +1508,23 @@ const ColorPickerValueText = props => {
 
 const ColorPickerView = props => {
   const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, props);
-  return web.createComponent(solidJs.Show, {
-    get when() {
-      return api().format === props.format;
-    },
+  const [formatProps, localProps] = createSplitProps()(props, ['format']);
+  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, localProps);
+  return web.createComponent(ColorPickerFormatPropsProvider, {
+    value: formatProps,
     get children() {
-      return web.createComponent(ark.div, web.mergeProps({
-        get ["data-format"]() {
-          return props.format;
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return api().format === props.format;
+        },
+        get children() {
+          return web.createComponent(ark.div, web.mergeProps({
+            get ["data-format"]() {
+              return props.format;
+            }
+          }, mergedProps));
         }
-      }, mergedProps));
+      });
     }
   });
 };
@@ -1174,8 +1536,10 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   AreaThumb: ColorPickerAreaThumb,
   ChannelInput: ColorPickerChannelInput,
   ChannelSlider: ColorPickerChannelSlider,
+  ChannelSliderLabel: ColorPickerChannelSliderLabel,
   ChannelSliderThumb: ColorPickerChannelSliderThumb,
   ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  ChannelSliderValueText: ColorPickerChannelSliderValueText,
   Content: ColorPickerContent,
   Context: ColorPickerContext,
   Control: ColorPickerControl,
@@ -1186,12 +1550,14 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Root: ColorPickerRoot,
+  RootProvider: ColorPickerRootProvider,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchIndicator: ColorPickerSwatchIndicator,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
   Trigger: ColorPickerTrigger,
+  ValueSwatch: ColorPickerValueSwatch,
   ValueText: ColorPickerValueText,
   View: ColorPickerView
 });
@@ -1233,7 +1599,12 @@ const ComboboxControl = props => {
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
   const mergedProps = solid.mergeProps(() => combobox().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [ComboboxItemProvider, useComboboxItemContext] = createContext({
@@ -1341,8 +1712,17 @@ const useCombobox = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
@@ -1359,7 +1739,7 @@ const useCombobox = props => {
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'disableLayer', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -1474,18 +1854,23 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getMonthSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
-      return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$3();
-        web.insert(_el$, () => month.label);
-        web.effect(() => _el$.value = month.value);
-        return _el$;
-      })());
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return api().getMonths();
+        },
+        children: month => (() => {
+          var _el$ = _tmpl$$4();
+          web.insert(_el$, () => month.label);
+          web.effect(() => _el$.value = month.value);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -1746,21 +2131,26 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().getYearSelectProps(), props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
-      return getYearsRange({
-        from: 1_000,
-        to: 4_000
-      }).map(year => (() => {
-        var _el$ = _tmpl$$2();
-        _el$.value = year;
-        web.insert(_el$, year);
-        return _el$;
-      })());
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return getYearsRange({
+            from: 1_000,
+            to: 4_000
+          });
+        },
+        children: year => (() => {
+          var _el$ = _tmpl$$3();
+          _el$.value = year;
+          web.insert(_el$, year);
+          return _el$;
+        })()
+      });
     }
   }));
 };
@@ -1999,7 +2389,12 @@ const EditableEditTrigger = props => {
 const EditableInput = props => {
   const api = useEditableContext();
   const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const EditableLabel = props => {
@@ -2018,9 +2413,18 @@ const useEditable = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    invalid: field?.().invalid,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
     ...props
@@ -2032,7 +2436,7 @@ const useEditable = props => {
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'defaultValue', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
   const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(EditableProvider, {
@@ -2093,7 +2497,12 @@ const FileUploadDropzone = props => {
 const FileUploadHiddenInput = props => {
   const fileUpload = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => fileUpload().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
@@ -2178,9 +2587,16 @@ const useFileUpload = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     ...props
   }));
@@ -2191,7 +2607,7 @@ const useFileUpload = props => {
 };
 
 const FileUploadRoot = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'required', 'translations', 'validate']);
   const fileUpload = useFileUpload(fileUploadProps);
   const mergedProps = solid.mergeProps(() => fileUpload().getRootProps(), localProps);
   return web.createComponent(FileUploadProvider, {
@@ -2417,12 +2833,12 @@ const MenuCheckboxItem = props => {
   });
   const context = useMenuContext();
   const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
   return web.createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return web.createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -2543,12 +2959,12 @@ const MenuRadioItem = props => {
     })
   }));
   const mergedProps = solid.mergeProps(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = solidJs.createMemo(() => context().getItemState(optionItemProps));
+  const optionItemState = solidJs.createMemo(() => context().getOptionItemState(optionItemProps));
   return web.createComponent(MenuOptionItemPropsProvider, {
     value: optionItemProps,
     get children() {
       return web.createComponent(MenuItemProvider, {
-        value: itemState,
+        value: optionItemState,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -2762,7 +3178,12 @@ const NumberInputIncrementTrigger = props => {
 const NumberInputInput = props => {
   const api = useNumberInputContext();
   const mergedProps = solid.mergeProps(() => api().getInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const NumberInputLabel = props => {
@@ -2775,8 +3196,17 @@ const useNumberInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      input: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -2789,7 +3219,7 @@ const useNumberInput = props => {
 };
 
 const NumberInputRoot = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'defaultValue', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'defaultValue', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'required', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(NumberInputProvider, {
@@ -2828,6 +3258,7 @@ var numberInput = /*#__PURE__*/Object.freeze({
   Input: NumberInputInput,
   Label: NumberInputLabel,
   Root: NumberInputRoot,
+  RootProvider: NumberInputRootProvider,
   Scrubber: NumberInputScrubber
 });
 
@@ -2933,7 +3364,12 @@ const PinInputControl = props => {
 const PinInputHiddenInput = props => {
   const pinInput = usePinInputContext();
   const mergedProps = solid.mergeProps(() => pinInput().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const PinInputInput = props => {
@@ -2953,8 +3389,17 @@ const usePinInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -2967,7 +3412,7 @@ const usePinInput = props => {
 };
 
 const PinInputRoot = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'readOnly', 'required', 'selectOnFocus', 'translations', 'type', 'value']);
   const pinInput = usePinInput(usePinInputProps);
   const mergedProps = solid.mergeProps(() => pinInput().getRootProps(), localProps);
   return web.createComponent(PinInputProvider, {
@@ -3279,6 +3724,82 @@ var progress = /*#__PURE__*/Object.freeze({
   View: ProgressView
 });
 
+const [QrCodeProvider, useQrCodeContext] = createContext({
+  hookName: 'useQrCodeContext',
+  providerName: '<QrCodeProvider />'
+});
+
+const QrCodeContext = props => props.children(useQrCodeContext());
+
+const QrCodeFrame = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getFrameProps(), props);
+  return web.createComponent(ark.svg, mergedProps);
+};
+
+const QrCodeOverlay = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getOverlayProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const QrCodePattern = props => {
+  const qrCode = useQrCodeContext();
+  const mergedProps = solid.mergeProps(() => qrCode().getPatternProps(), props);
+  return web.createComponent(ark.path, mergedProps);
+};
+
+const useQrCode = props => {
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const context = solidJs.createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(qrCode__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => qrCode__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const QrCodeRoot = props => {
+  const [useQrCodeProps, restProps] = createSplitProps()(props, ['encoding', 'id', 'ids', 'value']);
+  const api = useQrCode(useQrCodeProps);
+  const mergedProps = solid.mergeProps(() => api().getRootProps(), restProps);
+  return web.createComponent(QrCodeProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const QrCodeRootProvider = props => {
+  const [{
+    value: qrCode
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => qrCode().getRootProps(), localProps);
+  return web.createComponent(QrCodeProvider, {
+    value: qrCode,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var qrCode = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Frame: QrCodeFrame,
+  Overlay: QrCodeOverlay,
+  Pattern: QrCodePattern,
+  QrCodeContext: QrCodeContext,
+  Root: QrCodeRoot,
+  RootProvider: QrCodeRootProvider
+});
+
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
   providerName: '<RadioGroupProvider />'
@@ -3421,7 +3942,12 @@ const RatingGroupControl = props => {
 const RatingGroupHiddenInput = props => {
   const ratingGroup = useRatingGroupContext();
   const mergedProps = solid.mergeProps(() => ratingGroup().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -3454,8 +3980,16 @@ const useRatingGroup = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
@@ -3468,7 +4002,7 @@ const useRatingGroup = props => {
 };
 
 const RatingGroupRoot = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'required', 'translations', 'value']);
   const api = useRatingGroup(useRatingProps);
   const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(RatingGroupProvider, {
@@ -3500,7 +4034,8 @@ var ratingGroup = /*#__PURE__*/Object.freeze({
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
-  Root: RatingGroupRoot
+  Root: RatingGroupRoot,
+  RootProvider: RatingGroupRootProvider
 });
 
 const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
@@ -3625,7 +4160,8 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   ItemHiddenInput: SegmentGroupItemHiddenInput,
   ItemText: SegmentGroupItemText,
   Label: SegmentGroupLabel,
-  Root: SegmentGroupRoot
+  Root: SegmentGroupRoot,
+  RootProvider: SegmentGroupRootProvider
 });
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -3662,27 +4198,32 @@ const SelectControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
-var _tmpl$$1 = /*#__PURE__*/web.template(`<option value="">`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2$1 = /*#__PURE__*/web.template(`<option>`);
 const SelectHiddenSelect = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => select().getControlProps(), props);
+  const mergedProps = solid.mergeProps(() => select().getHiddenSelectProps(), props);
   const isValueEmpty = solidJs.createMemo(() => select().value.length === 0);
-  return web.createComponent(ark.select, web.mergeProps(mergedProps, {
+  const field = useFieldContext();
+  return web.createComponent(ark.select, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps, {
     get children() {
       return [web.createComponent(solidJs.Show, {
         get when() {
           return isValueEmpty();
         },
         get children() {
-          return _tmpl$$1();
+          return _tmpl$$2();
         }
       }), web.createComponent(solidJs.Index, {
         get each() {
           return select().collection.toArray();
         },
         children: option => (() => {
-          var _el$2 = _tmpl$2();
+          var _el$2 = _tmpl$2$1();
           web.insert(_el$2, () => option().label);
           web.effect(() => _el$2.value = option().value);
           return _el$2;
@@ -3777,6 +4318,12 @@ const SelectLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
+const SelectList = props => {
+  const select = useSelectContext();
+  const mergedProps = solid.mergeProps(() => select().getListProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
 const SelectPositioner = props => {
   const select = useSelectContext();
   const presenceApi = usePresenceContext();
@@ -3797,8 +4344,17 @@ const useSelect = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenSelect: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     collection: collection(),
     dir: locale().dir,
     getRootNode: environment().getRootNode,
@@ -3815,7 +4371,7 @@ const useSelect = props => {
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'composite', 'defaultOpen', 'defaultValue', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'required', 'scrollToIndexFn', 'value']);
   const select = useSelect(useSelectProps);
   const presenceApi = usePresence(solid.mergeProps(() => ({
     present: select().open
@@ -3887,6 +4443,7 @@ var select = /*#__PURE__*/Object.freeze({
   ItemIndicator: SelectItemIndicator,
   ItemText: SelectItemText,
   Label: SelectLabel,
+  List: SelectList,
   Positioner: SelectPositioner,
   Root: SelectRoot,
   RootProvider: SelectRootProvider,
@@ -3894,6 +4451,145 @@ var select = /*#__PURE__*/Object.freeze({
   ValueText: SelectValueText
 });
 
+const [SignaturePadProvider, useSignaturePadContext] = createContext({
+  hookName: 'useSignaturePadContext',
+  providerName: '<SignaturePadProvider />'
+});
+
+const SignaturePadClearTrigger = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getClearTriggerProps(), props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+const SignaturePadContext = props => props.children(useSignaturePadContext());
+
+const SignaturePadControl = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getControlProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SignaturePadGuide = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getGuideProps(), props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SignaturePadLabel = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getLabelProps(), props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const SignaturePadHiddenInput = props => {
+  const [hiddenInputProps, localProps] = createSplitProps()(props, ['value']);
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getHiddenInputProps(hiddenInputProps), localProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
+};
+
+const useSignaturePad = props => {
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const id = solidJs.createUniqueId();
+  const field = useFieldContext();
+  const context = solidJs.createMemo(() => ({
+    id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...props
+  }));
+  const [state, send] = solid.useMachine(signaturePad__namespace.machine(context()), {
+    context
+  });
+  return solidJs.createMemo(() => signaturePad__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const SignaturePadRoot = props => {
+  const [useSignaturePadProps, localProps] = createSplitProps()(props, ['id', 'ids', 'drawing', 'disabled', 'readOnly', 'name', 'onDraw', 'onDrawEnd', 'readOnly', 'required', 'translations']);
+  const signaturePad = useSignaturePad(useSignaturePadProps);
+  const mergedProps = solid.mergeProps(() => signaturePad().getRootProps(), localProps);
+  return web.createComponent(SignaturePadProvider, {
+    value: signaturePad,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const SignaturePadRootProvider = props => {
+  const [{
+    value: signaturePad
+  }, localProps] = createSplitProps()(props, ['value']);
+  const mergedProps = solid.mergeProps(() => signaturePad().getRootProps(), localProps);
+  return web.createComponent(SignaturePadProvider, {
+    value: signaturePad,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+var _tmpl$$1 = /*#__PURE__*/web.template(`<title>Signature`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<svg><path></svg>`, false, true);
+const SignaturePadSegment = props => {
+  const signaturePad = useSignaturePadContext();
+  const mergedProps = solid.mergeProps(() => signaturePad().getSegmentProps(), props);
+  return web.createComponent(ark.svg, web.mergeProps(mergedProps, {
+    get children() {
+      return [_tmpl$$1(), web.createComponent(solidJs.For, {
+        get each() {
+          return signaturePad().paths;
+        },
+        children: path => (() => {
+          var _el$3 = _tmpl$2();
+          web.spread(_el$3, web.mergeProps(() => signaturePad().getSegmentPathProps({
+            path
+          })), true, false);
+          return _el$3;
+        })()
+      }), web.createComponent(solidJs.Show, {
+        get when() {
+          return signaturePad().currentPath;
+        },
+        get children() {
+          var _el$2 = _tmpl$2();
+          web.spread(_el$2, web.mergeProps(() => signaturePad().getSegmentPathProps({
+            path: signaturePad().currentPath
+          })), true, false);
+          return _el$2;
+        }
+      })];
+    }
+  }));
+};
+
+var signaturePad = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ClearTrigger: SignaturePadClearTrigger,
+  Context: SignaturePadContext,
+  Control: SignaturePadControl,
+  Guide: SignaturePadGuide,
+  HiddenInput: SignaturePadHiddenInput,
+  Label: SignaturePadLabel,
+  Root: SignaturePadRoot,
+  RootProvider: SignaturePadRootProvider,
+  Segment: SignaturePadSegment
+});
+
 const [SliderProvider, useSliderContext] = createContext({
   hookName: 'useSliderContext',
   providerName: '<SliderProvider />'
@@ -4118,7 +4814,12 @@ const SwitchControl = props => {
 const SwitchHiddenInput = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const SwitchLabel = props => {
@@ -4131,8 +4832,17 @@ const useSwitch = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    invalid: field?.().invalid,
+    required: field?.().required,
     dir: locale().dir,
     getRootNode: environment().getRootNode,
     checked: props.defaultChecked,
@@ -4196,7 +4906,8 @@ const TabContent = props => {
   const api = useTabsContext();
   const renderStrategyProps = useRenderStrategyContext();
   const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
-    present: api().value === contentProps.value
+    present: api().value === contentProps.value,
+    immediate: true
   })));
   const mergedProps = solid.mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
   return web.createComponent(PresenceProvider, {
@@ -4322,7 +5033,12 @@ const TagsInputControl = props => {
 const TagsInputHiddenInput = props => {
   const tagsInput = useTagsInputContext();
   const mergedProps = solid.mergeProps(() => tagsInput().getHiddenInputProps(), props);
-  return web.createComponent(ark.input, mergedProps);
+  const field = useFieldContext();
+  return web.createComponent(ark.input, web.mergeProps({
+    get ["aria-describedby"]() {
+      return field?.().ariaDescribedby;
+    }
+  }, mergedProps));
 };
 
 const TagsInputInput = props => {
@@ -4399,9 +5115,18 @@ const useTagsInput = props => {
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
+  const field = useFieldContext();
   const context = solidJs.createMemo(() => ({
     id,
+    ids: {
+      label: field?.().ids.label,
+      hiddenInput: field?.().ids.control
+    },
     dir: locale().dir,
+    disabled: field?.().disabled,
+    invalid: field?.().invalid,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
     getRootNode: environment().getRootNode,
     value: props.defaultValue,
     ...props
@@ -4413,7 +5138,7 @@ const useTagsInput = props => {
 };
 
 const TagsInputRoot = props => {
-  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'defaultValue', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'defaultValue', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'required', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
   const mergedProps = solid.mergeProps(() => api().getRootProps(), localProps);
   return web.createComponent(TagsInputProvider, {
@@ -4495,11 +5220,12 @@ const ToastDescription = props => {
 var _tmpl$ = /*#__PURE__*/web.template(`<div><div></div><div>`);
 const ToastRoot = props => {
   const toast = useToastContext();
+  const mergedProps = solid.mergeProps(() => toast().getRootProps(), props);
   return (() => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
-    web.spread(_el$, web.mergeProps(() => toast().getRootProps()), false, true);
+    web.spread(_el$, mergedProps, false, true);
     web.spread(_el$2, web.mergeProps(() => toast().getGhostBeforeProps()), false, false);
     web.insert(_el$, () => props.children, _el$3);
     web.spread(_el$3, web.mergeProps(() => toast().getGhostAfterProps()), false, false);
@@ -4618,7 +5344,8 @@ var toggleGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: ToggleGroupContext,
   Item: ToggleGroupItem,
-  Root: ToggleGroupRoot
+  Root: ToggleGroupRoot,
+  RootProvider: ToggleGroupRootProvider
 });
 
 const [TooltipProvider, useTooltipContext] = createContext({
@@ -4688,7 +5415,7 @@ const useTooltip = props => {
 
 const TooltipRoot = props => {
   const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEscape', 'closeOnPointerDown', 'defaultOpen', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEscape', 'closeOnPointerDown', 'closeOnScroll', 'defaultOpen', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
     present: api().open
@@ -4974,6 +5701,7 @@ exports.CarouselViewport = CarouselViewport;
 exports.Checkbox = checkbox;
 exports.CheckboxContext = CheckboxContext;
 exports.CheckboxControl = CheckboxControl;
+exports.CheckboxGroup = CheckboxGroup;
 exports.CheckboxHiddenInput = CheckboxHiddenInput;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
@@ -5000,8 +5728,10 @@ exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = ColorPickerChannelInput;
 exports.ColorPickerChannelSlider = ColorPickerChannelSlider;
+exports.ColorPickerChannelSliderLabel = ColorPickerChannelSliderLabel;
 exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;
+exports.ColorPickerChannelSliderValueText = ColorPickerChannelSliderValueText;
 exports.ColorPickerContent = ColorPickerContent;
 exports.ColorPickerContext = ColorPickerContext;
 exports.ColorPickerControl = ColorPickerControl;
@@ -5019,6 +5749,7 @@ exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;
 exports.ColorPickerSwatchTrigger = ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = ColorPickerTrigger;
+exports.ColorPickerValueSwatch = ColorPickerValueSwatch;
 exports.ColorPickerValueText = ColorPickerValueText;
 exports.ColorPickerView = ColorPickerView;
 exports.Combobox = combobox;
@@ -5090,6 +5821,16 @@ exports.EditableRoot = EditableRoot;
 exports.EditableRootProvider = EditableRootProvider;
 exports.EditableSubmitTrigger = EditableSubmitTrigger;
 exports.EnvironmentProvider = EnvironmentProvider;
+exports.Field = field;
+exports.FieldContext = FieldContext;
+exports.FieldErrorText = FieldErrorText;
+exports.FieldHelperText = FieldHelperText;
+exports.FieldInput = FieldInput;
+exports.FieldLabel = FieldLabel;
+exports.FieldRoot = FieldRoot;
+exports.FieldRootProvider = FieldRootProvider;
+exports.FieldSelect = FieldSelect;
+exports.FieldTextarea = FieldTextarea;
 exports.FileUpload = fileUpload;
 exports.FileUploadContext = FileUploadContext;
 exports.FileUploadDropzone = FileUploadDropzone;
@@ -5194,6 +5935,13 @@ exports.ProgressRootProvider = ProgressRootProvider;
 exports.ProgressTrack = ProgressTrack;
 exports.ProgressValueText = ProgressValueText;
 exports.ProgressView = ProgressView;
+exports.QrCode = qrCode;
+exports.QrCodeContext = QrCodeContext;
+exports.QrCodeFrame = QrCodeFrame;
+exports.QrCodeOverlay = QrCodeOverlay;
+exports.QrCodePattern = QrCodePattern;
+exports.QrCodeRoot = QrCodeRoot;
+exports.QrCodeRootProvider = QrCodeRootProvider;
 exports.RadioGroup = radioGroup;
 exports.RadioGroupContext = RadioGroupContext;
 exports.RadioGroupIndicator = RadioGroupIndicator;
@@ -5239,11 +5987,22 @@ exports.SelectItemGroupLabel = SelectItemGroupLabel;
 exports.SelectItemIndicator = SelectItemIndicator;
 exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
+exports.SelectList = SelectList;
 exports.SelectPositioner = SelectPositioner;
 exports.SelectRoot = SelectRoot;
 exports.SelectRootProvider = SelectRootProvider;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValueText = SelectValueText;
+exports.SignaturePad = signaturePad;
+exports.SignaturePadClearTrigger = SignaturePadClearTrigger;
+exports.SignaturePadContext = SignaturePadContext;
+exports.SignaturePadControl = SignaturePadControl;
+exports.SignaturePadGuide = SignaturePadGuide;
+exports.SignaturePadHiddenInput = SignaturePadHiddenInput;
+exports.SignaturePadLabel = SignaturePadLabel;
+exports.SignaturePadRoot = SignaturePadRoot;
+exports.SignaturePadRootProvider = SignaturePadRootProvider;
+exports.SignaturePadSegment = SignaturePadSegment;
 exports.Slider = slider;
 exports.SliderContext = SliderContext;
 exports.SliderControl = SliderControl;
@@ -5344,6 +6103,8 @@ exports.useCarousel = useCarousel;
 exports.useCarouselContext = useCarouselContext;
 exports.useCheckbox = useCheckbox;
 exports.useCheckboxContext = useCheckboxContext;
+exports.useCheckboxGroup = useCheckboxGroup;
+exports.useCheckboxGroupContext = useCheckboxGroupContext;
 exports.useClipboard = useClipboard;
 exports.useClipboardContext = useClipboardContext;
 exports.useCollapsible = useCollapsible;
@@ -5360,6 +6121,7 @@ exports.useDialogContext = useDialogContext;
 exports.useEditable = useEditable;
 exports.useEditableContext = useEditableContext;
 exports.useEnvironmentContext = useEnvironmentContext;
+exports.useFieldContext = useFieldContext;
 exports.useFileUpload = useFileUpload;
 exports.useFileUploadContext = useFileUploadContext;
 exports.useHoverCard = useHoverCard;
@@ -5380,6 +6142,8 @@ exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
 exports.useProgress = useProgress;
 exports.useProgressContext = useProgressContext;
+exports.useQrCode = useQrCode;
+exports.useQrCodeContext = useQrCodeContext;
 exports.useRadioGroup = useRadioGroup;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;
@@ -5392,6 +6156,8 @@ exports.useSegmentGroupItemContext = useSegmentGroupItemContext;
 exports.useSelect = useSelect;
 exports.useSelectContext = useSelectContext;
 exports.useSelectItemContext = useSelectItemContext;
+exports.useSignaturePad = useSignaturePad;
+exports.useSignaturePadContext = useSignaturePadContext;
 exports.useSlider = useSlider;
 exports.useSliderContext = useSliderContext;
 exports.useSplitter = useSplitter;