fix(components): add missing hidden input parts when needed

components/react/src/components/ui/pin-input.tsx

@@ -23,6 +23,7 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
           </ArkPinInput.Input>
         ))}
       </ArkPinInput.Control>
+      <ArkPinInput.HiddenInput />
     </ArkPinInput.Root>
   )
 })

components/react/src/components/ui/rating-group.tsx

@@ -22,6 +22,7 @@ export const RatingGroup = forwardRef<HTMLDivElement, RatingGroupProps>((props,
           }
         </ArkRatingGroup.Context>
       </ArkRatingGroup.Control>
+      <ArkRatingGroup.HiddenInput />
     </ArkRatingGroup.Root>
   )
 })

components/react/src/components/ui/slider.tsx

@@ -24,7 +24,9 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
                 <ArkSlider.Range />
               </ArkSlider.Track>
               {api.value.map((_, index) => (
-                <ArkSlider.Thumb key={index} index={index} />
+                <ArkSlider.Thumb key={index} index={index}>
+                  <ArkSlider.HiddenInput />
+                </ArkSlider.Thumb>
               ))}
             </ArkSlider.Control>
             {props.marks && (

components/react/src/demos/color-picker.demo.tsx

@@ -71,6 +71,7 @@ export const Demo = (props: ColorPicker.RootProps) => {
           </>
         )}
       </ColorPicker.Context>
+      <ColorPicker.HiddenInput />
     </ColorPicker.Root>
   )
 }

components/react/src/demos/radio-group.demo.tsx

@@ -13,6 +13,7 @@ export const Demo = (props: RadioGroup.RootProps) => {
         <RadioGroup.Item key={option.id} value={option.id} disabled={option.id === 'svelte'}>
           <RadioGroup.ItemControl />
           <RadioGroup.ItemText>{option.label}</RadioGroup.ItemText>
+          <RadioGroup.ItemHiddenInput />
         </RadioGroup.Item>
       ))}
     </RadioGroup.Root>

components/react/src/demos/segment-group.demo.tsx

@@ -13,6 +13,7 @@ export const Demo = (props: SegmentGroup.RootProps) => {
         <SegmentGroup.Item key={option.id} value={option.id} disabled={option.id === 'premium'}>
           <SegmentGroup.ItemControl />
           <SegmentGroup.ItemText>{option.label}</SegmentGroup.ItemText>
+          <SegmentGroup.ItemHiddenInput />
         </SegmentGroup.Item>
       ))}
       <SegmentGroup.Indicator />

components/solid/src/components/ui/pin-input.tsx

@@ -27,6 +27,7 @@ export const PinInput = (props: PinInputProps) => {
           )}
         </Index>
       </ArkPinInput.Control>
+      <ArkPinInput.HiddenInput />
     </ArkPinInput.Root>
   )
 }

components/solid/src/components/ui/rating-group.tsx

@@ -30,6 +30,7 @@ export const RatingGroup = (props: RatingGroupProps) => {
           )}
         </ArkRatingGroup.Context>
       </ArkRatingGroup.Control>
+      <ArkRatingGroup.HiddenInput />
     </ArkRatingGroup.Root>
   )
 }

components/solid/src/components/ui/slider.tsx

@@ -24,7 +24,13 @@ export const Slider = (props: SliderProps) => {
               <ArkSlider.Track>
                 <ArkSlider.Range />
               </ArkSlider.Track>
-              <Index each={slider().value}>{(_, index) => <ArkSlider.Thumb index={index} />}</Index>
+              <Index each={slider().value}>
+                {(_, index) => (
+                  <ArkSlider.Thumb index={index}>
+                    <ArkSlider.HiddenInput />
+                  </ArkSlider.Thumb>
+                )}
+              </Index>
             </ArkSlider.Control>
             <Show when={localProps.marks}>
               <ArkSlider.MarkerGroup>

website/public/registry/latest/react/components/pin-input.json

@@ -9,7 +9,7 @@
     },
     {
       "file": "pin-input.tsx",
-      "content": "import { forwardRef } from 'react'\nimport { PinInput as ArkPinInput } from '~/components/ui/primitives'\nimport { Input } from '~/components/ui/primitives'\n\nexport interface PinInputProps extends ArkPinInput.RootProps {\n  /**\n   * The number of inputs to render.\n   * @default 4\n   */\n  length?: number\n}\n\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) => {\n  const { children, length = 4, ...rootProps } = props\n\n  return (\n    <ArkPinInput.Root ref={ref} {...rootProps}>\n      {children && <ArkPinInput.Label>{children}</ArkPinInput.Label>}\n      <ArkPinInput.Control>\n        {Array.from({ length }, (_, index) => index).map((id, index) => (\n          <ArkPinInput.Input key={id} index={index} asChild>\n            <Input size={rootProps.size} />\n          </ArkPinInput.Input>\n        ))}\n      </ArkPinInput.Control>\n    </ArkPinInput.Root>\n  )\n})\n\nPinInput.displayName = 'PinInput'\n",
+      "content": "import { forwardRef } from 'react'\nimport { PinInput as ArkPinInput } from '~/components/ui/primitives'\nimport { Input } from '~/components/ui/primitives'\n\nexport interface PinInputProps extends ArkPinInput.RootProps {\n  /**\n   * The number of inputs to render.\n   * @default 4\n   */\n  length?: number\n}\n\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) => {\n  const { children, length = 4, ...rootProps } = props\n\n  return (\n    <ArkPinInput.Root ref={ref} {...rootProps}>\n      {children && <ArkPinInput.Label>{children}</ArkPinInput.Label>}\n      <ArkPinInput.Control>\n        {Array.from({ length }, (_, index) => index).map((id, index) => (\n          <ArkPinInput.Input key={id} index={index} asChild>\n            <Input size={rootProps.size} />\n          </ArkPinInput.Input>\n        ))}\n      </ArkPinInput.Control>\n      <ArkPinInput.HiddenInput />\n    </ArkPinInput.Root>\n  )\n})\n\nPinInput.displayName = 'PinInput'\n",
       "exports": "export { PinInput, type PinInputProps } from './pin-input'"
     }
   ]

website/public/registry/latest/react/components/rating-group.json

@@ -9,7 +9,7 @@
     },
     {
       "file": "rating-group.tsx",
-      "content": "'use client'\nimport { forwardRef } from 'react'\nimport { RatingGroup as ArkRatingGroup } from '~/components/ui/primitives'\n\nexport interface RatingGroupProps extends ArkRatingGroup.RootProps {}\n\nexport const RatingGroup = forwardRef<HTMLDivElement, RatingGroupProps>((props, ref) => {\n  const { children, ...rootProps } = props\n  return (\n    <ArkRatingGroup.Root ref={ref} {...rootProps}>\n      {children && <ArkRatingGroup.Label>{children}</ArkRatingGroup.Label>}\n      <ArkRatingGroup.Control>\n        <ArkRatingGroup.Context>\n          {({ items }) =>\n            items.map((index) => (\n              <ArkRatingGroup.Item key={index} index={index}>\n                <ArkRatingGroup.ItemContext>\n                  {(item) => <StarIcon isHalf={item.half} />}\n                </ArkRatingGroup.ItemContext>\n              </ArkRatingGroup.Item>\n            ))\n          }\n        </ArkRatingGroup.Context>\n      </ArkRatingGroup.Control>\n    </ArkRatingGroup.Root>\n  )\n})\n\nRatingGroup.displayName = 'RatingGroup'\n\ntype IconProps = {\n  isHalf: boolean\n}\n\nconst StarIcon = (props: IconProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"inherit\"\n    stroke=\"inherit\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <title>Star Icon</title>\n    <defs>\n      <linearGradient id=\"half\">\n        <stop offset=\"50%\" stopColor=\"var(--colors-color-palette-default)\" />\n        <stop offset=\"50%\" stopColor=\"var(--colors-bg-emphasized)\" />\n      </linearGradient>\n    </defs>\n    <polygon\n      fill={props.isHalf ? 'url(#half)' : 'inherit'}\n      points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\n    />\n  </svg>\n)\n",
+      "content": "'use client'\nimport { forwardRef } from 'react'\nimport { RatingGroup as ArkRatingGroup } from '~/components/ui/primitives'\n\nexport interface RatingGroupProps extends ArkRatingGroup.RootProps {}\n\nexport const RatingGroup = forwardRef<HTMLDivElement, RatingGroupProps>((props, ref) => {\n  const { children, ...rootProps } = props\n  return (\n    <ArkRatingGroup.Root ref={ref} {...rootProps}>\n      {children && <ArkRatingGroup.Label>{children}</ArkRatingGroup.Label>}\n      <ArkRatingGroup.Control>\n        <ArkRatingGroup.Context>\n          {({ items }) =>\n            items.map((index) => (\n              <ArkRatingGroup.Item key={index} index={index}>\n                <ArkRatingGroup.ItemContext>\n                  {(item) => <StarIcon isHalf={item.half} />}\n                </ArkRatingGroup.ItemContext>\n              </ArkRatingGroup.Item>\n            ))\n          }\n        </ArkRatingGroup.Context>\n      </ArkRatingGroup.Control>\n      <ArkRatingGroup.HiddenInput />\n    </ArkRatingGroup.Root>\n  )\n})\n\nRatingGroup.displayName = 'RatingGroup'\n\ntype IconProps = {\n  isHalf: boolean\n}\n\nconst StarIcon = (props: IconProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"inherit\"\n    stroke=\"inherit\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <title>Star Icon</title>\n    <defs>\n      <linearGradient id=\"half\">\n        <stop offset=\"50%\" stopColor=\"var(--colors-color-palette-default)\" />\n        <stop offset=\"50%\" stopColor=\"var(--colors-bg-emphasized)\" />\n      </linearGradient>\n    </defs>\n    <polygon\n      fill={props.isHalf ? 'url(#half)' : 'inherit'}\n      points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\n    />\n  </svg>\n)\n",
       "exports": "export { RatingGroup, type RatingGroupProps } from './rating-group'"
     }
   ]

website/public/registry/latest/react/components/slider.json

@@ -9,7 +9,7 @@
     },
     {
       "file": "slider.tsx",
-      "content": "'use client'\nimport { type ReactNode, forwardRef } from 'react'\nimport { Slider as ArkSlider } from '~/components/ui/primitives'\n\nexport interface SliderProps extends ArkSlider.RootProps {\n  children?: ReactNode\n  marks?: {\n    value: number\n    label?: ReactNode\n  }[]\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {\n  const { children, marks, ...rootProps } = props\n\n  return (\n    <ArkSlider.Root ref={ref} {...rootProps}>\n      <ArkSlider.Context>\n        {(api) => (\n          <>\n            {children && <ArkSlider.Label>{children}</ArkSlider.Label>}\n            <ArkSlider.Control>\n              <ArkSlider.Track>\n                <ArkSlider.Range />\n              </ArkSlider.Track>\n              {api.value.map((_, index) => (\n                <ArkSlider.Thumb key={index} index={index} />\n              ))}\n            </ArkSlider.Control>\n            {props.marks && (\n              <ArkSlider.MarkerGroup>\n                {props.marks.map((mark) => (\n                  <ArkSlider.Marker key={mark.value} value={mark.value}>\n                    {mark.label}\n                  </ArkSlider.Marker>\n                ))}\n              </ArkSlider.MarkerGroup>\n            )}\n          </>\n        )}\n      </ArkSlider.Context>\n    </ArkSlider.Root>\n  )\n})\n\nSlider.displayName = 'Slider'\n",
+      "content": "'use client'\nimport { type ReactNode, forwardRef } from 'react'\nimport { Slider as ArkSlider } from '~/components/ui/primitives'\n\nexport interface SliderProps extends ArkSlider.RootProps {\n  children?: ReactNode\n  marks?: {\n    value: number\n    label?: ReactNode\n  }[]\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {\n  const { children, marks, ...rootProps } = props\n\n  return (\n    <ArkSlider.Root ref={ref} {...rootProps}>\n      <ArkSlider.Context>\n        {(api) => (\n          <>\n            {children && <ArkSlider.Label>{children}</ArkSlider.Label>}\n            <ArkSlider.Control>\n              <ArkSlider.Track>\n                <ArkSlider.Range />\n              </ArkSlider.Track>\n              {api.value.map((_, index) => (\n                <ArkSlider.Thumb key={index} index={index}>\n                  <ArkSlider.HiddenInput />\n                </ArkSlider.Thumb>\n              ))}\n            </ArkSlider.Control>\n            {props.marks && (\n              <ArkSlider.MarkerGroup>\n                {props.marks.map((mark) => (\n                  <ArkSlider.Marker key={mark.value} value={mark.value}>\n                    {mark.label}\n                  </ArkSlider.Marker>\n                ))}\n              </ArkSlider.MarkerGroup>\n            )}\n          </>\n        )}\n      </ArkSlider.Context>\n    </ArkSlider.Root>\n  )\n})\n\nSlider.displayName = 'Slider'\n",
       "exports": "export { Slider, type SliderProps } from './slider'"
     }
   ]

website/public/registry/latest/solid/components/pin-input.json

@@ -9,7 +9,7 @@
     },
     {
       "file": "pin-input.tsx",
-      "content": "import { Index, Show, children } from 'solid-js'\nimport { PinInput as ArkPinInput, Input } from '~/components/ui/primitives'\n\nexport interface PinInputProps extends ArkPinInput.RootProps {\n  /**\n   * The number of inputs to render.\n   * @default 4\n   */\n  length?: number\n}\n\nexport const PinInput = (props: PinInputProps) => {\n  const getChildren = children(() => props.children)\n\n  return (\n    <ArkPinInput.Root {...props}>\n      <Show when={getChildren()}>\n        <ArkPinInput.Label>{getChildren()}</ArkPinInput.Label>\n      </Show>\n      <ArkPinInput.Control>\n        <Index each={Array.from({ length: props.length ?? 4 }, (_, index) => index)}>\n          {(index) => (\n            <ArkPinInput.Input\n              index={index()}\n              asChild={(inputProps) => <Input {...inputProps()} size={props.size} />}\n            />\n          )}\n        </Index>\n      </ArkPinInput.Control>\n    </ArkPinInput.Root>\n  )\n}\n",
+      "content": "import { Index, Show, children } from 'solid-js'\nimport { PinInput as ArkPinInput, Input } from '~/components/ui/primitives'\n\nexport interface PinInputProps extends ArkPinInput.RootProps {\n  /**\n   * The number of inputs to render.\n   * @default 4\n   */\n  length?: number\n}\n\nexport const PinInput = (props: PinInputProps) => {\n  const getChildren = children(() => props.children)\n\n  return (\n    <ArkPinInput.Root {...props}>\n      <Show when={getChildren()}>\n        <ArkPinInput.Label>{getChildren()}</ArkPinInput.Label>\n      </Show>\n      <ArkPinInput.Control>\n        <Index each={Array.from({ length: props.length ?? 4 }, (_, index) => index)}>\n          {(index) => (\n            <ArkPinInput.Input\n              index={index()}\n              asChild={(inputProps) => <Input {...inputProps()} size={props.size} />}\n            />\n          )}\n        </Index>\n      </ArkPinInput.Control>\n      <ArkPinInput.HiddenInput />\n    </ArkPinInput.Root>\n  )\n}\n",
       "exports": "export { PinInput, type PinInputProps } from './pin-input'"
     }
   ]

website/public/registry/latest/solid/components/rating-group.json

@@ -9,7 +9,7 @@
     },
     {
       "file": "rating-group.tsx",
-      "content": "import { Index, Show, children } from 'solid-js'\nimport { RatingGroup as ArkRatingGroup } from '~/components/ui/primitives'\n\nexport interface RatingGroupProps extends ArkRatingGroup.RootProps {}\n\nexport const RatingGroup = (props: RatingGroupProps) => {\n  const getChildren = children(() => props.children)\n\n  return (\n    <ArkRatingGroup.Root {...props}>\n      <Show when={getChildren()}>\n        <ArkRatingGroup.Label>{getChildren()}</ArkRatingGroup.Label>\n      </Show>\n      <ArkRatingGroup.Control>\n        <ArkRatingGroup.Context>\n          {(context) => (\n            <Index each={context().items}>\n              {(index) => (\n                <ArkRatingGroup.Item index={index()}>\n                  <ArkRatingGroup.ItemContext>\n                    {(item) => (\n                      <Show when={item().highlighted} fallback={<StarIcon />}>\n                        <StarIcon half={item().half} />\n                      </Show>\n                    )}\n                  </ArkRatingGroup.ItemContext>\n                </ArkRatingGroup.Item>\n              )}\n            </Index>\n          )}\n        </ArkRatingGroup.Context>\n      </ArkRatingGroup.Control>\n    </ArkRatingGroup.Root>\n  )\n}\n\ninterface Props {\n  half?: boolean\n}\n\nconst StarIcon = (props: Props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"inherit\"\n    stroke=\"inherit\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <title>Star Icon</title>\n    <defs>\n      <linearGradient id=\"half\">\n        <stop offset=\"50%\" stop-color=\"var(--colors-color-palette-default)\" />\n        <stop offset=\"50%\" stop-color=\"var(--colors-bg-emphasized)\" />\n      </linearGradient>\n    </defs>\n    <polygon\n      fill={props.half ? 'url(#half)' : 'inherit'}\n      points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\n    />\n  </svg>\n)\n",
+      "content": "import { Index, Show, children } from 'solid-js'\nimport { RatingGroup as ArkRatingGroup } from '~/components/ui/primitives'\n\nexport interface RatingGroupProps extends ArkRatingGroup.RootProps {}\n\nexport const RatingGroup = (props: RatingGroupProps) => {\n  const getChildren = children(() => props.children)\n\n  return (\n    <ArkRatingGroup.Root {...props}>\n      <Show when={getChildren()}>\n        <ArkRatingGroup.Label>{getChildren()}</ArkRatingGroup.Label>\n      </Show>\n      <ArkRatingGroup.Control>\n        <ArkRatingGroup.Context>\n          {(context) => (\n            <Index each={context().items}>\n              {(index) => (\n                <ArkRatingGroup.Item index={index()}>\n                  <ArkRatingGroup.ItemContext>\n                    {(item) => (\n                      <Show when={item().highlighted} fallback={<StarIcon />}>\n                        <StarIcon half={item().half} />\n                      </Show>\n                    )}\n                  </ArkRatingGroup.ItemContext>\n                </ArkRatingGroup.Item>\n              )}\n            </Index>\n          )}\n        </ArkRatingGroup.Context>\n      </ArkRatingGroup.Control>\n      <ArkRatingGroup.HiddenInput />\n    </ArkRatingGroup.Root>\n  )\n}\n\ninterface Props {\n  half?: boolean\n}\n\nconst StarIcon = (props: Props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"inherit\"\n    stroke=\"inherit\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <title>Star Icon</title>\n    <defs>\n      <linearGradient id=\"half\">\n        <stop offset=\"50%\" stop-color=\"var(--colors-color-palette-default)\" />\n        <stop offset=\"50%\" stop-color=\"var(--colors-bg-emphasized)\" />\n      </linearGradient>\n    </defs>\n    <polygon\n      fill={props.half ? 'url(#half)' : 'inherit'}\n      points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\n    />\n  </svg>\n)\n",
       "exports": "export { RatingGroup, type RatingGroupProps } from './rating-group'"
     }
   ]