@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/PasswordInput.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { useFieldContext } from '@ark-ui/react/field'
+import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { forwardRef, useId, useState, type ComponentProps, type ReactNode } from 'react'
+import { styled } from 'styled-system/jsx'
+import { IconButton } from '@/components/atoms/buttons/IconButton'
+import { Input, type InputProps } from './Input'
+
+const Root = styled(ark.div, { base: { position: 'relative', width: 'full' } })
+
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+  defaultVisible?: boolean
+  visible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  visibilityIcon?: { on: ReactNode; off: ReactNode }
+  rootProps?: ComponentProps<typeof Root>
+}
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  function PasswordInput(
+    {
+      defaultVisible = false,
+      visible: visibleProp,
+      onVisibleChange,
+      visibilityIcon = { on: <EyeIcon />, off: <EyeOffIcon /> },
+      rootProps,
+      ...props
+    },
+    ref,
+  ) {
+    const [localVisible, setLocalVisible] = useState(defaultVisible)
+    const field = useFieldContext()
+    const generatedId = useId()
+    const id = props.id || field?.ids.control || generatedId
+    const visible = visibleProp !== undefined ? visibleProp : localVisible
+    const disabled = Boolean(props.disabled || field?.disabled)
+
+    return (
+      <Root {...rootProps}>
+        <Input
+          paddingInlineEnd="var(--input-height, 2.5em)"
+          {...props}
+          id={id}
+          disabled={disabled}
+          ref={ref}
+          type={visible ? 'text' : 'password'}
+        />
+        <IconButton
+          type="button"
+          variant="plain"
+          size="sm"
+          disabled={disabled}
+          position="absolute"
+          insetInlineEnd="1"
+          top="50%"
+          transform="translateY(-50%)"
+          height="calc(100% - 8px)"
+          aspectRatio="square"
+          aria-label={visible ? 'Hide password' : 'Show password'}
+          aria-controls={id}
+          aria-pressed={visible}
+          onPointerDown={(event) => {
+            if (event.button === 0) event.preventDefault()
+          }}
+          onClick={() => {
+            const next = !visible
+            if (visibleProp === undefined) setLocalVisible(next)
+            onVisibleChange?.(next)
+          }}>
+          {visible ? visibilityIcon.off : visibilityIcon.on}
+        </IconButton>
+      </Root>
+    )
+  },
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/PinInput.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { PinInput } from '@ark-ui/react/pin-input'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { pinInput, type PinInputVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(pinInput)
+
+export type RootProps = ComponentProps<typeof Root>
+// Preserve Ark’s boolean mask prop without comparing Panda’s large CSS property union.
+export const Root = withProvider(PinInput.Root, 'root', {
+  forwardProps: ['mask'],
+}) as unknown as StyledComponent<typeof PinInput.Root, PinInputVariantProps & { mask?: boolean }>
+export const RootProvider: StyledComponent<typeof PinInput.RootProvider, PinInputVariantProps> =
+  withProvider(PinInput.RootProvider, 'root')
+export const Control = withContext(PinInput.Control, 'control')
+export const HiddenInput = PinInput.HiddenInput
+export const Input = withContext(PinInput.Input, 'input')
+export const Label = withContext(PinInput.Label, 'label')
+
+export { PinInputContext as Context } from '@ark-ui/react/pin-input'
+
+export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from '@ark-ui/react/pin-input'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ControlProps = ComponentProps<typeof Control>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type InputProps = ComponentProps<typeof Input>
+export type LabelProps = ComponentProps<typeof Label>
+
+export {
+  usePinInputContext,
+  type PinInputValueChangeDetails as ValueChangeDetails,
+  type PinInputValueInvalidDetails as ValueInvalidDetails,
+} from '@ark-ui/react/pin-input'

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/RadioCard.tsx

@@ -0,0 +1,96 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { RadioGroup, useRadioGroupItemContext } from '@ark-ui/react/radio-group'
+import { type ComponentProps, forwardRef, type ReactElement } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { radioCard, type RadioCardVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(radioCard)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof RadioGroup.Root, RadioCardVariantProps> = withProvider(
+  RadioGroup.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof RadioGroup.RootProvider, RadioCardVariantProps> =
+  withProvider(RadioGroup.RootProvider, 'root')
+export const Item = withContext(RadioGroup.Item, 'item')
+const StyledItemControl: StyledComponent<typeof ark.div> = withContext(ark.div, 'itemControl')
+export type ItemControlProps = ComponentProps<typeof StyledItemControl>
+
+export const ItemControl = forwardRef<HTMLDivElement, ItemControlProps>(
+  function ItemControl(props, ref) {
+    const item = useRadioGroupItemContext()
+    return (
+      <StyledItemControl
+        data-scope="radio-card"
+        data-part="item-control"
+        data-state={item.checked ? 'checked' : 'unchecked'}
+        data-focus={item.focused ? '' : undefined}
+        data-disabled={item.disabled ? '' : undefined}
+        data-hover={item.hovered ? '' : undefined}
+        data-active={item.active ? '' : undefined}
+        data-invalid={item.invalid ? '' : undefined}
+        {...props}
+        ref={ref}
+      />
+    )
+  },
+)
+export const ItemContent = withContext(ark.div, 'itemContent')
+export const ItemDescription = withContext(ark.div, 'itemDescription')
+export const ItemAddon = withContext(ark.div, 'itemAddon')
+export const ItemText = withContext(RadioGroup.ItemText, 'itemText')
+export const Label = withContext(RadioGroup.Label, 'label')
+export const ItemHiddenInput = RadioGroup.ItemHiddenInput
+
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemContext as ItemContext,
+} from '@ark-ui/react/radio-group'
+
+const StyledItemIndicator: StyledComponent<typeof ark.span> = withContext(ark.span, 'itemIndicator')
+
+export interface ItemIndicatorProps extends ComponentProps<typeof StyledItemIndicator> {
+  checked?: ReactElement | undefined
+}
+
+export const ItemIndicator = forwardRef<HTMLSpanElement, ItemIndicatorProps>(function ItemIndicator(
+  { checked, children, asChild, ...props },
+  ref,
+) {
+  const item = useRadioGroupItemContext()
+  const customChecked = item.checked && checked !== undefined
+  return (
+    <StyledItemIndicator
+      data-scope="radio-card"
+      data-part="item-indicator"
+      data-state={item.checked ? 'checked' : 'unchecked'}
+      data-disabled={item.disabled ? '' : undefined}
+      data-invalid={item.invalid ? '' : undefined}
+      data-custom={customChecked || children !== undefined || asChild ? '' : undefined}
+      aria-hidden="true"
+      {...props}
+      ref={ref}
+      asChild={asChild || customChecked}>
+      {customChecked ? checked : children}
+    </StyledItemIndicator>
+  )
+})
+
+export {
+  useRadioGroup,
+  type UseRadioGroupProps,
+  type UseRadioGroupReturn,
+  type RadioGroupValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/radio-group'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemContentProps = ComponentProps<typeof ItemContent>
+export type ItemDescriptionProps = ComponentProps<typeof ItemDescription>
+export type ItemAddonProps = ComponentProps<typeof ItemAddon>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type ItemHiddenInputProps = ComponentProps<typeof ItemHiddenInput>

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/RadioGroup.tsx

@@ -0,0 +1,61 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { RadioGroup } from '@ark-ui/react/radio-group'
+import { type ComponentProps, forwardRef } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { radioGroup, type RadioGroupVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(radioGroup)
+
+export type RootProps = ComponentProps<typeof Root>
+export type ItemProps = ComponentProps<typeof Item>
+
+export const Root: StyledComponent<typeof RadioGroup.Root, RadioGroupVariantProps> = withProvider(
+  RadioGroup.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof RadioGroup.RootProvider, RadioGroupVariantProps> =
+  withProvider(RadioGroup.RootProvider, 'root')
+export const Item = withContext(RadioGroup.Item, 'item')
+export const ItemControl = withContext(RadioGroup.ItemControl, 'itemControl')
+const StyledItemIndicator: StyledComponent<typeof ark.span> = withContext(ark.span, 'itemControl')
+export type ItemIndicatorProps = ComponentProps<typeof StyledItemIndicator>
+export const ItemIndicator = forwardRef<HTMLSpanElement, ItemIndicatorProps>(
+  function ItemIndicator(props, ref) {
+    return (
+      <RadioGroup.ItemControl asChild>
+        <StyledItemIndicator
+          data-custom={props.children !== undefined || props.asChild ? '' : undefined}
+          {...props}
+          ref={ref}
+        />
+      </RadioGroup.ItemControl>
+    )
+  },
+)
+export const ItemText = withContext(RadioGroup.ItemText, 'itemText')
+export const Label = withContext(RadioGroup.Label, 'label')
+export const ItemHiddenInput = RadioGroup.ItemHiddenInput
+
+export { RadioGroupContext as Context } from '@ark-ui/react/radio-group'
+
+export {
+  useRadioGroup,
+  type UseRadioGroupProps,
+  type UseRadioGroupReturn,
+} from '@ark-ui/react/radio-group'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ItemControlProps = ComponentProps<typeof ItemControl>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type ItemHiddenInputProps = ComponentProps<typeof ItemHiddenInput>
+
+export {
+  useRadioGroupContext,
+  useRadioGroupItemContext,
+  RadioGroupItemContext as ItemContext,
+  type RadioGroupValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/radio-group'

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/RatingGroup.tsx

@@ -0,0 +1,106 @@
+'use client'
+import {
+  RatingGroup,
+  useRatingGroupContext,
+  useRatingGroupItemContext,
+} from '@ark-ui/react/rating-group'
+import { StarIcon } from 'lucide-react'
+import {
+  type ComponentProps,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+} from 'react'
+import { createSlotRecipeContext, type HTMLStyledProps } from 'styled-system/jsx'
+import { ratingGroup, type RatingGroupVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(ratingGroup)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof RatingGroup.Root, RatingGroupVariantProps> = withProvider(
+  RatingGroup.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<
+  typeof RatingGroup.RootProvider,
+  RatingGroupVariantProps
+> = withProvider(RatingGroup.RootProvider, 'root')
+export const Item = withContext(RatingGroup.Item, 'item')
+export const Label = withContext(RatingGroup.Label, 'label')
+
+export const HiddenInput = RatingGroup.HiddenInput
+
+export {
+  RatingGroupContext as Context,
+  RatingGroupItemContext as ItemContext,
+} from '@ark-ui/react/rating-group'
+
+export interface ItemIndicatorProps extends HTMLStyledProps<'span'> {
+  icon?: ReactElement | undefined
+}
+
+const StyledItemIndicator = withContext('span', 'itemIndicator')
+
+const cloneIcon = (icon: ReactElement, type: string) => {
+  if (!isValidElement(icon)) return null
+  const props = { [`data-${type}`]: '', 'aria-hidden': true, fill: 'currentColor' }
+  return cloneElement(icon, props)
+}
+
+export const ItemIndicator = forwardRef<HTMLSpanElement, ItemIndicatorProps>(
+  function ItemIndicator(props, ref) {
+    const { icon = <StarIcon />, ...rest } = props
+    const item = useRatingGroupItemContext()
+
+    return (
+      <StyledItemIndicator
+        ref={ref}
+        {...rest}
+        data-highlighted={item.highlighted ? '' : undefined}
+        data-checked={item.checked ? '' : undefined}
+        data-half={item.half ? '' : undefined}>
+        {cloneIcon(icon, 'bg')}
+        {cloneIcon(icon, 'fg')}
+      </StyledItemIndicator>
+    )
+  },
+)
+
+export interface ItemsProps extends Omit<ComponentProps<typeof Item>, 'index'> {
+  icon?: ReactElement | undefined
+}
+
+export const Items = (props: ItemsProps) => {
+  const { icon, ...rest } = props
+  const ratingGroup = useRatingGroupContext()
+  return ratingGroup.items.map((item) => (
+    <Item key={item} index={item} {...rest}>
+      <ItemIndicator icon={icon} />
+    </Item>
+  ))
+}
+
+export const Control = withContext(RatingGroup.Control, 'control', {
+  defaultProps: { children: <Items /> },
+})
+
+export {
+  useRatingGroup,
+  type UseRatingGroupProps,
+  type UseRatingGroupReturn,
+} from '@ark-ui/react/rating-group'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ItemProps = ComponentProps<typeof Item>
+export type LabelProps = ComponentProps<typeof Label>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type ControlProps = ComponentProps<typeof Control>
+
+export {
+  useRatingGroupContext,
+  useRatingGroupItemContext,
+  type RatingGroupHoverChangeDetails as HoverChangeDetails,
+  type RatingGroupValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/rating-group'

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/SegmentGroup.tsx

@@ -0,0 +1,68 @@
+'use client'
+import { SegmentGroup } from '@ark-ui/react/segment-group'
+import { type ComponentProps, type ReactNode } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { segmentGroup, type SegmentGroupVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(segmentGroup)
+
+export type RootProps = ComponentProps<typeof Root>
+
+export const Root: StyledComponent<typeof SegmentGroup.Root, SegmentGroupVariantProps> =
+  withProvider(SegmentGroup.Root, 'root', {
+    defaultProps: { orientation: 'horizontal' },
+    forwardProps: ['orientation'],
+  })
+export const RootProvider: StyledComponent<
+  typeof SegmentGroup.RootProvider,
+  SegmentGroupVariantProps
+> = withProvider(SegmentGroup.RootProvider, 'root')
+export const Indicator = withContext(SegmentGroup.Indicator, 'indicator')
+export const Item = withContext(SegmentGroup.Item, 'item')
+export const ItemControl = withContext(SegmentGroup.ItemControl, 'itemControl')
+export const ItemHiddenInput = SegmentGroup.ItemHiddenInput
+export const ItemText = withContext(SegmentGroup.ItemText, 'itemText')
+export const Label = withContext(SegmentGroup.Label, 'label')
+
+export { SegmentGroupContext as Context } from '@ark-ui/react/segment-group'
+
+interface Item {
+  value: string
+  label: ReactNode
+  disabled?: boolean | undefined
+}
+
+export type ItemProps = ComponentProps<typeof Item>
+
+export interface ItemsProps extends Omit<ItemProps, 'value'> {
+  items: Array<string | Item>
+}
+
+export const Items = (props: ItemsProps) => {
+  const { items, ...itemProps } = props
+  const data = items.map((item) => (typeof item === 'string' ? { value: item, label: item } : item))
+
+  return data.map((item) => (
+    <Item key={item.value} value={item.value} disabled={item.disabled} {...itemProps}>
+      <ItemText>{item.label}</ItemText>
+      <ItemHiddenInput />
+    </Item>
+  ))
+}
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type ItemControlProps = ComponentProps<typeof ItemControl>
+export type ItemHiddenInputProps = ComponentProps<typeof ItemHiddenInput>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+
+export {
+  useSegmentGroup,
+  useSegmentGroupContext,
+  useSegmentGroupItemContext,
+  type UseSegmentGroupProps,
+  type UseSegmentGroupReturn,
+  type SegmentGroupValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/segment-group'

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/Slider.tsx

@@ -0,0 +1,87 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Slider, useSliderContext } from '@ark-ui/react/slider'
+import { type ComponentProps, forwardRef } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { slider, type SliderVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(slider)
+
+export const Root: StyledComponent<typeof Slider.Root, SliderVariantProps> = withProvider(
+  Slider.Root,
+  'root',
+  { forwardProps: ['orientation'] },
+)
+export const RootProvider: StyledComponent<typeof Slider.RootProvider, SliderVariantProps> =
+  withProvider(Slider.RootProvider, 'root')
+export const Control = withContext(Slider.Control, 'control')
+export const DraggingIndicator = withContext(Slider.DraggingIndicator, 'draggingIndicator')
+export const Label = withContext(Slider.Label, 'label')
+export const Marker = withContext(Slider.Marker, 'marker')
+export const MarkerIndicator = withContext(ark.div, 'markerIndicator')
+export const MarkerGroup = withContext(Slider.MarkerGroup, 'markerGroup')
+export const Range = withContext(Slider.Range, 'range')
+export const Thumb = withContext(Slider.Thumb, 'thumb')
+export const Track = withContext(Slider.Track, 'track')
+export const ValueText = withContext(Slider.ValueText, 'valueText')
+export const HiddenInput = Slider.HiddenInput
+
+export { SliderContext as Context } from '@ark-ui/react/slider'
+
+export type RootProps = ComponentProps<typeof Root>
+export type MarkerGroupProps = ComponentProps<typeof MarkerGroup>
+export type ThumbProps = ComponentProps<typeof Thumb>
+
+export interface MarksProps extends MarkerGroupProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }> | undefined
+}
+
+export const Marks = forwardRef<HTMLDivElement, MarksProps>(function Marks(props, ref) {
+  const { marks, ...rest } = props
+  if (!marks?.length) return null
+
+  return (
+    <MarkerGroup ref={ref} {...rest}>
+      {marks.map((mark, index) => {
+        const value = typeof mark === 'number' ? mark : mark.value
+        const label = typeof mark === 'number' ? undefined : mark.label
+        return (
+          <Marker key={index} value={value}>
+            <MarkerIndicator />
+            {label != null && <span>{label}</span>}
+          </Marker>
+        )
+      })}
+    </MarkerGroup>
+  )
+})
+
+export const Thumbs = (props: Omit<ThumbProps, 'index'>) => {
+  const slider = useSliderContext()
+  return slider.value.map((_, index) => (
+    <Thumb key={index} index={index} {...props}>
+      <HiddenInput />
+    </Thumb>
+  ))
+}
+
+export { useSlider, type UseSliderProps, type UseSliderReturn } from '@ark-ui/react/slider'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ControlProps = ComponentProps<typeof Control>
+export type DraggingIndicatorProps = ComponentProps<typeof DraggingIndicator>
+export type LabelProps = ComponentProps<typeof Label>
+export type MarkerProps = ComponentProps<typeof Marker>
+export type MarkerIndicatorProps = ComponentProps<typeof MarkerIndicator>
+export type RangeProps = ComponentProps<typeof Range>
+export type TrackProps = ComponentProps<typeof Track>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type ThumbsProps = ComponentProps<typeof Thumbs>
+
+export {
+  useSliderContext,
+  type SliderFocusChangeDetails as FocusChangeDetails,
+  type SliderValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/slider'

package/templates/hono-fullstack/libs/ui/src/components/atoms/forms/Switch.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Switch, useSwitchContext } from '@ark-ui/react/switch'
+import { type ComponentProps, forwardRef, type ReactNode } from 'react'
+import { createSlotRecipeContext, styled } from 'styled-system/jsx'
+import { switchRecipe, type SwitchRecipeVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(switchRecipe)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Switch.Root, SwitchRecipeVariantProps> = withProvider(
+  Switch.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Switch.RootProvider, SwitchRecipeVariantProps> =
+  withProvider(Switch.RootProvider, 'root')
+export const Label = withContext(Switch.Label, 'label')
+export const Thumb = withContext(Switch.Thumb, 'thumb')
+export const HiddenInput = Switch.HiddenInput
+
+export const Control = withContext(Switch.Control, 'control', {
+  defaultProps: { children: <Thumb /> },
+})
+
+export { SwitchContext as Context } from '@ark-ui/react/switch'
+
+export interface IndicatorProps extends ComponentProps<typeof StyledIndicator> {
+  fallback?: ReactNode | undefined
+}
+
+const StyledIndicator = withContext(ark.span, 'indicator')
+export const Indicator = forwardRef<HTMLSpanElement, IndicatorProps>(
+  function Indicator(props, ref) {
+    const { fallback, children, ...rest } = props
+    const api = useSwitchContext()
+    return (
+      <StyledIndicator ref={ref} data-checked={api.checked ? '' : undefined} {...rest}>
+        {api.checked ? children : fallback}
+      </StyledIndicator>
+    )
+  },
+)
+
+export interface ThumbIndicatorProps extends ComponentProps<typeof StyledThumbIndicator> {
+  fallback?: React.ReactNode | undefined
+}
+
+const StyledThumbIndicator = styled(ark.span)
+export const ThumbIndicator = forwardRef<HTMLSpanElement, ThumbIndicatorProps>(
+  function SwitchThumbIndicator(props, ref) {
+    const { fallback, children, ...rest } = props
+    const api = useSwitchContext()
+    return (
+      <StyledThumbIndicator ref={ref} data-checked={api.checked ? '' : undefined} {...rest}>
+        {api.checked ? children : fallback}
+      </StyledThumbIndicator>
+    )
+  },
+)
+
+export { useSwitch, type UseSwitchProps, type UseSwitchReturn } from '@ark-ui/react/switch'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type LabelProps = ComponentProps<typeof Label>
+export type ThumbProps = ComponentProps<typeof Thumb>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type ControlProps = ComponentProps<typeof Control>
+
+export {
+  useSwitchContext,
+  type SwitchCheckedChangeDetails as CheckedChangeDetails,
+} from '@ark-ui/react/switch'