@cerberus-design/react 0.3.2 → 0.4.0-next-127992f

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

@@ -9,6 +9,8 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { Sentiment } from '@cerberus/panda-preset';
+import type { TextareaHTMLAttributes } from 'react';
 
 /**
  * A component that allows the user to perform actions
@@ -30,6 +32,15 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'pill';
+    onClick: () => void;
+    usage?: 'filled';
+}
+export { ClickableTagProps }
+export { ClickableTagProps as ClickableTagProps_alias_1 }
+
 declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
@@ -111,6 +122,8 @@ declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
     palette?: ButtonProps['palette'];
     usage?: IconButtonUsage;
     shape?: 'circle';
+    size?: 'sm' | 'lg';
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
 export { IconButtonProps }
 export { IconButtonProps as IconButtonProps_alias_1 }
@@ -401,6 +414,48 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'rounded' | 'pill';
+    usage?: 'filled' | 'outline';
+}
+export { TagProps }
+export { TagProps as TagProps_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
+ */
+declare function Textarea(props: TextareaProps): JSX.Element;
+export { Textarea }
+export { Textarea as Textarea_alias_1 }
+
+/**
+ * This module contains the Textarea component.
+ * @module
+ */
+declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
+    describedBy?: string;
+    id: string;
+}
+export { TextareaProps }
+export { TextareaProps as TextareaProps_alias_1 }
+
 declare const THEME_KEY = "cerberus-theme";
 export { THEME_KEY }
 export { THEME_KEY as THEME_KEY_alias_1 }

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

@@ -0,0 +1,36 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/Textarea.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { input } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Textarea(props) {
+  const { describedBy, ...nativeProps } = props;
+  const { invalid, ...fieldState } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...nativeProps,
+      ...fieldState,
+      ...describedBy && { "aria-describedby": describedBy },
+      ...invalid && { "aria-invalid": true },
+      className: cx(
+        props.className,
+        input().input,
+        css({
+          pxi: "2",
+          py: "2",
+          resize: "vertical"
+        })
+      ),
+      rows: 4
+    }
+  );
+}
+
+export {
+  Textarea
+};
+//# sourceMappingURL=chunk-5TBINKAO.js.map

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

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

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

@@ -3,17 +3,20 @@ import { cx } from "@cerberus/styled-system/css";
 import { iconButton } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function IconButton(props) {
-  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...nativeProps,
+      "data-tooltip": true,
+      "data-position": props.tooltipPosition ?? "top",
       "aria-label": ariaLabel ?? "Icon Button",
       className: cx(
         nativeProps.className,
         iconButton({
           palette,
-          usage
+          usage,
+          size
         })
       )
     }
@@ -23,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-BPIYUAYS.js.map
+//# sourceMappingURL=chunk-NIMWIOIA.js.map

package/build/legacy/chunk-NIMWIOIA.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  size?: 'sm' | 'lg'\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA0BvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-ULXTQXVY.js

@@ -0,0 +1,61 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/Tag.tsx
+import { Close } from "@cerberus/icons";
+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: initPalette,
+    shape: initShape,
+    onClick,
+    usage,
+    ...nativeProps
+  } = props;
+  const isClosable = Boolean(onClick);
+  const shape = isClosable ? "pill" : initShape;
+  const palette = isClosable ? "action" : initPalette;
+  const closableStyles = isClosable ? css({
+    bgColor: "action.bg.active",
+    paddingInlineEnd: "0"
+  }) : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        tag({
+          palette,
+          shape,
+          usage
+        }),
+        closableStyles
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: iconButton({
+              palette: "action",
+              usage: "filled",
+              size: "sm"
+            }),
+            onClick,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Tag
+};
+//# sourceMappingURL=chunk-ULXTQXVY.js.map

package/build/legacy/chunk-ULXTQXVY.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 { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: Sentiment\n  shape?: 'rounded' | 'pill'\n  usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: Sentiment\n  shape?: 'pill'\n  onClick: () => void\n  usage?: 'filled'\n}\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(\n  props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n  const {\n    palette: initPalette,\n    shape: initShape,\n    onClick,\n    usage,\n    ...nativeProps\n  } = props\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const palette = isClosable ? 'action' : initPalette\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        paddingInlineEnd: '0',\n      })\n    : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAGtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AA+C5B,SAwBM,KAxBN;AArBG,SAAS,IACd,OACa;AACb,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,UAAU,aAAa,WAAW;AACxC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,kBAAkB;AAAA,EACpB,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/IconButton.js

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

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

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

package/build/legacy/components/Tag.js

@@ -0,0 +1,8 @@
+import {
+  Tag
+} from "../chunk-ULXTQXVY.js";
+import "../chunk-R4H3352X.js";
+export {
+  Tag
+};
+//# sourceMappingURL=Tag.js.map

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

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

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

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

package/build/legacy/components/Textarea.js

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

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

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

package/build/legacy/index.d.ts

@@ -22,6 +22,11 @@ export { TabList } from './_tsup-dts-rollup';
 export { TabListProps } from './_tsup-dts-rollup';
 export { TabPanel } from './_tsup-dts-rollup';
 export { TabPanelProps } from './_tsup-dts-rollup';
+export { Tag } from './_tsup-dts-rollup';
+export { TagProps } from './_tsup-dts-rollup';
+export { ClickableTagProps } from './_tsup-dts-rollup';
+export { Textarea } from './_tsup-dts-rollup';
+export { TextareaProps } from './_tsup-dts-rollup';
 export { Show } from './_tsup-dts-rollup';
 export { ShowProps } from './_tsup-dts-rollup';
 export { Field } from './_tsup-dts-rollup';

package/build/legacy/index.js

@@ -1,6 +1,12 @@
 import {
   TabPanel
 } from "./chunk-SVZU6LPF.js";
+import {
+  Tag
+} from "./chunk-ULXTQXVY.js";
+import {
+  Textarea
+} from "./chunk-5TBINKAO.js";
 import {
   Input
 } from "./chunk-LD5ZV46F.js";
@@ -61,7 +67,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   IconButton
-} from "./chunk-BPIYUAYS.js";
+} from "./chunk-NIMWIOIA.js";
 export {
   Button,
   Field,
@@ -81,6 +87,8 @@ export {
   TabPanel,
   Tabs,
   TabsContext,
+  Tag,
+  Textarea,
   ThemeProvider,
   createNavTriggerProps,
   getPosition,

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

@@ -9,6 +9,8 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { Sentiment } from '@cerberus/panda-preset';
+import type { TextareaHTMLAttributes } from 'react';
 
 /**
  * A component that allows the user to perform actions
@@ -30,6 +32,15 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'pill';
+    onClick: () => void;
+    usage?: 'filled';
+}
+export { ClickableTagProps }
+export { ClickableTagProps as ClickableTagProps_alias_1 }
+
 declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
@@ -111,6 +122,8 @@ declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
     palette?: ButtonProps['palette'];
     usage?: IconButtonUsage;
     shape?: 'circle';
+    size?: 'sm' | 'lg';
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
 export { IconButtonProps }
 export { IconButtonProps as IconButtonProps_alias_1 }
@@ -401,6 +414,48 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'rounded' | 'pill';
+    usage?: 'filled' | 'outline';
+}
+export { TagProps }
+export { TagProps as TagProps_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
+ */
+declare function Textarea(props: TextareaProps): JSX.Element;
+export { Textarea }
+export { Textarea as Textarea_alias_1 }
+
+/**
+ * This module contains the Textarea component.
+ * @module
+ */
+declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
+    describedBy?: string;
+    id: string;
+}
+export { TextareaProps }
+export { TextareaProps as TextareaProps_alias_1 }
+
 declare const THEME_KEY = "cerberus-theme";
 export { THEME_KEY }
 export { THEME_KEY as THEME_KEY_alias_1 }

package/build/modern/chunk-5TBINKAO.js

@@ -0,0 +1,36 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/Textarea.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { input } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Textarea(props) {
+  const { describedBy, ...nativeProps } = props;
+  const { invalid, ...fieldState } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...nativeProps,
+      ...fieldState,
+      ...describedBy && { "aria-describedby": describedBy },
+      ...invalid && { "aria-invalid": true },
+      className: cx(
+        props.className,
+        input().input,
+        css({
+          pxi: "2",
+          py: "2",
+          resize: "vertical"
+        })
+      ),
+      rows: 4
+    }
+  );
+}
+
+export {
+  Textarea
+};
+//# sourceMappingURL=chunk-5TBINKAO.js.map

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

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

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

@@ -3,17 +3,20 @@ import { cx } from "@cerberus/styled-system/css";
 import { iconButton } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function IconButton(props) {
-  const { ariaLabel, palette, usage, ...nativeProps } = props;
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...nativeProps,
+      "data-tooltip": true,
+      "data-position": props.tooltipPosition ?? "top",
       "aria-label": ariaLabel ?? "Icon Button",
       className: cx(
         nativeProps.className,
         iconButton({
           palette,
-          usage
+          usage,
+          size
         })
       )
     }
@@ -23,4 +26,4 @@ function IconButton(props) {
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-BPIYUAYS.js.map
+//# sourceMappingURL=chunk-NIMWIOIA.js.map

package/build/modern/chunk-NIMWIOIA.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  size?: 'sm' | 'lg'\n  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      data-tooltip\n      data-position={props.tooltipPosition ?? 'top'}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA0BvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-ULXTQXVY.js

@@ -0,0 +1,61 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/Tag.tsx
+import { Close } from "@cerberus/icons";
+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: initPalette,
+    shape: initShape,
+    onClick,
+    usage,
+    ...nativeProps
+  } = props;
+  const isClosable = Boolean(onClick);
+  const shape = isClosable ? "pill" : initShape;
+  const palette = isClosable ? "action" : initPalette;
+  const closableStyles = isClosable ? css({
+    bgColor: "action.bg.active",
+    paddingInlineEnd: "0"
+  }) : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        tag({
+          palette,
+          shape,
+          usage
+        }),
+        closableStyles
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: iconButton({
+              palette: "action",
+              usage: "filled",
+              size: "sm"
+            }),
+            onClick,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Tag
+};
+//# sourceMappingURL=chunk-ULXTQXVY.js.map

package/build/modern/chunk-ULXTQXVY.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 { type Sentiment } from '@cerberus/panda-preset'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: Sentiment\n  shape?: 'rounded' | 'pill'\n  usage?: 'filled' | 'outline'\n}\nexport interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {\n  palette?: Sentiment\n  shape?: 'pill'\n  onClick: () => void\n  usage?: 'filled'\n}\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(\n  props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n  const {\n    palette: initPalette,\n    shape: initShape,\n    onClick,\n    usage,\n    ...nativeProps\n  } = props\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const palette = isClosable ? 'action' : initPalette\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        paddingInlineEnd: '0',\n      })\n    : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          palette,\n          shape,\n          usage,\n        }),\n        closableStyles,\n      )}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <button\n          aria-label=\"Close\"\n          className={iconButton({\n            palette: 'action',\n            usage: 'filled',\n            size: 'sm',\n          })}\n          onClick={onClick}\n        >\n          <Close />\n        </button>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAGtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AA+C5B,SAwBM,KAxBN;AArBG,SAAS,IACd,OACa;AACb,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,UAAU,aAAa,WAAW;AACxC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,kBAAkB;AAAA,EACpB,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/IconButton.js

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

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

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

package/build/modern/components/Tag.js

@@ -0,0 +1,8 @@
+import {
+  Tag
+} from "../chunk-ULXTQXVY.js";
+import "../chunk-R4H3352X.js";
+export {
+  Tag
+};
+//# sourceMappingURL=Tag.js.map

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

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

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

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

package/build/modern/components/Textarea.js

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

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

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

package/build/modern/index.d.ts

@@ -22,6 +22,11 @@ export { TabList } from './_tsup-dts-rollup';
 export { TabListProps } from './_tsup-dts-rollup';
 export { TabPanel } from './_tsup-dts-rollup';
 export { TabPanelProps } from './_tsup-dts-rollup';
+export { Tag } from './_tsup-dts-rollup';
+export { TagProps } from './_tsup-dts-rollup';
+export { ClickableTagProps } from './_tsup-dts-rollup';
+export { Textarea } from './_tsup-dts-rollup';
+export { TextareaProps } from './_tsup-dts-rollup';
 export { Show } from './_tsup-dts-rollup';
 export { ShowProps } from './_tsup-dts-rollup';
 export { Field } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -1,6 +1,12 @@
 import {
   TabPanel
 } from "./chunk-SVZU6LPF.js";
+import {
+  Tag
+} from "./chunk-ULXTQXVY.js";
+import {
+  Textarea
+} from "./chunk-5TBINKAO.js";
 import {
   Input
 } from "./chunk-LD5ZV46F.js";
@@ -61,7 +67,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   IconButton
-} from "./chunk-BPIYUAYS.js";
+} from "./chunk-NIMWIOIA.js";
 export {
   Button,
   Field,
@@ -81,6 +87,8 @@ export {
   TabPanel,
   Tabs,
   TabsContext,
+  Tag,
+  Textarea,
   ThemeProvider,
   createNavTriggerProps,
   getPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.3.2",
+  "version": "0.4.0-next-127992f",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

package/src/components/IconButton.tsx

@@ -15,6 +15,8 @@ export interface IconButtonProps
   palette?: ButtonProps['palette']
   usage?: IconButtonUsage
   shape?: 'circle'
+  size?: 'sm' | 'lg'
+  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
 }
 
 /**
@@ -22,16 +24,19 @@ export interface IconButtonProps
  * @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
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props
   return (
     <button
       {...nativeProps}
+      data-tooltip
+      data-position={props.tooltipPosition ?? 'top'}
       aria-label={ariaLabel ?? 'Icon Button'}
       className={cx(
         nativeProps.className,
         iconButton({
           palette,
           usage,
+          size,
         }),
       )}
     />

package/src/components/Tag.tsx

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { Close } from '@cerberus/icons'
+import { type Sentiment } from '@cerberus/panda-preset'
+import { Show } from './Show'
+import { css, cx } from '@cerberus/styled-system/css'
+import { iconButton, tag } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  palette?: Sentiment
+  shape?: 'rounded' | 'pill'
+  usage?: 'filled' | 'outline'
+}
+export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+  palette?: Sentiment
+  shape?: 'pill'
+  onClick: () => void
+  usage?: 'filled'
+}
+
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+export function Tag(
+  props: PropsWithChildren<TagProps | ClickableTagProps>,
+): JSX.Element {
+  const {
+    palette: initPalette,
+    shape: initShape,
+    onClick,
+    usage,
+    ...nativeProps
+  } = props
+  const isClosable = Boolean(onClick)
+  const shape = isClosable ? 'pill' : initShape
+  const palette = isClosable ? 'action' : initPalette
+  const closableStyles = isClosable
+    ? css({
+        bgColor: 'action.bg.active',
+        paddingInlineEnd: '0',
+      })
+    : ''
+
+  return (
+    <span
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        tag({
+          palette,
+          shape,
+          usage,
+        }),
+        closableStyles,
+      )}
+    >
+      {props.children}
+
+      <Show when={isClosable}>
+        <button
+          aria-label="Close"
+          className={iconButton({
+            palette: 'action',
+            usage: 'filled',
+            size: 'sm',
+          })}
+          onClick={onClick}
+        >
+          <Close />
+        </button>
+      </Show>
+    </span>
+  )
+}

package/src/components/Textarea.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import type { TextareaHTMLAttributes } from 'react'
+import { css, cx } from '@cerberus/styled-system/css'
+import { input } from '@cerberus/styled-system/recipes'
+import { useFieldContext } from '../context/field'
+
+/**
+ * This module contains the Textarea component.
+ * @module
+ */
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
+  describedBy?: string
+  id: string
+}
+
+/**
+ * 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
+ */
+export function Textarea(props: TextareaProps): JSX.Element {
+  const { describedBy, ...nativeProps } = props
+  const { invalid, ...fieldState } = useFieldContext()
+
+  return (
+    <textarea
+      {...nativeProps}
+      {...fieldState}
+      {...(describedBy && { 'aria-describedby': describedBy })}
+      {...(invalid && { 'aria-invalid': true })}
+      className={cx(
+        props.className,
+        input().input,
+        css({
+          pxi: '2',
+          py: '2',
+          resize: 'vertical',
+        }),
+      )}
+      rows={4}
+    />
+  )
+}

package/src/index.ts

@@ -16,6 +16,8 @@ export * from './components/NavMenuLink'
 export * from './components/Tab'
 export * from './components/TabList'
 export * from './components/TabPanel'
+export * from './components/Tag'
+export * from './components/Textarea'
 export * from './components/Show'
 
 // context

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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/chunk-BPIYUAYS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  ariaLabel: string\n  palette?: ButtonProps['palette']\n  usage?: IconButtonUsage\n  shape?: 'circle'\n}\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":[]}