@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/table/primitives.js

@@ -0,0 +1,50 @@
+import { createCerberusPrimitive } from "../../system/index.js";
+import { table } from "styled-system/recipes";
+//#region src/components/table/primitives.tsx
+/**
+* This module contains the primitives of the Table component.
+* @module 'table/primitives'
+*/
+var { withSlotRecipe } = createCerberusPrimitive(table);
+var TableRoot = withSlotRecipe("div", "root", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "root"
+} });
+var TableEl = withSlotRecipe("table", "table", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "table"
+} });
+var Caption = withSlotRecipe("caption", "caption", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "caption"
+} });
+var Thead = withSlotRecipe("thead", "thead", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "header"
+} });
+var Th = withSlotRecipe("th", "th", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "header-col"
+} });
+var Tbody = withSlotRecipe("tbody", "tbody", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "body"
+} });
+var Tr = withSlotRecipe("tr", "tr", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "row"
+} });
+var Td = withSlotRecipe("td", "td", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "cell"
+} });
+var Tfoot = withSlotRecipe("tfoot", "tfoot", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "footer"
+} });
+var TableTrigger = withSlotRecipe("button", "trigger", { defaultProps: {
+	"data-scope": "table",
+	"data-part": "trigger"
+} });
+//#endregion
+export { Caption, TableEl, TableRoot, TableTrigger, Tbody, Td, Tfoot, Th, Thead, Tr };

package/dist/components/table/table.cjs

@@ -0,0 +1,46 @@
+const require_show = require("../show/show.cjs");
+const require_primitives = require("./primitives.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/table/table.tsx
+/**
+* An abstraction over the TableRoot component that adds a sticky attribute.
+* @description [Cerberus Docs](https://cerberus.digitalu.design/react/table)
+*
+* @remarks
+*
+* This component is used to create a table with an optional sticky header.
+* It is a wrapper around the TableRoot component and the TableEl primitive.
+*/
+function TableRootEl(props) {
+	const { sticky, caption, ...rootProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.TableRoot, {
+		...rootProps,
+		"data-sticky": sticky ?? false,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives.TableEl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+			when: caption,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.Caption, { children: caption })
+		}), rootProps.children] })
+	});
+}
+/**
+* An Object containing the parts of the Table component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the TableParts object and
+* the entire family of components vs. only what you use.
+*/
+var Table = {
+	Root: TableRootEl,
+	Caption: require_primitives.Caption,
+	Header: require_primitives.Thead,
+	HeaderCol: require_primitives.Th,
+	Body: require_primitives.Tbody,
+	Row: require_primitives.Tr,
+	Cell: require_primitives.Td,
+	Footer: require_primitives.Tfoot,
+	Trigger: require_primitives.TableTrigger
+};
+//#endregion
+exports.Table = Table;

package/dist/components/table/table.d.cts

@@ -0,0 +1,24 @@
+import { TablePartsValue } from './parts';
+import { TableRootProps } from './primitives';
+export interface TableRootElProps extends TableRootProps {
+    /**
+     * An easy to understand description of the table. Required for accessibility.
+     */
+    caption: string;
+    /**
+     * If true, the table header will be sticky.
+     *
+     * @default false
+     */
+    sticky?: boolean;
+}
+/**
+ * An Object containing the parts of the Table component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TableParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const Table: Omit<TablePartsValue, 'Table'>;

package/dist/components/table/table.d.ts

@@ -0,0 +1,24 @@
+import { TablePartsValue } from './parts';
+import { TableRootProps } from './primitives';
+export interface TableRootElProps extends TableRootProps {
+    /**
+     * An easy to understand description of the table. Required for accessibility.
+     */
+    caption: string;
+    /**
+     * If true, the table header will be sticky.
+     *
+     * @default false
+     */
+    sticky?: boolean;
+}
+/**
+ * An Object containing the parts of the Table component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TableParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const Table: Omit<TablePartsValue, 'Table'>;

package/dist/components/table/table.js

@@ -0,0 +1,46 @@
+import { Show } from "../show/show.js";
+import { Caption, TableEl, TableRoot, TableTrigger, Tbody, Td, Tfoot, Th, Thead, Tr } from "./primitives.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+/**
+* An abstraction over the TableRoot component that adds a sticky attribute.
+* @description [Cerberus Docs](https://cerberus.digitalu.design/react/table)
+*
+* @remarks
+*
+* This component is used to create a table with an optional sticky header.
+* It is a wrapper around the TableRoot component and the TableEl primitive.
+*/
+function TableRootEl(props) {
+	const { sticky, caption, ...rootProps } = props;
+	return /* @__PURE__ */ jsx(TableRoot, {
+		...rootProps,
+		"data-sticky": sticky ?? false,
+		children: /* @__PURE__ */ jsxs(TableEl, { children: [/* @__PURE__ */ jsx(Show, {
+			when: caption,
+			children: /* @__PURE__ */ jsx(Caption, { children: caption })
+		}), rootProps.children] })
+	});
+}
+/**
+* An Object containing the parts of the Table component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the TableParts object and
+* the entire family of components vs. only what you use.
+*/
+var Table = {
+	Root: TableRootEl,
+	Caption,
+	Header: Thead,
+	HeaderCol: Th,
+	Body: Tbody,
+	Row: Tr,
+	Cell: Td,
+	Footer: Tfoot,
+	Trigger: TableTrigger
+};
+//#endregion
+export { Table };

package/dist/components/tabs/index.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_primitives = require("./primitives.cjs");
+const require_parts = require("./parts.cjs");
+const require_tabs = require("./tabs.cjs");
+exports.Tabs = require_tabs.Tabs;
+exports.TabsContent = require_primitives.TabsContent;
+exports.TabsIndicator = require_primitives.TabsIndicator;
+exports.TabsList = require_primitives.TabsList;
+exports.TabsParts = require_parts.TabsParts;
+exports.TabsRoot = require_primitives.TabsRoot;
+exports.TabsTrigger = require_primitives.TabsTrigger;

package/dist/components/tabs/index.d.cts

@@ -0,0 +1,3 @@
+export * from './parts';
+export * from './primitives';
+export * from './tabs';

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './parts';
+export * from './primitives';
+export * from './tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./primitives.js";
+import { TabsParts } from "./parts.js";
+import { Tabs } from "./tabs.js";
+export { Tabs, TabsContent, TabsIndicator, TabsList, TabsParts, TabsRoot, TabsTrigger };

package/dist/components/tabs/parts.cjs

@@ -0,0 +1,20 @@
+const require_primitives = require("./primitives.cjs");
+//#region src/components/tabs/parts.ts
+/**
+* An Object containing the parts of the Switch component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the TabsParts object and
+* the entire family of components vs. only what you use.
+*/
+var TabsParts = {
+	Root: require_primitives.TabsRoot,
+	List: require_primitives.TabsList,
+	Trigger: require_primitives.TabsTrigger,
+	Content: require_primitives.TabsContent,
+	Indicator: require_primitives.TabsIndicator
+};
+//#endregion
+exports.TabsParts = TabsParts;

package/dist/components/tabs/parts.d.cts

@@ -0,0 +1,37 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Tabs parts.
+ * @module 'tabs/parts'
+ */
+export interface TabsPartsValue {
+    /**
+     * The container of the tabs.
+     */
+    Root: ElementType;
+    /**
+     * The tab list element.
+     */
+    List: ElementType;
+    /**
+     * The tab element.
+     */
+    Trigger: ElementType;
+    /**
+     * The tab content element.
+     */
+    Content: ElementType;
+    /**
+     * The tab indicator element.
+     */
+    Indicator: ElementType;
+}
+/**
+ * An Object containing the parts of the Switch component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const TabsParts: TabsPartsValue;

package/dist/components/tabs/parts.d.ts

@@ -0,0 +1,37 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Tabs parts.
+ * @module 'tabs/parts'
+ */
+export interface TabsPartsValue {
+    /**
+     * The container of the tabs.
+     */
+    Root: ElementType;
+    /**
+     * The tab list element.
+     */
+    List: ElementType;
+    /**
+     * The tab element.
+     */
+    Trigger: ElementType;
+    /**
+     * The tab content element.
+     */
+    Content: ElementType;
+    /**
+     * The tab indicator element.
+     */
+    Indicator: ElementType;
+}
+/**
+ * An Object containing the parts of the Switch component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const TabsParts: TabsPartsValue;

package/dist/components/tabs/parts.js

@@ -0,0 +1,20 @@
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./primitives.js";
+//#region src/components/tabs/parts.ts
+/**
+* An Object containing the parts of the Switch component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the TabsParts object and
+* the entire family of components vs. only what you use.
+*/
+var TabsParts = {
+	Root: TabsRoot,
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Content: TabsContent,
+	Indicator: TabsIndicator
+};
+//#endregion
+export { TabsParts };

package/dist/components/tabs/primitives.cjs

@@ -0,0 +1,20 @@
+const require_index = require("../../system/index.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let _ark_ui_react_tabs = require("@ark-ui/react/tabs");
+//#region src/components/tabs/primitives.tsx
+/**
+* This module provides the primitives for the Tabs component.
+* @module 'tabs/primitives'
+*/
+var { withSlotRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.tabs);
+var TabsRoot = withSlotRecipe(_ark_ui_react_tabs.Tabs.Root, "root");
+var TabsList = withSlotRecipe(_ark_ui_react_tabs.Tabs.List, "list");
+var TabsTrigger = withSlotRecipe(_ark_ui_react_tabs.Tabs.Trigger, "trigger");
+var TabsContent = withSlotRecipe(_ark_ui_react_tabs.Tabs.Content, "content");
+var TabsIndicator = withSlotRecipe(_ark_ui_react_tabs.Tabs.Indicator, "indicator");
+//#endregion
+exports.TabsContent = TabsContent;
+exports.TabsIndicator = TabsIndicator;
+exports.TabsList = TabsList;
+exports.TabsRoot = TabsRoot;
+exports.TabsTrigger = TabsTrigger;

package/dist/components/tabs/primitives.d.cts

@@ -0,0 +1,14 @@
+import { Tabs, TabContentProps as ArkTabContentProps, TabIndicatorProps as ArkTabIndicatorProps, TabListProps as ArkTabListProps, TabsRootProps as ArkTabsRootProps, TabTriggerProps as ArkTabTriggerProps } from '@ark-ui/react/tabs';
+import { TabsVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type TabsRootProps = CerberusPrimitiveProps<ArkTabsRootProps & TabsVariantProps>;
+export declare const TabsRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabsListProps = CerberusPrimitiveProps<ArkTabListProps>;
+export declare const TabsList: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.ListProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabsTriggerProps = CerberusPrimitiveProps<ArkTabTriggerProps>;
+export declare const TabsTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabContentProps = CerberusPrimitiveProps<ArkTabContentProps>;
+export declare const TabsContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabIndicatorProps = CerberusPrimitiveProps<ArkTabIndicatorProps>;
+export declare const TabsIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.IndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/tabs/primitives.d.ts

@@ -0,0 +1,14 @@
+import { Tabs, TabContentProps as ArkTabContentProps, TabIndicatorProps as ArkTabIndicatorProps, TabListProps as ArkTabListProps, TabsRootProps as ArkTabsRootProps, TabTriggerProps as ArkTabTriggerProps } from '@ark-ui/react/tabs';
+import { TabsVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type TabsRootProps = CerberusPrimitiveProps<ArkTabsRootProps & TabsVariantProps>;
+export declare const TabsRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabsListProps = CerberusPrimitiveProps<ArkTabListProps>;
+export declare const TabsList: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.ListProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabsTriggerProps = CerberusPrimitiveProps<ArkTabTriggerProps>;
+export declare const TabsTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabContentProps = CerberusPrimitiveProps<ArkTabContentProps>;
+export declare const TabsContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type TabIndicatorProps = CerberusPrimitiveProps<ArkTabIndicatorProps>;
+export declare const TabsIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Tabs.IndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/tabs/primitives.js

@@ -0,0 +1,16 @@
+import { createCerberusPrimitive } from "../../system/index.js";
+import { tabs } from "styled-system/recipes";
+import { Tabs } from "@ark-ui/react/tabs";
+//#region src/components/tabs/primitives.tsx
+/**
+* This module provides the primitives for the Tabs component.
+* @module 'tabs/primitives'
+*/
+var { withSlotRecipe } = createCerberusPrimitive(tabs);
+var TabsRoot = withSlotRecipe(Tabs.Root, "root");
+var TabsList = withSlotRecipe(Tabs.List, "list");
+var TabsTrigger = withSlotRecipe(Tabs.Trigger, "trigger");
+var TabsContent = withSlotRecipe(Tabs.Content, "content");
+var TabsIndicator = withSlotRecipe(Tabs.Indicator, "indicator");
+//#endregion
+export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger };

package/dist/components/tabs/tabs.cjs

@@ -0,0 +1,29 @@
+const require_parts = require("./parts.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/tabs/tabs.tsx
+/**
+* An abstraction of the TabsList component that includes the TabIndicator.
+*/
+function TabsList(props) {
+	const { children, ...listProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.TabsParts.List, {
+		...listProps,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.TabsParts.Indicator, {})]
+	});
+}
+/**
+* An Object containing the abstracted parts of the Tabs component.
+*
+* @remarks
+*
+* When using object component syntax, you import the TabsParts object and
+* the entire family of components vs. only what you use.
+*/
+var Tabs = {
+	Root: require_parts.TabsParts.Root,
+	List: TabsList,
+	Tab: require_parts.TabsParts.Trigger,
+	Panel: require_parts.TabsParts.Content
+};
+//#endregion
+exports.Tabs = Tabs;

package/dist/components/tabs/tabs.d.cts

@@ -0,0 +1,26 @@
+import { ElementType } from 'react';
+import { TabsPartsValue } from './parts';
+/**
+ * This module contains an abstraction of the Tabs family.
+ * @module 'tabs'
+ */
+interface TabsValueProps extends Omit<TabsPartsValue, 'Trigger' | 'Content' | 'Indicator'> {
+    /**
+     * A named component for the TabsTrigger.
+     */
+    Tab: ElementType;
+    /**
+     * A named component for the TabsContent.
+     */
+    Panel: ElementType;
+}
+/**
+ * An Object containing the abstracted parts of the Tabs component.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const Tabs: TabsValueProps;
+export {};

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,26 @@
+import { ElementType } from 'react';
+import { TabsPartsValue } from './parts';
+/**
+ * This module contains an abstraction of the Tabs family.
+ * @module 'tabs'
+ */
+interface TabsValueProps extends Omit<TabsPartsValue, 'Trigger' | 'Content' | 'Indicator'> {
+    /**
+     * A named component for the TabsTrigger.
+     */
+    Tab: ElementType;
+    /**
+     * A named component for the TabsContent.
+     */
+    Panel: ElementType;
+}
+/**
+ * An Object containing the abstracted parts of the Tabs component.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const Tabs: TabsValueProps;
+export {};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,29 @@
+import { TabsParts } from "./parts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+/**
+* An abstraction of the TabsList component that includes the TabIndicator.
+*/
+function TabsList(props) {
+	const { children, ...listProps } = props;
+	return /* @__PURE__ */ jsxs(TabsParts.List, {
+		...listProps,
+		children: [children, /* @__PURE__ */ jsx(TabsParts.Indicator, {})]
+	});
+}
+/**
+* An Object containing the abstracted parts of the Tabs component.
+*
+* @remarks
+*
+* When using object component syntax, you import the TabsParts object and
+* the entire family of components vs. only what you use.
+*/
+var Tabs = {
+	Root: TabsParts.Root,
+	List: TabsList,
+	Tab: TabsParts.Trigger,
+	Panel: TabsParts.Content
+};
+//#endregion
+export { Tabs };

package/dist/components/tag/closable.cjs

@@ -0,0 +1,30 @@
+"use client";
+"use client";
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_button = require("../icon-button/button.cjs");
+const require_primitives = require("./primitives.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/tag/closable.tsx
+function ClosableTag(props) {
+	const { onClick, children, ...rootProps } = props;
+	const { icons } = require_cerberus.useCerberusContext();
+	const { close: Close } = icons;
+	const palette = rootProps.palette === "page" ? "secondaryAction" : rootProps.palette ?? "secondaryAction";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives.TagRoot, {
+		"data-palette": palette,
+		palette,
+		shape: "pill",
+		pe: "0",
+		...rootProps,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.IconButton, {
+			ariaLabel: "Close tag",
+			onClick,
+			palette,
+			usage: "filled",
+			size: "sm",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Close, {})
+		})]
+	});
+}
+//#endregion
+exports.ClosableTag = ClosableTag;

package/dist/components/tag/closable.d.cts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+import { TagRootProps } from './primitives';
+export interface ClosableTagProps extends TagRootProps {
+    /**
+     * The action to be performed when the close button is clicked.
+     */
+    onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+}
+export declare function ClosableTag(props: ClosableTagProps): import("react").JSX.Element;

package/dist/components/tag/closable.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+import { TagRootProps } from './primitives';
+export interface ClosableTagProps extends TagRootProps {
+    /**
+     * The action to be performed when the close button is clicked.
+     */
+    onClick: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+}
+export declare function ClosableTag(props: ClosableTagProps): import("react").JSX.Element;

package/dist/components/tag/closable.js

@@ -0,0 +1,30 @@
+"use client";
+"use client";
+import { useCerberusContext } from "../../context/cerberus.js";
+import { IconButton } from "../icon-button/button.js";
+import { TagRoot } from "./primitives.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tag/closable.tsx
+function ClosableTag(props) {
+	const { onClick, children, ...rootProps } = props;
+	const { icons } = useCerberusContext();
+	const { close: Close } = icons;
+	const palette = rootProps.palette === "page" ? "secondaryAction" : rootProps.palette ?? "secondaryAction";
+	return /* @__PURE__ */ jsxs(TagRoot, {
+		"data-palette": palette,
+		palette,
+		shape: "pill",
+		pe: "0",
+		...rootProps,
+		children: [children, /* @__PURE__ */ jsx(IconButton, {
+			ariaLabel: "Close tag",
+			onClick,
+			palette,
+			usage: "filled",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Close, {})
+		})]
+	});
+}
+//#endregion
+export { ClosableTag };

package/dist/components/tag/index.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_primitives = require("./primitives.cjs");
+const require_tag = require("./tag.cjs");
+exports.Tag = require_tag.Tag;
+exports.TagRoot = require_primitives.TagRoot;

package/dist/components/tag/index.d.cts

@@ -0,0 +1,2 @@
+export * from './primitives';
+export * from './tag';

package/dist/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './primitives';
+export * from './tag';

package/dist/components/tag/index.js

@@ -0,0 +1,3 @@
+import { TagRoot } from "./primitives.js";
+import { Tag } from "./tag.js";
+export { Tag, TagRoot };

package/dist/components/tag/primitives.cjs

@@ -0,0 +1,10 @@
+const require_index = require("../../system/index.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+//#region src/components/tag/primitives.ts
+var { withRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.tag);
+var TagRoot = withRecipe("span", { defaultProps: {
+	"data-scope": "tag",
+	"data-part": "root"
+} });
+//#endregion
+exports.TagRoot = TagRoot;

package/dist/components/tag/primitives.d.cts

@@ -0,0 +1,5 @@
+import { CerberusPrimitiveProps } from '../../system/index';
+import { TagVariantProps } from 'styled-system/recipes';
+import { HTMLAttributes, ForwardRefExoticComponent, DetailedHTMLProps, RefAttributes } from 'react';
+export type TagRootProps = CerberusPrimitiveProps<Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> & TagVariantProps>;
+export declare const TagRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;