@cerberus-design/react 0.3.2-next-ef421b1 → 0.3.2-next-b4a373c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/build/legacy/{chunk-HPN33SVN.js → chunk-NIMWIOIA.js} +4 -3
  2. package/build/{modern/chunk-HPN33SVN.js.map → legacy/chunk-NIMWIOIA.js.map} +1 -1
  3. package/build/{modern/chunk-LITJCQI7.js → legacy/chunk-ULXTQXVY.js} +3 -2
  4. package/build/{modern/chunk-LITJCQI7.js.map → legacy/chunk-ULXTQXVY.js.map} +1 -1
  5. package/build/legacy/components/IconButton.js +1 -1
  6. package/build/legacy/components/Tag.js +1 -1
  7. package/build/legacy/index.js +2 -2
  8. package/build/modern/{chunk-HPN33SVN.js → chunk-NIMWIOIA.js} +4 -3
  9. package/build/{legacy/chunk-HPN33SVN.js.map → modern/chunk-NIMWIOIA.js.map} +1 -1
  10. package/build/{legacy/chunk-LITJCQI7.js → modern/chunk-ULXTQXVY.js} +3 -2
  11. package/build/{legacy/chunk-LITJCQI7.js.map → modern/chunk-ULXTQXVY.js.map} +1 -1
  12. package/build/modern/components/IconButton.js +1 -1
  13. package/build/modern/components/Tag.js +1 -1
  14. package/build/modern/index.js +2 -2
  15. package/package.json +1 -1
  16. package/src/components/IconButton.tsx +2 -1
  17. package/src/components/Tag.tsx +1 -0
package/build/legacy/{chunk-HPN33SVN.js → chunk-NIMWIOIA.js} RENAMED
@@ -3,7 +3,7 @@ import { cx } from "@cerberus/styled-system/css";
3
3
  import { iconButton } from "@cerberus/styled-system/recipes";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  function IconButton(props) {
6
- const { ariaLabel, palette, usage, ...nativeProps } = props;
6
+ const { ariaLabel, palette, usage, size, ...nativeProps } = props;
7
7
  return /* @__PURE__ */ jsx(
8
8
  "button",
9
9
  {
@@ -15,7 +15,8 @@ function IconButton(props) {
15
15
  nativeProps.className,
16
16
  iconButton({
17
17
  palette,
18
- usage
18
+ usage,
19
+ size
19
20
  })
20
21
  )
21
22
  }
@@ -25,4 +26,4 @@ function IconButton(props) {
25
26
  export {
26
27
  IconButton
27
28
  };
28
- //# sourceMappingURL=chunk-HPN33SVN.js.map
29
+ //# sourceMappingURL=chunk-NIMWIOIA.js.map
package/build/{modern/chunk-HPN33SVN.js.map → legacy/chunk-NIMWIOIA.js.map} RENAMED
@@ -1 +1 @@
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, ...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 }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA0BvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,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,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
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-LITJCQI7.js → legacy/chunk-ULXTQXVY.js} RENAMED
@@ -43,7 +43,8 @@ function Tag(props) {
43
43
  "aria-label": "Close",
44
44
  className: iconButton({
45
45
  palette: "action",
46
- usage: "filled"
46
+ usage: "filled",
47
+ size: "sm"
47
48
  }),
48
49
  onClick,
49
50
  children: /* @__PURE__ */ jsx(Close, {})
@@ -57,4 +58,4 @@ function Tag(props) {
57
58
  export {
58
59
  Tag
59
60
  };
60
- //# sourceMappingURL=chunk-LITJCQI7.js.map
61
+ //# sourceMappingURL=chunk-ULXTQXVY.js.map
package/build/{modern/chunk-LITJCQI7.js.map → legacy/chunk-ULXTQXVY.js.map} RENAMED
@@ -1 +1 @@
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 })}\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,SAuBM,KAvBN;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,YACT,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  IconButton
3
- } from "../chunk-HPN33SVN.js";
3
+ } from "../chunk-NIMWIOIA.js";
4
4
  export {
5
5
  IconButton
6
6
  };
package/build/legacy/components/Tag.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-LITJCQI7.js";
3
+ } from "../chunk-ULXTQXVY.js";
4
4
  import "../chunk-R4H3352X.js";
5
5
  export {
6
6
  Tag
package/build/legacy/index.js CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-SVZU6LPF.js";
4
4
  import {
5
5
  Tag
6
- } from "./chunk-LITJCQI7.js";
6
+ } from "./chunk-ULXTQXVY.js";
7
7
  import {
8
8
  Textarea
9
9
  } from "./chunk-5TBINKAO.js";
@@ -67,7 +67,7 @@ import {
67
67
  } from "./chunk-ZAU4JVLL.js";
68
68
  import {
69
69
  IconButton
70
- } from "./chunk-HPN33SVN.js";
70
+ } from "./chunk-NIMWIOIA.js";
71
71
  export {
72
72
  Button,
73
73
  Field,
package/build/modern/{chunk-HPN33SVN.js → chunk-NIMWIOIA.js} RENAMED
@@ -3,7 +3,7 @@ import { cx } from "@cerberus/styled-system/css";
3
3
  import { iconButton } from "@cerberus/styled-system/recipes";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  function IconButton(props) {
6
- const { ariaLabel, palette, usage, ...nativeProps } = props;
6
+ const { ariaLabel, palette, usage, size, ...nativeProps } = props;
7
7
  return /* @__PURE__ */ jsx(
8
8
  "button",
9
9
  {
@@ -15,7 +15,8 @@ function IconButton(props) {
15
15
  nativeProps.className,
16
16
  iconButton({
17
17
  palette,
18
- usage
18
+ usage,
19
+ size
19
20
  })
20
21
  )
21
22
  }
@@ -25,4 +26,4 @@ function IconButton(props) {
25
26
  export {
26
27
  IconButton
27
28
  };
28
- //# sourceMappingURL=chunk-HPN33SVN.js.map
29
+ //# sourceMappingURL=chunk-NIMWIOIA.js.map
package/build/{legacy/chunk-HPN33SVN.js.map → modern/chunk-NIMWIOIA.js.map} RENAMED
@@ -1 +1 @@
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, ...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 }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA0BvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,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,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
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-LITJCQI7.js → modern/chunk-ULXTQXVY.js} RENAMED
@@ -43,7 +43,8 @@ function Tag(props) {
43
43
  "aria-label": "Close",
44
44
  className: iconButton({
45
45
  palette: "action",
46
- usage: "filled"
46
+ usage: "filled",
47
+ size: "sm"
47
48
  }),
48
49
  onClick,
49
50
  children: /* @__PURE__ */ jsx(Close, {})
@@ -57,4 +58,4 @@ function Tag(props) {
57
58
  export {
58
59
  Tag
59
60
  };
60
- //# sourceMappingURL=chunk-LITJCQI7.js.map
61
+ //# sourceMappingURL=chunk-ULXTQXVY.js.map
package/build/{legacy/chunk-LITJCQI7.js.map → modern/chunk-ULXTQXVY.js.map} RENAMED
@@ -1 +1 @@
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 })}\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,SAuBM,KAvBN;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,YACT,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  IconButton
3
- } from "../chunk-HPN33SVN.js";
3
+ } from "../chunk-NIMWIOIA.js";
4
4
  export {
5
5
  IconButton
6
6
  };
package/build/modern/components/Tag.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-LITJCQI7.js";
3
+ } from "../chunk-ULXTQXVY.js";
4
4
  import "../chunk-R4H3352X.js";
5
5
  export {
6
6
  Tag
package/build/modern/index.js CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-SVZU6LPF.js";
4
4
  import {
5
5
  Tag
6
- } from "./chunk-LITJCQI7.js";
6
+ } from "./chunk-ULXTQXVY.js";
7
7
  import {
8
8
  Textarea
9
9
  } from "./chunk-5TBINKAO.js";
@@ -67,7 +67,7 @@ import {
67
67
  } from "./chunk-ZAU4JVLL.js";
68
68
  import {
69
69
  IconButton
70
- } from "./chunk-HPN33SVN.js";
70
+ } from "./chunk-NIMWIOIA.js";
71
71
  export {
72
72
  Button,
73
73
  Field,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerberus-design/react",
3
- "version": "0.3.2-next-ef421b1",
3
+ "version": "0.3.2-next-b4a373c",
4
4
  "description": "The Cerberus Design React component library.",
5
5
  "browserslist": "> 0.25%, not dead",
6
6
  "sideEffects": false,
package/src/components/IconButton.tsx CHANGED
@@ -24,7 +24,7 @@ export interface IconButtonProps
24
24
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
25
25
  */
26
26
  export function IconButton(props: IconButtonProps): JSX.Element {
27
- const { ariaLabel, palette, usage, ...nativeProps } = props
27
+ const { ariaLabel, palette, usage, size, ...nativeProps } = props
28
28
  return (
29
29
  <button
30
30
  {...nativeProps}
@@ -36,6 +36,7 @@ export function IconButton(props: IconButtonProps): JSX.Element {
36
36
  iconButton({
37
37
  palette,
38
38
  usage,
39
+ size,
39
40
  }),
40
41
  )}
41
42
  />
package/src/components/Tag.tsx CHANGED
@@ -70,6 +70,7 @@ export function Tag(
70
70
  className={iconButton({
71
71
  palette: 'action',
72
72
  usage: 'filled',
73
+ size: 'sm',
73
74
  })}
74
75
  onClick={onClick}
75
76
  >