@cerberus-design/react 0.5.2 → 0.6.0

package/build/modern/{chunk-BT2B5C7M.js → chunk-S7HBD2A7.js}

@@ -18,8 +18,7 @@ function useTabsKeyboardNavigation() {
       const index = activeTab === -1 ? tabs.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
       const nextIndex = getNextIndex(index, tabs.current.length);
       const prevIndex = getPrevIndex(index, tabs.current.length);
-      if (index === -1)
-        return;
+      if (index === -1) return;
       switch (event.key) {
         case "ArrowLeft":
           event.preventDefault();
@@ -62,4 +61,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-BT2B5C7M.js.map
+//# sourceMappingURL=chunk-S7HBD2A7.js.map

package/build/modern/{chunk-BT2B5C7M.js.map → chunk-S7HBD2A7.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACV,KAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU;AAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,eAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,KAAK,QAAQ,SAAS,CAAC;AACpC,eAAK,QAAQ,KAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAAC,KAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,aAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AAGpC,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC5C;AAEA,SAAS,aAAa,OAAe,QAAgB;AACnD,SAAO,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC5C;AAEO,SAAS,4BAA4B;AAC1C,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,QACJ,cAAc,KACV,KAAK,QAAQ,UAAU,CAAC,QAAQ,IAAI,iBAAiB,MAAM,IAC3D;AACN,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AACzD,YAAM,YAAY,aAAa,OAAO,KAAK,QAAQ,MAAM;AAGzD,UAAI,UAAU,GAAI;AAElB,cAAQ,MAAM,KAAK;AAAA,QACjB,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,SAAS;AACtB,eAAK,QAAQ,SAAS,EAAE,MAAM;AAC9B;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,CAAC;AACd,eAAK,QAAQ,CAAC,EAAE,MAAM;AACtB;AAAA,QACF,KAAK;AACH,gBAAM,eAAe;AACrB,uBAAa,KAAK,QAAQ,SAAS,CAAC;AACpC,eAAK,QAAQ,KAAK,QAAQ,SAAS,CAAC,EAAE,MAAM;AAC5C;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,OAAO,CAAC;AAE5B,SAAO;AAAA,IACL,KAAK,CAAC,QAA2B;AAC/B,UAAI,OAAO,CAAC,KAAK,QAAQ,SAAS,GAAG,GAAG;AACtC,aAAK,QAAQ,KAAK,GAAG;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/{legacy/chunk-NIMWIOIA.js → modern/chunk-SLHX5K6I.js}

@@ -26,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-NIMWIOIA.js.map
+//# sourceMappingURL=chunk-SLHX5K6I.js.map

package/build/modern/chunk-SLHX5K6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { Positions } from '../types'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  tooltipPosition?: Positions\n}\nexport type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>\nexport type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps\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,UAAmC;AAC5C,SAAS,kBAAkB;AAuBvB;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-7BXBIDZB.js → modern/chunk-SLIOCQBZ.js}

@@ -1,6 +1,6 @@
 import {
   Show
-} from "./chunk-R4H3352X.js";
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Tag.tsx
 import { Close } from "@cerberus/icons";
@@ -8,14 +8,11 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
-  const { palette, shape: initShape, onClick, usage, ...nativeProps } = props;
+  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 /* @__PURE__ */ jsxs(
     "span",
     {
@@ -23,6 +20,7 @@ function Tag(props) {
       className: cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage
@@ -48,8 +46,13 @@ function Tag(props) {
     }
   );
 }
+var closableCss = css({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
 
 export {
   Tag
 };
-//# sourceMappingURL=chunk-7BXBIDZB.js.map
+//# sourceMappingURL=chunk-SLIOCQBZ.js.map

package/build/modern/chunk-SLIOCQBZ.js.map

@@ -0,0 +1 @@
+{"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 { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\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\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;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;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/modern/{chunk-IQP6HSC4.js → chunk-SUP7U42W.js}

@@ -1,6 +1,6 @@
 import {
   useTabsKeyboardNavigation
-} from "./chunk-BT2B5C7M.js";
+} from "./chunk-S7HBD2A7.js";
 import {
   useTabsContext
 } from "./chunk-DQOYTLGB.js";
@@ -122,4 +122,4 @@ var btnStyles = css({
 export {
   Tab
 };
-//# sourceMappingURL=chunk-IQP6HSC4.js.map
+//# sourceMappingURL=chunk-SUP7U42W.js.map

package/build/modern/{chunk-5TBINKAO.js → chunk-TCO46FK7.js}

@@ -33,4 +33,4 @@ function Textarea(props) {
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-5TBINKAO.js.map
+//# sourceMappingURL=chunk-TCO46FK7.js.map

package/build/modern/chunk-TCO46FK7.js.map

@@ -0,0 +1 @@
+{"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'\nimport type { InputRecipeProps } from './Input'\n\n/**\n * This module contains the Textarea component.\n * @module\n */\n\nexport interface TextareaBaseProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {\n  describedBy?: string\n  id: string\n}\nexport type TextareaProps = InputRecipeProps & TextareaBaseProps\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;AAyBlB;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/modern/{chunk-YVUZSAJG.js → chunk-VGHVH2T3.js}

@@ -21,4 +21,4 @@ function FieldMessage(props) {
 export {
   FieldMessage
 };
-//# sourceMappingURL=chunk-YVUZSAJG.js.map
+//# sourceMappingURL=chunk-VGHVH2T3.js.map

package/build/modern/chunk-VGHVH2T3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } 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 type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>\nexport interface FieldMessageBaseProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe\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,UAAmC;AAC5C,SAAS,oBAAoB;AAgCzB;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/modern/chunk-WE3JNSNO.js

@@ -0,0 +1,33 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/Radio.tsx
+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 { jsx, jsxs } from "react/jsx-runtime";
+function Radio(props) {
+  const { children, size, ...nativeProps } = props;
+  const { invalid, ...state } = useFieldContext();
+  const styles = radio({ size });
+  return /* @__PURE__ */ jsxs("div", { className: cx("group", hstack(), styles.root), tabIndex: 0, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...nativeProps,
+        ...state,
+        ...invalid && { "aria-invalid": true },
+        className: cx(nativeProps.className, styles.input),
+        tabIndex: -1,
+        type: "radio"
+      }
+    ),
+    children
+  ] });
+}
+
+export {
+  Radio
+};
+//# sourceMappingURL=chunk-WE3JNSNO.js.map

package/build/modern/chunk-WE3JNSNO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack } from '@cerberus-design/styled-system/patterns'\nimport { radio } from '@cerberus-design/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus-design/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const { invalid, ...state } = useFieldContext()\n  const styles = radio({ size })\n\n  return (\n    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n      <input\n        {...nativeProps}\n        {...state}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AAkBlB,SACE,KADF;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,OAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/build/modern/{chunk-LD5ZV46F.js → chunk-X4YQ27D5.js}

@@ -1,20 +1,25 @@
-import {
-  Show
-} from "./chunk-R4H3352X.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  $cerberusIcons
+} from "./chunk-3CBN7U25.js";
 
 // src/components/Input.tsx
-import { WarningFilled } from "@cerberus/icons";
 import { input } from "@cerberus/styled-system/recipes";
 import { cx } from "@cerberus/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input(props) {
-  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 /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22,14 +27,16 @@ function Input(props) {
         ...fieldStates,
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
         className: cx("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 export {
   Input
 };
-//# sourceMappingURL=chunk-LD5ZV46F.js.map
+//# sourceMappingURL=chunk-X4YQ27D5.js.map

package/build/modern/chunk-X4YQ27D5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n  const { invalid: InvalidIcon } = $cerberusIcons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,UAAmC;AAuBxC,SAEI,KAFJ;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;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,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-SVZU6LPF.js → chunk-YJCWUN33.js}

@@ -1,6 +1,6 @@
 import {
   Show
-} from "./chunk-R4H3352X.js";
+} from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
 } from "./chunk-DQOYTLGB.js";
@@ -40,4 +40,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-SVZU6LPF.js.map
+//# sourceMappingURL=chunk-YJCWUN33.js.map

package/build/modern/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-XFWARXLU.js";
+} from "../chunk-2ATICEW3.js";
 export {
   Button
 };

package/build/modern/components/FieldMessage.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   FieldMessage
-} from "../chunk-YVUZSAJG.js";
+} from "../chunk-VGHVH2T3.js";
 import "../chunk-ZAU4JVLL.js";
 export {
   FieldMessage

package/build/modern/components/IconButton.js

@@ -1,6 +1,6 @@
 import {
   IconButton
-} from "../chunk-NIMWIOIA.js";
+} from "../chunk-SLHX5K6I.js";
 export {
   IconButton
 };

package/build/modern/components/Input.js

@@ -1,9 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-LD5ZV46F.js";
-import "../chunk-R4H3352X.js";
+} from "../chunk-X4YQ27D5.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-3CBN7U25.js";
+import "../chunk-5MNCW677.js";
 export {
   Input
 };

package/build/modern/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-OXVNTE4A.js";
-import "../chunk-R4H3352X.js";
+} from "../chunk-HE3HFKYU.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

package/build/modern/components/NavMenuLink.js

@@ -1,7 +1,7 @@
 import {
   NavMenuLink
-} from "../chunk-JA4IX7GN.js";
-import "../chunk-R4H3352X.js";
+} from "../chunk-6DIGPXAD.js";
+import "../chunk-4O4QFF4S.js";
 export {
   NavMenuLink
 };

package/build/modern/components/NavMenuList.js

@@ -2,9 +2,9 @@
 import {
   NavMenuList,
   getPosition
-} from "../chunk-WSQTX34C.js";
+} from "../chunk-G2QMBSK5.js";
 import "../chunk-KJUCHZHV.js";
-import "../chunk-R4H3352X.js";
+import "../chunk-4O4QFF4S.js";
 export {
   NavMenuList,
   getPosition

package/build/modern/components/NavMenuTrigger.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-MJB3V6J4.js";
+} from "../chunk-RPZAPUCF.js";
 import "../chunk-KJUCHZHV.js";
-import "../chunk-R4H3352X.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-JF76VIL3.js";
 export {
   NavMenuTrigger

package/build/modern/components/Radio.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Radio
+} from "../chunk-WE3JNSNO.js";
+import "../chunk-ZAU4JVLL.js";
+export {
+  Radio
+};
+//# sourceMappingURL=Radio.js.map

package/build/modern/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Show.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Show
-} from "../chunk-R4H3352X.js";
+} from "../chunk-4O4QFF4S.js";
 export {
   Show
 };

package/build/modern/components/Tab.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Tab
-} from "../chunk-IQP6HSC4.js";
-import "../chunk-BT2B5C7M.js";
+} from "../chunk-SUP7U42W.js";
+import "../chunk-S7HBD2A7.js";
 import "../chunk-DQOYTLGB.js";
 export {
   Tab

package/build/modern/components/TabPanel.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-SVZU6LPF.js";
-import "../chunk-R4H3352X.js";
+} from "../chunk-YJCWUN33.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-DQOYTLGB.js";
 export {
   TabPanel

package/build/modern/components/Tag.js

@@ -1,7 +1,7 @@
 import {
   Tag
-} from "../chunk-7BXBIDZB.js";
-import "../chunk-R4H3352X.js";
+} from "../chunk-SLIOCQBZ.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Tag
 };

package/build/modern/components/Textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Textarea
-} from "../chunk-5TBINKAO.js";
+} from "../chunk-TCO46FK7.js";
 import "../chunk-ZAU4JVLL.js";
 export {
   Textarea

package/build/modern/components/Toggle.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Toggle
+} from "../chunk-734PGVLT.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-3CBN7U25.js";
+import "../chunk-5MNCW677.js";
+export {
+  Toggle
+};
+//# sourceMappingURL=Toggle.js.map

package/build/modern/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/config/cerbIcons.js

@@ -0,0 +1,7 @@
+import {
+  defaultIcons
+} from "../chunk-5MNCW677.js";
+export {
+  defaultIcons
+};
+//# sourceMappingURL=cerbIcons.js.map

package/build/modern/config/cerbIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/config/defineIcons.js

@@ -0,0 +1,10 @@
+import {
+  $cerberusIcons,
+  defineIcons
+} from "../chunk-3CBN7U25.js";
+import "../chunk-5MNCW677.js";
+export {
+  $cerberusIcons,
+  defineIcons
+};
+//# sourceMappingURL=defineIcons.js.map

package/build/modern/config/defineIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/hooks/useToggle.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useToggle
+} from "../chunk-QEA6N6TN.js";
+export {
+  useToggle
+};
+//# sourceMappingURL=useToggle.js.map

package/build/modern/hooks/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -1,53 +1,77 @@
+import {
+  Radio
+} from "./chunk-WE3JNSNO.js";
+import {
+  Tab
+} from "./chunk-SUP7U42W.js";
+import {
+  TabList
+} from "./chunk-5GSXIYD3.js";
 import {
   TabPanel
-} from "./chunk-SVZU6LPF.js";
+} from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-7BXBIDZB.js";
+} from "./chunk-SLIOCQBZ.js";
 import {
   Textarea
-} from "./chunk-5TBINKAO.js";
+} from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-734PGVLT.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-LD5ZV46F.js";
+} from "./chunk-X4YQ27D5.js";
 import {
   Label
-} from "./chunk-OXVNTE4A.js";
+} from "./chunk-HE3HFKYU.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   NavMenuLink
-} from "./chunk-JA4IX7GN.js";
+} from "./chunk-6DIGPXAD.js";
 import {
   NavMenuList,
   getPosition
-} from "./chunk-WSQTX34C.js";
+} from "./chunk-G2QMBSK5.js";
 import {
   NavMenuTrigger
-} from "./chunk-MJB3V6J4.js";
+} from "./chunk-RPZAPUCF.js";
 import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
 import {
   Show
-} from "./chunk-R4H3352X.js";
-import {
-  Tab
-} from "./chunk-IQP6HSC4.js";
-import {
-  TabList
-} from "./chunk-5GSXIYD3.js";
+} from "./chunk-4O4QFF4S.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-BT2B5C7M.js";
+} from "./chunk-S7HBD2A7.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
 } from "./chunk-DQOYTLGB.js";
+import {
+  $cerberusIcons,
+  defineIcons
+} from "./chunk-3CBN7U25.js";
+import "./chunk-5MNCW677.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -56,19 +80,10 @@ import {
   useThemeContext
 } from "./chunk-SXXWC6UD.js";
 import {
-  Button
-} from "./chunk-XFWARXLU.js";
-import {
-  FieldMessage
-} from "./chunk-YVUZSAJG.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
-import {
-  IconButton
-} from "./chunk-NIMWIOIA.js";
+  useToggle
+} from "./chunk-QEA6N6TN.js";
 export {
+  $cerberusIcons,
   Button,
   Field,
   FieldMessage,
@@ -80,6 +95,7 @@ export {
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Radio,
   Show,
   THEME_KEY,
   Tab,
@@ -90,13 +106,16 @@ export {
   Tag,
   Textarea,
   ThemeProvider,
+  Toggle,
   createNavTriggerProps,
+  defineIcons,
   getPosition,
   useFieldContext,
   useNavMenuContext,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,
-  useThemeContext
+  useThemeContext,
+  useToggle
 };
 //# sourceMappingURL=index.js.map

package/build/modern/noExternals.d.ts

@@ -0,0 +1 @@
+export {};