@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/components/atoms/disclosure/Collapsible.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { Collapsible } from '@ark-ui/react/collapsible'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { collapsible } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(collapsible)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Collapsible.Root> = withProvider(Collapsible.Root, 'root')
+export const RootProvider: StyledComponent<typeof Collapsible.RootProvider> = withProvider(
+  Collapsible.RootProvider,
+  'root',
+)
+export const Content = withContext(Collapsible.Content, 'content')
+export const Indicator = withContext(Collapsible.Indicator, 'indicator')
+export const Trigger = withContext(Collapsible.Trigger, 'trigger')
+
+export { CollapsibleContext as Context } from '@ark-ui/react/collapsible'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ContentProps = ComponentProps<typeof Content>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type TriggerProps = ComponentProps<typeof Trigger>
+
+export {
+  useCollapsible,
+  useCollapsibleContext,
+  type UseCollapsibleProps,
+  type UseCollapsibleReturn,
+  type CollapsibleOpenChangeDetails as OpenChangeDetails,
+} from '@ark-ui/react/collapsible'

package/templates/hono-fullstack/libs/ui/src/components/atoms/disclosure/Pagination.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { Pagination, usePaginationContext } from '@ark-ui/react/pagination'
+import { EllipsisIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { pagination } from 'styled-system/recipes'
+import { IconButton } from '@/components/atoms/buttons/IconButton'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(pagination)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Pagination.Root> = withProvider(Pagination.Root, 'root')
+export const RootProvider: StyledComponent<typeof Pagination.RootProvider> = withProvider(
+  Pagination.RootProvider,
+  'root',
+)
+export const Item = withContext(Pagination.Item, 'item')
+export const Ellipsis = withContext(Pagination.Ellipsis, 'ellipsis')
+export const PrevTrigger = withContext(Pagination.PrevTrigger, 'prevTrigger')
+export const NextTrigger = withContext(Pagination.NextTrigger, 'nextTrigger')
+
+export { PaginationContext as Context } from '@ark-ui/react/pagination'
+
+export interface PaginationItemsProps extends React.HTMLAttributes<HTMLElement> {
+  render: (page: { type: 'page'; value: number; selected: boolean }) => React.ReactNode
+  ellipsis?: React.ReactElement | undefined
+}
+
+export const Items = (props: PaginationItemsProps) => {
+  const ctx = usePaginationContext()
+  const { render, ellipsis, ...rest } = props
+
+  return ctx.pages.map((page, index) => {
+    if (page.type === 'ellipsis') {
+      return (
+        <Ellipsis asChild key={index} index={index} {...rest}>
+          {ellipsis || (
+            <IconButton asChild colorPalette="gray">
+              <span>
+                <EllipsisIcon />
+              </span>
+            </IconButton>
+          )}
+        </Ellipsis>
+      )
+    }
+
+    return (
+      <Item asChild key={index} type="page" value={page.value} {...rest}>
+        {render({ ...page, selected: ctx.page === page.value })}
+      </Item>
+    )
+  })
+}
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ItemProps = ComponentProps<typeof Item>
+export type EllipsisProps = ComponentProps<typeof Ellipsis>
+export type PrevTriggerProps = ComponentProps<typeof PrevTrigger>
+export type NextTriggerProps = ComponentProps<typeof NextTrigger>
+export type ItemsProps = ComponentProps<typeof Items>
+
+export {
+  usePagination,
+  usePaginationContext,
+  type UsePaginationProps,
+  type UsePaginationReturn,
+  type PaginationItemLabelDetails as ItemLabelDetails,
+  type PaginationPageChangeDetails as PageChangeDetails,
+  type PaginationPageSizeChangeDetails as PageSizeChangeDetails,
+  type PaginationPageUrlDetails as PageUrlDetails,
+} from '@ark-ui/react/pagination'

package/templates/hono-fullstack/libs/ui/src/components/atoms/disclosure/Steps.tsx

@@ -0,0 +1,91 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Steps } from '@ark-ui/react/steps'
+import { CheckIcon } from 'lucide-react'
+import { forwardRef, type ComponentProps, type ReactNode, type Provider } from 'react'
+import { createSlotRecipeContext, styled } from 'styled-system/jsx'
+import { steps, type StepsVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const {
+  withProvider,
+  withContext,
+  PropsProvider: StepsPropsProvider,
+} = createSlotRecipeContext(steps)
+
+export const Root: StyledComponent<typeof Steps.Root, StepsVariantProps> = withProvider(
+  Steps.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Steps.RootProvider, StepsVariantProps> =
+  withProvider(Steps.RootProvider, 'root')
+export type RootProps = ComponentProps<typeof Root>
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const PropsProvider = StepsPropsProvider as Provider<RootProps>
+export const List = withContext(Steps.List, 'list')
+export const Item = withContext(Steps.Item, 'item')
+export const Trigger = withContext(Steps.Trigger, 'trigger')
+export const Content = withContext(Steps.Content, 'content')
+export const CompletedContent = withContext(Steps.CompletedContent, 'content')
+export const Title = withContext(ark.div, 'title')
+export const Description = withContext(ark.div, 'description')
+export const Separator = withContext(Steps.Separator, 'separator')
+export const NextTrigger = withContext(Steps.NextTrigger, 'nextTrigger')
+export const PrevTrigger = withContext(Steps.PrevTrigger, 'prevTrigger')
+
+const StyledNumber: StyledComponent<typeof ark.div> = styled(ark.div)
+export interface NumberProps extends ComponentProps<typeof StyledNumber> {}
+export const Number = forwardRef<HTMLDivElement, NumberProps>(function Number(props, ref) {
+  return (
+    <Steps.ItemContext>
+      {({ index }) => (
+        <StyledNumber {...props} ref={ref}>
+          {index + 1}
+        </StyledNumber>
+      )}
+    </Steps.ItemContext>
+  )
+})
+
+export interface StatusProps {
+  complete: ReactNode
+  incomplete: ReactNode
+  current?: ReactNode
+}
+export function Status({ complete, incomplete, current }: StatusProps) {
+  return (
+    <Steps.ItemContext>
+      {(item) => {
+        if (item.current) return current == null ? incomplete : current
+        return item.completed ? complete : incomplete
+      }}
+    </Steps.ItemContext>
+  )
+}
+
+export const Indicator = withContext(Steps.Indicator, 'indicator', {
+  defaultProps: { children: <Status complete={<CheckIcon />} incomplete={<Number />} /> },
+})
+
+export type ListProps = ComponentProps<typeof List>
+export type ItemProps = ComponentProps<typeof Item>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type CompletedContentProps = ComponentProps<typeof CompletedContent>
+export type TitleProps = ComponentProps<typeof Title>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type SeparatorProps = ComponentProps<typeof Separator>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type NextTriggerProps = ComponentProps<typeof NextTrigger>
+export type PrevTriggerProps = ComponentProps<typeof PrevTrigger>
+
+export { StepsContext as Context, StepsItemContext as ItemContext } from '@ark-ui/react/steps'
+export {
+  useSteps,
+  useStepsContext,
+  useStepsItemContext,
+  type UseStepsProps,
+  type UseStepsReturn,
+  type StepChangeDetails as ChangeDetails,
+  type StepInvalidDetails as InvalidDetails,
+} from '@ark-ui/react/steps'

package/templates/hono-fullstack/libs/ui/src/components/atoms/disclosure/Tabs.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { Tabs } from '@ark-ui/react/tabs'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { tabs, type TabsVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(tabs)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Tabs.Root, TabsVariantProps> = withProvider(
+  Tabs.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Tabs.RootProvider, TabsVariantProps> =
+  withProvider(Tabs.RootProvider, 'root')
+export const List = withContext(Tabs.List, 'list')
+export const Trigger = withContext(Tabs.Trigger, 'trigger')
+export const Content = withContext(Tabs.Content, 'content')
+export const Indicator = withContext(Tabs.Indicator, 'indicator')
+
+export { TabsContext as Context } from '@ark-ui/react/tabs'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ListProps = ComponentProps<typeof List>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+
+export {
+  useTabs,
+  useTabsContext,
+  type UseTabsProps,
+  type UseTabsReturn,
+  type TabsFocusChangeDetails as FocusChangeDetails,
+  type TabsValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/tabs'

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/Alert.tsx

@@ -0,0 +1,52 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { CheckCircleIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react'
+import { type ComponentProps, createContext, forwardRef, useContext } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { alert, type AlertVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(alert)
+
+const StyledRoot: StyledComponent<typeof ark.div, AlertVariantProps> = withProvider(ark.div, 'root')
+export type RootProps = ComponentProps<typeof StyledRoot>
+const StatusContext = createContext<RootProps['status']>('info')
+
+export const Root = forwardRef<HTMLDivElement, RootProps>(function Root(props, ref) {
+  return (
+    <StatusContext.Provider value={props.status || 'info'}>
+      <StyledRoot ref={ref} {...props} />
+    </StatusContext.Provider>
+  )
+})
+export const Title = withContext(ark.h3, 'title')
+export const Description = withContext(ark.div, 'description')
+export const Content = withContext(ark.div, 'content')
+
+export type IndicatorProps = ComponentProps<typeof StyledIndicator>
+const StyledIndicator: StyledComponent<typeof ark.span> = withContext(ark.span, 'indicator')
+
+const iconMap = {
+  info: InfoIcon,
+  warning: TriangleAlertIcon,
+  success: CheckCircleIcon,
+  error: TriangleAlertIcon,
+  neutral: InfoIcon,
+}
+
+export const Indicator = forwardRef<HTMLSpanElement, IndicatorProps>(
+  function Indicator(props, ref) {
+    const { children, asChild, ...rest } = props
+    const status = useContext(StatusContext)
+    const StatusIcon = typeof status === 'string' ? iconMap[status] : undefined
+    return (
+      <StyledIndicator ref={ref} asChild={asChild} {...rest}>
+        {asChild || children !== undefined ? children : StatusIcon && <StatusIcon />}
+      </StyledIndicator>
+    )
+  },
+)
+
+export type TitleProps = ComponentProps<typeof Title>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type ContentProps = ComponentProps<typeof Content>

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/Progress.tsx

@@ -0,0 +1,41 @@
+'use client'
+import { Progress } from '@ark-ui/react/progress'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { progress, type ProgressVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(progress)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Progress.Root, ProgressVariantProps> = withProvider(
+  Progress.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Progress.RootProvider, ProgressVariantProps> =
+  withProvider(Progress.RootProvider, 'root')
+export const Label = withContext(Progress.Label, 'label')
+export const Range = withContext(Progress.Range, 'range')
+export const Track = withContext(Progress.Track, 'track')
+export const ValueText = withContext(Progress.ValueText, 'valueText')
+export const View = withContext(Progress.View, 'view')
+
+export {
+  ProgressContext as Context,
+  useProgress,
+  type UseProgressProps,
+  type UseProgressReturn,
+} from '@ark-ui/react/progress'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type LabelProps = ComponentProps<typeof Label>
+export type RangeProps = ComponentProps<typeof Range>
+export type TrackProps = ComponentProps<typeof Track>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type ViewProps = ComponentProps<typeof View>
+
+export {
+  useProgressContext,
+  type ProgressValueChangeDetails as ValueChangeDetails,
+  type ProgressValueTranslationDetails as ValueTranslationDetails,
+} from '@ark-ui/react/progress'

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/ProgressCircle.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { Progress } from '@ark-ui/react/progress'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { progressCircle, type ProgressCircleVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(progressCircle)
+
+export const Root: StyledComponent<typeof Progress.Root, ProgressCircleVariantProps> = withProvider(
+  Progress.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<
+  typeof Progress.RootProvider,
+  ProgressCircleVariantProps
+> = withProvider(Progress.RootProvider, 'root')
+export const Circle = withContext(Progress.Circle, 'circle')
+export const Track = withContext(Progress.CircleTrack, 'circleTrack')
+export const Range = withContext(Progress.CircleRange, 'circleRange')
+export const Label = withContext(Progress.Label, 'label')
+export const ValueText = withContext(Progress.ValueText, 'valueText')
+
+export type RootProps = ComponentProps<typeof Root>
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type CircleProps = ComponentProps<typeof Circle>
+export type TrackProps = ComponentProps<typeof Track>
+export type RangeProps = ComponentProps<typeof Range>
+export type LabelProps = ComponentProps<typeof Label>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+
+export {
+  ProgressContext as Context,
+  useProgress,
+  useProgressContext,
+  type UseProgressProps,
+  type UseProgressReturn,
+  type ProgressValueChangeDetails as ValueChangeDetails,
+  type ProgressValueTranslationDetails as ValueTranslationDetails,
+} from '@ark-ui/react/progress'

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/Skeleton.tsx

@@ -0,0 +1,37 @@
+import { ark } from '@ark-ui/react/factory'
+import { type ComponentProps, forwardRef } from 'react'
+import { PandaStack as Stack, type StackProps, styled } from 'styled-system/jsx'
+import { skeleton } from 'styled-system/recipes'
+
+export type SkeletonProps = ComponentProps<typeof Skeleton>
+export const Skeleton = styled(ark.div, skeleton)
+
+export type SkeletonCircleProps = ComponentProps<typeof SkeletonCircle>
+export const SkeletonCircle = styled(ark.div, skeleton, { defaultProps: { circle: true } })
+
+export interface SkeletonTextProps extends SkeletonProps {
+  /**
+   * Number of lines to display
+   * @default 3
+   */
+  noOfLines?: number | undefined
+  rootProps?: StackProps | undefined
+}
+
+export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props
+    return (
+      <Stack ref={ref} gap={gap} width="full" {...rootProps}>
+        {[...Array(noOfLines).keys()].map((index) => (
+          <Skeleton
+            key={index}
+            height="4"
+            _last={{ maxW: noOfLines === 1 ? '100%' : '80%' }}
+            {...skeletonProps}
+          />
+        ))}
+      </Stack>
+    )
+  },
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/Spinner.tsx

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

package/templates/hono-fullstack/libs/ui/src/components/atoms/feedback/Toast.tsx

@@ -0,0 +1,99 @@
+'use client'
+import { Portal } from '@ark-ui/react/portal'
+import { Toaster as ArkToaster, Toast, useToastContext } from '@ark-ui/react/toast'
+import { CheckCircleIcon, CircleAlertIcon, CircleXIcon } from 'lucide-react'
+import { forwardRef, type ComponentProps } from 'react'
+import { createSlotRecipeContext, PandaStack as Stack, styled } from 'styled-system/jsx'
+import { toast, type ToastVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+import { CloseButton } from '@/components/atoms/buttons/CloseButton'
+import { Icon, type IconProps } from '@/components/atoms/data-display/Icon'
+import { Spinner } from './Spinner'
+
+const { withProvider, withContext } = createSlotRecipeContext(toast)
+
+export const Root: StyledComponent<typeof Toast.Root, ToastVariantProps> = withProvider(
+  Toast.Root,
+  'root',
+)
+export const Title = withContext(Toast.Title, 'title')
+export const Description = withContext(Toast.Description, 'description')
+export const ActionTrigger = withContext(Toast.ActionTrigger, 'actionTrigger')
+export const CloseTrigger = withContext(Toast.CloseTrigger, 'closeTrigger')
+const StyledToaster = styled(ArkToaster)
+
+const iconMap: Record<string, React.ElementType> = {
+  warning: CircleAlertIcon,
+  success: CheckCircleIcon,
+  error: CircleXIcon,
+}
+
+export type IndicatorProps = IconProps
+export const Indicator = forwardRef<SVGSVGElement, IndicatorProps>((props, ref) => {
+  const toast = useToastContext()
+
+  const StatusIcon = iconMap[toast.type]
+  if (!StatusIcon) return null
+
+  return (
+    <Icon ref={ref} data-type={toast.type} {...props}>
+      <StatusIcon />
+    </Icon>
+  )
+})
+
+export {
+  createToaster,
+  type CreateToasterProps,
+  type CreateToasterReturn,
+} from '@ark-ui/react/toast'
+
+export type ToasterProps = Omit<ComponentProps<typeof StyledToaster>, 'children'> & {
+  children?: ComponentProps<typeof StyledToaster>['children']
+}
+
+export const Toaster = forwardRef<HTMLDivElement, ToasterProps>(function Toaster(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <Portal>
+      <StyledToaster ref={ref} zIndex="toast" insetInline={{ mdDown: '4' }} {...props}>
+        {children ||
+          ((toast) => (
+            <Root>
+              {toast.type === 'loading' ? (
+                <Spinner color="colorPalette.fg.default" />
+              ) : (
+                <Indicator />
+              )}
+
+              <Stack gap="3" alignItems="start">
+                <Stack gap="1">
+                  {toast.title && <Title>{toast.title}</Title>}
+                  {toast.description && <Description>{toast.description}</Description>}
+                </Stack>
+                {toast.action && <ActionTrigger>{toast.action.label}</ActionTrigger>}
+              </Stack>
+              {toast.closable && (
+                <CloseTrigger asChild>
+                  <CloseButton size="sm" aria-label="关闭通知" />
+                </CloseTrigger>
+              )}
+            </Root>
+          ))}
+      </StyledToaster>
+    </Portal>
+  )
+})
+
+export type RootProps = ComponentProps<typeof Root>
+export type TitleProps = ComponentProps<typeof Title>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type ActionTriggerProps = ComponentProps<typeof ActionTrigger>
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+
+export {
+  useToastContext,
+  type ToastStatusChangeDetails as StatusChangeDetails,
+} from '@ark-ui/react/toast'

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

@@ -0,0 +1,95 @@
+'use client'
+import { Checkbox, useCheckboxContext } from '@ark-ui/react/checkbox'
+import { ark } from '@ark-ui/react/factory'
+import { type ComponentProps, forwardRef, type ReactElement } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(checkbox)
+
+export type RootProps = ComponentProps<typeof Root>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+
+export const Root: StyledComponent<typeof Checkbox.Root, CheckboxVariantProps> = withProvider(
+  Checkbox.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Checkbox.RootProvider, CheckboxVariantProps> =
+  withProvider(Checkbox.RootProvider, 'root')
+export const Group: StyledComponent<typeof Checkbox.Group, CheckboxVariantProps> = withProvider(
+  Checkbox.Group,
+  'group',
+)
+export const Label = withContext(Checkbox.Label, 'label')
+export const HiddenInput = Checkbox.HiddenInput
+
+export {
+  CheckboxContext as Context,
+  type CheckboxCheckedState as CheckedState,
+  CheckboxGroupProvider as GroupProvider,
+} from '@ark-ui/react/checkbox'
+
+const StyledIndicator: StyledComponent<typeof ark.svg> = withContext(ark.svg, 'indicator')
+
+export interface IndicatorProps extends ComponentProps<typeof StyledIndicator> {
+  checked?: ReactElement | undefined
+  indeterminate?: ReactElement | undefined
+}
+
+export const Indicator = forwardRef<SVGSVGElement, IndicatorProps>(function Indicator(props, ref) {
+  const { checked, indeterminate, children, asChild, ...rest } = props
+  const api = useCheckboxContext()
+  const customIcon = api.indeterminate ? indeterminate : api.checked ? checked : undefined
+
+  return (
+    <Checkbox.Indicator indeterminate={api.indeterminate} asChild>
+      <StyledIndicator
+        ref={ref}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3px"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+        asChild={Boolean(customIcon) || asChild}>
+        {customIcon !== undefined ? (
+          customIcon
+        ) : children !== undefined || asChild ? (
+          children
+        ) : (
+          <>
+            <title>Checkmark</title>
+            {api.indeterminate ? (
+              <path d="M5 12h14" />
+            ) : api.checked ? (
+              <path d="M20 6 9 17l-5-5" />
+            ) : null}
+          </>
+        )}
+      </StyledIndicator>
+    </Checkbox.Indicator>
+  )
+})
+
+export const Control = withContext(Checkbox.Control, 'control', {
+  defaultProps: { children: <Indicator /> },
+})
+export type ControlProps = ComponentProps<typeof Control>
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type GroupProps = ComponentProps<typeof Group>
+export type LabelProps = ComponentProps<typeof Label>
+
+export {
+  useCheckbox,
+  useCheckboxContext,
+  useCheckboxGroup,
+  useCheckboxGroupContext,
+  type UseCheckboxProps,
+  type UseCheckboxReturn,
+  type CheckboxCheckedChangeDetails as CheckedChangeDetails,
+} from '@ark-ui/react/checkbox'
+
+export { type UseCheckboxGroupProps, type UseCheckboxGroupReturn } from '@ark-ui/react/checkbox'