@cerberus-design/react 0.5.2-next-b5db70c → 0.5.2-next-7d39ff1

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

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes } from 'react';
 import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import { CarbonIconType } from '@cerberus/icons';
+import { ChangeEvent } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -21,6 +22,7 @@ import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/style
 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 }
@@ -72,6 +74,7 @@ export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
     invalid: CarbonIconType | ElementType;
+    toggleChecked: CarbonIconType | ElementType;
 }
 
 declare function defineIcons(icons: DefinedIcons): DefinedIcons;
@@ -557,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 }
@@ -583,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/{chunk-LQD23PG3.js → chunk-3CBN7U25.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-RK5HK6UU.js";
+} from "./chunk-5MNCW677.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -21,4 +21,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-LQD23PG3.js.map
+//# sourceMappingURL=chunk-3CBN7U25.js.map

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/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/{modern/chunk-MYDNNVMZ.js → legacy/chunk-HE3HFKYU.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-MYDNNVMZ.js.map
+//# sourceMappingURL=chunk-HE3HFKYU.js.map

package/build/legacy/chunk-SCQVXJBT.js

@@ -0,0 +1,22 @@
+// src/hooks/useToggle.ts
+import { useCallback, useMemo, useState } from "react";
+function useToggle(options) {
+  const [checked, setChecked] = useState((options == null ? void 0 : options.checked) ?? "");
+  const onChange = options == null ? void 0 : options.onChange;
+  const handleChange = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      setChecked((prev) => {
+        return prev === target.value ? "" : target.value;
+      });
+      onChange == null ? void 0 : onChange(e);
+    },
+    [onChange]
+  );
+  return useMemo(() => ({ checked, handleChange }), [checked, handleChange]);
+}
+
+export {
+  useToggle
+};
+//# sourceMappingURL=chunk-SCQVXJBT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useToggle.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState, type ChangeEvent } from 'react'\n\nexport interface UseToggleOptions {\n  checked?: string\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n}\nexport interface ToggleHookReturn {\n  checked: string\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport function useToggle(options?: UseToggleOptions): ToggleHookReturn {\n  const [checked, setChecked] = useState<string>(options?.checked ?? '')\n  const onChange = options?.onChange\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const target = e.currentTarget as HTMLInputElement\n      setChecked((prev) => {\n        return prev === target.value ? '' : target.value\n      })\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  return useMemo(() => ({ checked, handleChange }), [checked, handleChange])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,gBAAkC;AAW1D,SAAS,UAAU,SAA8C;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,UAAiB,mCAAS,YAAW,EAAE;AACrE,QAAM,WAAW,mCAAS;AAE1B,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,iBAAW,CAAC,SAAS;AACnB,eAAO,SAAS,OAAO,QAAQ,KAAK,OAAO;AAAA,MAC7C,CAAC;AACD,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,QAAQ,OAAO,EAAE,SAAS,aAAa,IAAI,CAAC,SAAS,YAAY,CAAC;AAC3E;","names":[]}

package/build/legacy/{chunk-SZ2JQBP4.js → chunk-X4YQ27D5.js}

@@ -1,12 +1,12 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-LQD23PG3.js";
+} from "./chunk-3CBN7U25.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-SZ2JQBP4.js.map
+//# sourceMappingURL=chunk-X4YQ27D5.js.map

package/build/legacy/components/Input.js

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

package/build/legacy/components/Label.js

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

package/build/legacy/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/legacy/components/Toggle.js.map

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

package/build/legacy/config/cerbIcons.js

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-RK5HK6UU.js";
+} from "../chunk-5MNCW677.js";
 export {
   defaultIcons
 };

package/build/legacy/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-LQD23PG3.js";
-import "../chunk-RK5HK6UU.js";
+} from "../chunk-3CBN7U25.js";
+import "../chunk-5MNCW677.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/legacy/hooks/useToggle.js

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

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

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

package/build/legacy/index.js

@@ -1,3 +1,6 @@
+import {
+  Radio
+} from "./chunk-WE3JNSNO.js";
 import {
   Tab
 } from "./chunk-YA2UV2AB.js";
@@ -13,6 +16,12 @@ import {
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-734PGVLT.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -21,10 +30,14 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-SZ2JQBP4.js";
+} from "./chunk-X4YQ27D5.js";
 import {
   Label
-} from "./chunk-MYDNNVMZ.js";
+} from "./chunk-HE3HFKYU.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -42,13 +55,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  Radio
-} from "./chunk-WE3JNSNO.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -64,8 +70,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-LQD23PG3.js";
-import "./chunk-RK5HK6UU.js";
+} from "./chunk-3CBN7U25.js";
+import "./chunk-5MNCW677.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -74,8 +80,8 @@ import {
   useThemeContext
 } from "./chunk-SXXWC6UD.js";
 import {
-  Button
-} from "./chunk-2ATICEW3.js";
+  useToggle
+} from "./chunk-SCQVXJBT.js";
 export {
   $cerberusIcons,
   Button,
@@ -100,6 +106,7 @@ export {
   Tag,
   Textarea,
   ThemeProvider,
+  Toggle,
   createNavTriggerProps,
   defineIcons,
   getPosition,
@@ -108,6 +115,7 @@ export {
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,
-  useThemeContext
+  useThemeContext,
+  useToggle
 };
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes } from 'react';
 import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import { CarbonIconType } from '@cerberus/icons';
+import { ChangeEvent } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -21,6 +22,7 @@ import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/style
 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 }
@@ -72,6 +74,7 @@ export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
     invalid: CarbonIconType | ElementType;
+    toggleChecked: CarbonIconType | ElementType;
 }
 
 declare function defineIcons(icons: DefinedIcons): DefinedIcons;
@@ -557,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 }
@@ -583,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/modern/{chunk-LQD23PG3.js → chunk-3CBN7U25.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-RK5HK6UU.js";
+} from "./chunk-5MNCW677.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -21,4 +21,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-LQD23PG3.js.map
+//# sourceMappingURL=chunk-3CBN7U25.js.map

package/build/modern/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/modern/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-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/modern/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-MYDNNVMZ.js → modern/chunk-HE3HFKYU.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-MYDNNVMZ.js.map
+//# sourceMappingURL=chunk-HE3HFKYU.js.map

package/build/modern/chunk-QEA6N6TN.js

@@ -0,0 +1,22 @@
+// src/hooks/useToggle.ts
+import { useCallback, useMemo, useState } from "react";
+function useToggle(options) {
+  const [checked, setChecked] = useState(options?.checked ?? "");
+  const onChange = options?.onChange;
+  const handleChange = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      setChecked((prev) => {
+        return prev === target.value ? "" : target.value;
+      });
+      onChange?.(e);
+    },
+    [onChange]
+  );
+  return useMemo(() => ({ checked, handleChange }), [checked, handleChange]);
+}
+
+export {
+  useToggle
+};
+//# sourceMappingURL=chunk-QEA6N6TN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useToggle.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState, type ChangeEvent } from 'react'\n\nexport interface UseToggleOptions {\n  checked?: string\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n}\nexport interface ToggleHookReturn {\n  checked: string\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport function useToggle(options?: UseToggleOptions): ToggleHookReturn {\n  const [checked, setChecked] = useState<string>(options?.checked ?? '')\n  const onChange = options?.onChange\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const target = e.currentTarget as HTMLInputElement\n      setChecked((prev) => {\n        return prev === target.value ? '' : target.value\n      })\n      onChange?.(e)\n    },\n    [onChange],\n  )\n\n  return useMemo(() => ({ checked, handleChange }), [checked, handleChange])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,gBAAkC;AAW1D,SAAS,UAAU,SAA8C;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiB,SAAS,WAAW,EAAE;AACrE,QAAM,WAAW,SAAS;AAE1B,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,iBAAW,CAAC,SAAS;AACnB,eAAO,SAAS,OAAO,QAAQ,KAAK,OAAO;AAAA,MAC7C,CAAC;AACD,iBAAW,CAAC;AAAA,IACd;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,QAAQ,OAAO,EAAE,SAAS,aAAa,IAAI,CAAC,SAAS,YAAY,CAAC;AAC3E;","names":[]}

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

@@ -1,12 +1,12 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-LQD23PG3.js";
+} from "./chunk-3CBN7U25.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-SZ2JQBP4.js.map
+//# sourceMappingURL=chunk-X4YQ27D5.js.map

package/build/modern/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-SZ2JQBP4.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-X4YQ27D5.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-LQD23PG3.js";
-import "../chunk-RK5HK6UU.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-MYDNNVMZ.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-HE3HFKYU.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

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

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-RK5HK6UU.js";
+} from "../chunk-5MNCW677.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-LQD23PG3.js";
-import "../chunk-RK5HK6UU.js";
+} from "../chunk-3CBN7U25.js";
+import "../chunk-5MNCW677.js";
 export {
   $cerberusIcons,
   defineIcons

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,3 +1,6 @@
+import {
+  Radio
+} from "./chunk-WE3JNSNO.js";
 import {
   Tab
 } from "./chunk-SUP7U42W.js";
@@ -13,6 +16,12 @@ import {
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-734PGVLT.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -21,10 +30,14 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-SZ2JQBP4.js";
+} from "./chunk-X4YQ27D5.js";
 import {
   Label
-} from "./chunk-MYDNNVMZ.js";
+} from "./chunk-HE3HFKYU.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -42,13 +55,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  Radio
-} from "./chunk-WE3JNSNO.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -64,8 +70,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-LQD23PG3.js";
-import "./chunk-RK5HK6UU.js";
+} from "./chunk-3CBN7U25.js";
+import "./chunk-5MNCW677.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -74,8 +80,8 @@ import {
   useThemeContext
 } from "./chunk-SXXWC6UD.js";
 import {
-  Button
-} from "./chunk-2ATICEW3.js";
+  useToggle
+} from "./chunk-QEA6N6TN.js";
 export {
   $cerberusIcons,
   Button,
@@ -100,6 +106,7 @@ export {
   Tag,
   Textarea,
   ThemeProvider,
+  Toggle,
   createNavTriggerProps,
   defineIcons,
   getPosition,
@@ -108,6 +115,7 @@ export {
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,
-  useThemeContext
+  useThemeContext,
+  useToggle
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.5.2-next-b5db70c",
+  "version": "0.5.2-next-7d39ff1",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -22,7 +22,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.5.2-next-b5db70c"
+    "@cerberus-design/styled-system": "0.5.2-next-7d39ff1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,10 +1,12 @@
-import { WarningFilled, type CarbonIconType } from '@cerberus/icons'
+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/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

@@ -19,6 +19,7 @@ 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
@@ -31,6 +32,7 @@ export * from './context/theme'
 // hooks
 
 export * from './hooks/useTheme'
+export * from './hooks/useToggle'
 
 // aria-helpers
 

package/build/legacy/chunk-RK5HK6UU.js

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

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

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

package/build/modern/chunk-RK5HK6UU.js

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

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

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