@cerberus-design/react 0.5.2-next-41ff124 → 0.5.2-next-f5feb6d

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

@@ -1,7 +1,6 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
-import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -37,7 +36,8 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
-    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+    gradient?: never;
+    palette?: never;
     onClick: () => void;
     shape: 'pill';
     usage: 'filled';
@@ -155,6 +155,8 @@ export { Input as Input_alias_1 }
 declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
     describedBy?: string;
     id: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
 }
 export { InputBaseProps }
 export { InputBaseProps as InputBaseProps_alias_1 }

package/build/legacy/{chunk-BJXUBNF2.js → chunk-5XNLWIZO.js}

@@ -8,15 +8,11 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
-  const { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "neutral";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
-  const closableStyles = isClosable ? css({
-    bgColor: "action.bg.active",
-    color: "action.text.initial",
-    paddingInlineEnd: "0"
-  }) : "";
+  const closableStyles = isClosable ? closableCss : "";
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -24,6 +20,7 @@ function Tag(props) {
       className: cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage
@@ -49,8 +46,13 @@ function Tag(props) {
     }
   );
 }
+var closableCss = css({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
 
 export {
   Tag
 };
-//# sourceMappingURL=chunk-BJXUBNF2.js.map
+//# sourceMappingURL=chunk-5XNLWIZO.js.map

package/build/legacy/chunk-5XNLWIZO.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 { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\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\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;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;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/legacy/{chunk-6SAA3NUE.js → chunk-PEWG443T.js}

@@ -11,10 +11,12 @@ import { input } from "@cerberus/styled-system/recipes";
 import { cx } from "@cerberus/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input(props) {
-  const { describedBy, size, ...nativeProps } = props;
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = input({ size });
   const { invalid, ...fieldStates } = useFieldContext();
+  const hasEndIcon = Boolean(endIcon);
   return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22,14 +24,16 @@ function Input(props) {
         ...fieldStates,
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
         className: cx("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 export {
   Input
 };
-//# sourceMappingURL=chunk-6SAA3NUE.js.map
+//# sourceMappingURL=chunk-PEWG443T.js.map

package/build/legacy/chunk-PEWG443T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAqBxC,SAEI,KAFJ;AAPG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAElC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/components/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "../chunk-6SAA3NUE.js";
+} from "../chunk-PEWG443T.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-ZAU4JVLL.js";
 export {

package/build/legacy/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-BJXUBNF2.js";
+} from "../chunk-5XNLWIZO.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/legacy/index.js

@@ -3,13 +3,13 @@ import {
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-BJXUBNF2.js";
+} from "./chunk-5XNLWIZO.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
 import {
   Input
-} from "./chunk-6SAA3NUE.js";
+} from "./chunk-PEWG443T.js";
 import {
   Label
 } from "./chunk-CINUA3C7.js";

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

@@ -1,7 +1,6 @@
 import type { AnchorHTMLAttributes } from 'react';
 import { button } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
-import type { ConditionalValue } from '@cerberus/styled-system/types';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
@@ -37,7 +36,8 @@ export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
-    palette?: ConditionalValue<'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
+    gradient?: never;
+    palette?: never;
     onClick: () => void;
     shape: 'pill';
     usage: 'filled';
@@ -155,6 +155,8 @@ export { Input as Input_alias_1 }
 declare interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
     describedBy?: string;
     id: string;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
 }
 export { InputBaseProps }
 export { InputBaseProps as InputBaseProps_alias_1 }

package/build/modern/{chunk-6SAA3NUE.js → chunk-PEWG443T.js}

@@ -11,10 +11,12 @@ import { input } from "@cerberus/styled-system/recipes";
 import { cx } from "@cerberus/styled-system/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input(props) {
-  const { describedBy, size, ...nativeProps } = props;
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
   const inputStyles = input({ size });
   const { invalid, ...fieldStates } = useFieldContext();
+  const hasEndIcon = Boolean(endIcon);
   return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22,14 +24,16 @@ function Input(props) {
         ...fieldStates,
         ...describedBy && { "aria-describedby": describedBy },
         ...invalid && { "aria-invalid": true },
+        "data-start-icon": Boolean(startIcon),
         className: cx("peer", nativeProps.className, inputStyles.input)
       }
     ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) }),
+    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
   ] });
 }
 
 export {
   Input
 };
-//# sourceMappingURL=chunk-6SAA3NUE.js.map
+//# sourceMappingURL=chunk-PEWG443T.js.map

package/build/modern/chunk-PEWG443T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAqBxC,SAEI,KAFJ;AAPG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAElC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-23OSBT4M.js → chunk-SLIOCQBZ.js}

@@ -8,15 +8,11 @@ import { css, cx } from "@cerberus/styled-system/css";
 import { iconButton, tag } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tag(props) {
-  const { shape: initShape, onClick, usage, ...nativeProps } = props;
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = props?.palette ?? "neutral";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
-  const closableStyles = isClosable ? css({
-    bgColor: "action.bg.active",
-    color: "action.text.initial",
-    paddingInlineEnd: "0"
-  }) : "";
+  const closableStyles = isClosable ? closableCss : "";
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -24,6 +20,7 @@ function Tag(props) {
       className: cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage
@@ -49,8 +46,13 @@ function Tag(props) {
     }
   );
 }
+var closableCss = css({
+  bgColor: "action.bg.active",
+  color: "action.text.initial",
+  paddingInlineEnd: "0"
+});
 
 export {
   Tag
 };
-//# sourceMappingURL=chunk-23OSBT4M.js.map
+//# sourceMappingURL=chunk-SLIOCQBZ.js.map

package/build/modern/chunk-SLIOCQBZ.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 { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  gradient?: never\n  palette?: never\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable ? closableCss : ''\n\n  return (\n    <span\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        tag({\n          gradient,\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\nconst closableCss = css({\n  bgColor: 'action.bg.active',\n  color: 'action.text.initial',\n  paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;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;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}

package/build/modern/components/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "../chunk-6SAA3NUE.js";
+} from "../chunk-PEWG443T.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-ZAU4JVLL.js";
 export {

package/build/modern/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-23OSBT4M.js";
+} from "../chunk-SLIOCQBZ.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/modern/index.js

@@ -3,13 +3,13 @@ import {
 } from "./chunk-YJCWUN33.js";
 import {
   Tag
-} from "./chunk-23OSBT4M.js";
+} from "./chunk-SLIOCQBZ.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
 import {
   Input
-} from "./chunk-6SAA3NUE.js";
+} from "./chunk-PEWG443T.js";
 import {
   Label
 } from "./chunk-CINUA3C7.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.5.2-next-41ff124",
+  "version": "0.5.2-next-f5feb6d",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -21,8 +21,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/styled-system": "0.5.2-next-41ff124",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.5.2-next-f5feb6d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { InputHTMLAttributes } from 'react'
+import type { InputHTMLAttributes, ReactNode } from 'react'
 import { WarningFilled } from '@cerberus/icons'
 import { input } from '@cerberus/styled-system/recipes'
 import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
@@ -8,31 +8,42 @@ import { useFieldContext } from '../context/field'
 import { Show } from './Show'
 
 export type InputRecipeProps = RecipeVariantProps<typeof input>
-
 export interface InputBaseProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
   describedBy?: string
   id: string
+  startIcon?: ReactNode
+  endIcon?: ReactNode
 }
 export type InputProps = InputBaseProps & InputRecipeProps
 
 export function Input(props: InputProps) {
-  const { describedBy, size, ...nativeProps } = props
+  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props
   const inputStyles = input({ size })
   const { invalid, ...fieldStates } = useFieldContext()
+  const hasEndIcon = Boolean(endIcon)
 
   return (
     <div className={inputStyles.root}>
+      <Show when={Boolean(startIcon)}>
+        <span className={inputStyles.startIcon}>{startIcon}</span>
+      </Show>
+
       <input
         {...nativeProps}
         {...fieldStates}
         {...(describedBy && { 'aria-describedby': describedBy })}
         {...(invalid && { 'aria-invalid': true })}
+        data-start-icon={Boolean(startIcon)}
         className={cx('peer', nativeProps.className, inputStyles.input)}
       />
+
       <Show when={invalid}>
         <WarningFilled className={inputStyles.icon} />
       </Show>
+      <Show when={hasEndIcon && !invalid}>
+        <span className={inputStyles.icon}>{endIcon}</span>
+      </Show>
     </div>
   )
 }

package/src/components/Tag.tsx

@@ -3,10 +3,7 @@ import { Close } from '@cerberus/icons'
 import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
 import { iconButton, tag } from '@cerberus/styled-system/recipes'
-import type {
-  ConditionalValue,
-  RecipeVariantProps,
-} from '@cerberus/styled-system/types'
+import type { RecipeVariantProps } from '@cerberus/styled-system/types'
 
 /**
  * This module contains the tag component.
@@ -14,18 +11,20 @@ import type {
  */
 
 export type TagRecipeProps = RecipeVariantProps<typeof tag>
+
 export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
   TagRecipeProps & {
     onClick?: never
   }
+
 export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
-  palette?: ConditionalValue<
-    'neutral' | 'info' | 'success' | 'warning' | 'danger'
-  >
+  gradient?: never
+  palette?: never
   onClick: () => void
   shape: 'pill'
   usage: 'filled'
 }
+
 export type TagProps = StaticTagProps | ClickableTagProps
 
 /**
@@ -37,17 +36,11 @@ export type TagProps = StaticTagProps | ClickableTagProps
  * ```
  */
 export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
-  const { shape: initShape, onClick, usage, ...nativeProps } = props
+  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
   const palette = props?.palette ?? 'neutral'
   const isClosable = Boolean(onClick)
   const shape = isClosable ? 'pill' : initShape
-  const closableStyles = isClosable
-    ? css({
-        bgColor: 'action.bg.active',
-        color: 'action.text.initial',
-        paddingInlineEnd: '0',
-      })
-    : ''
+  const closableStyles = isClosable ? closableCss : ''
 
   return (
     <span
@@ -55,6 +48,7 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
       className={cx(
         nativeProps.className,
         tag({
+          gradient,
           palette,
           shape,
           usage,
@@ -80,3 +74,9 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
     </span>
   )
 }
+
+const closableCss = css({
+  bgColor: 'action.bg.active',
+  color: 'action.text.initial',
+  paddingInlineEnd: '0',
+})

package/build/legacy/chunk-6SAA3NUE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAmBxC,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/chunk-BJXUBNF2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type {\n  ConditionalValue,\n  RecipeVariantProps,\n} from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  palette?: ConditionalValue<\n    'neutral' | 'info' | 'success' | 'warning' | 'danger'\n  >\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        color: 'action.text.initial',\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;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAgD5B,SAwBM,KAxBN;AAdG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AAC7D,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,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/chunk-23OSBT4M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type {\n  ConditionalValue,\n  RecipeVariantProps,\n} from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n  TagRecipeProps & {\n    onClick?: never\n  }\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n  palette?: ConditionalValue<\n    'neutral' | 'info' | 'success' | 'warning' | 'danger'\n  >\n  onClick: () => void\n  shape: 'pill'\n  usage: 'filled'\n}\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n  const { shape: initShape, onClick, usage, ...nativeProps } = props\n  const palette = props?.palette ?? 'neutral'\n  const isClosable = Boolean(onClick)\n  const shape = isClosable ? 'pill' : initShape\n  const closableStyles = isClosable\n    ? css({\n        bgColor: 'action.bg.active',\n        color: 'action.text.initial',\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;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAgD5B,SAwBM,KAxBN;AAdG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AAC7D,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aACnB,IAAI;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,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/chunk-6SAA3NUE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAmC;AAmBxC,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}