@cerberus-design/react 0.3.2-next-3346cfc → 0.3.2-next-e98793a

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

@@ -9,6 +9,7 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { Sentiment } from '@cerberus/panda-preset';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -31,6 +32,15 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'pill';
+    onClick: () => void;
+    usage?: 'filled';
+}
+export { ClickableTagProps }
+export { ClickableTagProps as ClickableTagProps_alias_1 }
+
 declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
@@ -402,6 +412,29 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'rounded' | 'pill';
+    usage?: 'filled' | 'outline';
+}
+export { TagProps }
+export { TagProps as TagProps_alias_1 }
+
 /**
  * A component that allows the user to input large blocks of text.
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx

package/build/legacy/chunk-BLKP2WFT.js

@@ -0,0 +1,59 @@
+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 } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tag = (_) => css({});
+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-BLKP2WFT.js.map

package/build/legacy/chunk-BLKP2WFT.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 } from '@cerberus/styled-system/recipes'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst tag = (_: TagProps) => css({})\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,kBAAkB;AAiDvB,SAsBM,KAtBN;AA9CJ,IAAM,MAAM,CAAC,MAAgB,IAAI,CAAC,CAAC;AA0B5B,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.d.ts

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

package/build/legacy/components/Tag.js

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

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

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

package/build/legacy/index.d.ts

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

package/build/legacy/index.js

@@ -1,6 +1,9 @@
 import {
   TabPanel
 } from "./chunk-SVZU6LPF.js";
+import {
+  Tag
+} from "./chunk-BLKP2WFT.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";
@@ -84,6 +87,7 @@ export {
   TabPanel,
   Tabs,
   TabsContext,
+  Tag,
   Textarea,
   ThemeProvider,
   createNavTriggerProps,

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

@@ -9,6 +9,7 @@ import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { Sentiment } from '@cerberus/panda-preset';
 import type { TextareaHTMLAttributes } from 'react';
 
 /**
@@ -31,6 +32,15 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'pill';
+    onClick: () => void;
+    usage?: 'filled';
+}
+export { ClickableTagProps }
+export { ClickableTagProps as ClickableTagProps_alias_1 }
+
 declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
@@ -402,6 +412,29 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+/**
+ * The Tag component is used to display a meta descriptions.
+ * @example
+ * ```tsx
+ * <Tag>Tag</Tag>
+ * ```
+ */
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+/**
+ * This module contains the tag component.
+ * @module
+ */
+declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    palette?: Sentiment;
+    shape?: 'rounded' | 'pill';
+    usage?: 'filled' | 'outline';
+}
+export { TagProps }
+export { TagProps as TagProps_alias_1 }
+
 /**
  * A component that allows the user to input large blocks of text.
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx

package/build/modern/chunk-BLKP2WFT.js

@@ -0,0 +1,59 @@
+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 } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tag = (_) => css({});
+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-BLKP2WFT.js.map

package/build/modern/chunk-BLKP2WFT.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 } from '@cerberus/styled-system/recipes'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst tag = (_: TagProps) => css({})\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,kBAAkB;AAiDvB,SAsBM,KAtBN;AA9CJ,IAAM,MAAM,CAAC,MAAgB,IAAI,CAAC,CAAC;AA0B5B,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.d.ts

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

package/build/modern/components/Tag.js

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

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

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

package/build/modern/index.d.ts

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

package/build/modern/index.js

@@ -1,6 +1,9 @@
 import {
   TabPanel
 } from "./chunk-SVZU6LPF.js";
+import {
+  Tag
+} from "./chunk-BLKP2WFT.js";
 import {
   Textarea
 } from "./chunk-5TBINKAO.js";
@@ -84,6 +87,7 @@ export {
   TabPanel,
   Tabs,
   TabsContext,
+  Tag,
   Textarea,
   ThemeProvider,
   createNavTriggerProps,

package/package.json

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

package/src/components/Tag.tsx

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

package/src/index.ts

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