@oyolincc/create 0.4.0 → 0.5.0

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

@@ -0,0 +1,77 @@
+'use client'
+import { TagsInput, useTagsInputContext } from '@ark-ui/react/tags-input'
+import { XIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { tagsInput, type TagsInputVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(tagsInput)
+
+export type RootProps = ComponentProps<typeof Root>
+export type ItemProps = ComponentProps<typeof Item>
+export const Root: StyledComponent<typeof TagsInput.Root, TagsInputVariantProps> = withProvider(
+  TagsInput.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof TagsInput.RootProvider, TagsInputVariantProps> =
+  withProvider(TagsInput.RootProvider, 'root')
+export const ClearTrigger = withContext(TagsInput.ClearTrigger, 'clearTrigger', {
+  defaultProps: { children: <XIcon /> },
+})
+export const Control = withContext(TagsInput.Control, 'control')
+export const HiddenInput = TagsInput.HiddenInput
+export const Input = withContext(TagsInput.Input, 'input')
+export const Item = withContext(TagsInput.Item, 'item')
+export const ItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, 'itemDeleteTrigger', {
+  defaultProps: { children: <XIcon /> },
+})
+export const ItemInput = withContext(TagsInput.ItemInput, 'itemInput')
+export const ItemPreview = withContext(TagsInput.ItemPreview, 'itemPreview')
+export const ItemText = withContext(TagsInput.ItemText, 'itemText')
+export const Label = withContext(TagsInput.Label, 'label')
+
+export { TagsInputContext as Context } from '@ark-ui/react/tags-input'
+
+export interface TagsInputItemsProps extends Omit<ItemProps, 'value' | 'index'> {}
+
+export const Items = (props: TagsInputItemsProps) => {
+  const context = useTagsInputContext()
+
+  return context.value.map((item, index) => (
+    <Item key={index} index={index} value={item} {...props}>
+      <ItemPreview>
+        <ItemText>{item}</ItemText>
+        <ItemDeleteTrigger />
+      </ItemPreview>
+      <ItemInput />
+    </Item>
+  ))
+}
+
+export {
+  useTagsInput,
+  type UseTagsInputProps,
+  type UseTagsInputReturn,
+} from '@ark-ui/react/tags-input'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ClearTriggerProps = ComponentProps<typeof ClearTrigger>
+export type ControlProps = ComponentProps<typeof Control>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+export type InputProps = ComponentProps<typeof Input>
+export type ItemDeleteTriggerProps = ComponentProps<typeof ItemDeleteTrigger>
+export type ItemInputProps = ComponentProps<typeof ItemInput>
+export type ItemPreviewProps = ComponentProps<typeof ItemPreview>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type ItemsProps = ComponentProps<typeof Items>
+
+export {
+  useTagsInputContext,
+  useTagsInputItemContext,
+  type TagsInputHighlightChangeDetails as HighlightChangeDetails,
+  type TagsInputInputValueChangeDetails as InputValueChangeDetails,
+  type TagsInputValidityChangeDetails as ValidityChangeDetails,
+  type TagsInputValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/tags-input'

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

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

package/templates/hono-fullstack/libs/ui/src/components/atoms/index.ts

@@ -0,0 +1,98 @@
+export { Button, ButtonGroup, type ButtonProps, type ButtonGroupProps } from './buttons/Button'
+export { IconButton, type IconButtonProps } from './buttons/IconButton'
+export { CloseButton, type CloseButtonProps } from './buttons/CloseButton'
+export { Spinner, type SpinnerProps } from './feedback/Spinner'
+export { Icon, type IconProps } from './data-display/Icon'
+export * as Dialog from './overlays/Dialog'
+export * as Select from './collections/Select'
+export * as Combobox from './collections/Combobox'
+export * as Field from './forms/Field'
+export * as Checkbox from './forms/Checkbox'
+export { Group as CheckboxGroup, type GroupProps as CheckboxGroupProps } from './forms/Checkbox'
+export * as Tooltip from './overlays/Tooltip'
+export * as Tabs from './disclosure/Tabs'
+export {
+  Toaster,
+  createToaster,
+  type ToasterProps,
+  type CreateToasterProps,
+  type CreateToasterReturn,
+} from './feedback/Toast'
+export * as Toast from './feedback/Toast'
+export * as ScrollArea from './layout/ScrollArea'
+export * as FileUpload from './forms/FileUpload'
+export { Badge, type BadgeProps } from './data-display/Badge'
+export * as Card from './data-display/Card'
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  type SkeletonProps,
+  type SkeletonCircleProps,
+  type SkeletonTextProps,
+} from './feedback/Skeleton'
+export { Input, type InputProps } from './forms/Input'
+export { Textarea, type TextareaProps } from './forms/Textarea'
+export * as Switch from './forms/Switch'
+export * as RadioGroup from './forms/RadioGroup'
+export * as Accordion from './disclosure/Accordion'
+export * as Collapsible from './disclosure/Collapsible'
+export * as Pagination from './disclosure/Pagination'
+export * as Avatar from './data-display/Avatar'
+export * as Alert from './feedback/Alert'
+export * as Progress from './feedback/Progress'
+export * as ProgressCircle from './feedback/ProgressCircle'
+export { Heading, type HeadingProps } from './typography/Heading'
+export { Link, type LinkProps } from './typography/Link'
+export { Text, type TextProps } from './typography/Text'
+export * as Menu from './overlays/Menu'
+export * as Popover from './overlays/Popover'
+export * as HoverCard from './overlays/HoverCard'
+export * as Drawer from './overlays/Drawer'
+export * as NumberInput from './forms/NumberInput'
+export * as PinInput from './forms/PinInput'
+export * as Slider from './forms/Slider'
+export * as RatingGroup from './forms/RatingGroup'
+export * as SegmentGroup from './forms/SegmentGroup'
+export * as Editable from './forms/Editable'
+export * as TagsInput from './forms/TagsInput'
+export * as RadioCard from './forms/RadioCard'
+export * as Fieldset from './forms/Fieldset'
+export { InputGroup, type InputGroupProps } from './forms/InputGroup'
+export { InputAddon, type InputAddonProps } from './forms/InputAddon'
+export { Group, type GroupProps } from './layout/Group'
+export {
+  Stack,
+  HStack,
+  VStack,
+  type StackProps,
+  type HStackProps,
+  type VStackProps,
+} from './layout/Stack'
+export { Separator, type SeparatorProps } from './layout/Separator'
+export { Grid, type GridProps, GridItem, type GridItemProps } from './layout/Grid'
+export { Float, type FloatProps } from './layout/Float'
+export {
+  LinkBox,
+  type LinkBoxProps,
+  LinkOverlay,
+  type LinkOverlayProps,
+} from './typography/LinkOverlay'
+export { VisuallyHidden, type VisuallyHiddenProps } from './utilities/VisuallyHidden'
+export * as Table from './data-display/Table'
+export * as Tag from './data-display/Tag'
+export * as Breadcrumb from './disclosure/Breadcrumb'
+export * as Clipboard from './data-display/Clipboard'
+export * as NativeSelect from './forms/NativeSelect'
+export { PasswordInput, type PasswordInputProps } from './forms/PasswordInput'
+export * as Steps from './disclosure/Steps'
+export * as TreeView from './collections/TreeView'
+export * as ColorPicker from './forms/ColorPicker'
+export * as DatePicker from './date-and-time/DatePicker'
+export * as Timeline from './data-display/Timeline'
+export {
+  createOverlay,
+  type CreateOverlayProps,
+  type CreateOverlayReturn,
+  type OverlayOptions,
+} from './overlays/OverlayManager'

package/templates/hono-fullstack/libs/ui/src/components/atoms/internal/AbsoluteCenter.tsx

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

package/templates/hono-fullstack/libs/ui/src/components/atoms/internal/Loader.tsx

@@ -0,0 +1,69 @@
+'use client'
+import { forwardRef } from 'react'
+import type { HTMLStyledProps } from 'styled-system/jsx'
+import { AbsoluteCenter } from './AbsoluteCenter'
+import { Span } from './Span'
+import { Spinner } from '@/components/atoms/feedback/Spinner'
+
+export interface LoaderProps extends HTMLStyledProps<'span'> {
+  /**
+   * Whether the loader is visible
+   * @default true
+   */
+  visible?: boolean | undefined
+  /**
+   * The spinner to display when loading
+   */
+  spinner?: React.ReactNode | undefined
+  /**
+   * The placement of the spinner
+   * @default "start"
+   */
+  spinnerPlacement?: 'start' | 'end' | undefined
+  /**
+   * The text to display when loading
+   */
+  text?: React.ReactNode | undefined
+
+  children?: React.ReactNode
+}
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(props, ref) {
+  const {
+    spinner = <Spinner size="inherit" borderWidth="0.125em" color="inherit" />,
+    spinnerPlacement = 'start',
+    children,
+    text,
+    visible = true,
+    ...rest
+  } = props
+
+  if (!visible) return children
+
+  if (text) {
+    return (
+      <Span ref={ref} display="contents" {...rest}>
+        {spinnerPlacement === 'start' && spinner}
+        {text}
+        {spinnerPlacement === 'end' && spinner}
+      </Span>
+    )
+  }
+
+  if (spinner) {
+    return (
+      <Span ref={ref} display="contents" {...rest}>
+        <AbsoluteCenter display="inline-flex">{spinner}</AbsoluteCenter>
+        <Span visibility="hidden" display="contents">
+          {children}
+        </Span>
+      </Span>
+    )
+  }
+
+  return (
+    <Span ref={ref} display="contents" {...rest}>
+      {children}
+    </Span>
+  )
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/internal/Span.tsx

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+
+export type SpanProps = ComponentProps<typeof Span>
+export const Span = styled('span')

package/templates/hono-fullstack/libs/ui/src/components/atoms/internal/create-layout.ts

@@ -0,0 +1,18 @@
+'use client'
+import { createElement, forwardRef, type ElementType, type FunctionComponent } from 'react'
+import type { DataAttrs } from 'styled-system/types'
+
+export function createLayout<Props extends { as?: ElementType }, Element extends HTMLElement>(
+  Component: FunctionComponent<Props>,
+  element: ElementType,
+  defaults?: Partial<Props> & DataAttrs,
+) {
+  return forwardRef<Element, Props & { asChild?: boolean }>(function Layout(props, ref) {
+    return createElement(Component, {
+      ...defaults,
+      ...props,
+      as: props.as || element,
+      ref,
+    } as Props)
+  })
+}

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/Float.tsx

@@ -0,0 +1,7 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Float as PandaFloat, type FloatProps as PandaFloatProps } from 'styled-system/jsx'
+import { createLayout } from '@/components/atoms/internal/create-layout'
+
+export type FloatProps = PandaFloatProps & { asChild?: boolean }
+export const Float = /* @__PURE__ */ createLayout<FloatProps, HTMLDivElement>(PandaFloat, ark.div)

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/Grid.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import {
+  Grid as PandaGrid,
+  type GridProps as PandaGridProps,
+  GridItem as PandaGridItem,
+  type GridItemProps as PandaGridItemProps,
+} from 'styled-system/jsx'
+import { createLayout } from '@/components/atoms/internal/create-layout'
+
+export type GridProps = PandaGridProps & { asChild?: boolean }
+export const Grid = /* @__PURE__ */ createLayout<GridProps, HTMLDivElement>(PandaGrid, ark.div)
+export type GridItemProps = PandaGridItemProps & { asChild?: boolean }
+export const GridItem = /* @__PURE__ */ createLayout<GridItemProps, HTMLDivElement>(
+  PandaGridItem,
+  ark.div,
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/Group.tsx

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

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/ScrollArea.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { ScrollArea } from '@ark-ui/react/scroll-area'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { scrollArea, type ScrollAreaVariantProps } from 'styled-system/recipes'
+
+import type { StyledComponent } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(scrollArea)
+
+export type RootProps = ComponentProps<typeof Root>
+export type ContentProps = ComponentProps<typeof Content>
+
+export const Root: StyledComponent<typeof ScrollArea.Root, ScrollAreaVariantProps> = withProvider(
+  ScrollArea.Root,
+  'root',
+)
+export const RootProvider: StyledComponent<typeof ScrollArea.RootProvider, ScrollAreaVariantProps> =
+  withProvider(ScrollArea.RootProvider, 'root')
+export const Content = withContext(ScrollArea.Content, 'content')
+export const Corner = withContext(ScrollArea.Corner, 'corner')
+export const Thumb = withContext(ScrollArea.Thumb, 'thumb')
+export const Scrollbar = withContext(ScrollArea.Scrollbar, 'scrollbar', {
+  defaultProps: { children: <Thumb /> },
+})
+export const Viewport = withContext(ScrollArea.Viewport, 'viewport')
+
+export { ScrollAreaContext as Context } from '@ark-ui/react/scroll-area'
+
+export {
+  useScrollArea,
+  useScrollAreaContext,
+  type UseScrollAreaProps,
+  type UseScrollAreaReturn,
+} from '@ark-ui/react/scroll-area'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type CornerProps = ComponentProps<typeof Corner>
+export type ThumbProps = ComponentProps<typeof Thumb>
+export type ScrollbarProps = ComponentProps<typeof Scrollbar>
+export type ViewportProps = ComponentProps<typeof Viewport>
+
+export {
+  type ScrollAreaScrollToDetails as ScrollToDetails,
+  type ScrollAreaScrollToEdgeDetails as ScrollToEdgeDetails,
+} from '@ark-ui/react/scroll-area'

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/Separator.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory'
+import { forwardRef, type ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { separator, type SeparatorVariantProps } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+const StyledSeparator: StyledComponent<typeof ark.span, SeparatorVariantProps> = styled(
+  ark.span,
+  separator,
+)
+export type SeparatorProps = ComponentProps<typeof StyledSeparator>
+
+export const Separator = forwardRef<HTMLSpanElement, SeparatorProps>(function Separator(
+  { orientation = 'horizontal', ...props },
+  ref,
+) {
+  return (
+    <StyledSeparator
+      role="separator"
+      aria-orientation={typeof orientation === 'string' ? orientation : undefined}
+      {...props}
+      orientation={orientation}
+      ref={ref}
+    />
+  )
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/layout/Stack.tsx

@@ -0,0 +1,54 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+  type FunctionComponent,
+} from 'react'
+import {
+  Stack as PandaStack,
+  HStack as PandaHStack,
+  VStack as PandaVStack,
+  type ComponentStackProps as PandaStackProps,
+} from 'styled-system/jsx'
+
+export interface StackProps extends PandaStackProps {
+  asChild?: boolean
+  separator?: ReactElement<Record<string, unknown>>
+}
+
+function createStack(Component: FunctionComponent<PandaStackProps>) {
+  return forwardRef<HTMLDivElement, StackProps>(function Stack(
+    { separator, children, ...props },
+    ref,
+  ) {
+    const items = Children.toArray(children)
+    return (
+      <Component
+        {...props}
+        as={props.as || ark.div}
+        data-stack-separated={isValidElement(separator) ? '' : undefined}
+        ref={ref}>
+        {isValidElement(separator)
+          ? items.map((child, index) => (
+              <Fragment key={isValidElement(child) ? child.key || index : index}>
+                {child}
+                {index < items.length - 1 &&
+                  cloneElement(separator, { 'data-stack-separator': '' })}
+              </Fragment>
+            ))
+          : children}
+      </Component>
+    )
+  })
+}
+
+export const Stack = /* @__PURE__ */ createStack(PandaStack)
+export const HStack = /* @__PURE__ */ createStack(PandaHStack)
+export const VStack = /* @__PURE__ */ createStack(PandaVStack)
+export type HStackProps = StackProps
+export type VStackProps = StackProps

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/Dialog.tsx

@@ -0,0 +1,69 @@
+'use client'
+import { Dialog, useDialogContext } from '@ark-ui/react/dialog'
+import { ark } from '@ark-ui/react/factory'
+import { type ComponentProps, forwardRef } from 'react'
+import { createSlotRecipeContext, styled } from 'styled-system/jsx'
+import { dialog } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(dialog)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider(Dialog.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const RootProvider = withRootProvider(Dialog.RootProvider, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const Backdrop = withContext(Dialog.Backdrop, 'backdrop')
+export const CloseTrigger = withContext(Dialog.CloseTrigger, 'closeTrigger')
+export const Content = withContext(Dialog.Content, 'content')
+export const Description = withContext(Dialog.Description, 'description')
+export const Positioner = withContext(Dialog.Positioner, 'positioner')
+export const Title = withContext(Dialog.Title, 'title')
+export const Trigger = withContext(Dialog.Trigger, 'trigger')
+export const Body = withContext(ark.div, 'body')
+export const Header = withContext(ark.div, 'header')
+export const Footer = withContext(ark.div, 'footer')
+
+const StyledButton = styled(ark.button)
+
+export const ActionTrigger = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>(
+  function ActionTrigger(props, ref) {
+    const dialog = useDialogContext()
+    const { onClick, ...rest } = props
+    return (
+      <StyledButton
+        {...rest}
+        ref={ref}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) dialog.setOpen(false)
+        }}
+      />
+    )
+  },
+)
+
+export { DialogContext as Context } from '@ark-ui/react/dialog'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type BackdropProps = ComponentProps<typeof Backdrop>
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TitleProps = ComponentProps<typeof Title>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type BodyProps = ComponentProps<typeof Body>
+export type HeaderProps = ComponentProps<typeof Header>
+export type FooterProps = ComponentProps<typeof Footer>
+export type ActionTriggerProps = ComponentProps<typeof ActionTrigger>
+
+export {
+  useDialog,
+  useDialogContext,
+  type UseDialogProps,
+  type UseDialogReturn,
+  type DialogOpenChangeDetails as OpenChangeDetails,
+  type DialogTriggerValueChangeDetails as TriggerValueChangeDetails,
+} from '@ark-ui/react/dialog'

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/Drawer.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { Dialog } from '@ark-ui/react/dialog'
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { drawer } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(drawer)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider(Dialog.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const RootProvider = withRootProvider(Dialog.RootProvider, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const Backdrop = withContext(Dialog.Backdrop, 'backdrop')
+export const Positioner = withContext(Dialog.Positioner, 'positioner')
+export const CloseTrigger = withContext(Dialog.CloseTrigger, 'closeTrigger')
+export const Content = withContext(Dialog.Content, 'content')
+export const Description = withContext(Dialog.Description, 'description')
+export const Title = withContext(Dialog.Title, 'title')
+export const Trigger = withContext(Dialog.Trigger, 'trigger')
+
+export const Body = withContext(ark.div, 'body')
+export const Header = withContext(ark.div, 'header')
+export const Footer = withContext(ark.div, 'footer')
+
+export { DialogContext as Context } from '@ark-ui/react/dialog'
+
+export {
+  useDialog as useDrawer,
+  type UseDialogProps as UseDrawerProps,
+  type UseDialogReturn as UseDrawerReturn,
+  type DialogOpenChangeDetails as OpenChangeDetails,
+  type DialogTriggerValueChangeDetails as TriggerValueChangeDetails,
+} from '@ark-ui/react/dialog'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type BackdropProps = ComponentProps<typeof Backdrop>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type TitleProps = ComponentProps<typeof Title>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type BodyProps = ComponentProps<typeof Body>
+export type HeaderProps = ComponentProps<typeof Header>
+export type FooterProps = ComponentProps<typeof Footer>

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/HoverCard.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { HoverCard } from '@ark-ui/react/hover-card'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { hoverCard } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(hoverCard)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider(HoverCard.Root)
+export const RootProvider = withRootProvider(HoverCard.RootProvider)
+export const Arrow = withContext(HoverCard.Arrow, 'arrow')
+export const ArrowTip = withContext(HoverCard.ArrowTip, 'arrowTip')
+export const Content = withContext(HoverCard.Content, 'content')
+export const Positioner = withContext(HoverCard.Positioner, 'positioner')
+export const Trigger = withContext(HoverCard.Trigger, 'trigger')
+
+export { HoverCardContext as Context } from '@ark-ui/react/hover-card'
+
+export {
+  useHoverCard,
+  type UseHoverCardProps,
+  type UseHoverCardReturn,
+} from '@ark-ui/react/hover-card'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ArrowProps = ComponentProps<typeof Arrow>
+export type ArrowTipProps = ComponentProps<typeof ArrowTip>
+export type ContentProps = ComponentProps<typeof Content>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TriggerProps = ComponentProps<typeof Trigger>
+
+export {
+  useHoverCardContext,
+  type HoverCardOpenChangeDetails as OpenChangeDetails,
+  type HoverCardTriggerValueChangeDetails as TriggerValueChangeDetails,
+} from '@ark-ui/react/hover-card'