@cerberus-design/react 0.0.1-next-f49bb60 → 0.1.0-next-1ab8194

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

@@ -14,6 +14,10 @@ declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
 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';
@@ -62,6 +66,31 @@ declare interface GetPositionResult {
     bottom: string;
 }
 
+/**
+ * A component that allows the user to perform actions using an icon
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ */
+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';
+}
+export { IconButtonProps }
+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 const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

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

@@ -14,6 +14,10 @@ declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
 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';
@@ -62,6 +66,31 @@ declare interface GetPositionResult {
     bottom: string;
 }
 
+/**
+ * A component that allows the user to perform actions using an icon
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ */
+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';
+}
+export { IconButtonProps }
+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 const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/legacy/components/Button.cjs.map

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

package/build/legacy/components/Button.js.map

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

package/build/legacy/components/IconButton.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/IconButton.tsx
+var IconButton_exports = {};
+__export(IconButton_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(IconButton_exports);
+var import_css = require("@cerberus/styled-system/css.cjs");
+var import_recipes = require("@cerberus/styled-system/recipes.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.iconButton)({
+          palette,
+          usage
+        })
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});
+//# sourceMappingURL=IconButton.cjs.map

package/build/legacy/components/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAA2B;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,2BAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

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

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

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

package/build/legacy/components/IconButton.js

@@ -0,0 +1,25 @@
+// src/components/IconButton.tsx
+import { cx } from "@cerberus/styled-system/css.js";
+import { iconButton } from "@cerberus/styled-system/recipes.js";
+import { jsx } from "react/jsx-runtime";
+function IconButton(props) {
+  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: cx(
+        nativeProps.className,
+        iconButton({
+          palette,
+          usage
+        })
+      )
+    }
+  );
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/build/legacy/components/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/index.cjs

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./components/Button.cjs"), module.exports);
+__reExport(src_exports, require("./components/IconButton.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuTrigger.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuList.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuLink.cjs"), module.exports);
@@ -31,6 +32,7 @@ __reExport(src_exports, require("./types.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./components/Button.cjs"),
+  ...require("./components/IconButton.cjs"),
   ...require("./components/NavMenuTrigger.cjs"),
   ...require("./components/NavMenuList.cjs"),
   ...require("./components/NavMenuLink.cjs"),

package/build/legacy/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// components\n\nexport * from './components/Button'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAEA,wBAAc,oCAFd;AAGA,wBAAc,4CAHd;AAIA,wBAAc,yCAJd;AAKA,wBAAc,yCALd;AAMA,wBAAc,kCANd;AAUA,wBAAc,gCAVd;AAWA,wBAAc,kCAXd;AAYA,wBAAc,gCAZd;AAgBA,wBAAc,iCAhBd;AAoBA,wBAAc,6CApBd;AAwBA,wBAAc,wBAxBd;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/IconButton'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAOA,wBAAc,oCAPd;AAQA,wBAAc,wCARd;AASA,wBAAc,4CATd;AAUA,wBAAc,yCAVd;AAWA,wBAAc,yCAXd;AAYA,wBAAc,kCAZd;AAgBA,wBAAc,gCAhBd;AAiBA,wBAAc,kCAjBd;AAkBA,wBAAc,gCAlBd;AAsBA,wBAAc,iCAtBd;AA0BA,wBAAc,6CA1Bd;AA8BA,wBAAc,wBA9Bd;","names":[]}

package/build/legacy/index.d.cts

@@ -1,5 +1,8 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { IconButton } from './_tsup-dts-rollup';
+export { IconButtonUsage } from './_tsup-dts-rollup';
+export { IconButtonProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/legacy/index.d.ts

@@ -1,5 +1,8 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { IconButton } from './_tsup-dts-rollup';
+export { IconButtonUsage } from './_tsup-dts-rollup';
+export { IconButtonProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/legacy/index.js

@@ -1,5 +1,6 @@
 // src/index.ts
 export * from "./components/Button.js";
+export * from "./components/IconButton.js";
 export * from "./components/NavMenuTrigger.js";
 export * from "./components/NavMenuList.js";
 export * from "./components/NavMenuLink.js";

package/build/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// components\n\nexport * from './components/Button'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAId,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/IconButton'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";AAOA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAId,cAAc;","names":[]}

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

@@ -14,6 +14,10 @@ declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
 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';
@@ -62,6 +66,31 @@ declare interface GetPositionResult {
     bottom: string;
 }
 
+/**
+ * A component that allows the user to perform actions using an icon
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ */
+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';
+}
+export { IconButtonProps }
+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 const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

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

@@ -14,6 +14,10 @@ declare function Button(props: ButtonProps): JSX.Element;
 export { Button }
 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';
@@ -62,6 +66,31 @@ declare interface GetPositionResult {
     bottom: string;
 }
 
+/**
+ * A component that allows the user to perform actions using an icon
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ */
+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';
+}
+export { IconButtonProps }
+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 const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/modern/components/Button.cjs.map

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

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

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

package/build/modern/components/IconButton.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/IconButton.tsx
+var IconButton_exports = {};
+__export(IconButton_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(IconButton_exports);
+var import_css = require("@cerberus/styled-system/css.cjs");
+var import_recipes = require("@cerberus/styled-system/recipes.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.iconButton)({
+          palette,
+          usage
+        })
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});
+//# sourceMappingURL=IconButton.cjs.map

package/build/modern/components/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAA2B;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,2BAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/IconButton.d.cts

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

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

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

package/build/modern/components/IconButton.js

@@ -0,0 +1,25 @@
+// src/components/IconButton.tsx
+import { cx } from "@cerberus/styled-system/css.js";
+import { iconButton } from "@cerberus/styled-system/recipes.js";
+import { jsx } from "react/jsx-runtime";
+function IconButton(props) {
+  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: cx(
+        nativeProps.className,
+        iconButton({
+          palette,
+          usage
+        })
+      )
+    }
+  );
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/index.cjs

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./components/Button.cjs"), module.exports);
+__reExport(src_exports, require("./components/IconButton.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuTrigger.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuList.cjs"), module.exports);
 __reExport(src_exports, require("./components/NavMenuLink.cjs"), module.exports);
@@ -31,6 +32,7 @@ __reExport(src_exports, require("./types.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./components/Button.cjs"),
+  ...require("./components/IconButton.cjs"),
   ...require("./components/NavMenuTrigger.cjs"),
   ...require("./components/NavMenuList.cjs"),
   ...require("./components/NavMenuLink.cjs"),

package/build/modern/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// components\n\nexport * from './components/Button'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAEA,wBAAc,oCAFd;AAGA,wBAAc,4CAHd;AAIA,wBAAc,yCAJd;AAKA,wBAAc,yCALd;AAMA,wBAAc,kCANd;AAUA,wBAAc,gCAVd;AAWA,wBAAc,kCAXd;AAYA,wBAAc,gCAZd;AAgBA,wBAAc,iCAhBd;AAoBA,wBAAc,6CApBd;AAwBA,wBAAc,wBAxBd;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/IconButton'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAOA,wBAAc,oCAPd;AAQA,wBAAc,wCARd;AASA,wBAAc,4CATd;AAUA,wBAAc,yCAVd;AAWA,wBAAc,yCAXd;AAYA,wBAAc,kCAZd;AAgBA,wBAAc,gCAhBd;AAiBA,wBAAc,kCAjBd;AAkBA,wBAAc,gCAlBd;AAsBA,wBAAc,iCAtBd;AA0BA,wBAAc,6CA1Bd;AA8BA,wBAAc,wBA9Bd;","names":[]}

package/build/modern/index.d.cts

@@ -1,5 +1,8 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { IconButton } from './_tsup-dts-rollup';
+export { IconButtonUsage } from './_tsup-dts-rollup';
+export { IconButtonProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/modern/index.d.ts

@@ -1,5 +1,8 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { IconButton } from './_tsup-dts-rollup';
+export { IconButtonUsage } from './_tsup-dts-rollup';
+export { IconButtonProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -1,5 +1,6 @@
 // src/index.ts
 export * from "./components/Button.js";
+export * from "./components/IconButton.js";
 export * from "./components/NavMenuTrigger.js";
 export * from "./components/NavMenuList.js";
 export * from "./components/NavMenuLink.js";

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// components\n\nexport * from './components/Button'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAId,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/IconButton'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\n\n// shared types\n\nexport * from './types'\n"],"mappings":";AAOA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAId,cAAc;AAId,cAAc;","names":[]}

package/package.json

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

package/src/components/Button.tsx

@@ -2,6 +2,11 @@ import type { ButtonHTMLAttributes } from 'react'
 import { cx } from '@cerberus/styled-system/css'
 import { button } from '@cerberus/styled-system/recipes'
 
+/**
+ * This module contains the Button component.
+ * @module
+ */
+
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   palette?: 'action' | 'danger'
   usage?: 'filled' | 'outline' | 'text'

package/src/components/IconButton.tsx

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes } from 'react'
+import { cx } from '@cerberus/styled-system/css'
+import { iconButton } from '@cerberus/styled-system/recipes'
+import type { ButtonProps } from './Button'
+
+/**
+ * This module contains the Icon Button component.
+ * @module
+ */
+
+export type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>
+export interface IconButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ariaLabel: string
+  palette?: ButtonProps['palette']
+  usage?: IconButtonUsage
+  shape?: 'circle'
+}
+
+/**
+ * A component that allows the user to perform actions using an icon
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ */
+export function IconButton(props: IconButtonProps): JSX.Element {
+  const { ariaLabel, palette, usage, ...nativeProps } = props
+  return (
+    <button
+      {...nativeProps}
+      aria-label={ariaLabel ?? 'Icon Button'}
+      className={cx(
+        nativeProps.className,
+        iconButton({
+          palette,
+          usage,
+        }),
+      )}
+    />
+  )
+}

package/src/index.ts

@@ -1,6 +1,12 @@
+/**
+ * This module is the entry point for the Cerberus React package.
+ * @module
+ */
+
 // components
 
 export * from './components/Button'
+export * from './components/IconButton'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'