@cerberus-design/react 0.5.2 → 0.6.0

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -1,16 +1,32 @@
 import type { AnchorHTMLAttributes } from 'react';
+import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
-import type { ConditionalValue } from '@cerberus/styled-system/types';
+import { CarbonIconType } from '@cerberus/icons';
+import { ChangeEvent } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
+import { fieldMessage } from '@cerberus/styled-system/recipes';
 import { HTMLAttributes } from 'react';
+import { iconButton } from '@cerberus/styled-system/recipes';
+import { input } from '@cerberus/styled-system/recipes';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { label } from '@cerberus/styled-system/recipes';
 import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
+import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
+import { RecipeVariantProps } from '@cerberus/styled-system/css';
+import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
+import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
 import { RefObject } from 'react';
+import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
+import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
+
+declare let $cerberusIcons: DefinedIcons;
+export { $cerberusIcons }
+export { $cerberusIcons as $cerberusIcons_alias_1 }
 
 /**
  * A component that allows the user to perform actions
@@ -24,20 +40,17 @@ export { Button as Button_alias_1 }
  * This module contains the Button component.
  * @module
  */
-declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    palette?: 'action' | 'danger';
-    usage?: 'filled' | 'outline' | 'text';
-    shape?: 'sharp' | 'rounded';
-}
+declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & RecipeVariantProps<typeof button>;
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
-declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'pill';
+declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+    gradient?: never;
+    palette?: never;
     onClick: () => void;
-    usage?: 'filled';
-}
+    shape: 'pill';
+    usage: 'filled';
+};
 export { ClickableTagProps }
 export { ClickableTagProps as ClickableTagProps_alias_1 }
 
@@ -53,10 +66,21 @@ declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
 export { CustomThemes as CustomThemes_alias_1 }
 
+export declare const defaultIcons: DefinedIcons;
+
 declare type DefaultThemes = 'cerberus';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
+export declare interface DefinedIcons {
+    invalid: CarbonIconType | ElementType;
+    toggleChecked: CarbonIconType | ElementType;
+}
+
+declare function defineIcons(icons: DefinedIcons): DefinedIcons;
+export { defineIcons }
+export { defineIcons as defineIcons_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -88,16 +112,24 @@ declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
 export { FieldMessage }
 export { FieldMessage as FieldMessage_alias_1 }
 
-/**
- * This module contains the FieldMessage component.
- * @module
- */
-declare interface FieldMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+declare interface FieldMessageBaseProps extends HTMLAttributes<HTMLParagraphElement> {
     id: string;
 }
+export { FieldMessageBaseProps }
+export { FieldMessageBaseProps as FieldMessageBaseProps_alias_1 }
+
+declare type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe;
 export { FieldMessageProps }
 export { FieldMessageProps as FieldMessageProps_alias_1 }
 
+/**
+ * This module contains the FieldMessage component.
+ * @module
+ */
+declare type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>;
+export { FieldMessageRecipe }
+export { FieldMessageRecipe as FieldMessageRecipe_alias_1 }
+
 declare function getPosition(position: Positions): GetPositionResult;
 export { getPosition }
 export { getPosition as getPosition_alias_1 }
@@ -117,14 +149,7 @@ declare function IconButton(props: IconButtonProps): JSX.Element;
 export { IconButton }
 export { IconButton as IconButton_alias_1 }
 
-declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    ariaLabel: string;
-    palette?: ButtonProps['palette'];
-    usage?: IconButtonUsage;
-    shape?: 'circle';
-    size?: 'sm' | 'lg';
-    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
-}
+declare type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps;
 export { IconButtonProps }
 export { IconButtonProps as IconButtonProps_alias_1 }
 
@@ -132,22 +157,38 @@ export { IconButtonProps as IconButtonProps_alias_1 }
  * This module contains the Icon Button component.
  * @module
  */
-declare type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>;
-export { IconButtonUsage }
-export { IconButtonUsage as IconButtonUsage_alias_1 }
+declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ariaLabel: string;
+    tooltipPosition?: Positions;
+}
+export { IconButtonRawProps }
+export { IconButtonRawProps as IconButtonRawProps_alias_1 }
+
+declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
+export { IconButtonRecipeProps }
+export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
 
-declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
+declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
     describedBy?: string;
     id: string;
-    size?: 'sm' | 'md' | 'lg';
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
 }
+export { InputBaseProps }
+export { InputBaseProps as InputBaseProps_alias_1 }
+
+declare type InputProps = InputBaseProps & InputRecipeProps;
 export { InputProps }
 export { InputProps as InputProps_alias_1 }
 
+declare type InputRecipeProps = RecipeVariantProps<typeof input>;
+export { InputRecipeProps }
+export { InputRecipeProps as InputRecipeProps_alias_1 }
+
 /**
  * A screen ready friendly label component.
  * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
@@ -163,17 +204,25 @@ declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
 export { Label }
 export { Label as Label_alias_1 }
 
-/**
- * This module contains the Label component.
- * @module
- */
-declare interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+declare interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
     htmlFor: string;
     hidden?: boolean;
 }
+export { LabelBaseProps }
+export { LabelBaseProps as LabelBaseProps_alias_1 }
+
+declare type LabelProps = LabelBaseProps & LabelRecipeProps;
 export { LabelProps }
 export { LabelProps as LabelProps_alias_1 }
 
+/**
+ * This module contains the Label component.
+ * @module
+ */
+declare type LabelRecipeProps = RecipeVariantProps<typeof label>;
+export { LabelRecipeProps }
+export { LabelRecipeProps as LabelRecipeProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }
@@ -267,18 +316,28 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
-/**
- * This module contains the tag component.
- * @module
- */
-declare type NonActionablePalette = ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
-export { NonActionablePalette }
-export { NonActionablePalette as NonActionablePalette_alias_1 }
-
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
+export { Radio }
+export { Radio as Radio_alias_1 }
+
+declare interface RadioBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    id: string;
+}
+export { RadioBaseProps }
+export { RadioBaseProps as RadioBaseProps_alias_1 }
+
+declare type RadioProps = RadioBaseProps & RadioRecipe;
+export { RadioProps }
+export { RadioProps as RadioProps_alias_1 }
+
+declare type RadioRecipe = RecipeVariantProps_2<typeof radio>;
+export { RadioRecipe }
+export { RadioRecipe as RadioRecipe_alias_1 }
+
 /**
  * Conditionally render its children or an optional fallback component
  * based on the SolidJS component.
@@ -300,6 +359,12 @@ declare interface ShowProps {
 export { ShowProps }
 export { ShowProps as ShowProps_alias_1 }
 
+declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
+    onClick?: never;
+};
+export { StaticTagProps }
+export { StaticTagProps as StaticTagProps_alias_1 }
+
 /**
  * The Tab component provides a tab element to be used in a TabList.
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
@@ -424,23 +489,28 @@ export { TabsProps as TabsProps_alias_1 }
 
 /**
  * The Tag component is used to display a meta descriptions.
+ * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)
  * @example
  * ```tsx
  * <Tag>Tag</Tag>
  * ```
  */
-declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+declare function Tag(props: PropsWithChildren<TagProps>): JSX.Element;
 export { Tag }
 export { Tag as Tag_alias_1 }
 
-declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    palette?: NonActionablePalette;
-    shape?: 'rounded' | 'pill';
-    usage?: 'filled' | 'outline';
-}
+declare type TagProps = StaticTagProps | ClickableTagProps;
 export { TagProps }
 export { TagProps as TagProps_alias_1 }
 
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare type TagRecipeProps = RecipeVariantProps_3<typeof tag>;
+export { TagRecipeProps }
+export { TagRecipeProps as TagRecipeProps_alias_1 }
+
 /**
  * A component that allows the user to input large blocks of text.
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx
@@ -453,10 +523,14 @@ export { Textarea as Textarea_alias_1 }
  * This module contains the Textarea component.
  * @module
  */
-declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
+declare interface TextareaBaseProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
     describedBy?: string;
     id: string;
 }
+export { TextareaBaseProps }
+export { TextareaBaseProps as TextareaBaseProps_alias_1 }
+
+declare type TextareaProps = InputRecipeProps & TextareaBaseProps;
 export { TextareaProps }
 export { TextareaProps as TextareaProps_alias_1 }
 
@@ -486,6 +560,29 @@ declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
 export { ThemeProvider }
 export { ThemeProvider as ThemeProvider_alias_1 }
 
+declare function Toggle(props: ToggleProps): JSX_2.Element;
+export { Toggle }
+export { Toggle as Toggle_alias_1 }
+
+declare type ToggleBase = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'value'> & {
+    describedBy?: string;
+    id: string;
+    value: string;
+};
+export { ToggleBase }
+export { ToggleBase as ToggleBase_alias_1 }
+
+declare interface ToggleHookReturn {
+    checked: string;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export { ToggleHookReturn }
+export { ToggleHookReturn as ToggleHookReturn_alias_1 }
+
+declare type ToggleProps = ToggleBase & ToggleVariantProps;
+export { ToggleProps }
+export { ToggleProps as ToggleProps_alias_1 }
+
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
@@ -512,4 +609,15 @@ declare function useThemeContext(): ThemeContextValue<DefaultThemes>;
 export { useThemeContext }
 export { useThemeContext as useThemeContext_alias_1 }
 
+declare function useToggle(options?: UseToggleOptions): ToggleHookReturn;
+export { useToggle }
+export { useToggle as useToggle_alias_1 }
+
+declare interface UseToggleOptions {
+    checked?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export { UseToggleOptions }
+export { UseToggleOptions as UseToggleOptions_alias_1 }
+
 export { }

package/build/legacy/aria-helpers/tabs.aria.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-BT2B5C7M.js";
+} from "../chunk-S7HBD2A7.js";
 import "../chunk-DQOYTLGB.js";
 export {
   useTabsKeyboardNavigation

package/build/legacy/{chunk-XFWARXLU.js → chunk-2ATICEW3.js}

@@ -23,4 +23,4 @@ function Button(props) {
 export {
   Button
 };
-//# sourceMappingURL=chunk-XFWARXLU.js.map
+//# sourceMappingURL=chunk-2ATICEW3.js.map

package/build/legacy/chunk-2ATICEW3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx, type RecipeVariantProps } 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 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  RecipeVariantProps<typeof button>\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,UAAmC;AAC5C,SAAS,cAAc;AAiBnB;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-3CBN7U25.js

@@ -0,0 +1,24 @@
+import {
+  defaultIcons
+} from "./chunk-5MNCW677.js";
+
+// src/config/defineIcons.ts
+function _validateIconsProperties(icons) {
+  if (!icons.invalid) {
+    throw new Error(
+      "The an invalid property must be defined in your custom icons library."
+    );
+  }
+}
+function defineIcons(icons) {
+  _validateIconsProperties(icons);
+  $cerberusIcons = icons;
+  return $cerberusIcons;
+}
+var $cerberusIcons = defaultIcons;
+
+export {
+  defineIcons,
+  $cerberusIcons
+};
+//# sourceMappingURL=chunk-3CBN7U25.js.map

package/build/legacy/chunk-3CBN7U25.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): DefinedIcons {\n  _validateIconsProperties(icons)\n  $cerberusIcons = icons\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons: DefinedIcons = defaultIcons\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAAmC;AAC7D,2BAAyB,KAAK;AAC9B,mBAAiB;AACjB,SAAO;AACT;AAIO,IAAI,iBAA+B;","names":[]}

package/build/{modern/chunk-R4H3352X.js → legacy/chunk-4O4QFF4S.js}

@@ -4,8 +4,7 @@ function Show(props) {
   const { when, children, fallback } = props;
   const condition = useMemo(() => when ?? false, [when]);
   return useMemo(() => {
-    if (condition)
-      return children;
+    if (condition) return children;
     return fallback ?? null;
   }, [condition, children, fallback]);
 }
@@ -13,4 +12,4 @@ function Show(props) {
 export {
   Show
 };
-//# sourceMappingURL=chunk-R4H3352X.js.map
+//# sourceMappingURL=chunk-4O4QFF4S.js.map

package/build/legacy/{chunk-R4H3352X.js.map → chunk-4O4QFF4S.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}
+{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/legacy/chunk-5MNCW677.js

@@ -0,0 +1,11 @@
+// src/config/cerbIcons.ts
+import { Checkmark, WarningFilled } from "@cerberus/icons";
+var defaultIcons = {
+  invalid: WarningFilled,
+  toggleChecked: Checkmark
+};
+
+export {
+  defaultIcons
+};
+//# sourceMappingURL=chunk-5MNCW677.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import { Checkmark, WarningFilled, type CarbonIconType } from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  invalid: CarbonIconType | ElementType\n  toggleChecked: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA,SAAS,WAAW,qBAA0C;AAQvD,IAAM,eAA6B;AAAA,EACxC,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/{modern/chunk-7BXBIDZB.js → legacy/chunk-5XNLWIZO.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 == null ? void 0 : 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-5XNLWIZO.js.map

package/build/legacy/chunk-5XNLWIZO.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,WAAU,+BAAO,YAAW;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-JA4IX7GN.js → legacy/chunk-6DIGPXAD.js}

@@ -1,6 +1,6 @@
 import {
   Show
-} from "./chunk-R4H3352X.js";
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/NavMenuLink.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -45,4 +45,4 @@ function NavMenuLink(props) {
 export {
   NavMenuLink
 };
-//# sourceMappingURL=chunk-JA4IX7GN.js.map
+//# sourceMappingURL=chunk-6DIGPXAD.js.map

package/build/legacy/chunk-734PGVLT.js

@@ -0,0 +1,58 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+import {
+  $cerberusIcons
+} from "./chunk-3CBN7U25.js";
+
+// src/components/Toggle.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import {
+  toggle
+} from "@cerberus-design/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Toggle(props) {
+  const { size, describedBy, ...nativeProps } = props;
+  const styles = toggle({ size });
+  const { invalid, ...state } = useFieldContext();
+  const Icon = $cerberusIcons.toggleChecked;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("group", styles.track, hstack()),
+      "data-checked": props.checked || props.defaultChecked,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...nativeProps,
+            ...state,
+            ...describedBy && { "aria-describedby": describedBy },
+            ...invalid && { "aria-invalid": true },
+            className: cx("peer", styles.input),
+            role: "switch",
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              styles.thumb,
+              vstack({
+                justify: "center"
+              })
+            ),
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-734PGVLT.js.map

package/build/legacy/chunk-734PGVLT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport {\n  toggle,\n  type ToggleVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  describedBy?: string\n  id: string\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\nexport function Toggle(props: ToggleProps) {\n  const { size, describedBy, ...nativeProps } = props\n  const styles = toggle({ size })\n  const { invalid, ...state } = useFieldContext()\n  const Icon = $cerberusIcons.toggleChecked\n\n  return (\n    <span\n      className={cx('group', styles.track, hstack())}\n      data-checked={props.checked || props.defaultChecked}\n    >\n      <input\n        {...nativeProps}\n        {...state}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', styles.input)}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        className={cx(\n          styles.thumb,\n          vstack({\n            justify: 'center',\n          }),\n        )}\n      >\n        <Icon />\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AAsBH,SAIE,KAJF;AAPG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-WSQTX34C.js → chunk-G2QMBSK5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Show
-} from "./chunk-R4H3352X.js";
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/NavMenuList.tsx
 import { useMemo } from "react";
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-WSQTX34C.js.map
+//# sourceMappingURL=chunk-G2QMBSK5.js.map

package/build/{modern/chunk-OXVNTE4A.js → legacy/chunk-HE3HFKYU.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-R4H3352X.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -11,16 +11,17 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Label(props) {
-  const { hidden, ...nativeProps } = props;
-  const { required } = useFieldContext();
+  const { hidden, size, ...nativeProps } = props;
+  const { required, disabled } = useFieldContext();
   const usage = hidden ? "hidden" : "visible";
   return /* @__PURE__ */ jsxs(
     "label",
     {
       ...nativeProps,
+      "data-disabled": disabled,
       className: cx(
         nativeProps.className,
-        label({ usage }),
+        label({ size, usage }),
         hstack({
           justify: "space-between"
         })
@@ -45,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-OXVNTE4A.js.map
+//# sourceMappingURL=chunk-HE3HFKYU.js.map

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

@@ -0,0 +1 @@
+{"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, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\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, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, 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,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,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-MJB3V6J4.js → chunk-RPZAPUCF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Show
-} from "./chunk-R4H3352X.js";
+} from "./chunk-4O4QFF4S.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
@@ -35,8 +35,7 @@ function NavMenuTrigger(props) {
   const AsSub = as;
   const handleClick = useCallback(
     (e) => {
-      if (onClick)
-        return onClick(e);
+      if (onClick) return onClick(e);
       onToggle();
     },
     [onClick, onToggle]
@@ -79,4 +78,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-MJB3V6J4.js.map
+//# sourceMappingURL=chunk-RPZAPUCF.js.map