@cerberus-design/react 0.3.2-next-f25721c → 0.3.2-next-210cf1f

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 (23) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.ts +2 -0
  2. package/build/legacy/{chunk-MRJ3KCHK.js → chunk-NIMWIOIA.js} +5 -3
  3. package/build/legacy/chunk-NIMWIOIA.js.map +1 -0
  4. package/build/{modern/chunk-SWUW4BYA.js → legacy/chunk-ULXTQXVY.js} +5 -2
  5. package/build/legacy/chunk-ULXTQXVY.js.map +1 -0
  6. package/build/legacy/components/IconButton.js +1 -1
  7. package/build/legacy/components/Tag.js +1 -1
  8. package/build/legacy/index.js +2 -2
  9. package/build/modern/_tsup-dts-rollup.d.ts +2 -0
  10. package/build/modern/{chunk-MRJ3KCHK.js → chunk-NIMWIOIA.js} +5 -3
  11. package/build/modern/chunk-NIMWIOIA.js.map +1 -0
  12. package/build/{legacy/chunk-SWUW4BYA.js → modern/chunk-ULXTQXVY.js} +5 -2
  13. package/build/modern/chunk-ULXTQXVY.js.map +1 -0
  14. package/build/modern/components/IconButton.js +1 -1
  15. package/build/modern/components/Tag.js +1 -1
  16. package/build/modern/index.js +2 -2
  17. package/package.json +1 -1
  18. package/src/components/IconButton.tsx +5 -1
  19. package/src/components/Tag.tsx +3 -0
  20. package/build/legacy/chunk-MRJ3KCHK.js.map +0 -1
  21. package/build/legacy/chunk-SWUW4BYA.js.map +0 -1
  22. package/build/modern/chunk-MRJ3KCHK.js.map +0 -1
  23. package/build/modern/chunk-SWUW4BYA.js.map +0 -1
package/build/legacy/_tsup-dts-rollup.d.ts CHANGED
@@ -122,6 +122,8 @@ declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
122
122
  palette?: ButtonProps['palette'];
123
123
  usage?: IconButtonUsage;
124
124
  shape?: 'circle';
125
+ size?: 'sm' | 'lg';
126
+ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
125
127
  }
126
128
  export { IconButtonProps }
127
129
  export { IconButtonProps as IconButtonProps_alias_1 }
package/build/legacy/{chunk-MRJ3KCHK.js → chunk-NIMWIOIA.js} RENAMED
@@ -3,18 +3,20 @@ 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
  {
10
10
  ...nativeProps,
11
11
  "data-tooltip": true,
12
+ "data-position": props.tooltipPosition ?? "top",
12
13
  "aria-label": ariaLabel ?? "Icon Button",
13
14
  className: cx(
14
15
  nativeProps.className,
15
16
  iconButton({
16
17
  palette,
17
- usage
18
+ usage,
19
+ size
18
20
  })
19
21
  )
20
22
  }
@@ -24,4 +26,4 @@ function IconButton(props) {
24
26
  export {
25
27
  IconButton
26
28
  };
27
- //# sourceMappingURL=chunk-MRJ3KCHK.js.map
29
+ //# sourceMappingURL=chunk-NIMWIOIA.js.map
package/build/legacy/chunk-NIMWIOIA.js.map ADDED
@@ -0,0 +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, 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-SWUW4BYA.js → legacy/chunk-ULXTQXVY.js} RENAMED
@@ -19,6 +19,7 @@ function Tag(props) {
19
19
  const shape = isClosable ? "pill" : initShape;
20
20
  const palette = isClosable ? "action" : initPalette;
21
21
  const closableStyles = isClosable ? css({
22
+ bgColor: "action.bg.active",
22
23
  paddingInlineEnd: "0"
23
24
  }) : "";
24
25
  return /* @__PURE__ */ jsxs(
@@ -41,7 +42,9 @@ function Tag(props) {
41
42
  {
42
43
  "aria-label": "Close",
43
44
  className: iconButton({
44
- palette: "action"
45
+ palette: "action",
46
+ usage: "filled",
47
+ size: "sm"
45
48
  }),
46
49
  onClick,
47
50
  children: /* @__PURE__ */ jsx(Close, {})
@@ -55,4 +58,4 @@ function Tag(props) {
55
58
  export {
56
59
  Tag
57
60
  };
58
- //# sourceMappingURL=chunk-SWUW4BYA.js.map
61
+ //# sourceMappingURL=chunk-ULXTQXVY.js.map
package/build/legacy/chunk-ULXTQXVY.js.map ADDED
@@ -0,0 +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 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-MRJ3KCHK.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-SWUW4BYA.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-SWUW4BYA.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-MRJ3KCHK.js";
70
+ } from "./chunk-NIMWIOIA.js";
71
71
  export {
72
72
  Button,
73
73
  Field,
package/build/modern/_tsup-dts-rollup.d.ts CHANGED
@@ -122,6 +122,8 @@ declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
122
122
  palette?: ButtonProps['palette'];
123
123
  usage?: IconButtonUsage;
124
124
  shape?: 'circle';
125
+ size?: 'sm' | 'lg';
126
+ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
125
127
  }
126
128
  export { IconButtonProps }
127
129
  export { IconButtonProps as IconButtonProps_alias_1 }
package/build/modern/{chunk-MRJ3KCHK.js → chunk-NIMWIOIA.js} RENAMED
@@ -3,18 +3,20 @@ 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
  {
10
10
  ...nativeProps,
11
11
  "data-tooltip": true,
12
+ "data-position": props.tooltipPosition ?? "top",
12
13
  "aria-label": ariaLabel ?? "Icon Button",
13
14
  className: cx(
14
15
  nativeProps.className,
15
16
  iconButton({
16
17
  palette,
17
- usage
18
+ usage,
19
+ size
18
20
  })
19
21
  )
20
22
  }
@@ -24,4 +26,4 @@ function IconButton(props) {
24
26
  export {
25
27
  IconButton
26
28
  };
27
- //# sourceMappingURL=chunk-MRJ3KCHK.js.map
29
+ //# sourceMappingURL=chunk-NIMWIOIA.js.map
package/build/modern/chunk-NIMWIOIA.js.map ADDED
@@ -0,0 +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, 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-SWUW4BYA.js → modern/chunk-ULXTQXVY.js} RENAMED
@@ -19,6 +19,7 @@ function Tag(props) {
19
19
  const shape = isClosable ? "pill" : initShape;
20
20
  const palette = isClosable ? "action" : initPalette;
21
21
  const closableStyles = isClosable ? css({
22
+ bgColor: "action.bg.active",
22
23
  paddingInlineEnd: "0"
23
24
  }) : "";
24
25
  return /* @__PURE__ */ jsxs(
@@ -41,7 +42,9 @@ function Tag(props) {
41
42
  {
42
43
  "aria-label": "Close",
43
44
  className: iconButton({
44
- palette: "action"
45
+ palette: "action",
46
+ usage: "filled",
47
+ size: "sm"
45
48
  }),
46
49
  onClick,
47
50
  children: /* @__PURE__ */ jsx(Close, {})
@@ -55,4 +58,4 @@ function Tag(props) {
55
58
  export {
56
59
  Tag
57
60
  };
58
- //# sourceMappingURL=chunk-SWUW4BYA.js.map
61
+ //# sourceMappingURL=chunk-ULXTQXVY.js.map
package/build/modern/chunk-ULXTQXVY.js.map ADDED
@@ -0,0 +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 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-MRJ3KCHK.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-SWUW4BYA.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-SWUW4BYA.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-MRJ3KCHK.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-f25721c",
3
+ "version": "0.3.2-next-210cf1f",
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
@@ -15,6 +15,8 @@ export interface IconButtonProps
15
15
  palette?: ButtonProps['palette']
16
16
  usage?: IconButtonUsage
17
17
  shape?: 'circle'
18
+ size?: 'sm' | 'lg'
19
+ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
18
20
  }
19
21
 
20
22
  /**
@@ -22,17 +24,19 @@ export interface IconButtonProps
22
24
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
23
25
  */
24
26
  export function IconButton(props: IconButtonProps): JSX.Element {
25
- const { ariaLabel, palette, usage, ...nativeProps } = props
27
+ const { ariaLabel, palette, usage, size, ...nativeProps } = props
26
28
  return (
27
29
  <button
28
30
  {...nativeProps}
29
31
  data-tooltip
32
+ data-position={props.tooltipPosition ?? 'top'}
30
33
  aria-label={ariaLabel ?? 'Icon Button'}
31
34
  className={cx(
32
35
  nativeProps.className,
33
36
  iconButton({
34
37
  palette,
35
38
  usage,
39
+ size,
36
40
  }),
37
41
  )}
38
42
  />
package/src/components/Tag.tsx CHANGED
@@ -44,6 +44,7 @@ export function Tag(
44
44
  const palette = isClosable ? 'action' : initPalette
45
45
  const closableStyles = isClosable
46
46
  ? css({
47
+ bgColor: 'action.bg.active',
47
48
  paddingInlineEnd: '0',
48
49
  })
49
50
  : ''
@@ -68,6 +69,8 @@ export function Tag(
68
69
  aria-label="Close"
69
70
  className={iconButton({
70
71
  palette: 'action',
72
+ usage: 'filled',
73
+ size: 'sm',
71
74
  })}
72
75
  onClick={onClick}
73
76
  >
package/build/legacy/chunk-MRJ3KCHK.js.map DELETED
@@ -1 +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 data-tooltip\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,gBAAY;AAAA,MACZ,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/chunk-SWUW4BYA.js.map DELETED
@@ -1 +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/chunk-MRJ3KCHK.js.map DELETED
@@ -1 +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 data-tooltip\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,gBAAY;AAAA,MACZ,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-SWUW4BYA.js.map DELETED
@@ -1 +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":[]}