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

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,14 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    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 +411,18 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+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-YZO3DYQU.js

@@ -0,0 +1,34 @@
+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

@@ -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 { 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/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,9 @@
+import {
+  Tag
+} from "../chunk-YZO3DYQU.js";
+import "../chunk-R4H3352X.js";
+import "../chunk-MRJ3KCHK.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-YZO3DYQU.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,14 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
+declare interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+    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 +411,18 @@ declare interface TabsProps {
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 
+declare function Tag(props: PropsWithChildren<TagProps | ClickableTagProps>): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+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-YZO3DYQU.js

@@ -0,0 +1,34 @@
+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

@@ -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 { 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/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,9 @@
+import {
+  Tag
+} from "../chunk-YZO3DYQU.js";
+import "../chunk-R4H3352X.js";
+import "../chunk-MRJ3KCHK.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-YZO3DYQU.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-a65ca8e",
+  "version": "0.3.2-next-bdab9b9",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

package/src/components/Tag.tsx

@@ -0,0 +1,42 @@
+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'
+
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  palette?: Sentiment
+  shape?: 'rounded' | 'pill'
+  usage?: 'filled' | 'outline'
+}
+export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
+  shape?: 'pill'
+  onClick: () => void
+  usage?: 'filled'
+}
+
+export function Tag(
+  props: PropsWithChildren<TagProps | ClickableTagProps>,
+): JSX.Element {
+  const { shape, onClick, usage, ...nativeProps } = props
+  const isClosable = Boolean(onClick)
+  const finalShape = isClosable ? 'pill' : shape
+
+  return (
+    <span
+      {...nativeProps}
+      className={cx(nativeProps.className, 'tag')}
+      data-temp-shape={finalShape}
+      data-temp-usage={usage}
+    >
+      {props.children}
+
+      <Show when={isClosable}>
+        <IconButton ariaLabel="Close" onClick={onClick}>
+          <Close />
+        </IconButton>
+      </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'