@cerberus-design/react 0.17.2 → 0.18.1

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './context/confirm-modal'\nexport * from './context/prompt-modal'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/date-picker/index'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Menu'\nexport * from './components/notifications/index'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './hooks/useDate'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/date-picker/index'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Menu'\nexport * from './components/notifications/index'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/prompt-modal'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,23 +8,24 @@
   "main": "build/legacy/index.cjs",
   "module": "build/modern/index.js",
   "peerDependencies": {
-    "@pandacss/dev": "*",
+    "@pandacss/dev": "^0.53.2",
     "react": "*",
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^4.9.2",
+    "@ark-ui/react": "^5.1.0",
     "@dnd-kit/core": "^6.1.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.46.2",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18",
+    "@pandacss/dev": "^0.53.2",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.4.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.17.2",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/panda-preset": "0.18.1"
   },
   "publishConfig": {
     "access": "public"
@@ -52,15 +53,15 @@
     "clean": "rm -rf ./build",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },
-  "types": "build/legacy/_tsup-dts-rollup.d.ts",
+  "types": "build/legacy/index.d.cts",
   "exports": {
     ".": {
       "import": {
-        "types": "./build/modern/_tsup-dts-rollup.d.ts",
+        "types": "./build/modern/index.d.ts",
         "default": "./build/modern/index.js"
       },
       "require": {
-        "types": "./build/legacy/_tsup-dts-rollup.d.cts",
+        "types": "./build/legacy/index.d.cts",
         "default": "./build/legacy/index.cjs"
       }
     },
@@ -69,7 +70,7 @@
   "typesVersions": {
     "*": {
       ".": [
-        "build/legacy/_tsup-dts-rollup.d.cts"
+        "build/legacy/index.d.cts"
       ]
     }
   }

package/src/aria-helpers/nav-menu.aria.ts

@@ -8,6 +8,9 @@ interface NavTriggerAriaReturn {
   ['aria-expanded']: boolean
 }
 
+/**
+ * @deprecated will be removed in a future release
+ */
 export function createNavTriggerProps(
   values: NavTriggerAriaValues,
 ): NavTriggerAriaReturn {

package/src/aria-helpers/trap-focus.aria.ts

@@ -1,7 +1,10 @@
 import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'
 
+/**
+ * @deprecated will be removed in a future release
+ */
 export function trapFocus(
-  modalRef: RefObject<HTMLDialogElement>,
+  modalRef: RefObject<HTMLDialogElement | null>,
 ): KeyboardEventHandler<HTMLDialogElement> {
   const focusableElements =
     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'

package/src/components/CircularProgress.tsx

@@ -1,7 +1,4 @@
-'use client'
-
-import { cq } from '@cerberus/styled-system/patterns'
-import { css } from '@cerberus/styled-system/css'
+import { circularProgress } from 'styled-system/recipes'
 import type { SVGProps } from 'react'
 import { Show } from './Show'
 
@@ -35,6 +32,11 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
    * The background style of the CircularProgress
    */
   bgStyle?: 'filled' | 'transparent'
+  /**
+   * The size of the CircularProgress
+   * @default '1.1em'
+   */
+  size?: string
 }
 
 /**
@@ -50,12 +52,22 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
  * ```
  */
 export function CircularProgress(props: CircularProgressProps) {
+  const { size = '1.1em' } = props
+  const sizeProps = props.size
+    ? {
+        height: size,
+        width: size,
+      }
+    : {}
+
   const strokeW: number = 14
   const radius = `calc(50% * (1 - ${strokeW}/100))`
   const status: string = props.syntax ?? 'Done'
   const now: number = props.now >= 100 ? 100 : props.now
   const bgStyle: string = props.bgStyle ?? 'filled'
 
+  const styles = circularProgress()
+
   return (
     <div
       id={props.id}
@@ -63,26 +75,18 @@ export function CircularProgress(props: CircularProgressProps) {
       aria-valuemin={0}
       aria-valuemax={100}
       aria-valuenow={now}
-      className={cq({
-        alignSelf: 'stretch',
-        flex: 1,
-        m: '4px',
-        position: 'relative',
-      })}
+      className={styles.root}
       role="progressbar"
     >
       <svg
         data-complete={now === 100}
-        className={css({
-          display: 'block',
-          rounded: 'full',
-          transition: 'all 0.5s ease',
-        })}
+        className={styles.group}
         fill="none"
         strokeLinecap="round"
         strokeWidth={strokeW}
         viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"
+        {...sizeProps}
       >
         <title>{props.title}</title>
         <desc>{`${now}% ${status}`}</desc>
@@ -101,33 +105,25 @@ export function CircularProgress(props: CircularProgressProps) {
 
         <Show when={bgStyle === 'filled'}>
           <circle
-            className={css({
-              fill: 'page.surface.initial',
-            })}
+            className={styles.base}
             cx="50%"
             cy="50%"
             r={`calc(50% * (1 - ${strokeW}/100))`}
             pathLength="100"
           />
         </Show>
+
         <circle
-          className={css({
-            stroke: 'page.bg.100',
-          })}
+          className={styles.track}
           cx="50%"
           cy="50%"
           r={radius}
           pathLength="100"
         />
+
         <circle
           data-complete={now === 100}
-          className={css({
-            stroke: 'url(#gradient)',
-            transition: 'stroke-dashoffset, stroke 0.5s ease',
-            _isComplete: {
-              stroke: 'success.bg.initial',
-            },
-          })}
+          className={styles.path}
           cx="50%"
           cy="50%"
           fill="none"
@@ -140,11 +136,7 @@ export function CircularProgress(props: CircularProgressProps) {
 
         <g>
           <text
-            className={css({
-              fill: 'page.text.initial',
-              fontFamily: 'mono',
-              textStyle: '1.25rem',
-            })}
+            className={styles.title}
             x="50%"
             y="47%"
             dominantBaseline="middle"
@@ -153,11 +145,7 @@ export function CircularProgress(props: CircularProgressProps) {
             {now}%
           </text>
           <text
-            className={css({
-              fill: 'page.text.100',
-              fontSize: '0.5rem',
-              fontWeight: 600,
-            })}
+            className={styles.description}
             x="50%"
             y="59%"
             dominantBaseline="middle"

package/src/components/FileStatus.tsx

@@ -6,12 +6,9 @@ import {
   type HTMLAttributes,
   type MouseEvent,
 } from 'react'
-import {
-  fileStatus,
-  type FileStatusVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { css, cx } from '@cerberus/styled-system/css'
-import { hstack, vstack } from '@cerberus/styled-system/patterns'
+import { fileStatus, type FileStatusVariantProps } from 'styled-system/recipes'
+import { css, cx } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
 import { useCerberusContext } from '../context/cerberus'
 import { ProgressBar, type ProgressBarProps } from './ProgressBar'
 import { IconButton } from './IconButton'

package/src/components/FileUploader.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { cx } from '@cerberus/styled-system/css'
-import { vstack } from '@cerberus/styled-system/patterns'
+import { cx } from 'styled-system/css'
+import { vstack } from 'styled-system/patterns'
 import { type InputHTMLAttributes } from 'react'
 import { Show } from './Show'
-import { fileUploader } from '@cerberus/styled-system/recipes'
+import { fileUploader } from 'styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
 import { Avatar } from './avatar/avatar'
 
@@ -56,7 +56,7 @@ export function FileUploader(props: FileUploaderProps) {
         )}
         htmlFor={props.name}
       >
-        <Show when={Boolean(props.heading)}>
+        <Show when={props.heading}>
           <p className={styles.heading}>{props.heading}</p>
         </Show>
         Import {props.accept?.replace(',', ', ')} files

package/src/components/IconButton.tsx

@@ -1,9 +1,6 @@
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  iconButton,
-  type IconButtonVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the Icon Button component.
@@ -22,7 +19,7 @@ export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
  * A component that allows the user to perform actions using an icon
  * @see https://cerberus.digitalu.design/react/icon-button
  */
-export function IconButton(props: IconButtonProps): JSX.Element {
+export function IconButton(props: IconButtonProps) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props
   return (
     <ark.button

package/src/components/Menu.tsx

@@ -1,6 +1,10 @@
-import { Menu as ArkMenu } from '@ark-ui/react'
-import { menu } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import {
+  Menu as ArkMenu,
+  type MenuItemGroupProps,
+  type MenuRootProps,
+} from '@ark-ui/react'
+import { menu } from 'styled-system/recipes'
+import { cx } from 'styled-system/css'
 
 /**
  * This module contains the Menu component family.
@@ -18,7 +22,9 @@ const menuStyles = menu()
  *  <MenuTrigger>Trigger</MenuTrigger>
  * </Menu>
  */
-export const Menu = ArkMenu.Root
+export function Menu(props: MenuRootProps) {
+  return <ArkMenu.Root {...props} />
+}
 
 /**
  * The MenuTrigger component opens/closes the Menu.
@@ -99,7 +105,9 @@ export function MenuItem(props: ArkMenu.ItemProps) {
  *  </MenuContent>
  * </Menu>
  */
-export const MenuItemGroup = ArkMenu.ItemGroup
+export function MenuItemGroup(props: MenuItemGroupProps) {
+  return <ArkMenu.ItemGroup {...props} />
+}
 
 /**
  * The MenuItemGroupLabel component is the label for a group of menu items.
@@ -155,90 +163,3 @@ export function MenuSeparator(props: ArkMenu.SeparatorProps) {
     />
   )
 }
-
-/**
- * The MenuCheckboxItem component is a menu item with a checkbox.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuCheckboxItem
- *     checked={checked}
- *     onCheckedChange={setChecked}
- *     value="checked"
- *   >
- *    <MenuItemIndicator>✅</MenuItemIndicator>
- *    <MenuItemText>Check me</MenuItemText>
- *   </MenuCheckboxItem>
- * </MenuContent>
- */
-// export function MenuCheckboxItem(props: ArkMenu.CheckboxItemProps) {
-//   return (
-//     <ArkMenu.CheckboxItem
-//       {...props}
-//       className={cx(props.className, menuStyles.item)}
-//     />
-//   )
-// }
-
-/**
- * The MenuItemText component is the text for a grouped menu item.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuCheckboxItem
- *     checked={checked}
- *     onCheckedChange={setChecked}
- *     value="checked"
- *   >
- *    <MenuItemText>Item 1</MenuItemText>
- *   </MenuCheckboxItem>
- *  </MenuContent>
- * </Menu>
- */
-// export function MenuItemText(props: ArkMenu.ItemTextProps) {
-//   return (
-//     <ArkMenu.ItemText
-//       {...props}
-//       className={cx(props.className, menuStyles.itemText)}
-//     />
-//   )
-// }
-
-/**
- * The MenuItemIndicator component is the indicator for a grouped menu item.
- * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
- * @example
- * ```tsx
- * <Menu>
- *  <MenuTrigger>
- *   <Button>Trigger</Button>
- *  </MenuTrigger>
- *  <MenuContent>
- *   <MenuCheckboxItem
- *    checked={checked}
- *    onCheckedChange={setChecked}
- *    value="checked"
- *   >
- *    <MenuItemIndicator>✅</MenuItemIndicator>
- *    <MenuItemText>Check me</MenuItemText>
- *   </MenuCheckboxItem>
- *  </MenuContent>
- */
-// export function MenuItemIndicator(props: ArkMenu.ItemIndicatorProps) {
-//   return (
-//     <ArkMenu.ItemIndicator
-//       {...props}
-//       className={cx(props.className, menuStyles.itemIndicator)}
-//     />
-//   )
-// }

package/src/components/Portal.tsx

@@ -1,14 +1,12 @@
-import {
-  Portal as ArkPortal,
-  type PortalProps as ArkPortalProps,
-} from '@ark-ui/react'
+import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'
+import type { PropsWithChildren } from 'react'
 
 /**
  * This module is the Portal component.
  * @module
  */
 
-export type PortalProps = ArkPortalProps
+export type { PortalProps }
 
 /**
  * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
@@ -28,4 +26,6 @@ export type PortalProps = ArkPortalProps
  *   )
  * }
  */
-export const Portal = ArkPortal
+export function Portal(props: PropsWithChildren<PortalProps>) {
+  return <ArkPortal {...props} />
+}

package/src/components/ProgressBar.tsx

@@ -1,9 +1,9 @@
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from '@cerberus/styled-system/css'
+import { cx } from 'styled-system/css'
 import {
   progressBar,
   type ProgressBarVariantProps,
-} from '@cerberus/styled-system/recipes'
+} from 'styled-system/recipes'
 
 /**
  * This module contains the ProgressBar component.

package/src/components/Show.tsx

@@ -1,17 +1,15 @@
-'use client'
-
-import { useMemo, type PropsWithChildren, type ReactNode } from 'react'
+import { type PropsWithChildren, type ReactNode } from 'react'
 
 /**
  * This module contains the Show component.
  * @module
  */
 
-export interface ShowProps {
+export interface ShowProps<T> {
   /**
    * The condition to render memoized children or the fallback content.
    */
-  when: boolean | null | undefined
+  when: T | boolean | null | undefined
   /**
    * The children to render when the condition is false.
    */
@@ -28,12 +26,16 @@ export interface ShowProps {
  *   <Dashboard />
  * </Show>
  */
-export function Show(props: PropsWithChildren<ShowProps>): ReactNode {
+export function Show<T>(props: PropsWithChildren<ShowProps<T>>) {
   const { when, children, fallback } = props
-  const condition = useMemo(() => when ?? false, [when])
 
-  return useMemo(() => {
-    if (condition) return children
-    return fallback ?? null
-  }, [condition, children, fallback])
+  if (when) {
+    return <>{children}</>
+  }
+
+  if (fallback) {
+    return <>{fallback}</>
+  }
+
+  return null
 }

package/src/components/Spinner.tsx

@@ -1,11 +1,9 @@
-import type { SVGProps } from 'react'
-
 /**
  * This module contains the Spinner component.
  * @module
  */
 
-export type SpinnerProps = SVGProps<SVGSVGElement> & {
+export interface SpinnerProps {
   /**
    * The size of the spinner
    */
@@ -30,12 +28,13 @@ export function Spinner(props: SpinnerProps) {
   return (
     <svg
       aria-busy="true"
+      data-scope="spinner"
+      data-part="root"
       role="status"
       xmlns="http://www.w3.org/2000/svg"
       height={props.size}
       width={props.size}
       viewBox="0 0 24 24"
-      {...props}
     >
       <g
         fill="none"

package/src/components/Tag.tsx

@@ -2,8 +2,8 @@
 
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
-import { css, cx } from '@cerberus/styled-system/css'
-import { tag, type TagVariantProps } from '@cerberus/styled-system/recipes'
+import { css, cx } from 'styled-system/css'
+import { tag, type TagVariantProps } from 'styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
 import { Show } from './Show'
 import { IconButton } from './IconButton'

package/src/components/Text.tsx

@@ -11,8 +11,7 @@ import {
   Span,
   Strong,
   type PProps,
-} from '@cerberus/styled-system/jsx'
-import { type HTMLAttributes, type PropsWithChildren } from 'react'
+} from 'styled-system/jsx'
 
 /**
  * This module exports a component for rendering text utilizing the styled-system JSX utility.
@@ -24,9 +23,7 @@ export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'
 
 // For some reason we have to use the HTMLParagraphElement type here
 // or else TS will fail for non-style props like 'id' or 'className'
-export interface TextProps
-  extends PProps,
-    HTMLAttributes<HTMLParagraphElement> {
+export interface TextProps extends PProps {
   /**
    * The element to render as. Defaults to 'p'.
    */
@@ -45,7 +42,7 @@ export interface TextProps
  *  Hello, world!
  * </Text>
  */
-export function Text(props: PropsWithChildren<TextProps>) {
+export function Text(props: TextProps) {
   const { as = 'p', ...pandaJSXProps } = props
   switch (as) {
     case 'h1':

package/src/components/Tooltip.tsx

@@ -2,8 +2,8 @@ import {
   Tooltip as ArkTooltip,
   type TooltipContentProps,
 } from '@ark-ui/react/tooltip'
-import { cx } from '@cerberus/styled-system/css'
-import { tooltip } from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { tooltip } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 
 /**

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

@@ -1,5 +1,8 @@
-import type { AccordionItemProps } from '@ark-ui/react/accordion'
-import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+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'
 import { AccordionParts } from './parts'
@@ -10,8 +13,9 @@ import { AccordionChevronItemIndicator } from './item-indicator'
  * @module
  */
 
-// We are only exposing this to keep the API consistent
-export const Accordion = AccordionParts.Root
+export function Accordion(props: AccordionRootProps & AccordionVariantProps) {
+  return <AccordionParts.Root {...props} />
+}
 
 export interface AccordionItemGroupProps
   extends AccordionItemProps,

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { type AccordionItemIndicatorProps } from '@ark-ui/react/accordion'
-import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+import { type AccordionVariantProps } from 'styled-system/recipes'
 import { useCerberusContext } from '../../context/cerberus'
 import { AccordionParts } from './parts'
 

package/src/components/accordion/primitives.tsx

@@ -6,11 +6,8 @@ import {
   type AccordionItemTriggerProps,
   type AccordionRootProps,
 } from '@ark-ui/react/accordion'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  accordion,
-  type AccordionVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { cx } from 'styled-system/css'
+import { accordion, type AccordionVariantProps } from 'styled-system/recipes'
 
 /**
  * This module contains the primitives of the Accordion component.