@oyolincc/create 0.4.0 → 0.5.1

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

@@ -0,0 +1,148 @@
+'use client'
+import { ColorPicker } from '@ark-ui/react/color-picker'
+import { ark } from '@ark-ui/react/factory'
+import { CheckIcon, PipetteIcon } from 'lucide-react'
+import type { ComponentProps, Provider, JSX } from 'react'
+import type { StyledComponent } from 'styled-system/types'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { colorPicker, type ColorPickerVariantProps } from 'styled-system/recipes'
+
+const {
+  withProvider,
+  withContext,
+  PropsProvider: ColorPropsProvider,
+} = createSlotRecipeContext(colorPicker)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof ColorPicker.Root, ColorPickerVariantProps> = withProvider(
+  ColorPicker.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<
+  typeof ColorPicker.RootProvider,
+  ColorPickerVariantProps
+> = withProvider(ColorPicker.RootProvider, 'root')
+export const AreaBackground = withContext(ColorPicker.AreaBackground, 'areaBackground')
+export const AreaThumb = withContext(ColorPicker.AreaThumb, 'areaThumb')
+export const ChannelInput = withContext(ColorPicker.ChannelInput, 'channelInput')
+export const ChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
+export const ChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
+export const ChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
+export const ChannelSliderValueText = withContext(
+  ColorPicker.ChannelSliderValueText,
+  'channelSliderValueText',
+)
+export const Content = withContext(ColorPicker.Content, 'content')
+export const Control = withContext(ColorPicker.Control, 'control')
+export const EyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
+export const FormatSelect = withContext(ColorPicker.FormatSelect, 'formatSelect')
+export const FormatTrigger = withContext(ColorPicker.FormatTrigger, 'formatTrigger')
+export const HiddenInput = ColorPicker.HiddenInput
+export const Label = withContext(ColorPicker.Label, 'label')
+export const Positioner = withContext(ColorPicker.Positioner, 'positioner')
+export const Swatch = withContext(ColorPicker.Swatch, 'swatch')
+export const SwatchGroup = withContext(ColorPicker.SwatchGroup, 'swatchGroup')
+export const SwatchIndicator = withContext(ColorPicker.SwatchIndicator, 'swatchIndicator', {
+  defaultProps: { children: <CheckIcon /> },
+})
+export const SwatchTrigger = withContext(ColorPicker.SwatchTrigger, 'swatchTrigger')
+export const TransparencyGrid = withContext(ColorPicker.TransparencyGrid, 'transparencyGrid')
+export const ValueSwatch = withContext(ColorPicker.ValueSwatch, 'swatch')
+export const ValueText = withContext(ColorPicker.ValueText, 'valueText')
+export const View = withContext(ColorPicker.View, 'view')
+
+export { ColorPickerContext as Context } from '@ark-ui/react/color-picker'
+export const Area = withContext(ColorPicker.Area, 'area', {
+  defaultProps: {
+    children: (
+      <>
+        <AreaBackground />
+        <AreaThumb />
+      </>
+    ),
+  },
+})
+export const ChannelSlider = withContext(ColorPicker.ChannelSlider, 'channelSlider', {
+  defaultProps: {
+    children: (
+      <>
+        <TransparencyGrid size="0.6rem" />
+        <ChannelSliderTrack />
+        <ChannelSliderThumb />
+      </>
+    ),
+  },
+})
+export const Trigger = withContext(ColorPicker.Trigger, 'trigger', {
+  defaultProps: { children: <ValueSwatch /> },
+})
+export const Input = withContext(ColorPicker.ChannelInput, 'channelInput', {
+  defaultProps: { channel: 'hex' },
+}) as (props: InputProps) => JSX.Element
+export const EyeDropper = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger', {
+  defaultProps: { children: <PipetteIcon />, 'aria-label': 'Pick color from screen' },
+})
+export const Sliders = withContext(ark.div, 'sliders', {
+  defaultProps: {
+    children: (
+      <>
+        <ChannelSlider channel="hue" />
+        <ChannelSlider channel="alpha" />
+      </>
+    ),
+  },
+})
+export const ChannelText = withContext(ark.span, 'channelText')
+export const PropsProvider = ColorPropsProvider as Provider<Partial<RootProps>>
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type AreaProps = ComponentProps<typeof Area>
+export type AreaBackgroundProps = ComponentProps<typeof AreaBackground>
+export type AreaThumbProps = ComponentProps<typeof AreaThumb>
+export type ChannelInputProps = ComponentProps<typeof ChannelInput>
+export type ChannelSliderProps = ComponentProps<typeof ChannelSlider>
+export type ChannelSliderLabelProps = ComponentProps<typeof ChannelSliderLabel>
+export type ChannelSliderThumbProps = ComponentProps<typeof ChannelSliderThumb>
+export type ChannelSliderTrackProps = ComponentProps<typeof ChannelSliderTrack>
+export type ChannelSliderValueTextProps = ComponentProps<typeof ChannelSliderValueText>
+export type ContentProps = ComponentProps<typeof Content>
+export type ControlProps = ComponentProps<typeof Control>
+export type EyeDropperTriggerProps = ComponentProps<typeof EyeDropperTrigger>
+export type FormatSelectProps = ComponentProps<typeof FormatSelect>
+export type FormatTriggerProps = ComponentProps<typeof FormatTrigger>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type LabelProps = ComponentProps<typeof Label>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type SwatchProps = ComponentProps<typeof Swatch>
+export type SwatchGroupProps = ComponentProps<typeof SwatchGroup>
+export type SwatchIndicatorProps = ComponentProps<typeof SwatchIndicator>
+export type SwatchTriggerProps = ComponentProps<typeof SwatchTrigger>
+export type TransparencyGridProps = ComponentProps<typeof TransparencyGrid>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ValueSwatchProps = ComponentProps<typeof ValueSwatch>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type ViewProps = ComponentProps<typeof View>
+export interface InputProps extends Omit<ChannelInputProps, 'channel'> {}
+export type EyeDropperProps = ComponentProps<typeof EyeDropper>
+export type SlidersProps = ComponentProps<typeof Sliders>
+export type ChannelTextProps = ComponentProps<typeof ChannelText>
+export {
+  useColorPicker,
+  useColorPickerContext,
+  type UseColorPickerProps,
+  type UseColorPickerReturn,
+  type ColorPickerValueChangeDetails as ValueChangeDetails,
+  type ColorPickerColorFormat as ColorFormat,
+  type ColorPickerFormatChangeDetails as FormatChangeDetails,
+  type ColorPickerOpenChangeDetails as OpenChangeDetails,
+} from '@ark-ui/react/color-picker'
+const formatMap = {
+  rgba: ['red', 'green', 'blue', 'alpha'],
+  hsla: ['hue', 'saturation', 'lightness', 'alpha'],
+  hsba: ['hue', 'saturation', 'brightness', 'alpha'],
+  hexa: ['hex', 'alpha'],
+} as const
+export function getColorChannels<T extends keyof typeof formatMap>(
+  format: T,
+): (typeof formatMap)[T] {
+  return formatMap[format]
+}

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

@@ -0,0 +1,44 @@
+'use client'
+import { Editable } from '@ark-ui/react/editable'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { editable, type EditableVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(editable)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Editable.Root, EditableVariantProps> = withProvider(
+  Editable.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Editable.RootProvider, EditableVariantProps> =
+  withProvider(Editable.RootProvider, 'root')
+export const Area = withContext(Editable.Area, 'area')
+export const CancelTrigger = withContext(Editable.CancelTrigger, 'cancelTrigger')
+export const Control = withContext(Editable.Control, 'control')
+export const EditTrigger = withContext(Editable.EditTrigger, 'editTrigger')
+export const Input = withContext(Editable.Input, 'input')
+export const Label = withContext(Editable.Label, 'label')
+export const Preview = withContext(Editable.Preview, 'preview')
+export const SubmitTrigger = withContext(Editable.SubmitTrigger, 'submitTrigger')
+
+export { EditableContext as Context } from '@ark-ui/react/editable'
+
+export { useEditable, type UseEditableProps, type UseEditableReturn } from '@ark-ui/react/editable'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type AreaProps = ComponentProps<typeof Area>
+export type CancelTriggerProps = ComponentProps<typeof CancelTrigger>
+export type ControlProps = ComponentProps<typeof Control>
+export type EditTriggerProps = ComponentProps<typeof EditTrigger>
+export type InputProps = ComponentProps<typeof Input>
+export type LabelProps = ComponentProps<typeof Label>
+export type PreviewProps = ComponentProps<typeof Preview>
+export type SubmitTriggerProps = ComponentProps<typeof SubmitTrigger>
+
+export {
+  useEditableContext,
+  type EditableEditChangeDetails as EditChangeDetails,
+  type EditableValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/editable'

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

@@ -0,0 +1,36 @@
+'use client'
+import { Field } from '@ark-ui/react/field'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext, styled } from 'styled-system/jsx'
+import { field, input } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(field)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Field.Root> = withProvider(Field.Root, 'root')
+export const RootProvider: StyledComponent<typeof Field.RootProvider> = withProvider(
+  Field.RootProvider,
+  'root',
+)
+export const Input = styled(Field.Input, input)
+export const ErrorText = withContext(Field.ErrorText, 'errorText')
+export const HelperText = withContext(Field.HelperText, 'helperText')
+export const Label = withContext(Field.Label, 'label')
+export const RequiredIndicator = withContext(Field.RequiredIndicator, 'requiredIndicator')
+
+export { FieldContext as Context } from '@ark-ui/react/field'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type InputProps = ComponentProps<typeof Input>
+export type ErrorTextProps = ComponentProps<typeof ErrorText>
+export type HelperTextProps = ComponentProps<typeof HelperText>
+export type LabelProps = ComponentProps<typeof Label>
+export type RequiredIndicatorProps = ComponentProps<typeof RequiredIndicator>
+
+export {
+  useField,
+  useFieldContext,
+  type UseFieldProps,
+  type UseFieldReturn,
+} from '@ark-ui/react/field'

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

@@ -0,0 +1,34 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Fieldset } from '@ark-ui/react/fieldset'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { fieldset } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(fieldset)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Fieldset.Root> = withProvider(Fieldset.Root, 'root')
+export const RootProvider: StyledComponent<typeof Fieldset.RootProvider> = withProvider(
+  Fieldset.RootProvider,
+  'root',
+)
+export const Legend = withContext(Fieldset.Legend, 'legend')
+export const HelperText = withContext(Fieldset.HelperText, 'helperText')
+export const ErrorText = withContext(Fieldset.ErrorText, 'errorText')
+export const Content = withContext(ark.div, 'content')
+export const Control = withContext(ark.div, 'control')
+
+export { FieldsetContext as Context } from '@ark-ui/react/fieldset'
+
+export { useFieldset, type UseFieldsetProps, type UseFieldsetReturn } from '@ark-ui/react/fieldset'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type LegendProps = ComponentProps<typeof Legend>
+export type HelperTextProps = ComponentProps<typeof HelperText>
+export type ErrorTextProps = ComponentProps<typeof ErrorText>
+export type ContentProps = ComponentProps<typeof Content>
+export type ControlProps = ComponentProps<typeof Control>
+
+export { useFieldsetContext } from '@ark-ui/react/fieldset'

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

@@ -0,0 +1,143 @@
+'use client'
+import { FileUpload, useFileUploadContext } from '@ark-ui/react/file-upload'
+import { FileIcon, XIcon } from 'lucide-react'
+import { type ComponentProps, forwardRef } from 'react'
+import {
+  createSlotRecipeContext,
+  type HTMLStyledProps,
+  PandaStack as Stack,
+} from 'styled-system/jsx'
+import { fileUpload, type FileUploadVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+import { Span } from '@/components/atoms/internal/Span'
+
+const { withProvider, withContext } = createSlotRecipeContext(fileUpload)
+
+export type RootProps = ComponentProps<typeof Root>
+export type ItemProps = ComponentProps<typeof Item>
+
+export const Root: StyledComponent<typeof FileUpload.Root, FileUploadVariantProps> = withProvider(
+  FileUpload.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof FileUpload.RootProvider, FileUploadVariantProps> =
+  withProvider(FileUpload.RootProvider, 'root')
+export const ClearTrigger = withContext(FileUpload.ClearTrigger, 'clearTrigger')
+export const Dropzone = withContext(FileUpload.Dropzone, 'dropzone')
+export const HiddenInput = FileUpload.HiddenInput
+export const Item = withContext(FileUpload.Item, 'item')
+export const ItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, 'itemDeleteTrigger', {
+  defaultProps: { children: <XIcon /> },
+})
+export const ItemGroup = withContext(FileUpload.ItemGroup, 'itemGroup')
+export const ItemName = withContext(FileUpload.ItemName, 'itemName')
+export const ItemPreview = withContext(FileUpload.ItemPreview, 'itemPreview', {
+  defaultProps: {
+    children: <FileIcon />,
+  },
+})
+export const ItemPreviewImage = withContext(FileUpload.ItemPreviewImage, 'itemPreviewImage')
+export const ItemSizeText = withContext(FileUpload.ItemSizeText, 'itemSizeText')
+export const Label = withContext(FileUpload.Label, 'label')
+export const Trigger = withContext(FileUpload.Trigger, 'trigger')
+
+export { FileUploadContext as Context } from '@ark-ui/react/file-upload'
+
+interface ItemsBaseProps {
+  showSize?: boolean | undefined
+  clearable?: boolean | undefined
+  files?: File[] | undefined
+}
+
+export interface ItemsProps extends Omit<ItemProps, 'file'>, ItemsBaseProps {}
+
+export const Items = (props: ItemsProps) => {
+  const { showSize = true, clearable = true, files, ...rest } = props
+  const fileUpload = useFileUploadContext()
+  const acceptedFiles = files || fileUpload.acceptedFiles
+
+  return acceptedFiles.map((file, index) => (
+    <Item file={file} key={`${file.name}-${file.size}-${file.lastModified}-${index}`} {...rest}>
+      <ItemPreview />
+      <Stack gap="0.5" flex="1">
+        <ItemName />
+        {showSize && <ItemSizeText />}
+      </Stack>
+
+      {clearable && <ItemDeleteTrigger />}
+    </Item>
+  ))
+}
+
+export interface ListProps extends ComponentProps<typeof ItemGroup>, ItemsBaseProps {}
+
+export const List = forwardRef<HTMLUListElement, ListProps>(function FileUploadList(props, ref) {
+  const { showSize = true, clearable = true, files, ...rest } = props
+
+  return (
+    <ItemGroup ref={ref} {...rest}>
+      <Items showSize={showSize} clearable={clearable} files={files} />
+    </ItemGroup>
+  )
+})
+
+export interface FileTextProps extends HTMLStyledProps<'span'> {
+  fallback?: string | undefined
+}
+
+export const FileText = forwardRef<HTMLSpanElement, FileTextProps>(
+  function FileUploadFileText(props, ref) {
+    const { fallback = 'Select file(s)', ...rest } = props
+
+    const fileUpload = useFileUploadContext()
+
+    const acceptedFiles = fileUpload.acceptedFiles
+
+    const fileText =
+      acceptedFiles.length === 1
+        ? acceptedFiles[0].name
+        : acceptedFiles.length > 1
+          ? `${acceptedFiles.length} files`
+          : fallback
+
+    return (
+      <Span
+        ref={ref}
+        data-placeholder={acceptedFiles.length === 0 ? '' : undefined}
+        data-scope="file-upload"
+        data-part="file-text"
+        {...rest}>
+        {fileText}
+      </Span>
+    )
+  },
+)
+
+export {
+  useFileUpload,
+  useFileUploadContext,
+  type UseFileUploadProps,
+  type UseFileUploadReturn,
+  type FileUploadFileChangeDetails,
+  type FileUploadFileRejectDetails,
+} from '@ark-ui/react/file-upload'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ClearTriggerProps = ComponentProps<typeof ClearTrigger>
+export type DropzoneProps = ComponentProps<typeof Dropzone>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type ItemDeleteTriggerProps = ComponentProps<typeof ItemDeleteTrigger>
+export type ItemGroupProps = ComponentProps<typeof ItemGroup>
+export type ItemNameProps = ComponentProps<typeof ItemName>
+export type ItemPreviewProps = ComponentProps<typeof ItemPreview>
+export type ItemPreviewImageProps = ComponentProps<typeof ItemPreviewImage>
+export type ItemSizeTextProps = ComponentProps<typeof ItemSizeText>
+export type LabelProps = ComponentProps<typeof Label>
+export type TriggerProps = ComponentProps<typeof Trigger>
+
+export {
+  type FileUploadFileAcceptDetails as FileAcceptDetails,
+  type FileUploadFileChangeDetails as FileChangeDetails,
+  type FileUploadFileRejectDetails as FileRejectDetails,
+  type FileUploadFileValidateDetails as FileValidateDetails,
+} from '@ark-ui/react/file-upload'

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

@@ -0,0 +1,7 @@
+import { Field } from '@ark-ui/react/field'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { input } from 'styled-system/recipes'
+
+export type InputProps = ComponentProps<typeof Input>
+export const Input = styled(Field.Input, input)

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

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { inputAddon } from 'styled-system/recipes'
+
+export type InputAddonProps = ComponentProps<typeof InputAddon>
+export const InputAddon = styled(ark.div, inputAddon)

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

@@ -0,0 +1,61 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { type ComponentProps, forwardRef, type ReactNode } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { inputGroup, type InputGroupVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(inputGroup)
+
+type RootProps = ComponentProps<typeof Root>
+const Root: StyledComponent<typeof ark.div, InputGroupVariantProps> = withProvider(ark.div, 'root')
+const Element = withContext(ark.div, 'element')
+
+export interface InputGroupProps extends RootProps {
+  startElement?: ReactNode | undefined
+  endElement?: ReactNode | undefined
+  startElementProps?: ComponentProps<typeof Element> | undefined
+  endElementProps?: ComponentProps<typeof Element> | undefined
+  /** CSS length subtracted from the default start padding, e.g. "-2rem" for a wider element. */
+  startOffset?: string | undefined
+  /** CSS length subtracted from the default end padding. */
+  endOffset?: string | undefined
+}
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      endElement,
+      startElementProps,
+      endElementProps,
+      startOffset,
+      endOffset,
+      children,
+      ...rest
+    } = props
+
+    return (
+      <Root
+        ref={ref}
+        {...rest}
+        style={{
+          ...(startOffset !== undefined && { '--input-group-start-offset': startOffset }),
+          ...(endOffset !== undefined && { '--input-group-end-offset': endOffset }),
+          ...rest.style,
+        }}>
+        {startElement != null && (
+          <Element insetInlineStart="0" top="0" {...startElementProps}>
+            {startElement}
+          </Element>
+        )}
+        {children}
+        {endElement != null && (
+          <Element insetInlineEnd="0" top="0" {...endElementProps}>
+            {endElement}
+          </Element>
+        )}
+      </Root>
+    )
+  },
+)

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

@@ -0,0 +1,81 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Field as ArkField, useFieldContext } from '@ark-ui/react/field'
+import { ChevronDownIcon } from 'lucide-react'
+import { createContext, forwardRef, useContext, type ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { nativeSelect, type NativeSelectVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(nativeSelect)
+const StateContext = createContext({ disabled: false, invalid: false })
+const StyledRoot: StyledComponent<typeof ark.div, NativeSelectVariantProps> = withProvider(
+  ark.div,
+  'root',
+)
+const StyledField = withContext(ArkField.Select, 'field')
+const StyledIndicator: StyledComponent<typeof ark.div> = withContext(ark.div, 'indicator')
+
+export interface RootProps extends ComponentProps<typeof StyledRoot> {
+  disabled?: boolean
+  invalid?: boolean
+}
+export const Root = forwardRef<HTMLDivElement, RootProps>(function Root(
+  { disabled, invalid, ...props },
+  ref,
+) {
+  const field = useFieldContext()
+  const state = {
+    disabled: Boolean(disabled || field?.disabled),
+    invalid: Boolean(invalid || field?.invalid),
+  }
+  return (
+    <StateContext.Provider value={state}>
+      <StyledRoot
+        {...props}
+        data-disabled={state.disabled ? '' : undefined}
+        data-invalid={state.invalid ? '' : undefined}
+        ref={ref}
+      />
+    </StateContext.Provider>
+  )
+})
+
+export interface FieldProps extends Omit<ComponentProps<typeof StyledField>, 'size'> {
+  placeholder?: string
+}
+export const Field = forwardRef<HTMLSelectElement, FieldProps>(function Field(
+  { placeholder, children, ...props },
+  ref,
+) {
+  const { disabled, invalid } = useContext(StateContext)
+  return (
+    <StyledField
+      data-invalid={invalid ? '' : undefined}
+      aria-invalid={invalid || undefined}
+      {...props}
+      disabled={Boolean(disabled || props.disabled)}
+      ref={ref}>
+      {placeholder != null && <option value="">{placeholder}</option>}
+      {children}
+    </StyledField>
+  )
+})
+
+export interface IndicatorProps extends ComponentProps<typeof StyledIndicator> {}
+export const Indicator = forwardRef<HTMLDivElement, IndicatorProps>(function Indicator(
+  { children, ...props },
+  ref,
+) {
+  const { disabled, invalid } = useContext(StateContext)
+  return (
+    <StyledIndicator
+      {...props}
+      ref={ref}
+      aria-hidden="true"
+      data-disabled={disabled ? '' : undefined}
+      data-invalid={invalid ? '' : undefined}>
+      {children == null ? <ChevronDownIcon /> : children}
+    </StyledIndicator>
+  )
+})

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

@@ -0,0 +1,63 @@
+'use client'
+import { NumberInput } from '@ark-ui/react/number-input'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { numberInput, type NumberInputVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(numberInput)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof NumberInput.Root, NumberInputVariantProps> = withProvider(
+  NumberInput.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<
+  typeof NumberInput.RootProvider,
+  NumberInputVariantProps
+> = withProvider(NumberInput.RootProvider, 'root')
+export const DecrementTrigger = withContext(NumberInput.DecrementTrigger, 'decrementTrigger', {
+  defaultProps: { children: <ChevronDownIcon /> },
+})
+export const IncrementTrigger = withContext(NumberInput.IncrementTrigger, 'incrementTrigger', {
+  defaultProps: { children: <ChevronUpIcon /> },
+})
+export const Input = withContext(NumberInput.Input, 'input')
+export const Label = withContext(NumberInput.Label, 'label')
+export const Scrubber = withContext(NumberInput.Scrubber, 'scrubber')
+export const ValueText = withContext(NumberInput.ValueText, 'valueText')
+export const Control = withContext(NumberInput.Control, 'control', {
+  defaultProps: {
+    children: (
+      <>
+        <IncrementTrigger />
+        <DecrementTrigger />
+      </>
+    ),
+  },
+})
+
+export { NumberInputContext as Context } from '@ark-ui/react/number-input'
+
+export {
+  useNumberInput,
+  type UseNumberInputProps,
+  type UseNumberInputReturn,
+} from '@ark-ui/react/number-input'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type DecrementTriggerProps = ComponentProps<typeof DecrementTrigger>
+export type IncrementTriggerProps = ComponentProps<typeof IncrementTrigger>
+export type InputProps = ComponentProps<typeof Input>
+export type LabelProps = ComponentProps<typeof Label>
+export type ScrubberProps = ComponentProps<typeof Scrubber>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type ControlProps = ComponentProps<typeof Control>
+
+export {
+  useNumberInputContext,
+  type NumberInputFocusChangeDetails as FocusChangeDetails,
+  type NumberInputValueChangeDetails as ValueChangeDetails,
+  type NumberInputValueInvalidDetails as ValueInvalidDetails,
+} from '@ark-ui/react/number-input'