@cerberus-design/react 0.18.4 → 0.19.0

package/src/components/switch/primitives.tsx

@@ -1,72 +1,62 @@
 import {
   Switch,
-  type SwitchControlProps,
-  type SwitchHiddenInputProps,
-  type SwitchLabelProps,
-  type SwitchRootProps,
-  type SwitchThumbProps,
+  type SwitchControlProps as ArkSwitchControlProps,
+  type SwitchHiddenInputProps as ArkSwitchHiddenInputProps,
+  type SwitchLabelProps as ArkSwitchLabelProps,
+  type SwitchRootProps as ArkSwitchRootProps,
+  type SwitchThumbProps as ArkSwitchThumbProps,
 } from '@ark-ui/react/switch'
-import { cx } from 'styled-system/css'
 import {
   switchRecipe,
   type SwitchRecipeVariantProps,
 } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the Switch primitives
  * @module 'react/switch'
  */
 
-/**
- * The SwitchRoot component is the context provider for the Switch components.
- */
-export function SwitchRoot(props: SwitchRootProps & SwitchRecipeVariantProps) {
-  const { size, ...rootProps } = props
-  const styles = switchRecipe({ size })
-  return (
-    <Switch.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(switchRecipe)
 
-/**
- * The SwitchLabel component is the label for the Switch.
- */
-export function SwitchLabel(props: SwitchLabelProps) {
-  const styles = switchRecipe()
-  return (
-    <Switch.Label {...props} className={cx(styles.label, props.className)} />
-  )
-}
+// Root
 
-/**
- * The SwitchControl component is the visual input for the Switch.
- */
-export function SwitchControl(props: SwitchControlProps) {
-  const styles = switchRecipe()
-  return (
-    <Switch.Control
-      {...props}
-      className={cx(styles.control, props.className)}
-    />
-  )
-}
+export type SwitchRootProps = CerberusPrimitiveProps<
+  ArkSwitchRootProps & SwitchRecipeVariantProps
+>
+export const SwitchRoot = withSlotRecipe<SwitchRootProps>(Switch.Root, 'root')
 
-/**
- * The SwitchThumb component is the thumb for the Switch.
- */
-export function SwitchThumb(props: SwitchThumbProps) {
-  const styles = switchRecipe()
-  return (
-    <Switch.Thumb {...props} className={cx(styles.thumb, props.className)} />
-  )
-}
+// Label
 
-/**
- * The SwitchHiddenInput component is the native input for the Switch.
- */
-export function SwitchHiddenInput(props: SwitchHiddenInputProps) {
-  return <Switch.HiddenInput {...props} />
-}
+export type SwitchLabelProps = CerberusPrimitiveProps<ArkSwitchLabelProps>
+export const SwitchLabel = withSlotRecipe<SwitchLabelProps>(
+  Switch.Label,
+  'label',
+)
+
+// Control
+
+export type SwitchControlProps = CerberusPrimitiveProps<ArkSwitchControlProps>
+export const SwitchControl = withSlotRecipe<SwitchControlProps>(
+  Switch.Control,
+  'control',
+)
+
+// Thumb
+
+export type SwitchThumbProps = CerberusPrimitiveProps<ArkSwitchThumbProps>
+export const SwitchThumb = withSlotRecipe<SwitchThumbProps>(
+  Switch.Thumb,
+  'thumb',
+)
+
+// HiddenInput
+
+export type SwitchHiddenInputProps =
+  CerberusPrimitiveProps<ArkSwitchHiddenInputProps>
+export const SwitchHiddenInput = withNoRecipe<SwitchHiddenInputProps>(
+  Switch.HiddenInput,
+)

package/src/components/switch/switch.tsx

@@ -1,9 +1,6 @@
-import type { SwitchRootProps } from '@ark-ui/react'
-import type { SwitchRecipeVariantProps } from 'styled-system/recipes'
 import { SwitchParts } from './parts'
 import { SwitchIndicator } from './switch-indicator'
-
-export type SwitchProps = SwitchRootProps & SwitchRecipeVariantProps
+import type { SwitchRootProps } from './primitives'
 
 /**
  * The Switch component is a and abstraction of the primitives that displays a
@@ -11,7 +8,7 @@ export type SwitchProps = SwitchRootProps & SwitchRecipeVariantProps
  * @description [Cerberus Docs] https://cerberus.digitalu.design/react/switch
  * @description [Ark Docs] https://ark-ui.com/docs/components/switch
  */
-export function Switch(props: SwitchProps) {
+export function Switch(props: SwitchRootProps) {
   const { children, ...rootProps } = props
 
   return (

package/src/components/table/primitives.tsx

@@ -1,163 +1,118 @@
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from 'styled-system/css'
 import { table, type TableVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Table component.
  * @module 'table/primitives'
  */
 
-/**
- * The root element is the container of the Table.
- */
-export function TableRoot(props: HTMLArkProps<'div'> & TableVariantProps) {
-  const { decoration, size, ...rootProps } = props
-  const styles = table({
-    decoration,
-    size,
-  })
-
-  return (
-    <ark.div
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-      data-scope="table"
-      data-part="root"
-    />
-  )
-}
+const { withSlotRecipe } = createCerberusPrimitive(table)
 
-/**
- * The table element is the table itself.
- */
-export function TableEl(props: HTMLArkProps<'table'>) {
-  const styles = table()
-  return (
-    <ark.table
-      {...props}
-      className={cx(styles.table, props.className)}
-      data-scope="table"
-      data-part="table"
-    />
-  )
-}
+// Root
 
-/**
- * The table caption element is the caption of the table.
- */
-export function Caption(props: HTMLArkProps<'caption'>) {
-  const styles = table()
-  return (
-    <ark.caption
-      {...props}
-      className={cx(styles.caption, props.className)}
-      data-scope="table"
-      data-part="caption"
-    />
-  )
-}
+export type TableRootProps = CerberusPrimitiveProps<
+  HTMLArkProps<'div'> & TableVariantProps
+>
+export const TableRoot = withSlotRecipe<TableRootProps>(ark.div, 'root', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'root',
+  },
+})
 
-/**
- * The table head element is the head of the table.
- */
-export function Thead(props: HTMLArkProps<'thead'>) {
-  const styles = table()
-  return (
-    <ark.thead
-      {...props}
-      className={cx(styles.thead, props.className)}
-      data-scope="table"
-      data-part="header"
-    />
-  )
-}
+// TableEl
 
-/**
- * The table header cell element is the header cell of the table.
- */
-export function Th(props: HTMLArkProps<'th'>) {
-  const styles = table()
-  return (
-    <ark.th
-      {...props}
-      className={cx(styles.th, props.className)}
-      data-scope="table"
-      data-part="header-col"
-    />
-  )
-}
+export type TableElProps = CerberusPrimitiveProps<HTMLArkProps<'table'>>
+export const TableEl = withSlotRecipe<TableElProps>(ark.table, 'table', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'table',
+  },
+})
 
-/**
- * The table body element is the body of the table.
- */
-export function Tbody(props: HTMLArkProps<'tbody'>) {
-  const styles = table()
-  return (
-    <ark.tbody
-      {...props}
-      className={cx(styles.tbody, props.className)}
-      data-scope="table"
-      data-part="body"
-    />
-  )
-}
+// Caption
 
-/**
- * The table row element is the row of the table.
- */
-export function Tr(props: HTMLArkProps<'tr'>) {
-  const styles = table()
-  return (
-    <ark.tr
-      {...props}
-      className={cx(styles.tr, props.className)}
-      data-scope="table"
-      data-part="row"
-    />
-  )
-}
+export type CaptionProps = CerberusPrimitiveProps<HTMLArkProps<'caption'>>
+export const Caption = withSlotRecipe<CaptionProps>(ark.caption, 'caption', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'caption',
+  },
+})
 
-/**
- * The table cell element is the cell of the table.
- */
-export function Td(props: HTMLArkProps<'td'>) {
-  const styles = table()
-  return (
-    <ark.td
-      {...props}
-      className={cx(styles.td, props.className)}
-      data-scope="table"
-      data-part="cell"
-    />
-  )
-}
+// Thead
 
-/**
- * The table footer element is the footer of the table.
- */
-export function Tfoot(props: HTMLArkProps<'tfoot'>) {
-  const styles = table()
-  return (
-    <ark.tfoot
-      {...props}
-      className={cx(styles.tfoot, props.className)}
-      data-scope="table"
-      data-part="footer"
-    />
-  )
-}
+export type TheadProps = CerberusPrimitiveProps<HTMLArkProps<'thead'>>
+export const Thead = withSlotRecipe<TheadProps>(ark.thead, 'thead', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'header',
+  },
+})
 
-/**
- * The table trigger element is the trigger of an actionable th cell.
- */
-export function TableTrigger(props: HTMLArkProps<'button'>) {
-  const styles = table()
-  return (
-    <ark.button
-      {...props}
-      className={cx(styles.trigger, props.className)}
-      data-scope="table"
-      data-part="trigger"
-    />
-  )
-}
+// Th
+
+export type ThProps = CerberusPrimitiveProps<HTMLArkProps<'th'>>
+export const Th = withSlotRecipe<ThProps>(ark.th, 'th', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'header-col',
+  },
+})
+
+// Tbody
+
+export type TbodyProps = CerberusPrimitiveProps<HTMLArkProps<'tbody'>>
+export const Tbody = withSlotRecipe<TbodyProps>(ark.tbody, 'tbody', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'body',
+  },
+})
+
+// Tr
+export type TrProps = CerberusPrimitiveProps<HTMLArkProps<'tr'>>
+export const Tr = withSlotRecipe<TrProps>(ark.tr, 'tr', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'row',
+  },
+})
+
+// Td
+
+export type TdProps = CerberusPrimitiveProps<HTMLArkProps<'td'>>
+export const Td = withSlotRecipe<TdProps>(ark.td, 'td', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'cell',
+  },
+})
+
+// Tfoot
+
+export type TfootProps = CerberusPrimitiveProps<HTMLArkProps<'tfoot'>>
+export const Tfoot = withSlotRecipe<TfootProps>(ark.tfoot, 'tfoot', {
+  defaultProps: {
+    'data-scope': 'table',
+    'data-part': 'footer',
+  },
+})
+
+// TableTrigger
+
+export type TableTriggerProps = CerberusPrimitiveProps<HTMLArkProps<'button'>>
+export const TableTrigger = withSlotRecipe<TableTriggerProps>(
+  ark.button,
+  'trigger',
+  {
+    defaultProps: {
+      'data-scope': 'table',
+      'data-part': 'trigger',
+    },
+  },
+)

package/src/components/table/table.tsx

@@ -1,4 +1,3 @@
-import type { HTMLArkProps } from '@ark-ui/react/factory'
 import type { TablePartsValue } from './parts'
 import {
   Caption,
@@ -11,11 +10,11 @@ import {
   Th,
   Thead,
   Tr,
+  type TableRootProps,
 } from './primitives'
-import type { TableVariantProps } from 'styled-system/recipes'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 
-interface TableRootElProps extends HTMLArkProps<'div'>, TableVariantProps {
+export interface TableRootElProps extends TableRootProps {
   /**
    * An easy to understand description of the table. Required for accessibility.
    */
@@ -30,7 +29,6 @@ interface TableRootElProps extends HTMLArkProps<'div'>, TableVariantProps {
 
 /**
  * An abstraction over the TableRoot component that adds a sticky attribute.
- *
  * @description [Cerberus Docs](https://cerberus.digitalu.design/react/table)
  *
  * @remarks

package/src/components/tabs/primitives.tsx

@@ -1,70 +1,57 @@
 import {
   Tabs,
-  type TabContentProps,
-  type TabIndicatorProps,
-  type TabListProps,
-  type TabsRootProps,
-  type TabTriggerProps,
+  type TabContentProps as ArkTabContentProps,
+  type TabIndicatorProps as ArkTabIndicatorProps,
+  type TabListProps as ArkTabListProps,
+  type TabsRootProps as ArkTabsRootProps,
+  type TabTriggerProps as ArkTabTriggerProps,
 } from '@ark-ui/react/tabs'
-import { cx } from 'styled-system/css'
 import { tabs, type TabsVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module provides the primitives for the Tabs component.
  * @module 'tabs/primitives'
  */
 
-/**
- * The container and context provider of the tabs.
- */
-export function TabsRoot(props: TabsRootProps & TabsVariantProps) {
-  const { palette, ...rootProps } = props
-  const styles = tabs({ palette })
-  return (
-    <Tabs.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+const { withSlotRecipe } = createCerberusPrimitive(tabs)
 
-/**
- * The tab list container for the Tabs group.
- */
-export function TabsList(props: TabListProps) {
-  const styles = tabs()
-  return <Tabs.List {...props} className={cx(styles.list, props.className)} />
-}
+// Root
 
-/**
- * The tab element.
- */
-export function TabsTrigger(props: TabTriggerProps) {
-  const styles = tabs()
-  return (
-    <Tabs.Trigger {...props} className={cx(styles.trigger, props.className)} />
-  )
-}
+export type TabsRootProps = CerberusPrimitiveProps<
+  ArkTabsRootProps & TabsVariantProps
+>
+// @ts-expect-error this is a workaround for the type issue WIP
+export const TabsRoot = withSlotRecipe<TabsRootProps>(Tabs.Root, 'root')
 
-/**
- * The tab content element.
- */
-export function TabsContent(props: TabContentProps) {
-  const styles = tabs()
-  return (
-    <Tabs.Content {...props} className={cx(styles.content, props.className)} />
-  )
-}
+// TabsList
 
-/**
- * The tab indicator element.
- */
-export function TabsIndicator(props: TabIndicatorProps) {
-  const styles = tabs()
-  return (
-    <Tabs.Indicator
-      {...props}
-      className={cx(styles.indicator, props.className)}
-    />
-  )
-}
+export type TabsListProps = CerberusPrimitiveProps<ArkTabListProps>
+export const TabsList = withSlotRecipe<TabsListProps>(Tabs.List, 'list')
+
+// TabsTrigger
+
+export type TabsTriggerProps = CerberusPrimitiveProps<ArkTabTriggerProps>
+export const TabsTrigger = withSlotRecipe<TabsTriggerProps>(
+  Tabs.Trigger,
+  'trigger',
+)
+
+// TabsContent
+
+export type TabContentProps = CerberusPrimitiveProps<ArkTabContentProps>
+export const TabsContent = withSlotRecipe<TabContentProps>(
+  Tabs.Content,
+  'content',
+)
+
+// TabsIndicator
+
+export type TabIndicatorProps = CerberusPrimitiveProps<ArkTabIndicatorProps>
+export const TabsIndicator = withSlotRecipe<TabIndicatorProps>(
+  Tabs.Indicator,
+  'indicator',
+)

package/src/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
-import type { TabListProps } from '@ark-ui/react/tabs'
-import { TabsParts, type TabsPartsValue } from './parts'
 import type { ElementType } from 'react'
+import { TabsParts, type TabsPartsValue } from './parts'
+import type { TabsListProps } from './primitives'
 
 /**
  * This module contains an abstraction of the Tabs family.
@@ -22,7 +22,7 @@ interface TabsValueProps
 /**
  * An abstraction of the TabsList component that includes the TabIndicator.
  */
-function TabsList(props: TabListProps) {
+function TabsList(props: TabsListProps) {
   const { children, ...listProps } = props
   return (
     <TabsParts.List {...listProps}>

package/src/components/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag'

package/src/components/tag/tag.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
+import { css, cx } from 'styled-system/css'
+import { tag, type TagVariantProps } from 'styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import { IconButton } from '../icon-button/index'
+import { Show } from '../show/index'
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+
+export type StaticTagProps = HTMLArkProps<'span'> &
+  TagVariantProps & {
+    /**
+     * The action to be performed when the tag is clicked. Not available when
+     * the palette or gradient props are provided.
+     */
+    onClick?: never
+  }
+
+export type ClickableTagProps = HTMLArkProps<'span'> & {
+  /**
+   * The gradient to apply to the tag. Not available when the onClick prop is
+   * provided.
+   */
+  gradient?: never
+  /**
+   * The palette to use for the tag. Not available when the onClick prop is
+   * provided.
+   */
+  palette?: never
+  /**
+   * The action to be performed when the tag is clicked.
+   */
+  onClick: MouseEventHandler<HTMLSpanElement>
+  /**
+   * The shape of the tag. Not available when the onClick prop is provided.
+   * @type 'pill' | 'rounded'
+   * @default 'pill'
+   */
+  shape?: never
+  /**
+   * The usage of the tag. Not available when the onClick prop is provided.
+   * @type 'filled' | 'outlined'
+   * @default 'filled'
+   */
+  usage?: never
+}
+
+export type TagProps = StaticTagProps | ClickableTagProps
+
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @see https://cerberus.digitalu.design/react/tag
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+export function Tag(props: PropsWithChildren<TagProps>) {
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
+  const palette = props?.palette ?? 'page'
+  const isClosable = Boolean(onClick)
+  const shape = isClosable ? 'pill' : initShape
+  const closableStyles = isClosable ? closableCss : ''
+  const { icons } = useCerberusContext()
+  const { close: Close } = icons
+
+  return (
+    <ark.span
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        tag({
+          gradient,
+          palette,
+          shape,
+          usage,
+        }),
+        closableStyles,
+      )}
+    >
+      {props.children}
+
+      <Show when={isClosable}>
+        <IconButton
+          ariaLabel="Close"
+          onClick={onClick}
+          palette="action"
+          usage="filled"
+          size="sm"
+        >
+          <Close />
+        </IconButton>
+      </Show>
+    </ark.span>
+  )
+}
+
+const closableCss = css({
+  bgColor: 'action.bg.active',
+  color: 'action.text.initial',
+  paddingInlineEnd: '0',
+})

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './text'

package/src/components/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme'