@fanvue/ui 2.4.0 → 2.5.1

package/dist/cjs/components/Icons/ThumbDownFilledIcon.cjs

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThumbDownFilledIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn.cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbDownFilledIcon.displayName = "ThumbDownFilledIcon";
+exports.ThumbDownFilledIcon = ThumbDownFilledIcon;
+//# sourceMappingURL=ThumbDownFilledIcon.cjs.map

package/dist/cjs/components/Icons/ThumbDownFilledIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbDownFilledIcon.cjs","sources":["../../../../src/components/Icons/ThumbDownFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbDownFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z\" />\n            <path d=\"M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbDownFilledIcon.displayName = \"ThumbDownFilledIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,yCAAC,KAAA,EAAE,MAAK,gBACN,UAAAC,2BAAAA,KAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,oiBAAA,CAAoiB;AAAA,UAC5iBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,uLAAA,CAAuL;AAAA,QAAA,EAAA,CACjM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,oBAAoB,cAAc;;"}

package/dist/cjs/components/Icons/ThumbUpFilledIcon.cjs

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ThumbUpFilledIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn.cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbUpFilledIcon.displayName = "ThumbUpFilledIcon";
+exports.ThumbUpFilledIcon = ThumbUpFilledIcon;
+//# sourceMappingURL=ThumbUpFilledIcon.cjs.map

package/dist/cjs/components/Icons/ThumbUpFilledIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbUpFilledIcon.cjs","sources":["../../../../src/components/Icons/ThumbUpFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbUpFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z\" />\n            <path d=\"M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbUpFilledIcon.displayName = \"ThumbUpFilledIcon\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,yCAAC,KAAA,EAAE,MAAK,gBACN,UAAAC,2BAAAA,KAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,GAAE,6kBAAA,CAA6kB;AAAA,UACrlBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,8LAAA,CAA8L;AAAA,QAAA,EAAA,CACxM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/Stepper/Stepper.cjs

@@ -0,0 +1,72 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const StepperStep = require("./StepperStep.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const CONNECTOR_MARGIN = {
+  sm: "mt-3",
+  md: "mt-4",
+  lg: "mt-5"
+};
+const Stepper = React__namespace.forwardRef(
+  ({ activeStep, steps, size = "md", className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "group",
+          "aria-label": "Progress",
+          className: cn.cn("flex items-start", className),
+          ...props,
+          children: steps.map((step, index) => {
+            const state = index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming";
+            return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                StepperStep.StepperStep,
+                {
+                  state,
+                  size,
+                  stepNumber: index + 1,
+                  title: step.title,
+                  description: step.description,
+                  className: "shrink-0"
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn.cn("h-px min-w-6 flex-1 bg-border-primary", CONNECTOR_MARGIN[size]),
+                  "aria-hidden": "true"
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+exports.Stepper = Stepper;
+//# sourceMappingURL=Stepper.cjs.map

package/dist/cjs/components/Stepper/Stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.cjs","sources":["../../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StepperStep, type StepperStepSize } from \"./StepperStep\";\n\n/** Configuration for a single step within a {@link Stepper}. */\nexport interface StepItem {\n  /** Primary label for the step. */\n  title: string;\n  /** Secondary description for the step. */\n  description?: string;\n}\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-based index of the currently active step. Steps before this are marked completed. */\n  activeStep: number;\n  /** Configuration for each step. */\n  steps: StepItem[];\n  /** Size preset applied to all step indicators and labels. @default \"md\" */\n  size?: StepperStepSize;\n}\n\nconst CONNECTOR_MARGIN: Record<StepperStepSize, string> = {\n  sm: \"mt-3\",\n  md: \"mt-4\",\n  lg: \"mt-5\",\n};\n\n/**\n * A horizontal progress stepper that displays a sequence of steps with\n * completed, active, and upcoming states.\n *\n * @example\n * ```tsx\n * <Stepper\n *   activeStep={1}\n *   steps={[\n *     { title: \"Account\", description: \"Create account\" },\n *     { title: \"Profile\", description: \"Set up profile\" },\n *     { title: \"Done\", description: \"All set!\" },\n *   ]}\n * />\n * ```\n */\nexport const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, steps, size = \"md\", className, ...props }, ref) => {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        className={cn(\"flex items-start\", className)}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const state =\n            index < activeStep ? \"completed\" : index === activeStep ? \"active\" : \"upcoming\";\n\n          return (\n            <React.Fragment key={index}>\n              <StepperStep\n                state={state}\n                size={size}\n                stepNumber={index + 1}\n                title={step.title}\n                description={step.description}\n                className=\"shrink-0\"\n              />\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\"h-px min-w-6 flex-1 bg-border-primary\", CONNECTOR_MARGIN[size])}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nStepper.displayName = \"Stepper\";\n"],"names":["React","jsx","cn","jsxs","StepperStep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,MAAM,UAAUA,iBAAM;AAAA,EAC3B,CAAC,EAAE,YAAY,OAAO,OAAO,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChE;AAAA;AAAA,MAEEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWC,GAAAA,GAAG,oBAAoB,SAAS;AAAA,UAC1C,GAAG;AAAA,UAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,QACJ,QAAQ,aAAa,cAAc,UAAU,aAAa,WAAW;AAEvE,mBACEC,gCAACH,iBAAM,UAAN,EACC,UAAA;AAAA,cAAAC,2BAAAA;AAAAA,gBAACG,YAAAA;AAAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,YAAY,QAAQ;AAAA,kBACpB,OAAO,KAAK;AAAA,kBACZ,aAAa,KAAK;AAAA,kBAClB,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,QAAQ,MAAM,SAAS,KACtBH,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,GAAAA,GAAG,yCAAyC,iBAAiB,IAAI,CAAC;AAAA,kBAC7E,eAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd,EAAA,GAbiB,KAerB;AAAA,UAEJ,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;;"}

package/dist/cjs/components/Stepper/StepperStep.cjs

@@ -0,0 +1,103 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const CheckIcon = require("../Icons/CheckIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const INDICATOR_SIZE = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+const INDICATOR_STATE = {
+  completed: "bg-success-surface",
+  active: "border border-brand-primary-default bg-brand-primary-muted",
+  upcoming: "bg-neutral-alphas-50"
+};
+const NUMBER_TYPOGRAPHY = {
+  sm: "typography-semibold-body-sm",
+  md: "typography-semibold-body-md",
+  lg: "typography-semibold-body-lg"
+};
+const NUMBER_COLOR = {
+  completed: "",
+  active: "text-content-primary",
+  upcoming: "text-content-secondary"
+};
+const CONTAINER_GAP = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-2"
+};
+const TITLE_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-md",
+  lg: "typography-regular-body-lg"
+};
+const DESCRIPTION_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-sm",
+  lg: "typography-regular-body-md"
+};
+const LABEL_COLOR = {
+  completed: "text-content-secondary",
+  active: "text-content-primary",
+  upcoming: "text-content-tertiary"
+};
+const CHECK_ICON_SIZE = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const StepperStep = React__namespace.forwardRef(
+  ({ state = "upcoming", size = "md", stepNumber, title, description, className, ...props }, ref) => {
+    const hasLabels = title != null || description != null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn("flex flex-col items-center", CONTAINER_GAP[size], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn.cn(
+                "flex shrink-0 items-center justify-center rounded-full",
+                INDICATOR_SIZE[size],
+                INDICATOR_STATE[state]
+              ),
+              "aria-hidden": "true",
+              children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: cn.cn(CHECK_ICON_SIZE[size], "text-success-content") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state]), children: stepNumber })
+            }
+          ),
+          hasLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("flex flex-col items-center gap-1 text-center", LABEL_COLOR[state]), children: [
+            title != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TITLE_TYPOGRAPHY[size], children: title }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: DESCRIPTION_TYPOGRAPHY[size], children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "StepperStep";
+exports.StepperStep = StepperStep;
+//# sourceMappingURL=StepperStep.cjs.map

package/dist/cjs/components/Stepper/StepperStep.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStep.cjs","sources":["../../../../src/components/Stepper/StepperStep.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\n\n/** Current state of a step in the stepper. */\nexport type StepperStepState = \"completed\" | \"active\" | \"upcoming\";\n\n/** Size preset for the step indicator and labels. */\nexport type StepperStepSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StepperStepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current state of the step. @default \"upcoming\" */\n  state?: StepperStepState;\n  /** Size preset for the indicator and labels. @default \"md\" */\n  size?: StepperStepSize;\n  /** Step number displayed in the indicator for active and upcoming states. */\n  stepNumber?: number;\n  /** Primary label shown below the indicator. */\n  title?: string;\n  /** Secondary description shown below the title. */\n  description?: string;\n}\n\nconst INDICATOR_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-6\",\n  md: \"size-8\",\n  lg: \"size-10\",\n};\n\nconst INDICATOR_STATE: Record<StepperStepState, string> = {\n  completed: \"bg-success-surface\",\n  active: \"border border-brand-primary-default bg-brand-primary-muted\",\n  upcoming: \"bg-neutral-alphas-50\",\n};\n\nconst NUMBER_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-semibold-body-sm\",\n  md: \"typography-semibold-body-md\",\n  lg: \"typography-semibold-body-lg\",\n};\n\nconst NUMBER_COLOR: Record<StepperStepState, string> = {\n  completed: \"\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-secondary\",\n};\n\nconst CONTAINER_GAP: Record<StepperStepSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n};\n\nconst TITLE_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-md\",\n  lg: \"typography-regular-body-lg\",\n};\n\nconst DESCRIPTION_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-sm\",\n  lg: \"typography-regular-body-md\",\n};\n\nconst LABEL_COLOR: Record<StepperStepState, string> = {\n  completed: \"text-content-secondary\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-tertiary\",\n};\n\nconst CHECK_ICON_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-3\",\n  md: \"size-4\",\n  lg: \"size-5\",\n};\n\n/**\n * A single step indicator with optional labels, used standalone or within a {@link Stepper}.\n *\n * @example\n * ```tsx\n * <StepperStep state=\"active\" stepNumber={2} title=\"Profile\" description=\"Set up profile\" />\n * ```\n */\nexport const StepperStep = React.forwardRef<HTMLDivElement, StepperStepProps>(\n  (\n    { state = \"upcoming\", size = \"md\", stepNumber, title, description, className, ...props },\n    ref,\n  ) => {\n    const hasLabels = title != null || description != null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", CONTAINER_GAP[size], className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-full\",\n            INDICATOR_SIZE[size],\n            INDICATOR_STATE[state],\n          )}\n          aria-hidden=\"true\"\n        >\n          {state === \"completed\" ? (\n            <CheckIcon className={cn(CHECK_ICON_SIZE[size], \"text-success-content\")} />\n          ) : (\n            <span className={cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state])}>{stepNumber}</span>\n          )}\n        </div>\n\n        {hasLabels && (\n          <div className={cn(\"flex flex-col items-center gap-1 text-center\", LABEL_COLOR[state])}>\n            {title != null && <span className={TITLE_TYPOGRAPHY[size]}>{title}</span>}\n            {description != null && (\n              <span className={DESCRIPTION_TYPOGRAPHY[size]}>{description}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStepperStep.displayName = \"StepperStep\";\n"],"names":["React","jsxs","cn","jsx","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAoD;AAAA,EACxD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,oBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,gBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,yBAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAgD;AAAA,EACpD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE,EAAE,QAAQ,YAAY,OAAO,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,MAAA,GACjF,QACG;AACH,UAAM,YAAY,SAAS,QAAQ,eAAe;AAElD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8BAA8B,cAAc,IAAI,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,eAAe,IAAI;AAAA,gBACnB,gBAAgB,KAAK;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA,UAAU,cACTC,2BAAAA,IAACC,UAAAA,WAAA,EAAU,WAAWF,GAAAA,GAAG,gBAAgB,IAAI,GAAG,sBAAsB,EAAA,CAAG,IAEzEC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,GAAAA,GAAG,kBAAkB,IAAI,GAAG,aAAa,KAAK,CAAC,GAAI,UAAA,WAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAIlF,6CACE,OAAA,EAAI,WAAWA,GAAAA,GAAG,gDAAgD,YAAY,KAAK,CAAC,GAClF,UAAA;AAAA,YAAA,SAAS,QAAQC,+BAAC,QAAA,EAAK,WAAW,iBAAiB,IAAI,GAAI,UAAA,OAAM;AAAA,YACjE,eAAe,QACdA,2BAAAA,IAAC,QAAA,EAAK,WAAW,uBAAuB,IAAI,GAAI,UAAA,YAAA,CAAY;AAAA,UAAA,EAAA,CAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/TextField/TextField.cjs

@@ -32,36 +32,38 @@ const INPUT_SIZE_CLASSES = {
   "40": "py-2 typography-regular-body-lg",
   "32": "py-2 typography-regular-body-md"
 };
-const PADDING_HORIZONTAL = {
+const INPUT_PL = {
+  "48": { default: "pl-4", withIcon: "pl-10" },
+  "40": { default: "pl-4", withIcon: "pl-10" },
+  "32": { default: "pl-3", withIcon: "pl-9" }
+};
+const INPUT_PR = {
+  "48": { default: "pr-4", withIcon: "pr-10" },
+  "40": { default: "pr-4", withIcon: "pr-10" },
+  "32": { default: "pr-3", withIcon: "pr-9" }
+};
+const ICON_INSET = {
   "48": "px-4",
   "40": "px-4",
   "32": "px-3"
 };
-const ICON_SPACING = {
-  "48": "gap-2",
-  "40": "gap-2",
-  "32": "gap-2"
-};
 function getContainerClassName(size, error, disabled) {
   return cn.cn(
-    "flex items-center rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors",
     error ? "border-error-content" : "border-transparent",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_HEIGHT[size],
-    PADDING_HORIZONTAL[size],
-    ICON_SPACING[size],
     disabled && "opacity-50"
   );
 }
-function getInputClassName(size) {
+function getInputClassName(size, hasLeftIcon, hasRightIcon) {
   return cn.cn(
-    "h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
-    INPUT_SIZE_CLASSES[size]
+    "h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
+    INPUT_SIZE_CLASSES[size],
+    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,
+    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default
   );
 }
-function TextFieldIcon({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center text-content-secondary", children });
-}
 function TextFieldHelperText({
   id,
   error,
@@ -125,7 +127,6 @@ const TextField = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getContainerClassName(size, error, disabled), children: [
-            leftIcon && /* @__PURE__ */ jsxRuntime.jsx(TextFieldIcon, { children: leftIcon }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -135,15 +136,35 @@ const TextField = React__namespace.forwardRef(
                 "aria-describedby": bottomText ? helperTextId : void 0,
                 "aria-invalid": error || void 0,
                 className: cn.cn(
-                  getInputClassName(size),
-                  // Hide native clear button for input[type="search"] in WebKit browsers (Safari/Chrome)
+                  getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),
                   "[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none"
                 ),
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ jsxRuntime.jsx(TextFieldIcon, { children: rightIcon }),
-            validated && /* @__PURE__ */ jsxRuntime.jsx(TextFieldIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-content" }) })
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn.cn(
+                  "pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary",
+                  ICON_INSET[size]
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: leftIcon })
+              }
+            ),
+            (rightIcon || validated) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn.cn(
+                  "absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary",
+                  ICON_INSET[size]
+                ),
+                children: [
+                  rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: rightIcon }),
+                  validated && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckOutlineIcon.CheckOutlineIcon, { className: "text-success-content" }) })
+                ]
+              }
+            )
           ] }),
           bottomText && /* @__PURE__ */ jsxRuntime.jsx(TextFieldHelperText, { id: helperTextId, error, children: bottomText })
         ]

package/dist/cjs/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst ICON_SPACING: Record<TextFieldSize, string> = {\n  \"48\": \"gap-2\",\n  \"40\": \"gap-2\",\n  \"32\": \"gap-2\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"flex items-center rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    PADDING_HORIZONTAL[size],\n    ICON_SPACING[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize) {\n  return cn(\n    \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n  );\n}\n\nfunction TextFieldIcon({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex size-4 shrink-0 items-center justify-center text-content-secondary\">\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && <TextFieldIcon>{leftIcon}</TextFieldIcon>}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size),\n              // Hide native clear button for input[type=\"search\"] in WebKit browsers (Safari/Chrome)\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {rightIcon && <TextFieldIcon>{rightIcon}</TextFieldIcon>}\n          {validated && (\n            <TextFieldIcon>\n              <CheckOutlineIcon className=\"text-success-content\" />\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":["cn","jsx","React","jsxs","CheckOutlineIcon"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -130,7 +130,9 @@ const Support2Icon = require("./components/Icons/Support2Icon.cjs");
 const SupportIcon = require("./components/Icons/SupportIcon.cjs");
 const TagIcon = require("./components/Icons/TagIcon.cjs");
 const TaskIcon = require("./components/Icons/TaskIcon.cjs");
+const ThumbDownFilledIcon = require("./components/Icons/ThumbDownFilledIcon.cjs");
 const ThumbDownIcon = require("./components/Icons/ThumbDownIcon.cjs");
+const ThumbUpFilledIcon = require("./components/Icons/ThumbUpFilledIcon.cjs");
 const ThumbUpIcon = require("./components/Icons/ThumbUpIcon.cjs");
 const TickCircleIcon = require("./components/Icons/TickCircleIcon.cjs");
 const TickCircleOffIcon = require("./components/Icons/TickCircleOffIcon.cjs");
@@ -167,6 +169,8 @@ const Select = require("./components/Select/Select.cjs");
 const Skeleton = require("./components/Skeleton/Skeleton.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
 const Snackbar = require("./components/Snackbar/Snackbar.cjs");
+const Stepper = require("./components/Stepper/Stepper.cjs");
+const StepperStep = require("./components/Stepper/StepperStep.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
 const SwitchField = require("./components/SwitchField/SwitchField.cjs");
 const SwitchToggle = require("./components/SwitchToggle/SwitchToggle.cjs");
@@ -346,7 +350,9 @@ exports.Support2Icon = Support2Icon.Support2Icon;
 exports.SupportIcon = SupportIcon.SupportIcon;
 exports.TagIcon = TagIcon.TagIcon;
 exports.TaskIcon = TaskIcon.TaskIcon;
+exports.ThumbDownFilledIcon = ThumbDownFilledIcon.ThumbDownFilledIcon;
 exports.ThumbDownIcon = ThumbDownIcon.ThumbDownIcon;
+exports.ThumbUpFilledIcon = ThumbUpFilledIcon.ThumbUpFilledIcon;
 exports.ThumbUpIcon = ThumbUpIcon.ThumbUpIcon;
 exports.TickCircleIcon = TickCircleIcon.TickCircleIcon;
 exports.TickCircleOffIcon = TickCircleOffIcon.TickCircleOffIcon;
@@ -390,6 +396,8 @@ exports.SelectSeparator = Select.SelectSeparator;
 exports.Skeleton = Skeleton.Skeleton;
 exports.Slider = Slider.Slider;
 exports.Snackbar = Snackbar.Snackbar;
+exports.Stepper = Stepper.Stepper;
+exports.StepperStep = StepperStep.StepperStep;
 exports.Switch = Switch.Switch;
 exports.SwitchField = SwitchField.SwitchField;
 exports.SwitchToggle = SwitchToggle.SwitchToggle;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Icons/ThumbDownFilledIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ThumbDownFilledIcon = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsx("path", { d: "M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbDownFilledIcon.displayName = "ThumbDownFilledIcon";
+export {
+  ThumbDownFilledIcon
+};
+//# sourceMappingURL=ThumbDownFilledIcon.mjs.map

package/dist/components/Icons/ThumbDownFilledIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbDownFilledIcon.mjs","sources":["../../../src/components/Icons/ThumbDownFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbDownFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 3.23001V13.39C6.38989 13.79 6.50989 14.18 6.72989 14.51L9.4599 18.57C9.8899 19.22 10.9599 19.68 11.8699 19.34C12.8499 19.01 13.4999 17.91 13.2899 16.93L12.7699 13.66C12.7299 13.36 12.8099 13.09 12.9799 12.88C13.1499 12.69 13.3999 12.57 13.6699 12.57H17.7799C18.5699 12.57 19.2499 12.25 19.6499 11.69C20.0299 11.15 20.0999 10.45 19.8499 9.74001L17.3899 2.25001C17.0799 1.01001 15.7299 5.72205e-06 14.3899 5.72205e-06H10.4899C9.8199 5.72205e-06 8.8799 0.230005 8.4499 0.660006L7.16989 1.65001C6.67989 2.02001 6.38989 2.61 6.38989 3.23001Z\" />\n            <path d=\"M3.21 15.3398H2.18C0.63 15.3398 0 14.7398 0 13.2598V3.1998C0 1.7198 0.63 1.1198 2.18 1.1198H3.21C4.76 1.1198 5.39 1.7198 5.39 3.1998V13.2598C5.39 14.7398 4.76 15.3398 3.21 15.3398Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbDownFilledIcon.displayName = \"ThumbDownFilledIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,sBAAsB,MAAM;AAAA,EACvC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,8BAAC,KAAA,EAAE,MAAK,gBACN,UAAA,qBAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,oiBAAA,CAAoiB;AAAA,UAC5iB,oBAAC,QAAA,EAAK,GAAE,uLAAA,CAAuL;AAAA,QAAA,EAAA,CACjM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,oBAAoB,cAAc;"}

package/dist/components/Icons/ThumbUpFilledIcon.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ThumbUpFilledIcon = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        className: cn("size-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: /* @__PURE__ */ jsxs("g", { transform: "translate(2 2)", children: [
+          /* @__PURE__ */ jsx("path", { d: "M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z" })
+        ] }) })
+      }
+    );
+  }
+);
+ThumbUpFilledIcon.displayName = "ThumbUpFilledIcon";
+export {
+  ThumbUpFilledIcon
+};
+//# sourceMappingURL=ThumbUpFilledIcon.mjs.map

package/dist/components/Icons/ThumbUpFilledIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbUpFilledIcon.mjs","sources":["../../../src/components/Icons/ThumbUpFilledIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ThumbUpFilledIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"size-6\", className)}\n        {...props}\n      >\n        <g fill=\"currentColor\">\n          <g transform=\"translate(2 2)\">\n            <path d=\"M6.38989 16.2251V6.06508C6.38989 5.66508 6.50989 5.27508 6.72989 4.94508L9.4599 0.885083C9.8899 0.235083 10.9599 -0.224917 11.8699 0.115083C12.8499 0.445083 13.4999 1.54508 13.2899 2.52508L12.7699 5.79508C12.7299 6.09508 12.8099 6.36508 12.9799 6.57508C13.1499 6.76508 13.3999 6.88508 13.6699 6.88508H17.7799C18.5699 6.88508 19.2499 7.20508 19.6499 7.76507C20.0299 8.30507 20.0999 9.00507 19.8499 9.71507L17.3899 17.2051C17.0799 18.4451 15.7299 19.4551 14.3899 19.4551H10.4899C9.8199 19.4551 8.8799 19.2251 8.4499 18.7951L7.16989 17.8051C6.67989 17.4351 6.38989 16.8451 6.38989 16.2251Z\" />\n            <path d=\"M3.21 4.11523H2.18C0.63 4.11523 0 4.71523 0 6.19523V16.2553C0 17.7353 0.63 18.3353 2.18 18.3353H3.21C4.76 18.3353 5.39 17.7353 5.39 16.2553V6.19523C5.39 4.71523 4.76 4.11523 3.21 4.11523Z\" />\n          </g>\n        </g>\n      </svg>\n    );\n  },\n);\n\nThumbUpFilledIcon.displayName = \"ThumbUpFilledIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,oBAAoB,MAAM;AAAA,EACrC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,8BAAC,KAAA,EAAE,MAAK,gBACN,UAAA,qBAAC,KAAA,EAAE,WAAU,kBACX,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,6kBAAA,CAA6kB;AAAA,UACrlB,oBAAC,QAAA,EAAK,GAAE,8LAAA,CAA8L;AAAA,QAAA,EAAA,CACxM,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,kBAAkB,cAAc;"}

package/dist/components/Stepper/Stepper.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { StepperStep } from "./StepperStep.mjs";
+const CONNECTOR_MARGIN = {
+  sm: "mt-3",
+  md: "mt-4",
+  lg: "mt-5"
+};
+const Stepper = React.forwardRef(
+  ({ activeStep, steps, size = "md", className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "group",
+          "aria-label": "Progress",
+          className: cn("flex items-start", className),
+          ...props,
+          children: steps.map((step, index) => {
+            const state = index < activeStep ? "completed" : index === activeStep ? "active" : "upcoming";
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                StepperStep,
+                {
+                  state,
+                  size,
+                  stepNumber: index + 1,
+                  title: step.title,
+                  description: step.description,
+                  className: "shrink-0"
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("h-px min-w-6 flex-1 bg-border-primary", CONNECTOR_MARGIN[size]),
+                  "aria-hidden": "true"
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+export {
+  Stepper
+};
+//# sourceMappingURL=Stepper.mjs.map

package/dist/components/Stepper/Stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.mjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { StepperStep, type StepperStepSize } from \"./StepperStep\";\n\n/** Configuration for a single step within a {@link Stepper}. */\nexport interface StepItem {\n  /** Primary label for the step. */\n  title: string;\n  /** Secondary description for the step. */\n  description?: string;\n}\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-based index of the currently active step. Steps before this are marked completed. */\n  activeStep: number;\n  /** Configuration for each step. */\n  steps: StepItem[];\n  /** Size preset applied to all step indicators and labels. @default \"md\" */\n  size?: StepperStepSize;\n}\n\nconst CONNECTOR_MARGIN: Record<StepperStepSize, string> = {\n  sm: \"mt-3\",\n  md: \"mt-4\",\n  lg: \"mt-5\",\n};\n\n/**\n * A horizontal progress stepper that displays a sequence of steps with\n * completed, active, and upcoming states.\n *\n * @example\n * ```tsx\n * <Stepper\n *   activeStep={1}\n *   steps={[\n *     { title: \"Account\", description: \"Create account\" },\n *     { title: \"Profile\", description: \"Set up profile\" },\n *     { title: \"Done\", description: \"All set!\" },\n *   ]}\n * />\n * ```\n */\nexport const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, steps, size = \"md\", className, ...props }, ref) => {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> adds unwanted browser styling for a non-interactive progress indicator\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        className={cn(\"flex items-start\", className)}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const state =\n            index < activeStep ? \"completed\" : index === activeStep ? \"active\" : \"upcoming\";\n\n          return (\n            <React.Fragment key={index}>\n              <StepperStep\n                state={state}\n                size={size}\n                stepNumber={index + 1}\n                title={step.title}\n                description={step.description}\n                className=\"shrink-0\"\n              />\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\"h-px min-w-6 flex-1 bg-border-primary\", CONNECTOR_MARGIN[size])}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nStepper.displayName = \"Stepper\";\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,MAAM,UAAU,MAAM;AAAA,EAC3B,CAAC,EAAE,YAAY,OAAO,OAAO,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChE;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAW,GAAG,oBAAoB,SAAS;AAAA,UAC1C,GAAG;AAAA,UAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,QACJ,QAAQ,aAAa,cAAc,UAAU,aAAa,WAAW;AAEvE,mBACE,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,YAAY,QAAQ;AAAA,kBACpB,OAAO,KAAK;AAAA,kBACZ,aAAa,KAAK;AAAA,kBAClB,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEX,QAAQ,MAAM,SAAS,KACtB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,GAAG,yCAAyC,iBAAiB,IAAI,CAAC;AAAA,kBAC7E,eAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd,EAAA,GAbiB,KAerB;AAAA,UAEJ,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;"}

package/dist/components/Stepper/StepperStep.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+const INDICATOR_SIZE = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+const INDICATOR_STATE = {
+  completed: "bg-success-surface",
+  active: "border border-brand-primary-default bg-brand-primary-muted",
+  upcoming: "bg-neutral-alphas-50"
+};
+const NUMBER_TYPOGRAPHY = {
+  sm: "typography-semibold-body-sm",
+  md: "typography-semibold-body-md",
+  lg: "typography-semibold-body-lg"
+};
+const NUMBER_COLOR = {
+  completed: "",
+  active: "text-content-primary",
+  upcoming: "text-content-secondary"
+};
+const CONTAINER_GAP = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-2"
+};
+const TITLE_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-md",
+  lg: "typography-regular-body-lg"
+};
+const DESCRIPTION_TYPOGRAPHY = {
+  sm: "typography-regular-body-sm",
+  md: "typography-regular-body-sm",
+  lg: "typography-regular-body-md"
+};
+const LABEL_COLOR = {
+  completed: "text-content-secondary",
+  active: "text-content-primary",
+  upcoming: "text-content-tertiary"
+};
+const CHECK_ICON_SIZE = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const StepperStep = React.forwardRef(
+  ({ state = "upcoming", size = "md", stepNumber, title, description, className, ...props }, ref) => {
+    const hasLabels = title != null || description != null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center", CONTAINER_GAP[size], className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center rounded-full",
+                INDICATOR_SIZE[size],
+                INDICATOR_STATE[state]
+              ),
+              "aria-hidden": "true",
+              children: state === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: cn(CHECK_ICON_SIZE[size], "text-success-content") }) : /* @__PURE__ */ jsx("span", { className: cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state]), children: stepNumber })
+            }
+          ),
+          hasLabels && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-1 text-center", LABEL_COLOR[state]), children: [
+            title != null && /* @__PURE__ */ jsx("span", { className: TITLE_TYPOGRAPHY[size], children: title }),
+            description != null && /* @__PURE__ */ jsx("span", { className: DESCRIPTION_TYPOGRAPHY[size], children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "StepperStep";
+export {
+  StepperStep
+};
+//# sourceMappingURL=StepperStep.mjs.map

package/dist/components/Stepper/StepperStep.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStep.mjs","sources":["../../../src/components/Stepper/StepperStep.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\n\n/** Current state of a step in the stepper. */\nexport type StepperStepState = \"completed\" | \"active\" | \"upcoming\";\n\n/** Size preset for the step indicator and labels. */\nexport type StepperStepSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface StepperStepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current state of the step. @default \"upcoming\" */\n  state?: StepperStepState;\n  /** Size preset for the indicator and labels. @default \"md\" */\n  size?: StepperStepSize;\n  /** Step number displayed in the indicator for active and upcoming states. */\n  stepNumber?: number;\n  /** Primary label shown below the indicator. */\n  title?: string;\n  /** Secondary description shown below the title. */\n  description?: string;\n}\n\nconst INDICATOR_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-6\",\n  md: \"size-8\",\n  lg: \"size-10\",\n};\n\nconst INDICATOR_STATE: Record<StepperStepState, string> = {\n  completed: \"bg-success-surface\",\n  active: \"border border-brand-primary-default bg-brand-primary-muted\",\n  upcoming: \"bg-neutral-alphas-50\",\n};\n\nconst NUMBER_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-semibold-body-sm\",\n  md: \"typography-semibold-body-md\",\n  lg: \"typography-semibold-body-lg\",\n};\n\nconst NUMBER_COLOR: Record<StepperStepState, string> = {\n  completed: \"\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-secondary\",\n};\n\nconst CONTAINER_GAP: Record<StepperStepSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n};\n\nconst TITLE_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-md\",\n  lg: \"typography-regular-body-lg\",\n};\n\nconst DESCRIPTION_TYPOGRAPHY: Record<StepperStepSize, string> = {\n  sm: \"typography-regular-body-sm\",\n  md: \"typography-regular-body-sm\",\n  lg: \"typography-regular-body-md\",\n};\n\nconst LABEL_COLOR: Record<StepperStepState, string> = {\n  completed: \"text-content-secondary\",\n  active: \"text-content-primary\",\n  upcoming: \"text-content-tertiary\",\n};\n\nconst CHECK_ICON_SIZE: Record<StepperStepSize, string> = {\n  sm: \"size-3\",\n  md: \"size-4\",\n  lg: \"size-5\",\n};\n\n/**\n * A single step indicator with optional labels, used standalone or within a {@link Stepper}.\n *\n * @example\n * ```tsx\n * <StepperStep state=\"active\" stepNumber={2} title=\"Profile\" description=\"Set up profile\" />\n * ```\n */\nexport const StepperStep = React.forwardRef<HTMLDivElement, StepperStepProps>(\n  (\n    { state = \"upcoming\", size = \"md\", stepNumber, title, description, className, ...props },\n    ref,\n  ) => {\n    const hasLabels = title != null || description != null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", CONTAINER_GAP[size], className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-full\",\n            INDICATOR_SIZE[size],\n            INDICATOR_STATE[state],\n          )}\n          aria-hidden=\"true\"\n        >\n          {state === \"completed\" ? (\n            <CheckIcon className={cn(CHECK_ICON_SIZE[size], \"text-success-content\")} />\n          ) : (\n            <span className={cn(NUMBER_TYPOGRAPHY[size], NUMBER_COLOR[state])}>{stepNumber}</span>\n          )}\n        </div>\n\n        {hasLabels && (\n          <div className={cn(\"flex flex-col items-center gap-1 text-center\", LABEL_COLOR[state])}>\n            {title != null && <span className={TITLE_TYPOGRAPHY[size]}>{title}</span>}\n            {description != null && (\n              <span className={DESCRIPTION_TYPOGRAPHY[size]}>{description}</span>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStepperStep.displayName = \"StepperStep\";\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAoD;AAAA,EACxD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,oBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,gBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,mBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,yBAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAgD;AAAA,EACpD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,MAAM,kBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,QAAQ,YAAY,OAAO,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,MAAA,GACjF,QACG;AACH,UAAM,YAAY,SAAS,QAAQ,eAAe;AAElD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8BAA8B,cAAc,IAAI,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe,IAAI;AAAA,gBACnB,gBAAgB,KAAK;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA,UAAU,cACT,oBAAC,WAAA,EAAU,WAAW,GAAG,gBAAgB,IAAI,GAAG,sBAAsB,EAAA,CAAG,IAEzE,oBAAC,QAAA,EAAK,WAAW,GAAG,kBAAkB,IAAI,GAAG,aAAa,KAAK,CAAC,GAAI,UAAA,WAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAIlF,kCACE,OAAA,EAAI,WAAW,GAAG,gDAAgD,YAAY,KAAK,CAAC,GAClF,UAAA;AAAA,YAAA,SAAS,QAAQ,oBAAC,QAAA,EAAK,WAAW,iBAAiB,IAAI,GAAI,UAAA,OAAM;AAAA,YACjE,eAAe,QACd,oBAAC,QAAA,EAAK,WAAW,uBAAuB,IAAI,GAAI,UAAA,YAAA,CAAY;AAAA,UAAA,EAAA,CAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/TextField/TextField.mjs

@@ -13,36 +13,38 @@ const INPUT_SIZE_CLASSES = {
   "40": "py-2 typography-regular-body-lg",
   "32": "py-2 typography-regular-body-md"
 };
-const PADDING_HORIZONTAL = {
+const INPUT_PL = {
+  "48": { default: "pl-4", withIcon: "pl-10" },
+  "40": { default: "pl-4", withIcon: "pl-10" },
+  "32": { default: "pl-3", withIcon: "pl-9" }
+};
+const INPUT_PR = {
+  "48": { default: "pr-4", withIcon: "pr-10" },
+  "40": { default: "pr-4", withIcon: "pr-10" },
+  "32": { default: "pr-3", withIcon: "pr-9" }
+};
+const ICON_INSET = {
   "48": "px-4",
   "40": "px-4",
   "32": "px-3"
 };
-const ICON_SPACING = {
-  "48": "gap-2",
-  "40": "gap-2",
-  "32": "gap-2"
-};
 function getContainerClassName(size, error, disabled) {
   return cn(
-    "flex items-center rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors",
+    "relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors",
     error ? "border-error-content" : "border-transparent",
     !disabled && !error && "hover:border-neutral-alphas-400",
     CONTAINER_HEIGHT[size],
-    PADDING_HORIZONTAL[size],
-    ICON_SPACING[size],
     disabled && "opacity-50"
   );
 }
-function getInputClassName(size) {
+function getInputClassName(size, hasLeftIcon, hasRightIcon) {
   return cn(
-    "h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
-    INPUT_SIZE_CLASSES[size]
+    "h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed",
+    INPUT_SIZE_CLASSES[size],
+    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,
+    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default
   );
 }
-function TextFieldIcon({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center text-content-secondary", children });
-}
 function TextFieldHelperText({
   id,
   error,
@@ -106,7 +108,6 @@ const TextField = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: getContainerClassName(size, error, disabled), children: [
-            leftIcon && /* @__PURE__ */ jsx(TextFieldIcon, { children: leftIcon }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -116,15 +117,35 @@ const TextField = React.forwardRef(
                 "aria-describedby": bottomText ? helperTextId : void 0,
                 "aria-invalid": error || void 0,
                 className: cn(
-                  getInputClassName(size),
-                  // Hide native clear button for input[type="search"] in WebKit browsers (Safari/Chrome)
+                  getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),
                   "[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none"
                 ),
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ jsx(TextFieldIcon, { children: rightIcon }),
-            validated && /* @__PURE__ */ jsx(TextFieldIcon, { children: /* @__PURE__ */ jsx(CheckOutlineIcon, { className: "text-success-content" }) })
+            leftIcon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary",
+                  ICON_INSET[size]
+                ),
+                children: /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: leftIcon })
+              }
+            ),
+            (rightIcon || validated) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary",
+                  ICON_INSET[size]
+                ),
+                children: [
+                  rightIcon && /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: rightIcon }),
+                  validated && /* @__PURE__ */ jsx("div", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(CheckOutlineIcon, { className: "text-success-content" }) })
+                ]
+              }
+            )
           ] }),
           bottomText && /* @__PURE__ */ jsx(TextFieldHelperText, { id: helperTextId, error, children: bottomText })
         ]

package/dist/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst ICON_SPACING: Record<TextFieldSize, string> = {\n  \"48\": \"gap-2\",\n  \"40\": \"gap-2\",\n  \"32\": \"gap-2\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"flex items-center rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    PADDING_HORIZONTAL[size],\n    ICON_SPACING[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize) {\n  return cn(\n    \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n  );\n}\n\nfunction TextFieldIcon({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex size-4 shrink-0 items-center justify-center text-content-secondary\">\n      {children}\n    </div>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          {leftIcon && <TextFieldIcon>{leftIcon}</TextFieldIcon>}\n\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size),\n              // Hide native clear button for input[type=\"search\"] in WebKit browsers (Safari/Chrome)\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {rightIcon && <TextFieldIcon>{rightIcon}</TextFieldIcon>}\n          {validated && (\n            <TextFieldIcon>\n              <CheckOutlineIcon className=\"text-success-content\" />\n            </TextFieldIcon>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-regular-body-lg\",\n  \"40\": \"py-2 typography-regular-body-lg\",\n  \"32\": \"py-2 typography-regular-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-neutral-alphas-50 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-regular-body-sm px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -2145,6 +2145,70 @@ export declare const StarIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** Configuration for a single step within a {@link Stepper}. */
+export declare interface StepItem {
+    /** Primary label for the step. */
+    title: string;
+    /** Secondary description for the step. */
+    description?: string;
+}
+
+/**
+ * A horizontal progress stepper that displays a sequence of steps with
+ * completed, active, and upcoming states.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { title: "Account", description: "Create account" },
+ *     { title: "Profile", description: "Set up profile" },
+ *     { title: "Done", description: "All set!" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Stepper: React_2.ForwardRefExoticComponent<StepperProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface StepperProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Zero-based index of the currently active step. Steps before this are marked completed. */
+    activeStep: number;
+    /** Configuration for each step. */
+    steps: StepItem[];
+    /** Size preset applied to all step indicators and labels. @default "md" */
+    size?: StepperStepSize;
+}
+
+/**
+ * A single step indicator with optional labels, used standalone or within a {@link Stepper}.
+ *
+ * @example
+ * ```tsx
+ * <StepperStep state="active" stepNumber={2} title="Profile" description="Set up profile" />
+ * ```
+ */
+export declare const StepperStep: React_2.ForwardRefExoticComponent<StepperStepProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface StepperStepProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Current state of the step. @default "upcoming" */
+    state?: StepperStepState;
+    /** Size preset for the indicator and labels. @default "md" */
+    size?: StepperStepSize;
+    /** Step number displayed in the indicator for active and upcoming states. */
+    stepNumber?: number;
+    /** Primary label shown below the indicator. */
+    title?: string;
+    /** Secondary description shown below the title. */
+    description?: string;
+}
+
+/** Size preset for the step indicator and labels. */
+export declare type StepperStepSize = "sm" | "md" | "lg";
+
+/** Current state of a step in the stepper. */
+export declare type StepperStepState = "completed" | "active" | "upcoming";
+
 export declare const StopIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -2651,10 +2715,18 @@ export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes
 /** Text field height in pixels. */
 export declare type TextFieldSize = "48" | "40" | "32";
 
+export declare const ThumbDownFilledIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare const ThumbDownIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ThumbUpFilledIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare const ThumbUpIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;

package/dist/index.mjs

@@ -128,7 +128,9 @@ import { Support2Icon } from "./components/Icons/Support2Icon.mjs";
 import { SupportIcon } from "./components/Icons/SupportIcon.mjs";
 import { TagIcon } from "./components/Icons/TagIcon.mjs";
 import { TaskIcon } from "./components/Icons/TaskIcon.mjs";
+import { ThumbDownFilledIcon } from "./components/Icons/ThumbDownFilledIcon.mjs";
 import { ThumbDownIcon } from "./components/Icons/ThumbDownIcon.mjs";
+import { ThumbUpFilledIcon } from "./components/Icons/ThumbUpFilledIcon.mjs";
 import { ThumbUpIcon } from "./components/Icons/ThumbUpIcon.mjs";
 import { TickCircleIcon } from "./components/Icons/TickCircleIcon.mjs";
 import { TickCircleOffIcon } from "./components/Icons/TickCircleOffIcon.mjs";
@@ -165,6 +167,8 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSepa
 import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
 import { Slider } from "./components/Slider/Slider.mjs";
 import { Snackbar } from "./components/Snackbar/Snackbar.mjs";
+import { Stepper } from "./components/Stepper/Stepper.mjs";
+import { StepperStep } from "./components/Stepper/StepperStep.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
@@ -360,6 +364,8 @@ export {
   Snackbar,
   SpinnerIcon,
   StarIcon,
+  Stepper,
+  StepperStep,
   StopIcon,
   SuccessIcon,
   SunIcon,
@@ -396,7 +402,9 @@ export {
   TaskIcon,
   TextArea,
   TextField,
+  ThumbDownFilledIcon,
   ThumbDownIcon,
+  ThumbUpFilledIcon,
   ThumbUpIcon,
   TickCircleIcon,
   TickCircleOffIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/theme.css

@@ -1,6 +1,15 @@
 /* Consumers must provide their own Tailwind import: @import "tailwindcss"; */
 
 @variant dark (&:where(.dark, .dark *));
+@custom-variant infloww (&:is([data-infloww] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 850px;
+  --breakpoint-md: 1024px;
+  --breakpoint-inflowwmd: 1223px;
+  --breakpoint-lg: 1280px;
+}
 
 @layer base {
   html {
@@ -15,10 +24,19 @@
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
+  input:autofill,
+  input:autofill:hover,
+  input:autofill:focus,
   textarea:-webkit-autofill,
   textarea:-webkit-autofill:hover,
-  textarea:-webkit-autofill:focus {
+  textarea:-webkit-autofill:focus,
+  textarea:autofill,
+  textarea:autofill:hover,
+  textarea:autofill:focus {
     -webkit-text-fill-color: var(--color-content-primary);
+    -webkit-box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
+    box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
+    background-clip: padding-box !important;
     transition: background-color 9999s ease-in-out 0s;
   }
 }
@@ -29,7 +47,8 @@
   --shadow-lg: 0px 4px 8px -1px #00000014, 0px 8px 22px -1px #0000001a;
   --shadow-blur-menu: 0px 6px 12px 0px #0000001a;
   --shadow-blur-floating: 0px 12px 40px 2px #00000026;
-  --shadow-focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-interaction-focus);
+  --shadow-focus-ring:
+    0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-interaction-focus);
 
   --radius-xs: 8px;
   --radius-sm: 12px;
@@ -39,7 +58,6 @@
   --radius-2xl: 40px;
   --radius-full: 9999px;
 
-
   --color-neutral-alphas-50: var(--primitives-color-blackalpha-50);
   --color-neutral-alphas-100: var(--primitives-color-blackalpha-100);
   --color-neutral-alphas-150: #15151526;
@@ -115,7 +133,6 @@
   --color-icons-brand-green: var(--color-brand-primary-default);
   --color-icons-brand-purple: var(--color-brand-secondary-default);
   --color-icons-primary-inverted: var(--primitives-color-gray-white);
-
 }
 
 :root {
@@ -133,7 +150,6 @@
   --spacing-sm: 12px;
   --spacing-2xs: 4px;
 
-
   --primitives-color-gray-50: #fafafaff;
   --primitives-color-gray-75: #f7f7f7ff;
   --primitives-color-gray-100: #f5f5f5ff;
@@ -269,7 +285,6 @@
   --primitives-color-alpha-900: #ffffffe6;
   --primitives-color-alpha-950: #fffffff2;
 
-
   /* Light-mode semantic tokens must also live in :root because @theme
      cannot resolve var() references to :root primitives at build time. */
   --color-neutral-alphas-50: var(--primitives-color-blackalpha-50);
@@ -347,7 +362,6 @@
   --color-icons-brand-green: var(--color-brand-primary-default);
   --color-icons-brand-purple: var(--color-brand-secondary-default);
   --color-icons-primary-inverted: var(--primitives-color-gray-white);
-
 }
 
 .dark {
@@ -426,7 +440,6 @@
   --color-icons-brand-green: var(--color-brand-primary-default);
   --color-icons-brand-purple: var(--color-brand-secondary-default);
   --color-icons-primary-inverted: var(--primitives-color-gray-black);
-
 }
 
 @utility typography-regular-body-lg {
@@ -606,7 +619,6 @@
   line-height: 64px;
 }
 
-
 @utility fv-skeleton-wave {
   position: relative;
   overflow: hidden;
@@ -658,4 +670,4 @@
 
 @utility animate-accordion-collapse {
   animation: accordion-collapse 200ms ease-out;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -166,7 +166,7 @@
   "size-limit": [
     {
       "path": "dist/index.mjs",
-      "limit": "55 KB",
+      "limit": "57 KB",
       "ignore": [
         "@radix-ui/*",
         "clsx",