@cerberus-design/react 0.13.2-next-46f23d2 → 0.13.2-next-9b3d27e

package/src/components/DatePicker.client.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+import {
+  DatePicker as ArkDP,
+  type DatePickerContentProps,
+  type DatePickerInputProps,
+  type DatePickerRootProps,
+  type DatePickerViewProps,
+  type DateValue,
+} from '@ark-ui/react'
+import { Portal } from './Portal'
+import { useCallback } from 'react'
+import { datePicker } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { useFieldContext } from '../context/field'
+import {
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerContext,
+  DatePickerViewControlGroup,
+  DatePickerTable,
+  DatePickerTableHeader,
+  DatePickerTableCellTrigger,
+  DatePickerTableCell,
+} from './DatePicker.server'
+import { formatISOToMilitary } from '../hooks/useDate'
+
+/**
+ * This module contains the DatePicker client family components.
+ * @module DatePicker:client
+ */
+
+// We are not exposing this to the public API
+const datePickerStyles = datePicker()
+
+/**
+ * The main context provider for the DatePicker family components.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePicker(props: DatePickerRootProps) {
+  const states = useFieldContext()
+
+  // TODO: Fix this format bug
+  // There is a bug with the Root component that causes random date selection onBlur after the first selection if the format prop is used.
+  const handleFormat = useCallback((value: DateValue) => {
+    return formatISOToMilitary(value.toString())
+  }, [])
+
+  return (
+    <ArkDP.Root
+      {...props}
+      {...states}
+      format={handleFormat}
+      positioning={{
+        placement: 'bottom-start',
+      }}
+    />
+  )
+}
+
+/**
+ * The input component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The input component for the DatePicker that uses ranges.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date" selection="range">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <RangePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function RangePickerInput(props: DatePickerInputProps) {
+  const { invalid, ...fieldStates } = useFieldContext()
+  return (
+    <ArkDP.Control data-range className={datePickerStyles.control}>
+      <DatePickerTrigger />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={0}
+      />
+      <ArkDP.Input
+        {...props}
+        {...fieldStates}
+        {...(invalid && { 'aria-invalid': true })}
+        data-range-input
+        data-range-end-input
+        className={cx(props.className, datePickerStyles.input)}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
+        maxLength={11}
+        index={1}
+      />
+    </ArkDP.Control>
+  )
+}
+
+/**
+ * The content component for the DatePicker which contains the calendar.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerContent(props: DatePickerContentProps) {
+  const { children, ...contentProps } = props
+  return (
+    <Portal>
+      <ArkDP.Positioner className={datePickerStyles.positioner}>
+        <ArkDP.Content
+          {...contentProps}
+          className={cx(contentProps.className, datePickerStyles.content)}
+        >
+          {children}
+        </ArkDP.Content>
+      </ArkDP.Positioner>
+    </Portal>
+  )
+}
+
+/**
+ * The day view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {
+  function isToday(date: ArkDP.DateValue): boolean {
+    const today = new Date()
+    const formatted = today.toISOString().split('T')[0]
+    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+    return formatted === arkDate
+  }
+
+  function isPastDay(date: ArkDP.DateValue): boolean {
+    const today = new Date()
+    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+    return new Date(arkDate) < today
+  }
+
+  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {
+    if (isToday(date)) return 'today'
+    if (isPastDay(date)) return 'past'
+    return 'future'
+  }
+
+  return (
+    <DatePickerView {...props} view="day">
+      <DatePickerContext>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableHead>
+                <ArkDP.TableRow>
+                  {datePicker.weekDays.map((weekDay, id) => (
+                    <DatePickerTableHeader key={id}>
+                      {weekDay.narrow}
+                    </DatePickerTableHeader>
+                  ))}
+                </ArkDP.TableRow>
+              </ArkDP.TableHead>
+
+              <ArkDP.TableBody>
+                {datePicker.weeks.map((week, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {week.map((day, id) => (
+                      <DatePickerTableCell key={id} value={day}>
+                        <DatePickerTableCellTrigger
+                          data-date={getDayValue(day)}
+                        >
+                          {day.day}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </DatePickerContext>
+    </DatePickerView>
+  )
+}
+
+/**
+ * The month view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="month">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker
+                  .getMonthsGrid({ columns: 4, format: 'short' })
+                  .map((months, id) => (
+                    <ArkDP.TableRow key={id}>
+                      {months.map((month, id) => (
+                        <DatePickerTableCell key={id} value={month.value}>
+                          <DatePickerTableCellTrigger>
+                            {month.label}
+                          </DatePickerTableCellTrigger>
+                        </DatePickerTableCell>
+                      ))}
+                    </ArkDP.TableRow>
+                  ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * The year view component for the DatePicker.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
+  return (
+    <ArkDP.View {...props} view="year">
+      <ArkDP.Context>
+        {(datePicker) => (
+          <>
+            <DatePickerViewControlGroup />
+
+            <DatePickerTable>
+              <ArkDP.TableBody>
+                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
+                  <ArkDP.TableRow key={id}>
+                    {years.map((year, id) => (
+                      <DatePickerTableCell key={id} value={year.value}>
+                        <DatePickerTableCellTrigger>
+                          {year.label}
+                        </DatePickerTableCellTrigger>
+                      </DatePickerTableCell>
+                    ))}
+                  </ArkDP.TableRow>
+                ))}
+              </ArkDP.TableBody>
+            </DatePickerTable>
+          </>
+        )}
+      </ArkDP.Context>
+    </ArkDP.View>
+  )
+}
+
+/**
+ * An abstraction of the DatePicker content components that contain the
+ * different calendar views and controls.
+ * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <DatePicker name="start_date">
+ *     <DatePickerLabel>Start date</DatePickerLabel>
+ *     <DatePickerInput />
+ *     <DatePickerCalendar />
+ *   </DatePicker>
+ * </Field>
+ * ```
+ */
+export function DatePickerCalendar() {
+  return (
+    <DatePickerContent>
+      <DatePickerDayView />
+      <DatePickerMonthView />
+      <DatePickerYearView />
+    </DatePickerContent>
+  )
+}

package/src/components/DatePicker.server.tsx

@@ -0,0 +1,229 @@
+import {
+  DatePicker as ArkDP,
+  type DatePickerLabelProps,
+  type DatePickerTableCellProps,
+  type DatePickerTableCellTriggerProps,
+  type DatePickerTableHeaderProps,
+  type DatePickerTableProps,
+  type DatePickerTriggerProps,
+  type DatePickerViewControlProps,
+} from '@ark-ui/react'
+import { css, cx } from '@cerberus/styled-system/css'
+import { datePicker, iconButton, label } from '@cerberus/styled-system/recipes'
+import { $cerberusIcons } from '../config/defineIcons'
+import { IconButton } from './IconButton'
+import { Button } from './Button'
+
+/**
+ * This module contains the DatePicker server family components.
+ * @module DatePicker
+ */
+
+// We are not exposing this to the public API
+const datePickerStyles = datePicker()
+
+/**
+ * The label component for the DatePicker.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerLabel>
+ *   <DatePickerLabel.Label>...</DatePickerLabel.Label>
+ * </DatePickerLabel>
+ * ```
+ */
+export function DatePickerLabel(props: DatePickerLabelProps) {
+  const { className, ...arkProps } = props
+  return (
+    <ArkDP.Label
+      {...arkProps}
+      className={cx(
+        className,
+        label({
+          size: 'sm',
+        }),
+      )}
+    />
+  )
+}
+
+/**
+ * The trigger component for the DatePicker which opens the calendar.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTrigger />
+ * ```
+ */
+export function DatePickerTrigger(props: DatePickerTriggerProps) {
+  const { calendar: CalendarIcon } = $cerberusIcons
+  return (
+    <ArkDP.Trigger
+      {...props}
+      className={cx(
+        props.className,
+        iconButton({
+          size: 'sm',
+          usage: 'ghost',
+        }),
+        datePickerStyles.trigger,
+      )}
+    >
+      <CalendarIcon />
+    </ArkDP.Trigger>
+  )
+}
+
+/**
+ * The control component for the DatePicker which wraps the triggers to switch
+ * between calendar views.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerViewControl>
+ *   <PrevTrigger />
+ *   <ViewTrigger />
+ *   <NextTrigger />
+ * </DatePickerViewControl>
+ * ```
+ */
+export function DatePickerViewControl(props: DatePickerViewControlProps) {
+  return (
+    <ArkDP.Control
+      {...props}
+      className={cx(props.className, datePickerStyles.viewControl)}
+    />
+  )
+}
+
+/**
+ * An abstraction of the DatePicker control that contains the prev, view, and
+ * next triggers which control the calendar output.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerViewControlGroup />
+ * ```
+ */
+export function DatePickerViewControlGroup(props: DatePickerViewControlProps) {
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons
+  return (
+    <DatePickerViewControl {...props}>
+      <ArkDP.PrevTrigger asChild>
+        <IconButton ariaLabel="Previous" size="sm">
+          <PrevIcon />
+        </IconButton>
+      </ArkDP.PrevTrigger>
+
+      <ArkDP.ViewTrigger asChild>
+        <Button
+          className={css({
+            h: '2rem',
+            paddingInline: 'md',
+          })}
+          shape="rounded"
+          size="sm"
+          usage="ghost"
+        >
+          <ArkDP.RangeText />
+        </Button>
+      </ArkDP.ViewTrigger>
+
+      <ArkDP.NextTrigger asChild>
+        <IconButton ariaLabel="Next" size="sm">
+          <NextIcon />
+        </IconButton>
+      </ArkDP.NextTrigger>
+    </DatePickerViewControl>
+  )
+}
+
+/**
+ * The table component for the DatePicker.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTable />
+ * ```
+ */
+export function DatePickerTable(props: DatePickerTableProps) {
+  return (
+    <ArkDP.Table
+      {...props}
+      className={cx(props.className, datePickerStyles.table)}
+    />
+  )
+}
+
+/**
+ * The header component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableHeader />
+ * ```
+ */
+export function DatePickerTableHeader(props: DatePickerTableHeaderProps) {
+  return (
+    <ArkDP.TableHeader
+      {...props}
+      className={cx(props.className, datePickerStyles.tableHeader)}
+    />
+  )
+}
+
+/**
+ * The cell component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableCell />
+ * ```
+ */
+export function DatePickerTableCell(props: DatePickerTableCellProps) {
+  return (
+    <ArkDP.TableCell
+      {...props}
+      className={cx(props.className, datePickerStyles.tableCell)}
+    />
+  )
+}
+
+/**
+ * The cell component for the DatePicker table.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerTableCell />
+ * ```
+ */
+export function DatePickerTableCellTrigger(
+  props: DatePickerTableCellTriggerProps,
+) {
+  return (
+    <ArkDP.TableCellTrigger
+      {...props}
+      className={cx(props.className, datePickerStyles.tableCellTrigger)}
+    />
+  )
+}
+
+/**
+ * The view container which wraps the control and content components.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerView />
+ * ```
+ */
+export const DatePickerView = ArkDP.View
+
+/**
+ * The context component for the DatePicker which provides the DatePicker state.
+ * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
+ * @example
+ * ```tsx
+ * <DatePickerContext />
+ * ```
+ */
+export const DatePickerContext = ArkDP.Context

package/src/config/cerbIcons.ts

@@ -1,7 +1,10 @@
 import {
+  Calendar,
   Checkmark,
   CheckmarkOutline,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   Close,
   CloudUpload,
   Information,
@@ -21,6 +24,9 @@ export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
   avatar?: IconType
+  calendar?: IconType
+  calendarPrev?: IconType
+  calendarNext?: IconType
   checkbox?: IconType
   close?: IconType
   confirmModal?: IconType
@@ -42,6 +48,9 @@ export interface DefinedIcons {
 
 export const defaultIcons: DefinedIcons = {
   avatar: UserFilled,
+  calendar: Calendar,
+  calendarPrev: ChevronLeft,
+  calendarNext: ChevronRight,
   checkbox: CheckmarkIcon,
   close: Close,
   confirmModal: Information,

package/src/hooks/useDate.ts

@@ -129,6 +129,18 @@ export function formatMilitaryDate(input: string): string {
   return [day, month, year].filter(Boolean).join(' ')
 }
 
+/**
+ * Formats a date string to US Military format.
+ * @param date The date string to format (i.e., '2024-01-01')
+ * @returns The formatted date string in US Military format (DD MMM YYYY)
+ */
+export function formatISOToMilitary(date: string): string {
+  const [year, month, day] = date.split('-')
+  const monthIndex = parseInt(month, 10) - 1
+  const monthStr = MONTHS[monthIndex]
+  return `${day} ${monthStr} ${year}`
+}
+
 /**
  * Date formatting options
  * @example

package/src/index.ts

@@ -12,6 +12,8 @@ export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
 export * from './components/CircularProgress'
+export * from './components/DatePicker.client'
+export * from './components/DatePicker.server'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'

package/build/modern/chunk-XNX3OTJK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/chunk-ZTYKIWYQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { ChevronDown } from '@cerberus/icons'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  accordion,\n  type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *  <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n *     This is the content\n *  </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n  const { size, className, ...rootProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.Root\n      collapsible\n      className={cx(className, styles.root)}\n      {...rootProps}\n    />\n  )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n  const { size, ...itemProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.Item\n      {...itemProps}\n      className={cx(itemProps.className, styles.item)}\n    />\n  )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n  AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n  const { size, ...triggerProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.ItemTrigger\n      {...triggerProps}\n      className={cx(triggerProps.className, styles.itemTrigger)}\n    />\n  )\n}\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n  AccordionVariantProps\n\n/**\n * The indicator for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n  const { size, ...indicatorProps } = props\n  const styles = accordion({ size })\n  const iconSize = size === 'sm' ? 16 : '24'\n\n  return (\n    <ArkAccordion.ItemIndicator\n      {...indicatorProps}\n      className={cx(indicatorProps.className, styles.itemIndicator)}\n    >\n      <ChevronDown size={iconSize} />\n    </ArkAccordion.ItemIndicator>\n  )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n  AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n  const { size, ...contentProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.ItemContent\n      {...contentProps}\n      className={cx(contentProps.className, styles.itemContent)}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,aAAa,oBAAoB;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAqBH;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,WAAW,GAAG,UAAU,IAAI;AAC1C,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,WAAW,OAAO,IAAI;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,UAAU,WAAW,OAAO,IAAI;AAAA;AAAA,EAChD;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;AAsBO,SAAS,uBAAuB,OAAoC;AACzE,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,QAAM,WAAW,SAAS,OAAO,KAAK;AAEtC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,eAAe,WAAW,OAAO,aAAa;AAAA,MAE5D,8BAAC,eAAY,MAAM,UAAU;AAAA;AAAA,EAC/B;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;","names":[]}