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

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.
@@ -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 }
@@ -9,6 +9,7 @@ function IconButton(props) {
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,
@@ -24,4 +25,4 @@ function IconButton(props) {
24
25
  export {
25
26
  IconButton
26
27
  };
27
- //# sourceMappingURL=chunk-MRJ3KCHK.js.map
28
+ //# sourceMappingURL=chunk-HPN33SVN.js.map
@@ -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, ...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":[]}
@@ -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,8 @@ function Tag(props) {
41
42
  {
42
43
  "aria-label": "Close",
43
44
  className: iconButton({
44
- palette: "action"
45
+ palette: "action",
46
+ usage: "filled"
45
47
  }),
46
48
  onClick,
47
49
  children: /* @__PURE__ */ jsx(Close, {})
@@ -55,4 +57,4 @@ function Tag(props) {
55
57
  export {
56
58
  Tag
57
59
  };
58
- //# sourceMappingURL=chunk-SWUW4BYA.js.map
60
+ //# sourceMappingURL=chunk-LITJCQI7.js.map
@@ -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 })}\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,6 +1,6 @@
1
1
  import {
2
2
  IconButton
3
- } from "../chunk-MRJ3KCHK.js";
3
+ } from "../chunk-HPN33SVN.js";
4
4
  export {
5
5
  IconButton
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-SWUW4BYA.js";
3
+ } from "../chunk-LITJCQI7.js";
4
4
  import "../chunk-R4H3352X.js";
5
5
  export {
6
6
  Tag
@@ -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-LITJCQI7.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-HPN33SVN.js";
71
71
  export {
72
72
  Button,
73
73
  Field,
@@ -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 }
@@ -9,6 +9,7 @@ function IconButton(props) {
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,
@@ -24,4 +25,4 @@ function IconButton(props) {
24
25
  export {
25
26
  IconButton
26
27
  };
27
- //# sourceMappingURL=chunk-MRJ3KCHK.js.map
28
+ //# sourceMappingURL=chunk-HPN33SVN.js.map
@@ -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, ...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":[]}
@@ -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,8 @@ function Tag(props) {
41
42
  {
42
43
  "aria-label": "Close",
43
44
  className: iconButton({
44
- palette: "action"
45
+ palette: "action",
46
+ usage: "filled"
45
47
  }),
46
48
  onClick,
47
49
  children: /* @__PURE__ */ jsx(Close, {})
@@ -55,4 +57,4 @@ function Tag(props) {
55
57
  export {
56
58
  Tag
57
59
  };
58
- //# sourceMappingURL=chunk-SWUW4BYA.js.map
60
+ //# sourceMappingURL=chunk-LITJCQI7.js.map
@@ -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 })}\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,6 +1,6 @@
1
1
  import {
2
2
  IconButton
3
- } from "../chunk-MRJ3KCHK.js";
3
+ } from "../chunk-HPN33SVN.js";
4
4
  export {
5
5
  IconButton
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-SWUW4BYA.js";
3
+ } from "../chunk-LITJCQI7.js";
4
4
  import "../chunk-R4H3352X.js";
5
5
  export {
6
6
  Tag
@@ -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-LITJCQI7.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-HPN33SVN.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-c11fa49",
3
+ "version": "0.3.2-next-ef421b1",
4
4
  "description": "The Cerberus Design React component library.",
5
5
  "browserslist": "> 0.25%, not dead",
6
6
  "sideEffects": false,
@@ -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
  /**
@@ -27,6 +29,7 @@ export function IconButton(props: IconButtonProps): JSX.Element {
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,
@@ -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,7 @@ export function Tag(
68
69
  aria-label="Close"
69
70
  className={iconButton({
70
71
  palette: 'action',
72
+ usage: 'filled',
71
73
  })}
72
74
  onClick={onClick}
73
75
  >
@@ -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":[]}
@@ -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":[]}
@@ -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":[]}
@@ -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":[]}