@cerberus-design/react 1.0.0-rc.5 → 1.0.0-rc.6

package/src/components/date-picker/content.tsx

@@ -1,21 +0,0 @@
-import { DatePickerParts } from './parts'
-import type { DatePickerContentProps } from './primitives'
-
-/**
- * This private module contains an abstraction of the DatePickerContent
- * primitive.
- * @module 'date-picker/content'
- */
-
-/**
- * An abstraction of the DatePicker content that wraps the DatePickerParts
- * primitives.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerContent(props: DatePickerContentProps) {
-  return (
-    <DatePickerParts.Positioner>
-      <DatePickerParts.Content {...props} />
-    </DatePickerParts.Positioner>
-  )
-}

package/src/components/date-picker/date-picker.tsx

@@ -1,20 +0,0 @@
-'use client'
-
-import { DatePickerParts } from './parts'
-import type { DatePickerRootProps } from './primitives'
-
-/**
- * DatePicker component is an abstraction of the DatePickerRoot primitive which
- * is the context provider to the DatePicker.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/docs/components/date-picker)
- */
-export function DatePicker(props: DatePickerRootProps) {
-  return (
-    <DatePickerParts.Root
-      positioning={{
-        placement: 'bottom-start',
-      }}
-      {...props}
-    />
-  )
-}

package/src/components/date-picker/day-view.tsx

@@ -1,82 +0,0 @@
-'use client'
-
-import type {
-  DatePicker,
-  UseDatePickerContext,
-} from '@ark-ui/react/date-picker'
-import { DatePickerParts } from './parts'
-import type { DatePickerViewProps } from './primitives'
-import { DatePickerViewControlGroup } from './view-control-group'
-
-/**
- * This private module contains an abstraction of the DayView component.
- * @module 'date-picker/day-view'
- */
-
-export type DateValue = DatePicker.DateValue
-
-/**
- * An abstraction of the DatePickerDayView that renders the day view of the
- * DatePicker.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {
-  function isToday(date: 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: 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: DateValue): 'today' | 'past' | 'future' {
-    if (isToday(date)) return 'today'
-    if (isPastDay(date)) return 'past'
-    return 'future'
-  }
-
-  return (
-    <DatePickerParts.View {...props} view="day">
-      <DatePickerParts.Context>
-        {(datePickerData: UseDatePickerContext) => (
-          <>
-            <DatePickerViewControlGroup />
-
-            <DatePickerParts.Table>
-              <DatePickerParts.TableHead>
-                <DatePickerParts.TableRow>
-                  {datePickerData.weekDays.map((weekDay, id) => (
-                    <DatePickerParts.TableHeader key={id}>
-                      {weekDay.narrow}
-                    </DatePickerParts.TableHeader>
-                  ))}
-                </DatePickerParts.TableRow>
-              </DatePickerParts.TableHead>
-
-              <DatePickerParts.TableBody>
-                {datePickerData.weeks.map((week, id) => (
-                  <DatePickerParts.TableRow key={id}>
-                    {week.map((day, id) => (
-                      <DatePickerParts.TableCell key={id} value={day}>
-                        <DatePickerParts.TableCellTrigger
-                          data-date={getDayValue(day)}
-                        >
-                          {day.day}
-                        </DatePickerParts.TableCellTrigger>
-                      </DatePickerParts.TableCell>
-                    ))}
-                  </DatePickerParts.TableRow>
-                ))}
-              </DatePickerParts.TableBody>
-            </DatePickerParts.Table>
-          </>
-        )}
-      </DatePickerParts.Context>
-    </DatePickerParts.View>
-  )
-}

package/src/components/date-picker/index.ts

@@ -1,16 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './date-picker'
-export * from './input'
-export * from './range-input'
-export * from './calendar'
-
-// external dependencies
-
-export { parseDate, type DateValue } from '@ark-ui/react/date-picker'
-export {
-  CalendarDate,
-  today,
-  getLocalTimeZone,
-  DateFormatter,
-} from '@internationalized/date'

package/src/components/date-picker/input.tsx

@@ -1,26 +0,0 @@
-import { DatePickerTrigger } from './trigger'
-import { DatePickerParts } from './parts'
-import type { DatePickerInputElProps } from './primitives'
-
-/**
- * This module contains an abstraction of the DatePickerInputEl primitive.
- * @module 'date-picker/input'
- */
-
-/**
- * An abstraction of the DatePicker input that wraps the input and the
- * triggers to open the DatePicker and clear the value.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerInput(props: DatePickerInputElProps) {
-  return (
-    <DatePickerParts.Control>
-      <DatePickerTrigger />
-      <DatePickerParts.Input
-        {...props}
-        maxLength={11}
-        placeholder={props.placeholder ?? 'MM/DD/YYYY'}
-      />
-    </DatePickerParts.Control>
-  )
-}

package/src/components/date-picker/month-view.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-import type { UseDatePickerContext } from '@ark-ui/react/date-picker'
-import { DatePickerParts } from './parts'
-import { DatePickerViewControlGroup } from './view-control-group'
-import type { DatePickerViewProps } from './primitives'
-
-/**
- * This private module contains an abstraction of the DatePickerMonthView
- * component.
- * @module 'date-picker/month-view'
- */
-
-/**
- * An abstraction of the DatePickerMonthView that renders the month view of the
- * DatePicker.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerMonthView(props: DatePickerViewProps) {
-  return (
-    <DatePickerParts.View {...props} view="month">
-      <DatePickerParts.Context>
-        {(datePicker: UseDatePickerContext) => (
-          <>
-            <DatePickerViewControlGroup />
-
-            <DatePickerParts.Table>
-              <DatePickerParts.TableBody>
-                {datePicker
-                  .getMonthsGrid({ columns: 4, format: 'short' })
-                  .map((months, id) => (
-                    <DatePickerParts.TableRow key={id}>
-                      {months.map((month, id) => (
-                        <DatePickerParts.TableCell key={id} value={month.value}>
-                          <DatePickerParts.TableCellTrigger>
-                            {month.label}
-                          </DatePickerParts.TableCellTrigger>
-                        </DatePickerParts.TableCell>
-                      ))}
-                    </DatePickerParts.TableRow>
-                  ))}
-              </DatePickerParts.TableBody>
-            </DatePickerParts.Table>
-          </>
-        )}
-      </DatePickerParts.Context>
-    </DatePickerParts.View>
-  )
-}

package/src/components/date-picker/parts.ts

@@ -1,167 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  DatePickerClearTrigger,
-  DatePickerContent,
-  DatePickerContext,
-  DatePickerControl,
-  DatePickerInputEl,
-  DatePickerLabel,
-  DatePickerMonthSelect,
-  DatePickerNextTrigger,
-  DatePickerPositioner,
-  DatePickerPrevTrigger,
-  DatePickerRangeText,
-  DatePickerRoot,
-  DatePickerTable,
-  DatePickerTableBody,
-  DatePickerTableCell,
-  DatePickerTableCellTrigger,
-  DatePickerTableHead,
-  DatePickerTableHeader,
-  DatePickerTableRow,
-  DatePickerTrigger,
-  DatePickerView,
-  DatePickerViewControl,
-  DatePickerViewTrigger,
-  DatePickerYearSelect,
-} from './primitives'
-
-/**
- * This module contains the parts of the DatePicker component.
- * @module 'date-picker/parts'
- */
-
-interface DatePickerPartsValue {
-  /**
-   * The container of the date-picker.
-   */
-  Root: ElementType
-  /**
-   * The label of the date-picker.
-   */
-  Label: ElementType
-  /**
-   * The control of the date-picker.
-   */
-  Control: ElementType
-  /**
-   * The input of the date-picker.
-   */
-  Input: ElementType
-  /**
-   * The trigger that opens the date-picker.
-   */
-  Trigger: ElementType
-  /**
-   * The trigger that clears the value of the date-picker.
-   */
-  ClearTrigger: ElementType
-  /**
-   * The positioner of the content for the date-picker.
-   */
-  Positioner: ElementType
-  /**
-   * The content of the date-picker.
-   */
-  Content: ElementType
-  /**
-   * The year select input of the date-picker.
-   */
-  YearSelect: ElementType
-  /**
-   * The month select input of the date-picker.
-   */
-  MonthSelect: ElementType
-  /**
-   * The day view of the date-picker.
-   */
-  View: ElementType
-  /**
-   * The day context of the date-picker.
-   */
-  Context: ElementType
-  /**
-   * The container for the content triggers.
-   */
-  ViewControl: ElementType
-  /**
-   * The trigger that moves to the previous month.
-   */
-  PrevTrigger: ElementType
-  /**
-   * The trigger that moves to the next month.
-   */
-  NextTrigger: ElementType
-  /**
-   * The trigger that moves to the next view.
-   */
-  ViewTrigger: ElementType
-  /**
-   * The range text of the date-picker.
-   */
-  RangeText: ElementType
-  /**
-   * The table of the date-picker.
-   */
-  Table: ElementType
-  /**
-   * The table head of the date-picker.
-   */
-  TableHead: ElementType
-  /**
-   * The table row of the date-picker.
-   */
-  TableRow: ElementType
-  /**
-   * The header text for the table.
-   */
-  TableHeader: ElementType
-  /**
-   * The body of the table.
-   */
-  TableBody: ElementType
-  /**
-   * The table cell of the table.
-   */
-  TableCell: ElementType
-  /**
-   * The trigger for the table cell.
-   */
-  TableCellTrigger: ElementType
-}
-
-/**
- * An Object containing the parts of the DatePicker component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the DatePickerParts object and
- * the entire family of components vs. only what you use.
- */
-export const DatePickerParts: DatePickerPartsValue = {
-  Root: DatePickerRoot,
-  Label: DatePickerLabel,
-  Control: DatePickerControl,
-  Input: DatePickerInputEl,
-  Trigger: DatePickerTrigger,
-  ClearTrigger: DatePickerClearTrigger,
-  Positioner: DatePickerPositioner,
-  Content: DatePickerContent,
-  YearSelect: DatePickerYearSelect,
-  MonthSelect: DatePickerMonthSelect,
-  View: DatePickerView,
-  Context: DatePickerContext,
-  ViewControl: DatePickerViewControl,
-  PrevTrigger: DatePickerPrevTrigger,
-  NextTrigger: DatePickerNextTrigger,
-  ViewTrigger: DatePickerViewTrigger,
-  RangeText: DatePickerRangeText,
-  Table: DatePickerTable,
-  TableHead: DatePickerTableHead,
-  TableRow: DatePickerTableRow,
-  TableHeader: DatePickerTableHeader,
-  TableBody: DatePickerTableBody,
-  TableCell: DatePickerTableCell,
-  TableCellTrigger: DatePickerTableCellTrigger,
-}

package/src/components/date-picker/primitives.tsx

@@ -1,235 +0,0 @@
-import {
-  DatePicker,
-  type DatePickerContentProps as ArkDatePickerContentProps,
-  type DatePickerContextProps as ArkDatePickerContextProps,
-  type DatePickerControlProps as ArkDatePickerControlProps,
-  type DatePickerInputProps as ArkDatePickerInputProps,
-  type DatePickerLabelProps as ArkDatePickerLabelProps,
-  type DatePickerMonthSelectProps as ArkDatePickerMonthSelectProps,
-  type DatePickerNextTriggerProps as ArkDatePickerNextTriggerProps,
-  type DatePickerPositionerProps as ArkDatePickerPositionerProps,
-  type DatePickerPrevTriggerProps as ArkDatePickerPrevTriggerProps,
-  type DatePickerRangeTextProps as ArkDatePickerRangeTextProps,
-  type DatePickerRootProps as ArkDatePickerRootProps,
-  type DatePickerTableBodyProps as ArkDatePickerTableBodyProps,
-  type DatePickerTableCellProps as ArkDatePickerTableCellProps,
-  type DatePickerTableCellTriggerProps as ArkDatePickerTableCellTriggerProps,
-  type DatePickerTableHeaderProps as ArkDatePickerTableHeaderProps,
-  type DatePickerTableHeadProps as ArkDatePickerTableHeadProps,
-  type DatePickerTableProps as ArkDatePickerTableProps,
-  type DatePickerTableRowProps as ArkDatePickerTableRowProps,
-  type DatePickerTriggerProps as ArkDatePickerTriggerProps,
-  type DatePickerViewControlProps as ArkDatePickerViewControlProps,
-  type DatePickerViewProps as ArkDatePickerViewProps,
-  type DatePickerViewTriggerProps as ArkDatePickerViewTriggerProps,
-  type DatePickerYearSelectProps as ArkDatePickerYearSelectProps,
-} from '@ark-ui/react/date-picker'
-import { datePicker } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the DatePicker primitives.
- * @module 'date-picker/primitives'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(datePicker)
-
-/**
- * The label component for the DatePicker.
- */
-export type DatePickerLabelProps =
-  CerberusPrimitiveProps<ArkDatePickerLabelProps>
-export const DatePickerLabel = withSlotRecipe(DatePicker.Label, 'label')
-
-/**
- * The control component for the DatePicker which wraps the input and the
- * triggers to open the DatePicker and clear the value.
- */
-export type DatePickerControlProps =
-  CerberusPrimitiveProps<ArkDatePickerControlProps>
-export const DatePickerControl = withSlotRecipe(DatePicker.Control, 'control')
-
-/**
- * The input component for the DatePicker.
- */
-export type DatePickerInputElProps =
-  CerberusPrimitiveProps<ArkDatePickerInputProps>
-export const DatePickerInputEl = withSlotRecipe(DatePicker.Input, 'input')
-
-/**
- * The trigger component that opens the DatePicker.
- */
-export type DatePickerTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerTriggerProps>
-export const DatePickerTrigger = withSlotRecipe(DatePicker.Trigger, 'trigger')
-
-/**
- * The content component for the DatePicker.
- */
-export type DatePickerContentProps =
-  CerberusPrimitiveProps<ArkDatePickerContentProps>
-export const DatePickerContent = withSlotRecipe(DatePicker.Content, 'content')
-
-/**
- * The view control component for the DatePicker which wraps the triggers to
- * switch between calendar views.
- */
-export type DatePickerViewControlProps =
-  CerberusPrimitiveProps<ArkDatePickerViewControlProps>
-export const DatePickerViewControl = withSlotRecipe(
-  DatePicker.Control,
-  'viewControl',
-)
-
-/**
- * The range text component for the DatePicker.
- */
-export type DatePickerRangeTextProps =
-  CerberusPrimitiveProps<ArkDatePickerRangeTextProps>
-export const DatePickerRangeText = withSlotRecipe(
-  DatePicker.RangeText,
-  'rangeText',
-)
-
-/**
- * The table component for the DatePicker.
- */
-export type DatePickerTableProps =
-  CerberusPrimitiveProps<ArkDatePickerTableProps>
-export const DatePickerTable = withSlotRecipe(DatePicker.Table, 'table')
-
-/**
- * The header component for the DatePicker table.
- */
-export type DatePickerTableHeaderProps =
-  CerberusPrimitiveProps<ArkDatePickerTableHeaderProps>
-export const DatePickerTableHeader = withSlotRecipe(
-  DatePicker.TableHeader,
-  'tableHeader',
-)
-
-/**
- * The table cell component for the DatePicker.
- */
-export type DatePickerTableCellProps =
-  CerberusPrimitiveProps<ArkDatePickerTableCellProps>
-export const DatePickerTableCell = withSlotRecipe(
-  DatePicker.TableCell,
-  'tableCell',
-)
-
-/**
- * The table cell trigger component for the DatePicker.
- */
-export type DatePickerTableCellTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerTableCellTriggerProps>
-export const DatePickerTableCellTrigger = withSlotRecipe(
-  DatePicker.TableCellTrigger,
-  'tableCellTrigger',
-)
-
-/**
- * The root component of the DatePicker. This primitive has no Cerberus styles.
- */
-export type DatePickerRootProps = CerberusPrimitiveProps<ArkDatePickerRootProps>
-export const DatePickerRoot = withNoRecipe(DatePicker.Root)
-
-/**
- * The label component of the DatePicker. This primitive has no Cerberus styles.
- */
-export type DatePickerClearTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerTriggerProps>
-export const DatePickerClearTrigger = withNoRecipe(DatePicker.ClearTrigger)
-
-/**
- * The control component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerPositionerProps =
-  CerberusPrimitiveProps<ArkDatePickerPositionerProps>
-export const DatePickerPositioner = withSlotRecipe(
-  DatePicker.Positioner,
-  'positioner',
-)
-
-/**
- * The year select input component of the DatePicker. This primitive has no
- * Cerberus styles.
- */
-export type DatePickerYearSelectProps =
-  CerberusPrimitiveProps<ArkDatePickerYearSelectProps>
-export const DatePickerYearSelect = withNoRecipe(DatePicker.YearSelect)
-
-/**
- * The month select input component of the DatePicker. This primitive has no
- * Cerberus styles.
- */
-export type DatePickerMonthSelectProps =
-  CerberusPrimitiveProps<ArkDatePickerMonthSelectProps>
-export const DatePickerMonthSelect = withNoRecipe(DatePicker.MonthSelect)
-
-/**
- * The day view component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerViewProps = CerberusPrimitiveProps<ArkDatePickerViewProps>
-export const DatePickerView = withNoRecipe(DatePicker.View)
-
-/**
- * The day context component of the DatePicker. This primitive has no
- * Cerberus styles.
- */
-export type DatePickerContextProps =
-  CerberusPrimitiveProps<ArkDatePickerContextProps>
-export const DatePickerContext = DatePicker.Context
-
-/**
- * The trigger component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerPrevTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerPrevTriggerProps>
-export const DatePickerPrevTrigger = withNoRecipe(DatePicker.PrevTrigger)
-
-/**
- * The trigger component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerNextTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerNextTriggerProps>
-export const DatePickerNextTrigger = withNoRecipe(DatePicker.NextTrigger)
-
-/**
- * The trigger component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerViewTriggerProps =
-  CerberusPrimitiveProps<ArkDatePickerViewTriggerProps>
-export const DatePickerViewTrigger = withNoRecipe(DatePicker.ViewTrigger)
-
-/**
- * The table head component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerTableHeadProps =
-  CerberusPrimitiveProps<ArkDatePickerTableHeadProps>
-export const DatePickerTableHead = withNoRecipe(DatePicker.TableHead)
-
-/**
- * The table row component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerTableRowProps =
-  CerberusPrimitiveProps<ArkDatePickerTableRowProps>
-export const DatePickerTableRow = withNoRecipe(DatePicker.TableRow)
-
-/**
- * The table body component of the DatePicker. This primitive has no Cerberus
- * styles.
- */
-export type DatePickerTableBodyProps =
-  CerberusPrimitiveProps<ArkDatePickerTableBodyProps>
-export const DatePickerTableBody = withNoRecipe(DatePicker.TableBody)

package/src/components/date-picker/range-input.tsx

@@ -1,38 +0,0 @@
-import { DatePickerParts } from './parts'
-import type { DatePickerInputElProps } from './primitives'
-import { DatePickerTrigger } from './trigger'
-
-/**
- * This private module contains the RangePickerInput component.
- * @module RangePickerInput
- */
-
-export type RangePickerInputProps = DatePickerInputElProps
-
-/**
- * An abstraction of the DatePicker input that wraps the input and the
- * triggers to open the DatePicker and clear the value.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function RangePickerInput(props: RangePickerInputProps) {
-  return (
-    <DatePickerParts.Control data-range>
-      <DatePickerTrigger />
-      <DatePickerParts.Input
-        {...props}
-        data-range-input
-        placeholder={props.placeholder ?? 'MM/DD/YYYY'}
-        maxLength={11}
-        index={0}
-      />
-      <DatePickerParts.Input
-        {...props}
-        data-range-input
-        data-range-end-input
-        placeholder={props.placeholder ?? 'MM/DD/YYYY'}
-        maxLength={11}
-        index={1}
-      />
-    </DatePickerParts.Control>
-  )
-}

package/src/components/date-picker/trigger.tsx

@@ -1,28 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { IconButton } from '../icon-button/index'
-import { DatePickerParts } from './parts'
-import type { DatePickerTriggerProps } from './primitives'
-
-/**
- * This private module contains the DatePicker trigger component.
- * @module DatePickerTrigger
- */
-
-/**
- * An abstraction of the DatePickerTrigger that toggles the calender open.
- * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
- */
-export function DatePickerTrigger(props: DatePickerTriggerProps) {
-  const { icons } = useCerberusContext()
-  const { calendar: CalendarIcon } = icons
-
-  return (
-    <DatePickerParts.Trigger {...props} asChild>
-      <IconButton ariaLabel="Open calendar" size="sm" usage="ghost">
-        <CalendarIcon />
-      </IconButton>
-    </DatePickerParts.Trigger>
-  )
-}