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

package/dist/panda.buildinfo.json

@@ -0,0 +1,23 @@
+{
+  "schemaVersion": "1.9.0",
+  "styles": {
+    "atomic": [
+      "width]___[value:1/2",
+      "position]___[value:relative",
+      "display]___[value:flex",
+      "alignItems]___[value:center",
+      "justifyContent]___[value:flex-start",
+      "gap]___[value:xs",
+      "flexDirection]___[value:row",
+      "marginBlockEnd]___[value:xs",
+      "textStyle]___[value:label-md",
+      "width]___[value:initial",
+      "height]___[value:2rem",
+      "paddingInline]___[value:md",
+      "srOnly]___[value:true",
+      "gap]___[value:8px",
+      "color]___[value:page.text.100"
+    ],
+    "recipes": {}
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.6",
   "description": "The Cerberus Design React component library.",
   "keywords": [
     "css",
@@ -21,7 +21,7 @@
   },
   "files": [
     "dist",
-    "src/**/*"
+    "package.json"
   ],
   "type": "module",
   "sideEffects": false,
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@internationalized/date": "^3.11.0",
+    "@pandacss/dev": "^1.9.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
@@ -47,13 +48,14 @@
     "styled-system": "0.0.0"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.8.2",
+    "@pandacss/dev": "^1.9.0",
     "react": "*",
     "react-dom": "*"
   },
   "browserslist": "> 0.25%, not dead",
   "scripts": {
-    "build": "vite build",
+    "generate:info": "pnpm panda ship --outfile dist/panda.buildinfo.json",
+    "build": "vite build && pnpm generate:info",
     "clean": "rm -rf ./dist",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },

package/src/components/AnimatingUploadIcon.tsx

@@ -1,83 +0,0 @@
-/**
- * This module contains an animating icon to use for the FileStatus component.
- * @module
- */
-
-export interface AnimatingUploadIconProps {
-  size?: 16 | 20 | 24 | 32
-}
-
-export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width={props.size ?? '1em'}
-      height={props.size ?? '1em'}
-      viewBox="0 0 24 24"
-    >
-      <g
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="square"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
-        <path
-          data-name="animating-trail"
-          strokeDasharray="2 4"
-          strokeDashoffset={6}
-          d="M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9"
-        >
-          <animate
-            attributeName="stroke-dashoffset"
-            dur="0.45s"
-            repeatCount="indefinite"
-            values="6;0"
-          ></animate>
-        </path>
-
-        <path
-          data-name="half-circle"
-          strokeDasharray={32}
-          strokeDashoffset={32}
-          d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9"
-        >
-          <animate
-            fill="freeze"
-            attributeName="stroke-dashoffset"
-            begin="0.075s"
-            dur="0.3s"
-            values="32;0"
-          ></animate>
-        </path>
-
-        <svg
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          width="1.1em"
-          height="1.1em"
-          x="27%"
-          y="27%"
-          viewBox="0 0 24 24"
-        >
-          <polygon
-            fill="currentColor"
-            stroke="currentColor"
-            strokeWidth={0.8}
-            opacity="1"
-            points="3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 "
-          >
-            <animate
-              fill="freeze"
-              attributeName="opacity"
-              values="1;0;1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </polygon>
-        </svg>
-      </g>
-    </svg>
-  )
-}

package/src/components/accordion/index.ts

@@ -1,3 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './item-group'

package/src/components/accordion/item-group.tsx

@@ -1,70 +0,0 @@
-import type {
-  AccordionItemProps,
-  AccordionRootProps,
-} from '@ark-ui/react/accordion'
-import { type AccordionVariantProps } from 'styled-system/recipes'
-import { splitProps } from '../../utils/index'
-import { Show } from '../show/index'
-import { AccordionParts } from './parts'
-import { AccordionChevronItemIndicator } from './item-indicator'
-
-/**
- * This module contains an abstraction of the AccordionItem components.
- * @module
- */
-
-export function Accordion(props: AccordionRootProps & AccordionVariantProps) {
-  return <AccordionParts.Root {...props} />
-}
-
-export interface AccordionItemGroupProps
-  extends AccordionItemProps,
-    AccordionVariantProps {
-  /**
-   * The heading of the accordion item to open and close the content.
-   */
-  heading: string
-  /**
-   * The position of the arrow indicator.
-   */
-  indicatorPosition?: 'start' | 'end'
-}
-
-/**
- * The AccordionItemGroup component is an abstraction of the Accordion primitive
- * components which renders an accordion item with a heading and an indicator.
- *
- * It is a wrapper around the `AccordionParts.Item`, `AccordionParts.
- * ItemTrigger`, `AccordionParts.ItemIndicator`, and `AccordionParts.ItemContent` components.
- *
- * @description [Cerberus docs](https://cerberus.digitalu.design/react/accordion)
- * @description [Ark docs](https://ark-ui.com/react/docs/components/accordion)
- */
-export function AccordionItemGroup(props: AccordionItemGroupProps) {
-  const [groupProps, itemProps] = splitProps(props, [
-    'heading',
-    'children',
-    'indicatorPosition',
-  ])
-  const indicatorPosition = groupProps.indicatorPosition ?? 'end'
-
-  return (
-    <AccordionParts.Item {...itemProps}>
-      <AccordionParts.ItemTrigger data-indicator-position={indicatorPosition}>
-        <Show when={indicatorPosition === 'start'}>
-          <AccordionChevronItemIndicator />
-        </Show>
-
-        {groupProps.heading}
-
-        <Show when={indicatorPosition === 'end'}>
-          <AccordionChevronItemIndicator />
-        </Show>
-      </AccordionParts.ItemTrigger>
-
-      <AccordionParts.ItemContent>
-        {groupProps.children}
-      </AccordionParts.ItemContent>
-    </AccordionParts.Item>
-  )
-}

package/src/components/accordion/item-indicator.tsx

@@ -1,27 +0,0 @@
-'use client'
-
-import { type AccordionItemIndicatorProps } from '@ark-ui/react/accordion'
-import { type AccordionVariantProps } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { AccordionParts } from './parts'
-
-/**
- * This module contains the internal AccordionItemIndicator component.
- * @module 'accordion/item-indicator'
- */
-
-export function AccordionChevronItemIndicator(
-  props: AccordionItemIndicatorProps & AccordionVariantProps,
-) {
-  const { size, ...indicatorProps } = props
-  const iconSize = size === 'sm' ? 16 : '24'
-
-  const { icons } = useCerberusContext()
-  const { accordionIndicator: ChevronDown } = icons
-
-  return (
-    <AccordionParts.ItemIndicator {...indicatorProps}>
-      <ChevronDown size={iconSize} />
-    </AccordionParts.ItemIndicator>
-  )
-}

package/src/components/accordion/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemIndicator,
-  AccordionItemTrigger,
-  AccordionRoot,
-} from './primitives'
-
-/**
- * This module contains the parts of the Accordion component.
- * @module 'accordion/parts'
- */
-
-interface AccordionPartsValue {
-  /**
-   * The context provider of the accordion.
-   */
-  Root: ElementType
-  /**
-   * The item of the accordion.
-   */
-  Item: ElementType
-  /**
-   * The trigger of the accordion item.
-   */
-  ItemTrigger: ElementType
-  /**
-   * The content of the accordion item.
-   */
-  ItemContent: ElementType
-  /**
-   * The indicator of the accordion item.
-   */
-  ItemIndicator: ElementType
-}
-
-/**
- * An Object containing the parts of the Accordion component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the AccordionParts object and
- * the entire family of components vs. only what you use.
- */
-export const AccordionParts: AccordionPartsValue = {
-  Root: AccordionRoot,
-  Item: AccordionItem,
-  ItemTrigger: AccordionItemTrigger,
-  ItemContent: AccordionItemContent,
-  ItemIndicator: AccordionItemIndicator,
-}

package/src/components/accordion/primitives.tsx

@@ -1,86 +0,0 @@
-import {
-  Accordion,
-  type AccordionItemContentProps as ArkAccordionItemContentProps,
-  type AccordionItemIndicatorProps as ArkAccordionItemIndicatorProps,
-  type AccordionItemProps as ArkAccordionItemProps,
-  type AccordionItemTriggerProps as ArkAccordionItemTriggerProps,
-  type AccordionRootProps as ArkAccordionRootProps,
-} from '@ark-ui/react/accordion'
-import { accordion, type AccordionVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the primitives of the Accordion component.
- * @module 'accordion/primitives'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(accordion)
-
-function AccordionRootEl(props: AccordionRootProps) {
-  const { size, ...rootProps } = props
-  return <Accordion.Root {...rootProps} data-size={size} />
-}
-
-/**
- * The primitive root component of the Accordion component.
- *
- * This component returns the Ark `Accordion.Root` component which has a
- * base style using the Cerberus `accordion` recipe that can be overridden.
- */
-export const AccordionRoot = withSlotRecipe(AccordionRootEl, 'root')
-export type AccordionRootProps = CerberusPrimitiveProps<
-  ArkAccordionRootProps & AccordionVariantProps
->
-
-/**
- * The primitive item component of the Accordion component.
- *
- * This component returns the Ark `Accordion.Item` component which has a
- * base style using the Cerberus `accordion` recipe that can be overridden.
- */
-export const AccordionItem = withSlotRecipe(Accordion.Item, 'item')
-export type AccordionItemProps = CerberusPrimitiveProps<
-  ArkAccordionItemProps & AccordionVariantProps
->
-
-/**
- * The primitive trigger component of the Accordion component.
- *
- * This component returns the Ark `Accordion.ItemTrigger` component which has
- * a base style using the Cerberus `accordion` recipe that can be overridden.
- */
-export const AccordionItemTrigger = withSlotRecipe(
-  Accordion.ItemTrigger,
-  'itemTrigger',
-)
-export type AccordionItemTriggerProps =
-  CerberusPrimitiveProps<ArkAccordionItemTriggerProps>
-
-/**
- * The primitive item indicator component of the Accordion component.
- *
- * This component returns the Ark `Accordion.ItemIndicator` component which has
- * a base style using the Cerberus `accordion` recipe that can be overridden.
- */
-export const AccordionItemIndicator = withSlotRecipe(
-  Accordion.ItemIndicator,
-  'itemIndicator',
-)
-export type AccordionItemIndicatorProps =
-  CerberusPrimitiveProps<ArkAccordionItemIndicatorProps>
-
-/**
- * The primitive content component of the Accordion component.
- *
- * This component returns the Ark `Accordion.Content` component which has a
- * base style using the Cerberus `accordion` recipe that can be overridden.
- */
-export const AccordionItemContent = withSlotRecipe(
-  Accordion.ItemContent,
-  'itemContent',
-)
-export type AccordionItemContentProps =
-  CerberusPrimitiveProps<ArkAccordionItemContentProps>

package/src/components/admonition/admonition.tsx

@@ -1,62 +0,0 @@
-import type { ReactNode } from 'react'
-import { splitProps } from '../../utils/index'
-import { Show } from '../show/index'
-import { AdmonitionParts } from './parts'
-import type { AdmonitionRootProps } from './primitives'
-import { MatchAvatar } from './match-avatar'
-
-/**
- * This module provides an abstraction for the Admonition component.
- * @module 'admonition/admonition'
- */
-
-export interface AdmonitionProps extends AdmonitionRootProps {
-  /**
-   * The heading title for the Admonition.
-   */
-  heading?: string
-  /**
-   * One off replacement for the icon.
-   */
-  icon?: ReactNode
-}
-
-/**
- * The Admonition component is an abstraction of the primitives which
- * displays a Admonition with a label.
- *
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/admonition)
- *
- * @remarks
- *
- * For a customizable Admonition, use the `AdmonitionParts` object to access the
- * individual primitives of the Admonition component.
- */
-export function Admonition(props: AdmonitionProps) {
-  const [elProps, styleProps, rootProps] = splitProps(
-    props,
-    ['heading', 'icon', 'children'],
-    ['palette', 'usage'],
-  )
-
-  return (
-    <AdmonitionParts.Root {...styleProps} {...rootProps}>
-      <Show
-        when={elProps.icon}
-        fallback={<MatchAvatar palette={styleProps.palette} />}
-      >
-        <AdmonitionParts.Indicator>{elProps.icon}</AdmonitionParts.Indicator>
-      </Show>
-
-      <AdmonitionParts.Content>
-        <Show when={elProps.heading}>
-          <AdmonitionParts.Heading>{elProps.heading}</AdmonitionParts.Heading>
-        </Show>
-
-        <AdmonitionParts.Description>
-          {elProps.children}
-        </AdmonitionParts.Description>
-      </AdmonitionParts.Content>
-    </AdmonitionParts.Root>
-  )
-}

package/src/components/admonition/index.ts

@@ -1,3 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './admonition'

package/src/components/admonition/match-avatar.tsx

@@ -1,52 +0,0 @@
-'use client'
-
-import type { AdmonitionVariantProps } from 'styled-system/recipes'
-import { useRef, type ReactNode } from 'react'
-import { useCerberusContext } from '../../context/cerberus'
-import { Avatar } from '../avatar/avatar'
-
-/**
- * This module provides a component for creating the admonition indicator.
- * @module 'admonition/match-avatar'
- */
-
-interface AvatarRefProps {
-  page: ReactNode
-  info: ReactNode
-  success: ReactNode
-  warning: ReactNode
-  danger: ReactNode
-}
-
-type MatchAvatarProps = AdmonitionVariantProps
-
-export function MatchAvatar(props: MatchAvatarProps) {
-  const { palette = 'page' } = props
-
-  const { icons } = useCerberusContext()
-  const {
-    infoNotification: InfoIcon,
-    successNotification: SuccessIcon,
-    warningNotification: WarningIcon,
-    dangerNotification: DangerIcon,
-  } = icons
-
-  // cache the el since the result is static and the component is client side
-  const elRef = useRef<AvatarRefProps>({
-    page: <Avatar gradient="charon-light" fallback={<InfoIcon />} size="sm" />,
-    info: (
-      <Avatar gradient="amphiaraus-dark" fallback={<InfoIcon />} size="sm" />
-    ),
-    success: (
-      <Avatar gradient="thanatos-dark" fallback={<SuccessIcon />} size="sm" />
-    ),
-    warning: (
-      <Avatar gradient="asphodel-light" fallback={<WarningIcon />} size="sm" />
-    ),
-    danger: (
-      <Avatar gradient="hades-light" fallback={<DangerIcon />} size="sm" />
-    ),
-  })
-
-  return <>{elRef.current[palette]}</>
-}

package/src/components/admonition/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  AdmonitionContent,
-  AdmonitionDescription,
-  AdmonitionHeading,
-  AdmonitionIndicator,
-  AdmonitionRoot,
-} from './primitives'
-
-/**
- * This module contains the parts of the Admonition component.
- * @module 'admonition/parts'
- */
-
-interface AdmonitionPartsValue {
-  /**
-   * The context provider of the Admonition.
-   */
-  Root: ElementType
-  /**
-   * The indicator of the Admonition.
-   */
-  Indicator: ElementType
-  /**
-   * The content of the Admonition.
-   */
-  Content: ElementType
-  /**
-   * The heading of the Admonition.
-   */
-  Heading: ElementType
-  /**
-   * The description of the Admonition.
-   */
-  Description: ElementType
-}
-
-/**
- * An Object containing the parts of the Accordion component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the AdmonitionParts object and
- * the entire family of components vs. only what you use.
- */
-export const AdmonitionParts: AdmonitionPartsValue = {
-  Root: AdmonitionRoot,
-  Indicator: AdmonitionIndicator,
-  Content: AdmonitionContent,
-  Heading: AdmonitionHeading,
-  Description: AdmonitionDescription,
-}

package/src/components/admonition/primitives.tsx

@@ -1,77 +0,0 @@
-import { type HTMLArkProps } from '@ark-ui/react/factory'
-import { admonition, type AdmonitionVariantProps } from 'styled-system/recipes'
-import {
-  cerberus,
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the primitives of the Admonition components.
- * @module 'admonition/primitives'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(admonition)
-
-/**
- * The `AdmonitionRoot` component is the container for the Admonition.
- */
-export const AdmonitionRoot = withSlotRecipe(cerberus.aside, 'root', {
-  defaultProps: {
-    'data-scope': 'admonition',
-    'data-part': 'root',
-  },
-})
-export type AdmonitionRootProps = CerberusPrimitiveProps<
-  HTMLArkProps<'aside'> & AdmonitionVariantProps
->
-
-/**
- * The `AdmonitionIndicator` component is the indicator for the Admonition.
- */
-export const AdmonitionIndicator = withNoRecipe(cerberus.span, {
-  defaultProps: {
-    'data-scope': 'admonition',
-    'data-part': 'indicator',
-  },
-})
-export type AdmonitionIndicatorProps = CerberusPrimitiveProps<
-  HTMLArkProps<'span'>
->
-
-/**
- * The `AdmonitionContent` component is the content for the Admonition.
- */
-export const AdmonitionContent = withNoRecipe(cerberus.div, {
-  defaultProps: {
-    'data-scope': 'admonition',
-    'data-part': 'content',
-  },
-})
-export type AdmonitionContentProps = CerberusPrimitiveProps<HTMLArkProps<'div'>>
-
-/**
- * The `AdmonitionHeading` component is the heading title for the Admonition.
- */
-export const AdmonitionHeading = withSlotRecipe(cerberus.p, 'heading', {
-  defaultProps: {
-    'data-scope': 'admonition',
-    'data-part': 'heading',
-  },
-})
-export type AdmonitionHeadingProps = CerberusPrimitiveProps<
-  HTMLArkProps<'p'> & AdmonitionVariantProps
->
-
-/**
- * The `AdmonitionDescription` component is the description for the Admonition.
- */
-export const AdmonitionDescription = withSlotRecipe(cerberus.p, 'description', {
-  defaultProps: {
-    'data-scope': 'admonition',
-    'data-part': 'description',
-  },
-})
-export type AdmonitionDescriptionProps = CerberusPrimitiveProps<
-  HTMLArkProps<'p'> & AdmonitionVariantProps
->