@oyolincc/create 0.4.0 → 0.5.1

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Avatar.tsx

@@ -0,0 +1,64 @@
+'use client'
+import { Avatar } from '@ark-ui/react/avatar'
+import { UserIcon } from 'lucide-react'
+import { type ComponentProps, forwardRef } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { avatar, type AvatarVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(avatar)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Avatar.Root, AvatarVariantProps> = withProvider(
+  Avatar.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Avatar.RootProvider, AvatarVariantProps> =
+  withProvider(Avatar.RootProvider, 'root')
+export const Image = withContext(Avatar.Image, 'image', {
+  defaultProps: {
+    draggable: 'false',
+    referrerPolicy: 'no-referrer',
+  },
+})
+
+export { AvatarContext as Context } from '@ark-ui/react/avatar'
+
+export interface FallbackProps extends ComponentProps<typeof StyledFallback> {
+  /**
+   * The name to derive the initials from.
+   * If not provided, the fallback will display a generic icon.
+   */
+  name?: string | undefined
+}
+
+const StyledFallback: StyledComponent<typeof Avatar.Fallback> = withContext(
+  Avatar.Fallback,
+  'fallback',
+)
+
+export const Fallback = forwardRef<HTMLDivElement, FallbackProps>(function Fallback(props, ref) {
+  const { name, children, asChild, ...rest } = props
+  const names = name?.trim().split(/\s+/) || []
+  const initials =
+    (names[0]?.[0] || '') + (names.length > 1 ? names[names.length - 1]?.[0] || '' : '')
+
+  const fallbackContent = children !== undefined || asChild ? children : initials || <UserIcon />
+
+  return (
+    <StyledFallback ref={ref} asChild={asChild} {...rest}>
+      {fallbackContent}
+    </StyledFallback>
+  )
+})
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ImageProps = ComponentProps<typeof Image>
+
+export {
+  useAvatar,
+  useAvatarContext,
+  type UseAvatarProps,
+  type UseAvatarReturn,
+  type AvatarStatusChangeDetails as StatusChangeDetails,
+} from '@ark-ui/react/avatar'

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Badge.tsx

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

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Card.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { card, type CardVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(card)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof ark.div, CardVariantProps> = withProvider(ark.div, 'root')
+export const Header = withContext(ark.div, 'header')
+export const Body = withContext(ark.div, 'body')
+export const Footer = withContext(ark.div, 'footer')
+export const Title = withContext(ark.h3, 'title')
+export const Description = withContext(ark.div, 'description')
+
+export type HeaderProps = ComponentProps<typeof Header>
+export type BodyProps = ComponentProps<typeof Body>
+export type FooterProps = ComponentProps<typeof Footer>
+export type TitleProps = ComponentProps<typeof Title>
+export type DescriptionProps = ComponentProps<typeof Description>

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Clipboard.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { Clipboard } from '@ark-ui/react/clipboard'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { type ComponentProps, forwardRef } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { clipboard, type ClipboardVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(clipboard)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Clipboard.Root, ClipboardVariantProps> = withProvider(
+  Clipboard.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Clipboard.RootProvider, ClipboardVariantProps> =
+  withProvider(Clipboard.RootProvider, 'root')
+export const Control = withContext(Clipboard.Control, 'control')
+export const Input = withContext(Clipboard.Input, 'input')
+export const Label = withContext(Clipboard.Label, 'label')
+export const Trigger = withContext(Clipboard.Trigger, 'trigger')
+export const ValueText = withContext(Clipboard.ValueText, 'valueText')
+
+export { ClipboardContext as Context } from '@ark-ui/react/clipboard'
+
+export interface IndicatorProps extends ComponentProps<typeof StyledIndicator> {}
+
+const StyledIndicator: StyledComponent<typeof Clipboard.Indicator> = withContext(
+  Clipboard.Indicator,
+  'indicator',
+)
+
+export const Indicator = forwardRef<HTMLDivElement, IndicatorProps>(function Indicator(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <StyledIndicator ref={ref} copied={<CheckIcon />} {...props}>
+      {children == null ? <CopyIcon /> : children}
+    </StyledIndicator>
+  )
+})
+
+export const CopyText = forwardRef<HTMLDivElement, IndicatorProps>(function CopyText(
+  { children, ...props },
+  ref,
+) {
+  return (
+    <StyledIndicator ref={ref} copied="Copied" {...props}>
+      {children == null ? 'Copy' : children}
+    </StyledIndicator>
+  )
+})
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+
+export type ControlProps = ComponentProps<typeof Control>
+
+export type InputProps = ComponentProps<typeof Input>
+
+export type LabelProps = ComponentProps<typeof Label>
+
+export type TriggerProps = ComponentProps<typeof Trigger>
+
+export type ValueTextProps = ComponentProps<typeof ValueText>
+
+export {
+  useClipboard,
+  useClipboardContext,
+  type UseClipboardProps,
+  type UseClipboardReturn,
+  type ClipboardCopyStatusDetails as CopyStatusDetails,
+  type ClipboardValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/clipboard'
+
+export type CopyTextProps = IndicatorProps

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Icon.tsx

@@ -0,0 +1,9 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { icon } from 'styled-system/recipes'
+
+export type IconProps = ComponentProps<typeof Icon>
+export const Icon = styled(ark.svg, icon, {
+  defaultProps: { asChild: true },
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Table.tsx

@@ -0,0 +1,51 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { forwardRef, type ComponentProps } from 'react'
+import { createSlotRecipeContext, styled } from 'styled-system/jsx'
+import { table, type TableVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(table)
+
+const StyledRoot: StyledComponent<typeof ark.table, TableVariantProps> = withProvider(
+  ark.table,
+  'root',
+)
+export interface RootProps extends ComponentProps<typeof StyledRoot> {
+  native?: boolean
+}
+export const Root = forwardRef<HTMLTableElement, RootProps>(function Root(
+  { native, ...props },
+  ref,
+) {
+  return <StyledRoot {...props} data-native={native ? '' : undefined} ref={ref} />
+})
+export const Body = withContext(ark.tbody, 'body')
+export const Caption = withContext(ark.caption, 'caption')
+export const Cell = withContext(ark.td, 'cell')
+export const Footer = withContext(ark.tfoot, 'foot')
+export const Header = withContext(ark.thead, 'head')
+export const ColumnHeader = withContext(ark.th, 'header', { defaultProps: { scope: 'col' } })
+export const Row = withContext(ark.tr, 'row')
+export const ColumnGroup = styled(ark.colgroup)
+export const Column = styled(ark.col)
+export const ScrollArea = styled(ark.div, {
+  base: {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    overflow: 'auto',
+    maxWidth: 'full',
+    WebkitOverflowScrolling: 'touch',
+  },
+})
+
+export type BodyProps = ComponentProps<typeof Body>
+export type CaptionProps = ComponentProps<typeof Caption>
+export type CellProps = ComponentProps<typeof Cell>
+export type FooterProps = ComponentProps<typeof Footer>
+export type HeaderProps = ComponentProps<typeof Header>
+export type ColumnHeaderProps = ComponentProps<typeof ColumnHeader>
+export type RowProps = ComponentProps<typeof Row>
+export type ColumnGroupProps = ComponentProps<typeof ColumnGroup>
+export type ColumnProps = ComponentProps<typeof Column>
+export type ScrollAreaProps = ComponentProps<typeof ScrollArea>

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Tag.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { XIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { tag, type TagVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(tag)
+
+export const Root: StyledComponent<typeof ark.div, TagVariantProps> = withProvider(ark.div, 'root')
+export const Label = withContext(ark.span, 'label')
+export const StartElement = withContext(ark.span, 'startElement')
+export const EndElement = withContext(ark.span, 'endElement')
+export const CloseTrigger = withContext(ark.button, 'closeTrigger', {
+  defaultProps: { type: 'button', 'aria-label': 'Remove tag', children: <XIcon /> },
+})
+
+export type RootProps = ComponentProps<typeof Root>
+export type LabelProps = ComponentProps<typeof Label>
+export type StartElementProps = ComponentProps<typeof StartElement>
+export type EndElementProps = ComponentProps<typeof EndElement>
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>

package/templates/hono-fullstack/libs/ui/src/components/atoms/data-display/Timeline.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { timeline, type TimelineVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext, PropsProvider } = createSlotRecipeContext(timeline)
+
+export { PropsProvider }
+export const Root: StyledComponent<typeof ark.div, TimelineVariantProps> = withProvider(
+  ark.div,
+  'root',
+  { defaultProps: { role: 'list' } },
+)
+export const Item = withContext(ark.div, 'item', { defaultProps: { role: 'listitem' } })
+export const Connector = withContext(ark.div, 'connector')
+export const Separator = withContext(ark.div, 'separator', {
+  defaultProps: { 'aria-hidden': true },
+})
+export const Indicator = withContext(ark.div, 'indicator')
+export const Content = withContext(ark.div, 'content')
+export const Title = withContext(ark.div, 'title')
+export const Description = withContext(ark.div, 'description')
+
+export type RootProps = ComponentProps<typeof Root>
+export type ItemProps = ComponentProps<typeof Item>
+export type ConnectorProps = ComponentProps<typeof Connector>
+export type SeparatorProps = ComponentProps<typeof Separator>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type ContentProps = ComponentProps<typeof Content>
+export type TitleProps = ComponentProps<typeof Title>
+export type DescriptionProps = ComponentProps<typeof Description>

package/templates/hono-fullstack/libs/ui/src/components/atoms/date-and-time/DatePicker.tsx

@@ -0,0 +1,255 @@
+'use client'
+import { DatePicker, useDatePickerContext } from '@ark-ui/react/date-picker'
+import { ark } from '@ark-ui/react/factory'
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
+import { forwardRef, type ComponentProps, type Provider } from 'react'
+import type { StyledComponent } from 'styled-system/types'
+import { Button } from '@/components/atoms/buttons/Button'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { datePicker, type DatePickerVariantProps } from 'styled-system/recipes'
+
+const {
+  withProvider,
+  withContext,
+  PropsProvider: DatePropsProvider,
+} = createSlotRecipeContext(datePicker)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof DatePicker.Root, DatePickerVariantProps> = withProvider(
+  DatePicker.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof DatePicker.RootProvider, DatePickerVariantProps> =
+  withProvider(DatePicker.RootProvider, 'root')
+export const ClearTrigger = withContext(DatePicker.ClearTrigger, 'clearTrigger', {
+  defaultProps: { children: <XIcon /> },
+})
+export const Content = withContext(DatePicker.Content, 'content')
+export const Control = withContext(DatePicker.Control, 'control')
+export const Input = withContext(DatePicker.Input, 'input')
+export const Label = withContext(DatePicker.Label, 'label')
+export const MonthSelect = withContext(DatePicker.MonthSelect, 'monthSelect')
+export const NextTrigger = withContext(DatePicker.NextTrigger, 'nextTrigger', {
+  defaultProps: { children: <ChevronRightIcon /> },
+})
+export const Positioner = withContext(DatePicker.Positioner, 'positioner')
+export const PresetTrigger = withContext(DatePicker.PresetTrigger, 'presetTrigger')
+export const PrevTrigger = withContext(DatePicker.PrevTrigger, 'prevTrigger', {
+  defaultProps: { children: <ChevronLeftIcon /> },
+})
+export const RangeText = withContext(DatePicker.RangeText, 'rangeText')
+export const Table: StyledComponent<typeof DatePicker.Table> = withContext(
+  DatePicker.Table,
+  'table',
+)
+export const TableBody = withContext(DatePicker.TableBody, 'tableBody')
+export const TableCell = withContext(DatePicker.TableCell, 'tableCell')
+export const TableCellTrigger = withContext(DatePicker.TableCellTrigger, 'tableCellTrigger')
+export const TableHead = withContext(DatePicker.TableHead, 'tableHead')
+export const TableHeader = withContext(DatePicker.TableHeader, 'tableHeader')
+export const TableRow = withContext(DatePicker.TableRow, 'tableRow')
+export const Trigger = withContext(DatePicker.Trigger, 'trigger', {
+  defaultProps: { children: <CalendarIcon /> },
+})
+export const View = withContext(DatePicker.View, 'view')
+export const ViewControl = withContext(DatePicker.ViewControl, 'viewControl')
+export const ViewTrigger = withContext(DatePicker.ViewTrigger, 'viewTrigger')
+export const YearSelect = withContext(DatePicker.YearSelect, 'yearSelect')
+
+export { DatePickerContext as Context } from '@ark-ui/react/date-picker'
+export const IndicatorGroup = withContext(ark.div, 'indicatorGroup')
+export const WeekNumberHeaderCell = withContext(DatePicker.WeekNumberHeaderCell, 'tableHeader', {
+  defaultProps: { 'data-type': 'week-number' },
+})
+export const WeekNumberCell = withContext(DatePicker.WeekNumberCell, 'tableCell', {
+  defaultProps: { 'data-type': 'week-number' },
+})
+export const WeekNumberCellText = withContext(ark.span, 'weekNumberCellText')
+export const ValueText = withContext(DatePicker.ValueText, 'valueText')
+export const PropsProvider = DatePropsProvider as Provider<Partial<RootProps>>
+export const Header = withContext(DatePicker.ViewControl, 'viewControl', {
+  defaultProps: {
+    children: (
+      <>
+        <PrevTrigger />
+        <ViewTrigger>
+          <RangeText />
+        </ViewTrigger>
+        <NextTrigger />
+      </>
+    ),
+  },
+})
+
+export interface DayTableProps extends TableProps {
+  offset?: number
+  weekNumberLabel?: string
+}
+export const DayTable = forwardRef<HTMLTableElement, DayTableProps>(function DayTable(
+  { offset = 0, weekNumberLabel = '#', children, ...props },
+  ref,
+) {
+  const picker = useDatePickerContext()
+  if (children == null && picker.view !== 'day') return null
+  const shifted = offset ? picker.getOffset({ months: offset }) : undefined
+  const weeks = shifted ? shifted.weeks : picker.weeks
+  return (
+    <Table {...props} ref={ref}>
+      {children == null ? (
+        <>
+          <TableHead>
+            <TableRow>
+              {picker.showWeekNumbers && (
+                <WeekNumberHeaderCell>{weekNumberLabel}</WeekNumberHeaderCell>
+              )}
+              {picker.weekDays.map((day, index) => (
+                <TableHeader key={index} scope="col" aria-label={day.long}>
+                  {day.narrow}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {weeks.map((week, index) => (
+              <TableRow key={index}>
+                {picker.showWeekNumbers && (
+                  <WeekNumberCell weekIndex={index} week={week}>
+                    <WeekNumberCellText>{picker.getWeekNumber(week)}</WeekNumberCellText>
+                  </WeekNumberCell>
+                )}
+                {week.map((day) => (
+                  <TableCell key={day.toString()} value={day} visibleRange={shifted?.visibleRange}>
+                    <TableCellTrigger>{day.day}</TableCellTrigger>
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </>
+      ) : (
+        children
+      )}
+    </Table>
+  )
+})
+export interface MonthTableProps extends TableProps {
+  columns?: number
+  format?: 'short' | 'long'
+}
+export const MonthTable = forwardRef<HTMLTableElement, MonthTableProps>(function MonthTable(
+  { columns = 4, format = 'short', children, ...props },
+  ref,
+) {
+  const picker = useDatePickerContext()
+  if (children == null && picker.view !== 'month') return null
+  return (
+    <Table {...props} ref={ref}>
+      {children == null ? (
+        <TableBody>
+          {picker.getMonthsGrid({ columns, format }).map((months, index) => (
+            <TableRow key={index}>
+              {months.map((month) => (
+                <TableCell key={month.value} value={month.value}>
+                  <TableCellTrigger>{month.label}</TableCellTrigger>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      ) : (
+        children
+      )}
+    </Table>
+  )
+})
+export interface YearTableProps extends TableProps {
+  columns?: number
+}
+export const YearTable = forwardRef<HTMLTableElement, YearTableProps>(function YearTable(
+  { columns = 4, children, ...props },
+  ref,
+) {
+  const picker = useDatePickerContext()
+  if (children == null && picker.view !== 'year') return null
+  return (
+    <Table {...props} ref={ref}>
+      {children == null ? (
+        <TableBody>
+          {picker.getYearsGrid({ columns }).map((years, index) => (
+            <TableRow key={index}>
+              {years.map((year) => (
+                <TableCell key={year.value} value={year.value}>
+                  <TableCellTrigger>{year.label}</TableCellTrigger>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      ) : (
+        children
+      )}
+    </Table>
+  )
+})
+export interface ValueProps extends Omit<TriggerProps, 'children'> {
+  placeholder?: string
+}
+export const Value = forwardRef<HTMLButtonElement, ValueProps>(function Value(
+  { placeholder = 'Select date', ...props },
+  ref,
+) {
+  return (
+    <Trigger asChild unstyled {...props} ref={ref}>
+      <Button variant="outline" width="full" justifyContent="flex-start">
+        <ValueText placeholder={placeholder} />
+      </Button>
+    </Trigger>
+  )
+})
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ClearTriggerProps = ComponentProps<typeof ClearTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type ControlProps = ComponentProps<typeof Control>
+export type InputProps = ComponentProps<typeof Input>
+export type LabelProps = ComponentProps<typeof Label>
+export type MonthSelectProps = ComponentProps<typeof MonthSelect>
+export type NextTriggerProps = ComponentProps<typeof NextTrigger>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type PresetTriggerProps = ComponentProps<typeof PresetTrigger>
+export type PrevTriggerProps = ComponentProps<typeof PrevTrigger>
+export type RangeTextProps = ComponentProps<typeof RangeText>
+export type TableProps = ComponentProps<typeof Table>
+export type TableBodyProps = ComponentProps<typeof TableBody>
+export type TableCellProps = ComponentProps<typeof TableCell>
+export type TableCellTriggerProps = ComponentProps<typeof TableCellTrigger>
+export type TableHeadProps = ComponentProps<typeof TableHead>
+export type TableHeaderProps = ComponentProps<typeof TableHeader>
+export type TableRowProps = ComponentProps<typeof TableRow>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ViewProps = ComponentProps<typeof View>
+export type ViewControlProps = ComponentProps<typeof ViewControl>
+export type ViewTriggerProps = ComponentProps<typeof ViewTrigger>
+export type YearSelectProps = ComponentProps<typeof YearSelect>
+export type IndicatorGroupProps = ComponentProps<typeof IndicatorGroup>
+export type WeekNumberHeaderCellProps = ComponentProps<typeof WeekNumberHeaderCell>
+export type WeekNumberCellProps = ComponentProps<typeof WeekNumberCell>
+export type WeekNumberCellTextProps = ComponentProps<typeof WeekNumberCellText>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type HeaderProps = ComponentProps<typeof Header>
+export {
+  useDatePicker,
+  useDatePickerContext,
+  type UseDatePickerProps,
+  type UseDatePickerReturn,
+} from '@ark-ui/react/date-picker'
+export type {
+  DateValue,
+  DatePickerDateRangePreset as DateRangePreset,
+  DatePickerDateView as DateView,
+  DatePickerSelectionMode as SelectionMode,
+  DatePickerValueChangeDetails as ValueChangeDetails,
+  DatePickerFocusChangeDetails as FocusChangeDetails,
+  DatePickerOpenChangeDetails as OpenChangeDetails,
+  DatePickerViewChangeDetails as ViewChangeDetails,
+  DatePickerVisibleRangeChangeDetails as VisibleRangeChangeDetails,
+} from '@ark-ui/react/date-picker'

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

@@ -0,0 +1,48 @@
+'use client'
+import { Accordion } from '@ark-ui/react/accordion'
+import { ark } from '@ark-ui/react/factory'
+import { ChevronDownIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { accordion, type AccordionVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(accordion)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root: StyledComponent<typeof Accordion.Root, AccordionVariantProps> = withProvider(
+  Accordion.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof Accordion.RootProvider, AccordionVariantProps> =
+  withProvider(Accordion.RootProvider, 'root')
+export const Item = withContext(Accordion.Item, 'item')
+export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
+export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <ChevronDownIcon /> },
+})
+export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')
+export const ItemBody = withContext(ark.div, 'itemBody')
+
+export {
+  AccordionContext as Context,
+  AccordionItemContext as ItemContext,
+} from '@ark-ui/react/accordion'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemContentProps = ComponentProps<typeof ItemContent>
+export type ItemIndicatorProps = ComponentProps<typeof ItemIndicator>
+export type ItemTriggerProps = ComponentProps<typeof ItemTrigger>
+export type ItemBodyProps = ComponentProps<typeof ItemBody>
+
+export {
+  useAccordion,
+  useAccordionContext,
+  useAccordionItemContext,
+  type UseAccordionProps,
+  type UseAccordionReturn,
+  type AccordionFocusChangeDetails as FocusChangeDetails,
+  type AccordionValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/accordion'

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

@@ -0,0 +1,50 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { ChevronRightIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { breadcrumb, type BreadcrumbVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(breadcrumb)
+
+export type RootProps = ComponentProps<typeof Root>
+
+export const Root: StyledComponent<typeof ark.nav, BreadcrumbVariantProps> = withProvider(
+  ark.nav,
+  'root',
+  { defaultProps: { 'aria-label': 'breadcrumb' } },
+)
+export const List = withContext(ark.ol, 'list')
+export const Item = withContext(ark.li, 'item')
+export const Link = withContext(ark.a, 'link')
+export const CurrentLink = withContext(ark.span, 'currentLink', {
+  defaultProps: { role: 'link', 'aria-current': 'page' },
+})
+export const Ellipsis = withContext(ark.li, 'ellipsis', {
+  defaultProps: {
+    role: 'presentation',
+    'aria-hidden': true,
+    children: '...',
+  },
+})
+
+export const Separator = withContext(ark.li, 'separator', {
+  defaultProps: {
+    'aria-hidden': true,
+    children: <ChevronRightIcon />,
+  },
+})
+
+export type ListProps = ComponentProps<typeof List>
+
+export type ItemProps = ComponentProps<typeof Item>
+
+export type LinkProps = ComponentProps<typeof Link>
+
+export type CurrentLinkProps = ComponentProps<typeof CurrentLink>
+
+export type EllipsisProps = ComponentProps<typeof Ellipsis>
+
+export type SeparatorProps = ComponentProps<typeof Separator>