@cerberus-design/react 0.3.2-next-bdab9b9 → 0.3.2-next-cb4907c

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

@@ -33,6 +33,7 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
     shape?: 'pill';
     onClick: () => void;
     usage?: 'filled';
@@ -411,10 +412,21 @@ 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';

package/build/legacy/chunk-SWUW4BYA.js

@@ -0,0 +1,58 @@
+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({
+    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"
+            }),
+            onClick,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Tag
+};
+//# sourceMappingURL=chunk-SWUW4BYA.js.map

package/build/legacy/chunk-SWUW4BYA.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        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          })}\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;AA8C5B,SAsBM,KAtBN;AApBG,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,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,YACX,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Tag.js

@@ -1,8 +1,7 @@
 import {
   Tag
-} from "../chunk-YZO3DYQU.js";
+} from "../chunk-SWUW4BYA.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-MRJ3KCHK.js";
 export {
   Tag
 };

package/build/legacy/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SVZU6LPF.js";
 import {
   Tag
-} from "./chunk-YZO3DYQU.js";
+} from "./chunk-SWUW4BYA.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";

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

@@ -33,6 +33,7 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
     shape?: 'pill';
     onClick: () => void;
     usage?: 'filled';
@@ -411,10 +412,21 @@ 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';

package/build/modern/chunk-SWUW4BYA.js

@@ -0,0 +1,58 @@
+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({
+    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"
+            }),
+            onClick,
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Tag
+};
+//# sourceMappingURL=chunk-SWUW4BYA.js.map

package/build/modern/chunk-SWUW4BYA.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        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          })}\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;AA8C5B,SAsBM,KAtBN;AApBG,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,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,YACX,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/Tag.js

@@ -1,8 +1,7 @@
 import {
   Tag
-} from "../chunk-YZO3DYQU.js";
+} from "../chunk-SWUW4BYA.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-MRJ3KCHK.js";
 export {
   Tag
 };

package/build/modern/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-SVZU6LPF.js";
 import {
   Tag
-} from "./chunk-YZO3DYQU.js";
+} from "./chunk-SWUW4BYA.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";

package/package.json

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

package/src/components/Tag.tsx

@@ -2,8 +2,13 @@ import type { HTMLAttributes, PropsWithChildren } from 'react'
 import { Close } from '@cerberus/icons'
 import { type Sentiment } from '@cerberus/panda-preset'
 import { Show } from './Show'
-import { IconButton } from './IconButton'
-import { cx } from '@cerberus/styled-system/css'
+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
@@ -11,31 +16,63 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   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 { shape, onClick, usage, ...nativeProps } = props
+  const {
+    palette: initPalette,
+    shape: initShape,
+    onClick,
+    usage,
+    ...nativeProps
+  } = props
   const isClosable = Boolean(onClick)
-  const finalShape = isClosable ? 'pill' : shape
+  const shape = isClosable ? 'pill' : initShape
+  const palette = isClosable ? 'action' : initPalette
+  const closableStyles = isClosable
+    ? css({
+        paddingInlineEnd: '0',
+      })
+    : ''
 
   return (
     <span
       {...nativeProps}
-      className={cx(nativeProps.className, 'tag')}
-      data-temp-shape={finalShape}
-      data-temp-usage={usage}
+      className={cx(
+        nativeProps.className,
+        tag({
+          palette,
+          shape,
+          usage,
+        }),
+        closableStyles,
+      )}
     >
       {props.children}
 
       <Show when={isClosable}>
-        <IconButton ariaLabel="Close" onClick={onClick}>
+        <button
+          aria-label="Close"
+          className={iconButton({
+            palette: 'action',
+          })}
+          onClick={onClick}
+        >
           <Close />
-        </IconButton>
+        </button>
       </Show>
     </span>
   )

package/build/legacy/chunk-YZO3DYQU.js

@@ -1,34 +0,0 @@
-import {
-  Show
-} from "./chunk-R4H3352X.js";
-import {
-  IconButton
-} from "./chunk-MRJ3KCHK.js";
-
-// src/components/Tag.tsx
-import { Close } from "@cerberus/icons";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Tag(props) {
-  const { shape, onClick, usage, ...nativeProps } = props;
-  const isClosable = Boolean(onClick);
-  const finalShape = isClosable ? "pill" : shape;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ...nativeProps,
-      className: cx(nativeProps.className, "tag"),
-      "data-temp-shape": finalShape,
-      "data-temp-usage": usage,
-      children: [
-        props.children,
-        /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick, children: /* @__PURE__ */ jsx(Close, {}) }) })
-      ]
-    }
-  );
-}
-
-export {
-  Tag
-};
-//# sourceMappingURL=chunk-YZO3DYQU.js.map

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

@@ -1 +0,0 @@
-{"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 { IconButton } from './IconButton'\nimport { cx } from '@cerberus/styled-system/css'\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  shape?: 'pill'\n  onClick: () => void\n  usage?: 'filled'\n}\n\nexport function Tag(\n  props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n  const { shape, onClick, usage, ...nativeProps } = props\n  const isClosable = Boolean(onClick)\n  const finalShape = isClosable ? 'pill' : shape\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(nativeProps.className, 'tag')}\n      data-temp-shape={finalShape}\n      data-temp-usage={usage}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <IconButton ariaLabel=\"Close\" onClick={onClick}>\n          <Close />\n        </IconButton>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa;AAItB,SAAS,UAAU;AAqBf,SAUM,KAVN;AARG,SAAS,IACd,OACa;AACb,QAAM,EAAE,OAAO,SAAS,OAAO,GAAG,YAAY,IAAI;AAClD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,aAAa,aAAa,SAAS;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,KAAK;AAAA,MAC1C,mBAAiB;AAAA,MACjB,mBAAiB;AAAA,MAEhB;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV,8BAAC,cAAW,WAAU,SAAQ,SAC5B,8BAAC,SAAM,GACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-YZO3DYQU.js

@@ -1,34 +0,0 @@
-import {
-  Show
-} from "./chunk-R4H3352X.js";
-import {
-  IconButton
-} from "./chunk-MRJ3KCHK.js";
-
-// src/components/Tag.tsx
-import { Close } from "@cerberus/icons";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Tag(props) {
-  const { shape, onClick, usage, ...nativeProps } = props;
-  const isClosable = Boolean(onClick);
-  const finalShape = isClosable ? "pill" : shape;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ...nativeProps,
-      className: cx(nativeProps.className, "tag"),
-      "data-temp-shape": finalShape,
-      "data-temp-usage": usage,
-      children: [
-        props.children,
-        /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick, children: /* @__PURE__ */ jsx(Close, {}) }) })
-      ]
-    }
-  );
-}
-
-export {
-  Tag
-};
-//# sourceMappingURL=chunk-YZO3DYQU.js.map

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

@@ -1 +0,0 @@
-{"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 { IconButton } from './IconButton'\nimport { cx } from '@cerberus/styled-system/css'\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  shape?: 'pill'\n  onClick: () => void\n  usage?: 'filled'\n}\n\nexport function Tag(\n  props: PropsWithChildren<TagProps | ClickableTagProps>,\n): JSX.Element {\n  const { shape, onClick, usage, ...nativeProps } = props\n  const isClosable = Boolean(onClick)\n  const finalShape = isClosable ? 'pill' : shape\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(nativeProps.className, 'tag')}\n      data-temp-shape={finalShape}\n      data-temp-usage={usage}\n    >\n      {props.children}\n\n      <Show when={isClosable}>\n        <IconButton ariaLabel=\"Close\" onClick={onClick}>\n          <Close />\n        </IconButton>\n      </Show>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa;AAItB,SAAS,UAAU;AAqBf,SAUM,KAVN;AARG,SAAS,IACd,OACa;AACb,QAAM,EAAE,OAAO,SAAS,OAAO,GAAG,YAAY,IAAI;AAClD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,aAAa,aAAa,SAAS;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,KAAK;AAAA,MAC1C,mBAAiB;AAAA,MACjB,mBAAiB;AAAA,MAEhB;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV,8BAAC,cAAW,WAAU,SAAQ,SAC5B,8BAAC,SAAM,GACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}