@cerberus-design/react 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,9 +8,9 @@
   "main": "build/legacy/index.cjs",
   "module": "build/legacy/index.js",
   "peerDependencies": {
-    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@next",
     "@cerberus/icons": "npm:@jsr/cerberus__icons",
+    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@workspace:*",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"
@@ -20,8 +20,9 @@
     "@types/react": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "tsup": "^8.0.2",
-    "@cerberus-design/configs": "0.0.0"
+    "tsup": "^8.1.0",
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.6.0"
   },
   "publishConfig": {
     "access": "public"
@@ -46,7 +47,7 @@
   "author": "developers@omnifederal.com",
   "license": "ISC",
   "scripts": {
-    "build": "tsup-node --experimental-dts",
+    "build": "tsup --experimental-dts noExternals",
     "clean": "rm -rf ./build",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },

package/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { button } from '@cerberus/styled-system/recipes'
 
 /**
@@ -7,11 +7,8 @@ import { button } from '@cerberus/styled-system/recipes'
  * @module
  */
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  palette?: 'action' | 'danger'
-  usage?: 'filled' | 'outline' | 'text'
-  shape?: 'sharp' | 'rounded'
-}
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  RecipeVariantProps<typeof button>
 
 /**
  * A component that allows the user to perform actions

package/src/components/FieldMessage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { HTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { fieldMessage } from '@cerberus/styled-system/recipes'
 import { useFieldContext } from '../context/field'
 
@@ -10,10 +10,12 @@ import { useFieldContext } from '../context/field'
  * @module
  */
 
-export interface FieldMessageProps
+export type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>
+export interface FieldMessageBaseProps
   extends HTMLAttributes<HTMLParagraphElement> {
   id: string
 }
+export type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe
 
 /**
  * A component that provides feedback about the field.

package/src/components/IconButton.tsx

@@ -1,23 +1,20 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { iconButton } from '@cerberus/styled-system/recipes'
-import type { ButtonProps } from './Button'
+import type { Positions } from '../types'
 
 /**
  * This module contains the Icon Button component.
  * @module
  */
 
-export type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>
-export interface IconButtonProps
+export interface IconButtonRawProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   ariaLabel: string
-  palette?: ButtonProps['palette']
-  usage?: IconButtonUsage
-  shape?: 'circle'
-  size?: 'sm' | 'lg'
-  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
+  tooltipPosition?: Positions
 }
+export type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>
+export type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps
 
 /**
  * A component that allows the user to perform actions using an icon

package/src/components/Input.tsx

@@ -1,35 +1,49 @@
 'use client'
 
-import type { InputHTMLAttributes } from 'react'
-import { WarningFilled } from '@cerberus/icons'
+import type { InputHTMLAttributes, ReactNode } from 'react'
 import { input } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
+import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
 import { useFieldContext } from '../context/field'
+import { $cerberusIcons } from '../config/defineIcons'
 import { Show } from './Show'
 
-export interface InputProps
+export type InputRecipeProps = RecipeVariantProps<typeof input>
+export interface InputBaseProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
   describedBy?: string
   id: string
-  size?: 'sm' | 'md' | 'lg'
+  startIcon?: ReactNode
+  endIcon?: ReactNode
 }
+export type InputProps = InputBaseProps & InputRecipeProps
 
 export function Input(props: InputProps) {
-  const { describedBy, size, ...nativeProps } = props
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props
   const inputStyles = input({ size })
   const { invalid, ...fieldStates } = useFieldContext()
+  const hasEndIcon = Boolean(endIcon)
+  const { invalid: InvalidIcon } = $cerberusIcons
 
   return (
     <div className={inputStyles.root}>
+      <Show when={Boolean(startIcon)}>
+        <span className={inputStyles.startIcon}>{startIcon}</span>
+      </Show>
+
       <input
         {...nativeProps}
         {...fieldStates}
         {...(describedBy && { 'aria-describedby': describedBy })}
         {...(invalid && { 'aria-invalid': true })}
+        data-start-icon={Boolean(startIcon)}
         className={cx('peer', nativeProps.className, inputStyles.input)}
       />
+
       <Show when={invalid}>
-        <WarningFilled className={inputStyles.icon} />
+        <InvalidIcon className={inputStyles.icon} />
+      </Show>
+      <Show when={hasEndIcon && !invalid}>
+        <span className={inputStyles.icon}>{endIcon}</span>
       </Show>
     </div>
   )

package/src/components/Label.tsx

@@ -2,20 +2,22 @@
 
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 import { label } from '@cerberus/styled-system/recipes'
-import { css, cx } from '@cerberus/styled-system/css'
+import { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
+import { hstack } from '@cerberus/styled-system/patterns'
 import { useFieldContext } from '../context/field'
 import { Show } from './Show'
-import { hstack } from '@cerberus/styled-system/patterns'
 
 /**
  * This module contains the Label component.
  * @module
  */
 
-export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+export type LabelRecipeProps = RecipeVariantProps<typeof label>
+export interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
   htmlFor: string
   hidden?: boolean
 }
+export type LabelProps = LabelBaseProps & LabelRecipeProps
 
 /**
  * A screen ready friendly label component.
@@ -29,16 +31,17 @@ export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
  * ```
  */
 export function Label(props: PropsWithChildren<LabelProps>) {
-  const { hidden, ...nativeProps } = props
-  const { required } = useFieldContext()
+  const { hidden, size, ...nativeProps } = props
+  const { required, disabled } = useFieldContext()
   const usage = hidden ? 'hidden' : 'visible'
 
   return (
     <label
       {...nativeProps}
+      data-disabled={disabled}
       className={cx(
         nativeProps.className,
-        label({ usage }),
+        label({ size, usage }),
         hstack({
           justify: 'space-between',
         }),

package/src/components/Radio.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { cx } from '@cerberus-design/styled-system/css'
+import { hstack } from '@cerberus-design/styled-system/patterns'
+import { radio } from '@cerberus-design/styled-system/recipes'
+import type { RecipeVariantProps } from '@cerberus-design/styled-system/types'
+import type { InputHTMLAttributes, PropsWithChildren } from 'react'
+import { useFieldContext } from '../context/field'
+
+export type RadioRecipe = RecipeVariantProps<typeof radio>
+export interface RadioBaseProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  id: string
+}
+export type RadioProps = RadioBaseProps & RadioRecipe
+
+export function Radio(props: PropsWithChildren<RadioProps>) {
+  const { children, size, ...nativeProps } = props
+  const { invalid, ...state } = useFieldContext()
+  const styles = radio({ size })
+
+  return (
+    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>
+      <input
+        {...nativeProps}
+        {...state}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx(nativeProps.className, styles.input)}
+        tabIndex={-1}
+        type="radio"
+      />
+      {children}
+    </div>
+  )
+}

package/src/components/Tag.tsx

@@ -3,48 +3,44 @@ import { Close } from '@cerberus/icons'
 import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
 import { iconButton, tag } from '@cerberus/styled-system/recipes'
-import type { ConditionalValue } from '@cerberus/styled-system/types'
+import type { RecipeVariantProps } from '@cerberus/styled-system/types'
 
 /**
  * This module contains the tag component.
  * @module
  */
 
-export type NonActionablePalette = ConditionalValue<
-  'neutral' | 'info' | 'success' | 'warning' | 'danger'
->
-export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: NonActionablePalette
-  shape?: 'rounded' | 'pill'
-  usage?: 'filled' | 'outline'
-}
-export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: NonActionablePalette
-  shape?: 'pill'
+export type TagRecipeProps = RecipeVariantProps<typeof tag>
+
+export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
+  TagRecipeProps & {
+    onClick?: never
+  }
+
+export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+  gradient?: never
+  palette?: never
   onClick: () => void
-  usage?: 'filled'
+  shape: 'pill'
+  usage: 'filled'
 }
 
+export type TagProps = StaticTagProps | ClickableTagProps
+
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-export function Tag(
-  props: PropsWithChildren<TagProps | ClickableTagProps>,
-): JSX.Element {
-  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props
+export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
+  const palette = props?.palette ?? 'neutral'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
-  const closableStyles = isClosable
-    ? css({
-        bgColor: 'action.bg.active',
-        color: 'action.text.initial',
-        paddingInlineEnd: '0',
-      })
-    : ''
+  const closableStyles = isClosable ? closableCss : ''
 
   return (
     <span
@@ -52,6 +48,7 @@ export function Tag(
       className={cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage,
@@ -77,3 +74,9 @@ export function Tag(
     </span>
   )
 }
+
+const closableCss = css({
+  bgColor: 'action.bg.active',
+  color: 'action.text.initial',
+  paddingInlineEnd: '0',
+})

package/src/components/Textarea.tsx

@@ -4,17 +4,19 @@ import type { TextareaHTMLAttributes } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
 import { input } from '@cerberus/styled-system/recipes'
 import { useFieldContext } from '../context/field'
+import type { InputRecipeProps } from './Input'
 
 /**
  * This module contains the Textarea component.
  * @module
  */
 
-export interface TextareaProps
+export interface TextareaBaseProps
   extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
   describedBy?: string
   id: string
 }
+export type TextareaProps = InputRecipeProps & TextareaBaseProps
 
 /**
  * A component that allows the user to input large blocks of text.

package/src/components/Toggle.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { cx } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import {
+  toggle,
+  type ToggleVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { InputHTMLAttributes } from 'react'
+import { $cerberusIcons } from '../config/defineIcons'
+import { useFieldContext } from '../context/field'
+
+export type ToggleBase = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'id' | 'value'
+> & {
+  describedBy?: string
+  id: string
+  value: string
+}
+export type ToggleProps = ToggleBase & ToggleVariantProps
+
+export function Toggle(props: ToggleProps) {
+  const { size, describedBy, ...nativeProps } = props
+  const styles = toggle({ size })
+  const { invalid, ...state } = useFieldContext()
+  const Icon = $cerberusIcons.toggleChecked
+
+  return (
+    <span
+      className={cx('group', styles.track, hstack())}
+      data-checked={props.checked || props.defaultChecked}
+    >
+      <input
+        {...nativeProps}
+        {...state}
+        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx('peer', styles.input)}
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        className={cx(
+          styles.thumb,
+          vstack({
+            justify: 'center',
+          }),
+        )}
+      >
+        <Icon />
+      </span>
+    </span>
+  )
+}

package/src/config/cerbIcons.ts

@@ -0,0 +1,12 @@
+import { Checkmark, WarningFilled, type CarbonIconType } from '@cerberus/icons'
+import type { ElementType } from 'react'
+
+export interface DefinedIcons {
+  invalid: CarbonIconType | ElementType
+  toggleChecked: CarbonIconType | ElementType
+}
+
+export const defaultIcons: DefinedIcons = {
+  invalid: WarningFilled,
+  toggleChecked: Checkmark,
+}

package/src/config/defineIcons.ts

@@ -0,0 +1,19 @@
+import { defaultIcons, type DefinedIcons } from './cerbIcons'
+
+function _validateIconsProperties(icons: DefinedIcons) {
+  if (!icons.invalid) {
+    throw new Error(
+      'The an invalid property must be defined in your custom icons library.',
+    )
+  }
+}
+
+export function defineIcons(icons: DefinedIcons): DefinedIcons {
+  _validateIconsProperties(icons)
+  $cerberusIcons = icons
+  return $cerberusIcons
+}
+
+// Default icons
+
+export let $cerberusIcons: DefinedIcons = defaultIcons

package/src/hooks/useToggle.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import { useCallback, useMemo, useState, type ChangeEvent } from 'react'
+
+export interface UseToggleOptions {
+  checked?: string
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+}
+export interface ToggleHookReturn {
+  checked: string
+  handleChange: (e: ChangeEvent<HTMLInputElement>) => void
+}
+
+export function useToggle(options?: UseToggleOptions): ToggleHookReturn {
+  const [checked, setChecked] = useState<string>(options?.checked ?? '')
+  const onChange = options?.onChange
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const target = e.currentTarget as HTMLInputElement
+      setChecked((prev) => {
+        return prev === target.value ? '' : target.value
+      })
+      onChange?.(e)
+    },
+    [onChange],
+  )
+
+  return useMemo(() => ({ checked, handleChange }), [checked, handleChange])
+}

package/src/index.ts

@@ -13,11 +13,13 @@ export * from './components/Label'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'
+export * from './components/Radio'
 export * from './components/Tab'
 export * from './components/TabList'
 export * from './components/TabPanel'
 export * from './components/Tag'
 export * from './components/Textarea'
+export * from './components/Toggle'
 export * from './components/Show'
 
 // context
@@ -30,12 +32,17 @@ export * from './context/theme'
 // hooks
 
 export * from './hooks/useTheme'
+export * from './hooks/useToggle'
 
 // aria-helpers
 
 export * from './aria-helpers/nav-menu.aria'
 export * from './aria-helpers/tabs.aria'
 
+// utils
+
+export * from './config/defineIcons'
+
 // shared types
 
 export * from './types'

package/build/legacy/aria-helpers/nav-menu.aria.d.ts

@@ -1,2 +0,0 @@
-export { createNavTriggerProps_alias_1 as createNavTriggerProps } from '../_tsup-dts-rollup';
-export { NavTriggerAriaValues_alias_1 as NavTriggerAriaValues } from '../_tsup-dts-rollup';

package/build/legacy/aria-helpers/tabs.aria.d.ts

@@ -1 +0,0 @@
-export { useTabsKeyboardNavigation_alias_1 as useTabsKeyboardNavigation } from '../_tsup-dts-rollup';

package/build/legacy/chunk-5TBINKAO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaHTMLAttributes } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n  describedBy?: string\n  id: string\n}\n\n/**\n * A component that allows the user to input large blocks of text.\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx\n */\nexport function Textarea(props: TextareaProps): JSX.Element {\n  const { describedBy, ...nativeProps } = props\n  const { invalid, ...fieldState } = useFieldContext()\n\n  return (\n    <textarea\n      {...nativeProps}\n      {...fieldState}\n      {...(describedBy && { 'aria-describedby': describedBy })}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        input().input,\n        css({\n          pxi: '2',\n          py: '2',\n          resize: 'vertical',\n        }),\n      )}\n      rows={4}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAa;AAuBlB;AALG,SAAS,SAAS,OAAmC;AAC1D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,gBAAgB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,MACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM,EAAE;AAAA,QACR,IAAI;AAAA,UACF,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA,MACA,MAAM;AAAA;AAAA,EACR;AAEJ;","names":[]}

package/build/legacy/chunk-7BXBIDZB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { ConditionalValue } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type NonActionablePalette = ConditionalValue<\n  'neutral' | 'info' | 'success' | 'warning' | 'danger'\n>\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\n  shape?: 'rounded' | 'pill'\n  usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: NonActionablePalette\n  shape?: 'pill'\n  onClick: () => void\n  usage?: 'filled'\n}\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(\n  props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        color: 'action.text.initial',\n        paddingInlineEnd: '0',\n      })\n    : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AA6C5B,SAwBM,KAxBN;AAfG,SAAS,IACd,OACa;AACb,QAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtE,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,kBAAkB;AAAA,EACpB,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-LD5ZV46F.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAU;AAiBf,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/chunk-NIMWIOIA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n  size?: 'sm' | 'lg'\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA0BvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-OXVNTE4A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-XFWARXLU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  palette?: 'action' | 'danger'\n  usage?: 'filled' | 'outline' | 'text'\n  shape?: 'sharp' | 'rounded'\n}\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,cAAc;AAoBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-YVUZSAJG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport interface FieldMessageProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA8BzB;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/build/legacy/components/Button.d.ts

@@ -1,2 +0,0 @@
-export { Button_alias_1 as Button } from '../_tsup-dts-rollup';
-export { ButtonProps_alias_1 as ButtonProps } from '../_tsup-dts-rollup';

package/build/legacy/components/FieldMessage.d.ts

@@ -1,2 +0,0 @@
-export { FieldMessage_alias_1 as FieldMessage } from '../_tsup-dts-rollup';
-export { FieldMessageProps_alias_1 as FieldMessageProps } from '../_tsup-dts-rollup';

package/build/legacy/components/IconButton.d.ts

@@ -1,3 +0,0 @@
-export { IconButton_alias_1 as IconButton } from '../_tsup-dts-rollup';
-export { IconButtonUsage_alias_1 as IconButtonUsage } from '../_tsup-dts-rollup';
-export { IconButtonProps_alias_1 as IconButtonProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Input.d.ts

@@ -1,2 +0,0 @@
-export { Input_alias_1 as Input } from '../_tsup-dts-rollup';
-export { InputProps_alias_1 as InputProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Label.d.ts

@@ -1,2 +0,0 @@
-export { Label_alias_1 as Label } from '../_tsup-dts-rollup';
-export { LabelProps_alias_1 as LabelProps } from '../_tsup-dts-rollup';

package/build/legacy/components/NavMenuLink.d.ts

@@ -1,2 +0,0 @@
-export { NavMenuLink_alias_1 as NavMenuLink } from '../_tsup-dts-rollup';
-export { NavMenuLinkProps_alias_1 as NavMenuLinkProps } from '../_tsup-dts-rollup';

package/build/legacy/components/NavMenuList.d.ts

@@ -1,3 +0,0 @@
-export { getPosition_alias_1 as getPosition } from '../_tsup-dts-rollup';
-export { NavMenuList_alias_1 as NavMenuList } from '../_tsup-dts-rollup';
-export { NavMenuListProps_alias_1 as NavMenuListProps } from '../_tsup-dts-rollup';

package/build/legacy/components/NavMenuTrigger.d.ts

@@ -1,2 +0,0 @@
-export { NavMenuTrigger_alias_1 as NavMenuTrigger } from '../_tsup-dts-rollup';
-export { NavMenuTriggerProps_alias_1 as NavMenuTriggerProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Show.d.ts

@@ -1,2 +0,0 @@
-export { Show_alias_1 as Show } from '../_tsup-dts-rollup';
-export { ShowProps_alias_1 as ShowProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Tab.d.ts

@@ -1,2 +0,0 @@
-export { Tab_alias_1 as Tab } from '../_tsup-dts-rollup';
-export { TabProps_alias_1 as TabProps } from '../_tsup-dts-rollup';

package/build/legacy/components/TabList.d.ts

@@ -1,2 +0,0 @@
-export { TabList_alias_1 as TabList } from '../_tsup-dts-rollup';
-export { TabListProps_alias_1 as TabListProps } from '../_tsup-dts-rollup';

package/build/legacy/components/TabPanel.d.ts

@@ -1,2 +0,0 @@
-export { TabPanel_alias_1 as TabPanel } from '../_tsup-dts-rollup';
-export { TabPanelProps_alias_1 as TabPanelProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Tag.d.ts

@@ -1,4 +0,0 @@
-export { Tag_alias_1 as Tag } from '../_tsup-dts-rollup';
-export { NonActionablePalette_alias_1 as NonActionablePalette } from '../_tsup-dts-rollup';
-export { TagProps_alias_1 as TagProps } from '../_tsup-dts-rollup';
-export { ClickableTagProps_alias_1 as ClickableTagProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Textarea.d.ts

@@ -1,2 +0,0 @@
-export { Textarea_alias_1 as Textarea } from '../_tsup-dts-rollup';
-export { TextareaProps_alias_1 as TextareaProps } from '../_tsup-dts-rollup';