@brycks/core-front 0.5.0 → 0.6.0

package/dist/components/form/Select/Select.js

@@ -1,13 +1,8 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { forwardRef as L, useState as j } from "react";
-import { cx as B } from "../../../utils/styles.js";
-const C = {
-  sm: { height: 32, fontSize: 13, padding: 10 },
-  md: { height: 40, fontSize: 14, padding: 12 },
-  lg: { height: 48, fontSize: 15, padding: 14 }
-};
-function N() {
-  return /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t(
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { cx as i } from "../../../utils/styles.js";
+function w() {
+  return /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
     "path",
     {
       d: "M2.5 4.5L6 8L9.5 4.5",
@@ -18,97 +13,56 @@ function N() {
     }
   ) });
 }
-const R = L(function({
-  size: c = "md",
-  variant: s = "outline",
-  isInvalid: o,
-  placeholder: a,
-  className: u,
-  style: f,
-  testId: b,
-  disabled: n,
-  children: g,
-  onFocus: h,
-  onBlur: y,
-  value: i,
+const y = b(function({
+  size: l = "md",
+  variant: n = "outline",
+  isInvalid: c,
+  placeholder: r,
+  className: a,
+  style: d,
+  testId: p,
+  disabled: t,
+  children: h,
+  value: s,
   ...k
 }, m) {
-  const [d, l] = j(!1), r = C[c], S = i !== void 0 && i !== "", v = {
-    position: "relative",
-    display: "inline-flex",
-    width: "100%"
-  }, w = () => {
-    const e = {
-      width: "100%",
-      height: r.height,
-      paddingLeft: r.padding,
-      paddingRight: r.padding + 24,
-      fontSize: r.fontSize,
-      fontFamily: "var(--brycks-font-sans)",
-      color: S || !a ? "var(--brycks-foreground-default)" : "var(--brycks-foreground-muted)",
-      backgroundColor: s === "filled" ? "var(--brycks-background-muted)" : "var(--brycks-background-app)",
-      border: `1px solid ${o ? "var(--brycks-error-default)" : d ? "var(--brycks-border-focus)" : s === "filled" ? "transparent" : "var(--brycks-border-default)"}`,
-      borderRadius: "var(--brycks-radius-default)",
-      outline: "none",
-      cursor: n ? "not-allowed" : "pointer",
-      appearance: "none",
-      WebkitAppearance: "none",
-      transition: "all 200ms ease-out",
-      boxShadow: d ? o ? "0 0 0 3px rgba(239, 68, 68, 0.15)" : "0 0 0 3px rgba(85, 120, 244, 0.15)" : "none"
-    };
-    return n && (e.opacity = 0.5), e;
-  }, x = {
-    position: "absolute",
-    right: r.padding,
-    top: "50%",
-    transform: "translateY(-50%)",
-    pointerEvents: "none",
-    color: "var(--brycks-foreground-muted)",
-    transition: "transform 200ms ease-out"
-  }, z = (e) => {
-    l(!0), h?.(e);
-  }, F = (e) => {
-    l(!1), y?.(e);
-  };
-  return /* @__PURE__ */ p(
+  const u = !(s !== void 0 && s !== "") && !!r;
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: B(
+      className: i(
         "brycks-select-wrapper",
-        `brycks-select-wrapper--${s}`,
-        `brycks-select-wrapper--${c}`,
-        o && "brycks-select-wrapper--invalid",
-        n && "brycks-select-wrapper--disabled",
-        u
+        `brycks-select-wrapper--${n}`,
+        `brycks-select-wrapper--${l}`,
+        c && "brycks-select-wrapper--invalid",
+        t && "brycks-select-wrapper--disabled",
+        a
       ),
-      style: { ...v, ...f },
+      style: d,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ o(
           "select",
           {
             ref: m,
-            className: "brycks-select",
-            style: w(),
-            disabled: n,
-            "aria-invalid": o,
-            "data-testid": b,
-            value: i,
-            onFocus: z,
-            onBlur: F,
+            className: i("brycks-select", u && "brycks-select--placeholder"),
+            disabled: t,
+            "aria-invalid": c,
+            "data-testid": p,
+            value: s,
             ...k,
             children: [
-              a && /* @__PURE__ */ t("option", { value: "", disabled: !0, children: a }),
-              g
+              r && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: r }),
+              h
             ]
           }
         ),
-        /* @__PURE__ */ t("span", { style: x, children: /* @__PURE__ */ t(N, {}) })
+        /* @__PURE__ */ e("span", { className: "brycks-select-icon", children: /* @__PURE__ */ e(w, {}) })
       ]
     }
   );
 });
-R.displayName = "Select";
+y.displayName = "Select";
 export {
-  R as Select
+  y as Select
 };
 //# sourceMappingURL=Select.js.map

package/dist/components/form/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/form/Select/Select.tsx"],"sourcesContent":["/**\r\n * Select Component\r\n *\r\n * Native select with custom styling for cross-browser consistency.\r\n * Maintains accessibility while providing Apple-inspired visuals.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type SelectHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SelectSize = 'sm' | 'md' | 'lg'\r\nexport type SelectVariant = 'outline' | 'filled'\r\n\r\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\r\n  /** Select size */\r\n  size?: SelectSize\r\n  /** Visual variant */\r\n  variant?: SelectVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Placeholder option */\r\n  placeholder?: string\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Children (option elements) */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<SelectSize, { height: number; fontSize: number; padding: number }> = {\r\n  sm: { height: 32, fontSize: 13, padding: 10 },\r\n  md: { height: 40, fontSize: 14, padding: 12 },\r\n  lg: { height: 48, fontSize: 15, padding: 14 },\r\n}\r\n\r\n/** Chevron down icon */\r\nfunction ChevronIcon() {\r\n  return (\r\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 4.5L6 8L9.5 4.5\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    placeholder,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    children,\r\n    onFocus,\r\n    onBlur,\r\n    value,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n\r\n  const sizeValue = sizeStyles[size]\r\n  const hasValue = value !== undefined && value !== ''\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    position: 'relative',\r\n    display: 'inline-flex',\r\n    width: '100%',\r\n  }\r\n\r\n  const getSelectStyle = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      width: '100%',\r\n      height: sizeValue.height,\r\n      paddingLeft: sizeValue.padding,\r\n      paddingRight: sizeValue.padding + 24,\r\n      fontSize: sizeValue.fontSize,\r\n      fontFamily: 'var(--brycks-font-sans)',\r\n      color: hasValue || !placeholder ? 'var(--brycks-foreground-default)' : 'var(--brycks-foreground-muted)',\r\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-app)',\r\n      border: `1px solid ${\r\n        isInvalid\r\n          ? 'var(--brycks-error-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : variant === 'filled'\r\n              ? 'transparent'\r\n              : 'var(--brycks-border-default)'\r\n      }`,\r\n      borderRadius: 'var(--brycks-radius-default)',\r\n      outline: 'none',\r\n      cursor: disabled ? 'not-allowed' : 'pointer',\r\n      appearance: 'none',\r\n      WebkitAppearance: 'none',\r\n      transition: 'all 200ms ease-out',\r\n      boxShadow: isFocused\r\n        ? isInvalid\r\n          ? '0 0 0 3px rgba(239, 68, 68, 0.15)'\r\n          : '0 0 0 3px rgba(85, 120, 244, 0.15)'\r\n        : 'none',\r\n    }\r\n\r\n    if (disabled) {\r\n      base.opacity = 0.5\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    right: sizeValue.padding,\r\n    top: '50%',\r\n    transform: 'translateY(-50%)',\r\n    pointerEvents: 'none',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'transform 200ms ease-out',\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-select-wrapper',\r\n        `brycks-select-wrapper--${variant}`,\r\n        `brycks-select-wrapper--${size}`,\r\n        isInvalid && 'brycks-select-wrapper--invalid',\r\n        disabled && 'brycks-select-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n    >\r\n      <select\r\n        ref={ref}\r\n        className=\"brycks-select\"\r\n        style={getSelectStyle()}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        value={value}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      >\r\n        {placeholder && (\r\n          <option value=\"\" disabled>\r\n            {placeholder}\r\n          </option>\r\n        )}\r\n        {children}\r\n      </select>\r\n\r\n      <span style={iconStyle}>\r\n        <ChevronIcon />\r\n      </span>\r\n    </div>\r\n  )\r\n})\r\n\r\nSelect.displayName = 'Select'\r\n"],"names":["sizeStyles","ChevronIcon","jsx","Select","forwardRef","size","variant","isInvalid","placeholder","className","style","testId","disabled","children","onFocus","onBlur","value","props","ref","isFocused","setIsFocused","useState","sizeValue","hasValue","wrapperStyle","getSelectStyle","base","iconStyle","handleFocus","handleBlur","jsxs","cx"],"mappings":";;;AAoCA,MAAMA,IAAwF;AAAA,EAC5F,IAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,SAAS,GAAA;AAAA,EACzC,IAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,SAAS,GAAA;AAAA,EACzC,IAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,SAAS,GAAA;AAC3C;AAGA,SAASC,IAAc;AACrB,SACE,gBAAAC,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;AAEO,MAAMC,IAASC,EAA2C,SAC/D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAYtB,EAAWK,CAAI,GAC3BkB,IAAWP,MAAU,UAAaA,MAAU,IAE5CQ,IAA8B;AAAA,IAClC,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,EAAA,GAGHC,IAAiB,MAAqB;AAC1C,UAAMC,IAAsB;AAAA,MAC1B,OAAO;AAAA,MACP,QAAQJ,EAAU;AAAA,MAClB,aAAaA,EAAU;AAAA,MACvB,cAAcA,EAAU,UAAU;AAAA,MAClC,UAAUA,EAAU;AAAA,MACpB,YAAY;AAAA,MACZ,OAAOC,KAAY,CAACf,IAAc,qCAAqC;AAAA,MACvE,iBAAiBF,MAAY,WAAW,mCAAmC;AAAA,MAC3E,QAAQ,aACNC,IACI,gCACAY,IACE,+BACAb,MAAY,WACV,gBACA,8BACV;AAAA,MACA,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQM,IAAW,gBAAgB;AAAA,MACnC,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAWO,IACPZ,IACE,sCACA,uCACF;AAAA,IAAA;AAGN,WAAIK,MACFc,EAAK,UAAU,MAGVA;AAAA,EACT,GAEMC,IAA2B;AAAA,IAC/B,UAAU;AAAA,IACV,OAAOL,EAAU;AAAA,IACjB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP,YAAY;AAAA,EAAA,GAGRM,IAAc,CAAC,MAA2C;AAC9D,IAAAR,EAAa,EAAI,GACjBN,IAAU,CAAC;AAAA,EACb,GAEMe,IAAa,CAAC,MAA2C;AAC7D,IAAAT,EAAa,EAAK,GAClBL,IAAS,CAAC;AAAA,EACZ;AAEA,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,0BAA0BzB,CAAO;AAAA,QACjC,0BAA0BD,CAAI;AAAA,QAC9BE,KAAa;AAAA,QACbK,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,GAAGe,GAAc,GAAGd,EAAA;AAAA,MAE7B,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,WAAU;AAAA,YACV,OAAOO,EAAA;AAAA,YACP,UAAAb;AAAA,YACA,gBAAcL;AAAA,YACd,eAAaI;AAAA,YACb,OAAAK;AAAA,YACA,SAASY;AAAA,YACT,QAAQC;AAAA,YACP,GAAGZ;AAAA,YAEH,UAAA;AAAA,cAAAT,uBACE,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAA,GACH;AAAA,cAEDK;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGF,QAAA,EAAK,OAAOc,GACX,UAAA,gBAAAzB,EAACD,KAAY,EAAA,CACf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDE,EAAO,cAAc;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/form/Select/Select.tsx"],"sourcesContent":["/**\n * Select Component\n *\n * Native select with custom styling for cross-browser consistency.\n * Maintains accessibility while providing Apple-inspired visuals.\n */\n\nimport {\n  forwardRef,\n  type SelectHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type SelectSize = 'sm' | 'md' | 'lg'\nexport type SelectVariant = 'outline' | 'filled'\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Select size */\n  size?: SelectSize\n  /** Visual variant */\n  variant?: SelectVariant\n  /** Error state */\n  isInvalid?: boolean\n  /** Placeholder option */\n  placeholder?: string\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n  /** Children (option elements) */\n  children?: ReactNode\n}\n\n/** Chevron down icon */\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path\n        d=\"M2.5 4.5L6 8L9.5 4.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n  {\n    size = 'md',\n    variant = 'outline',\n    isInvalid,\n    placeholder,\n    className,\n    style,\n    testId,\n    disabled,\n    children,\n    value,\n    ...props\n  },\n  ref\n) {\n  const hasValue = value !== undefined && value !== ''\n  const showPlaceholderColor = !hasValue && !!placeholder\n\n  return (\n    <div\n      className={cx(\n        'brycks-select-wrapper',\n        `brycks-select-wrapper--${variant}`,\n        `brycks-select-wrapper--${size}`,\n        isInvalid && 'brycks-select-wrapper--invalid',\n        disabled && 'brycks-select-wrapper--disabled',\n        className\n      )}\n      style={style}\n    >\n      <select\n        ref={ref}\n        className={cx('brycks-select', showPlaceholderColor && 'brycks-select--placeholder')}\n        disabled={disabled}\n        aria-invalid={isInvalid}\n        data-testid={testId}\n        value={value}\n        {...props}\n      >\n        {placeholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n\n      <span className=\"brycks-select-icon\">\n        <ChevronIcon />\n      </span>\n    </div>\n  )\n})\n\nSelect.displayName = 'Select'\n"],"names":["ChevronIcon","jsx","Select","forwardRef","size","variant","isInvalid","placeholder","className","style","testId","disabled","children","value","props","ref","showPlaceholderColor","jsxs","cx"],"mappings":";;;AAmCA,SAASA,IAAc;AACrB,SACE,gBAAAC,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;AAEO,MAAMC,IAASC,EAA2C,SAC/D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IAAuB,EADZH,MAAU,UAAaA,MAAU,OACR,CAAC,CAACN;AAE5C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,0BAA0Bb,CAAO;AAAA,QACjC,0BAA0BD,CAAI;AAAA,QAC9BE,KAAa;AAAA,QACbK,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAF;AAAA,YACA,WAAWG,EAAG,iBAAiBF,KAAwB,4BAA4B;AAAA,YACnF,UAAAL;AAAA,YACA,gBAAcL;AAAA,YACd,eAAaI;AAAA,YACb,OAAAG;AAAA,YACC,GAAGC;AAAA,YAEH,UAAA;AAAA,cAAAP,uBACE,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAA,GACH;AAAA,cAEDK;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGF,QAAA,EAAK,WAAU,sBACd,UAAA,gBAAAX,EAACD,KAAY,EAAA,CACf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDE,EAAO,cAAc;"}

package/dist/components/form/TagInput/TagInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),de=require("../../../utils/styles.cjs"),b=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),j=require("../../../design-system/tokens/typography.cjs"),ge={sm:{height:g.componentHeights.sm,fontSize:j.fontSizes.base-1,tagHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{height:g.componentHeights.md,fontSize:j.fontSizes.base,tagHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{height:g.componentHeights.lg,fontSize:j.fontSizes.md,tagHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function pe(){return a.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:a.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const N=o.forwardRef(function({value:w,defaultValue:G=[],onChange:T,placeholder:U="Add tags...",size:L="md",maxTags:C,allowDuplicates:M=!1,delimiters:q=["Enter",","],disabled:y=!1,isInvalid:D=!1,readOnly:P=!1,validateTag:E,transformTag:A=m=>m.trim(),suggestions:V,renderTag:B,maxTagsMessage:W=m=>`Maximum ${m} tags allowed`,duplicateMessage:F="Tag already exists","aria-label":Y="Tag input",className:J,testId:Q},z){const[m,Z]=o.useState(G),[p,k]=o.useState(""),[O,X]=o.useState(!1),[$,v]=o.useState(null),[f,c]=o.useState(!1),[S,h]=o.useState(-1),H=o.useRef(null),K=o.useRef(null),r=w!==void 0?w:m,i=ge[L],x=!y&&!P,u=V?.filter(e=>e.label.toLowerCase().includes(p.toLowerCase())&&!r.some(t=>t.id===e.id))||[],d=o.useCallback(e=>{w===void 0&&Z(e),T?.(e)},[w,T]),I=o.useCallback(e=>{const t=A(e);if(!t)return!1;if(C&&r.length>=C)return v(W(C)),!1;if(!M&&r.some(l=>l.label.toLowerCase()===t.toLowerCase()))return v(F),!1;if(E){const l=E(t);if(l!==!0)return v(typeof l=="string"?l:"Invalid tag"),!1}const s={id:`tag-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,label:t};return d([...r,s]),k(""),v(null),!0},[r,C,M,E,A,d,W,F]),R=o.useCallback(e=>{x&&d(r.filter(t=>t.id!==e))},[x,r,d]),_=o.useCallback(e=>{const t=e.target.value;if(t.includes(",")){const s=t.split(",");s.forEach((l,ue)=>{ue<s.length-1&&l.trim()&&I(l)}),k(s[s.length-1])}else k(t);v(null),c(!0),h(-1)},[I]),ee=o.useCallback(e=>{if(x){if(f&&u.length>0){if(e.key==="ArrowDown"){e.preventDefault(),h(t=>Math.min(t+1,u.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(t=>Math.max(t-1,0));return}if((e.key==="Enter"||e.key==="Tab")&&S>=0){e.preventDefault();const t=u[S];t&&(d([...r,t]),k(""),c(!1),h(-1));return}}if(q.includes(e.key)&&p){e.preventDefault(),I(p),c(!1);return}if(e.key==="Backspace"&&!p&&r.length>0){R(r[r.length-1].id);return}e.key==="Escape"&&(c(!1),h(-1))}},[x,f,u,S,q,p,r,I,R,d]);o.useEffect(()=>{if(!f)return;const e=t=>{K.current?.contains(t.target)||c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[f]);const te={position:"relative",width:"100%"},ne={display:"flex",flexWrap:"wrap",alignItems:"center",gap:i.gap,minHeight:i.height,padding:`${n.spacing[1]}px ${i.padding}px`,backgroundColor:y?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${D||$?"var(--brycks-error-default)":O?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`,cursor:y?"not-allowed":"text",boxShadow:O?"var(--brycks-focus-ring)":void 0},re=e=>({display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:i.tagHeight,padding:`0 ${n.spacing[2]}px`,fontSize:i.fontSize-1,fontWeight:500,color:e.color?"white":"var(--brycks-foreground-default)",backgroundColor:e.color||"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"}),oe={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`},se={flex:1,minWidth:100,height:i.tagHeight,padding:0,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},ae={position:"absolute",top:"100%",left:0,right:0,marginTop:n.spacing[1],maxHeight:200,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},ie=e=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${b.durations.fast}ms ${b.easings.easeOut}`}),le={marginTop:n.spacing[1],fontSize:j.fontSizes.sm,color:"var(--brycks-error-default)"},ce=(e,t)=>a.jsxs("span",{style:re(e),children:[e.label,x&&a.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:oe,onClick:s=>{s.stopPropagation(),t()},onMouseEnter:s=>{s.currentTarget.style.opacity="1",s.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:s=>{s.currentTarget.style.opacity="0.7",s.currentTarget.style.backgroundColor="transparent"},children:a.jsx(pe,{})})]},e.id);return a.jsxs("div",{ref:K,className:de.cx("brycks-tag-input",`brycks-tag-input--${L}`,J),style:te,"data-testid":Q,children:[a.jsxs("div",{style:ne,onClick:()=>!y&&H.current?.focus(),children:[r.map(e=>B?B(e,()=>R(e.id)):ce(e,()=>R(e.id))),a.jsx("input",{ref:e=>{H.current=e,typeof z=="function"?z(e):z&&(z.current=e)},type:"text",role:"combobox","aria-label":Y,"aria-expanded":f&&u.length>0,"aria-autocomplete":"list","aria-invalid":D||!!$,value:p,placeholder:r.length===0?U:"",disabled:y,readOnly:P,style:se,onChange:_,onKeyDown:ee,onFocus:()=>{X(!0),c(!0)},onBlur:()=>X(!1)})]}),f&&u.length>0&&a.jsx("ul",{role:"listbox",style:ae,children:u.map((e,t)=>a.jsx("li",{role:"option","aria-selected":t===S,style:ie(t===S),onClick:()=>{d([...r,e]),k(""),c(!1),H.current?.focus()},onMouseEnter:()=>h(t),children:e.label},e.id))}),$&&a.jsx("div",{style:le,children:$})]})});N.displayName="TagInput";exports.TagInput=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),de=require("../../../utils/styles.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),b=require("../../../design-system/tokens/motion.cjs"),n=require("../../../design-system/tokens/spacing.cjs"),j=require("../../../design-system/tokens/typography.cjs"),ge={sm:{height:g.componentHeights.sm,fontSize:j.fontSizes.base-1,tagHeight:n.spacing[5],padding:g.componentPaddingX.xs,gap:n.spacing[1]},md:{height:g.componentHeights.md,fontSize:j.fontSizes.base,tagHeight:n.spacing[6],padding:g.componentPaddingX.sm,gap:n.spacing[1.5]},lg:{height:g.componentHeights.lg,fontSize:j.fontSizes.md,tagHeight:n.spacing[7],padding:g.componentPaddingX.sm,gap:n.spacing[2]}};function pe(){return a.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:a.jsx("path",{d:"M3 3l6 6M9 3l-6 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const N=o.forwardRef(function({value:w,defaultValue:G=[],onChange:T,placeholder:U="Add tags...",size:L="md",maxTags:C,allowDuplicates:M=!1,delimiters:q=["Enter",","],disabled:y=!1,isInvalid:D=!1,readOnly:P=!1,validateTag:E,transformTag:A=m=>m.trim(),suggestions:V,renderTag:B,maxTagsMessage:W=m=>`Maximum ${m} tags allowed`,duplicateMessage:F="Tag already exists","aria-label":Y="Tag input",className:J,testId:Q},z){const[m,Z]=o.useState(G),[p,k]=o.useState(""),[O,X]=o.useState(!1),[$,v]=o.useState(null),[f,c]=o.useState(!1),[S,h]=o.useState(-1),H=o.useRef(null),K=o.useRef(null),r=w!==void 0?w:m,i=ge[L],x=!y&&!P,u=V?.filter(e=>e.label.toLowerCase().includes(p.toLowerCase())&&!r.some(t=>t.id===e.id))||[],d=o.useCallback(e=>{w===void 0&&Z(e),T?.(e)},[w,T]),I=o.useCallback(e=>{const t=A(e);if(!t)return!1;if(C&&r.length>=C)return v(W(C)),!1;if(!M&&r.some(l=>l.label.toLowerCase()===t.toLowerCase()))return v(F),!1;if(E){const l=E(t);if(l!==!0)return v(typeof l=="string"?l:"Invalid tag"),!1}const s={id:`tag-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,label:t};return d([...r,s]),k(""),v(null),!0},[r,C,M,E,A,d,W,F]),R=o.useCallback(e=>{x&&d(r.filter(t=>t.id!==e))},[x,r,d]),_=o.useCallback(e=>{const t=e.target.value;if(t.includes(",")){const s=t.split(",");s.forEach((l,ue)=>{ue<s.length-1&&l.trim()&&I(l)}),k(s[s.length-1])}else k(t);v(null),c(!0),h(-1)},[I]),ee=o.useCallback(e=>{if(x){if(f&&u.length>0){if(e.key==="ArrowDown"){e.preventDefault(),h(t=>Math.min(t+1,u.length-1));return}if(e.key==="ArrowUp"){e.preventDefault(),h(t=>Math.max(t-1,0));return}if((e.key==="Enter"||e.key==="Tab")&&S>=0){e.preventDefault();const t=u[S];t&&(d([...r,t]),k(""),c(!1),h(-1));return}}if(q.includes(e.key)&&p){e.preventDefault(),I(p),c(!1);return}if(e.key==="Backspace"&&!p&&r.length>0){R(r[r.length-1].id);return}e.key==="Escape"&&(c(!1),h(-1))}},[x,f,u,S,q,p,r,I,R,d]);o.useEffect(()=>{if(!f)return;const e=t=>{K.current?.contains(t.target)||c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[f]);const te={position:"relative",width:"100%"},ne={display:"flex",flexWrap:"wrap",alignItems:"center",gap:i.gap,minHeight:i.height,padding:`${n.spacing[1]}px ${i.padding}px`,backgroundColor:y?"var(--brycks-background-muted)":"var(--brycks-background-default)",border:`1px solid ${D||$?"var(--brycks-error-default)":O?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-md)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`,cursor:y?"not-allowed":"text",boxShadow:O?"var(--brycks-focus-ring)":void 0},re=e=>({display:"inline-flex",alignItems:"center",gap:n.spacing[1],height:i.tagHeight,padding:`0 ${n.spacing[2]}px`,fontSize:i.fontSize-1,fontWeight:500,color:e.color?"white":"var(--brycks-foreground-default)",backgroundColor:e.color||"var(--brycks-background-muted)",borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap"}),oe={display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing[4],height:n.spacing[4],marginLeft:n.spacing[.5],marginRight:-n.spacing[1],color:"inherit",opacity:.7,cursor:"pointer",borderRadius:"var(--brycks-radius-full)",transition:`all ${b.durations.fast}ms ${b.easings.easeOut}`},se={flex:1,minWidth:100,height:i.tagHeight,padding:0,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none"},ae={position:"absolute",top:"100%",left:0,right:0,marginTop:n.spacing[1],maxHeight:200,overflowY:"auto",backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",zIndex:"var(--brycks-z-dropdown)",padding:n.spacing[1]},ie=e=>({display:"flex",alignItems:"center",gap:g.componentGap.md,padding:`${n.spacing[2]}px ${n.spacing[3]}px`,fontSize:i.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:"pointer",transition:`background-color ${b.durations.fast}ms ${b.easings.easeOut}`}),le={marginTop:n.spacing[1],fontSize:j.fontSizes.sm,color:"var(--brycks-error-default)"},ce=(e,t)=>a.jsxs("span",{style:re(e),children:[e.label,x&&a.jsx("button",{type:"button","aria-label":`Remove ${e.label}`,style:oe,onClick:s=>{s.stopPropagation(),t()},onMouseEnter:s=>{s.currentTarget.style.opacity="1",s.currentTarget.style.backgroundColor="rgba(0,0,0,0.1)"},onMouseLeave:s=>{s.currentTarget.style.opacity="0.7",s.currentTarget.style.backgroundColor="transparent"},children:a.jsx(pe,{})})]},e.id);return a.jsxs("div",{ref:K,className:de.cx("brycks-tag-input",`brycks-tag-input--${L}`,J),style:te,"data-testid":Q,children:[a.jsxs("div",{style:ne,onClick:()=>!y&&H.current?.focus(),children:[r.map(e=>B?B(e,()=>R(e.id)):ce(e,()=>R(e.id))),a.jsx("input",{ref:e=>{H.current=e,typeof z=="function"?z(e):z&&(z.current=e)},type:"text",role:"combobox","aria-label":Y,"aria-expanded":f&&u.length>0,"aria-autocomplete":"list","aria-invalid":D||!!$,value:p,placeholder:r.length===0?U:"",disabled:y,readOnly:P,style:se,onChange:_,onKeyDown:ee,onFocus:()=>{X(!0),c(!0)},onBlur:()=>X(!1)})]}),f&&u.length>0&&a.jsx("ul",{role:"listbox",style:ae,children:u.map((e,t)=>a.jsx("li",{role:"option","aria-selected":t===S,style:ie(t===S),onClick:()=>{d([...r,e]),k(""),c(!1),H.current?.focus()},onMouseEnter:()=>h(t),children:e.label},e.id))}),$&&a.jsx("div",{style:le,children:$})]})});N.displayName="TagInput";exports.TagInput=N;
 //# sourceMappingURL=TagInput.cjs.map

package/dist/components/form/TagInput/TagInput.js

@@ -1,14 +1,14 @@
 import { jsxs as H, jsx as s } from "react/jsx-runtime";
 import { forwardRef as he, useState as p, useRef as q, useCallback as w, useEffect as me } from "react";
 import { cx as ye } from "../../../utils/styles.js";
-import { durations as T, easings as D } from "../../../design-system/tokens/motion.js";
+import { componentPaddingX as T, componentHeights as D, componentGap as be } from "../../../design-system/primitives/sizing.js";
+import { durations as M, easings as A } from "../../../design-system/tokens/motion.js";
 import { spacing as r } from "../../../design-system/tokens/spacing.js";
-import { componentPaddingX as M, componentHeights as A, componentGap as be } from "../../../design-system/primitives/sizing.js";
 import { fontSizes as R } from "../../../design-system/tokens/typography.js";
 const ke = {
-  sm: { height: A.sm, fontSize: R.base - 1, tagHeight: r[5], padding: M.xs, gap: r[1] },
-  md: { height: A.md, fontSize: R.base, tagHeight: r[6], padding: M.sm, gap: r[1.5] },
-  lg: { height: A.lg, fontSize: R.md, tagHeight: r[7], padding: M.sm, gap: r[2] }
+  sm: { height: D.sm, fontSize: R.base - 1, tagHeight: r[5], padding: T.xs, gap: r[1] },
+  md: { height: D.md, fontSize: R.base, tagHeight: r[6], padding: T.sm, gap: r[1.5] },
+  lg: { height: D.lg, fontSize: R.md, tagHeight: r[7], padding: T.sm, gap: r[2] }
 };
 function ve() {
   return /* @__PURE__ */ s("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ s("path", { d: "M3 3l6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
@@ -129,7 +129,7 @@ const we = he(function({
     backgroundColor: h ? "var(--brycks-background-muted)" : "var(--brycks-background-default)",
     border: `1px solid ${K || $ ? "var(--brycks-error-default)" : V ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
     borderRadius: "var(--brycks-radius-md)",
-    transition: `all ${T.fast}ms ${D.easeOut}`,
+    transition: `all ${M.fast}ms ${A.easeOut}`,
     cursor: h ? "not-allowed" : "text",
     boxShadow: V ? "var(--brycks-focus-ring)" : void 0
   }, se = (e) => ({
@@ -156,7 +156,7 @@ const we = he(function({
     opacity: 0.7,
     cursor: "pointer",
     borderRadius: "var(--brycks-radius-full)",
-    transition: `all ${T.fast}ms ${D.easeOut}`
+    transition: `all ${M.fast}ms ${A.easeOut}`
   }, ce = {
     flex: 1,
     minWidth: 100,
@@ -191,7 +191,7 @@ const we = he(function({
     backgroundColor: e ? "var(--brycks-background-muted)" : "transparent",
     borderRadius: "var(--brycks-radius-md)",
     cursor: "pointer",
-    transition: `background-color ${T.fast}ms ${D.easeOut}`
+    transition: `background-color ${M.fast}ms ${A.easeOut}`
   }), fe = {
     marginTop: r[1],
     fontSize: R.sm,

package/dist/components/form/Textarea/Textarea.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),r=require("react"),J=require("../../../utils/styles.cjs"),K={sm:{fontSize:13,padding:10,lineHeight:1.5},md:{fontSize:14,padding:12,lineHeight:1.5},lg:{fontSize:15,padding:14,lineHeight:1.5}},m=r.forwardRef(function({size:p="md",variant:i="outline",isInvalid:n,autoResize:a,minRows:H=3,maxRows:w=10,showCount:v,maxLength:o,className:z,style:C,testId:j,disabled:c,value:s,defaultValue:l,onChange:T,onFocus:F,onBlur:$,...R},q){const[h,y]=r.useState(!1),[b,x]=r.useState(0),E=r.useRef(null),d=q||E,t=K[p],k=t.fontSize*t.lineHeight,u=k*H+t.padding*2,g=k*w+t.padding*2,S=r.useCallback(()=>{const e=d.current;if(!e||!a)return;e.style.height="auto";const D=e.scrollHeight,G=Math.min(Math.max(D,u),g);e.style.height=`${G}px`},[a,u,g,d]);r.useEffect(()=>{S()},[s,S]),r.useEffect(()=>{const e=String(s??l??"");x(e.length)},[s,l]);const M=()=>{const e={width:"100%",minHeight:u,maxHeight:a?g:void 0,padding:t.padding,fontSize:t.fontSize,lineHeight:t.lineHeight,fontFamily:"var(--brycks-font-sans)",color:"var(--brycks-foreground-default)",backgroundColor:i==="filled"?"var(--brycks-background-muted)":"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":h?"var(--brycks-border-focus)":i==="filled"?"transparent":"var(--brycks-border-default)"}`,borderRadius:"var(--brycks-radius-default)",outline:"none",resize:a?"none":"vertical",transition:"all 200ms ease-out",boxShadow:h?n?"0 0 0 3px rgba(239, 68, 68, 0.15)":"0 0 0 3px rgba(85, 120, 244, 0.15)":"none"};return c&&(e.opacity=.5,e.cursor="not-allowed",e.resize="none"),e},N={position:"relative",width:"100%"},B={position:"absolute",bottom:8,right:12,fontSize:11,color:b>=(o??1/0)?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",pointerEvents:"none",transition:"color 150ms ease-out"},P=e=>{x(e.target.value.length),T?.(e)},O=e=>{y(!0),F?.(e)},A=e=>{y(!1),$?.(e)};return f.jsxs("div",{className:J.cx("brycks-textarea-wrapper",`brycks-textarea-wrapper--${i}`,`brycks-textarea-wrapper--${p}`,n&&"brycks-textarea-wrapper--invalid",c&&"brycks-textarea-wrapper--disabled",z),style:{...N,...C},children:[f.jsx("textarea",{ref:d,className:"brycks-textarea",style:M(),disabled:c,"aria-invalid":n,"data-testid":j,value:s,defaultValue:l,maxLength:o,onChange:P,onFocus:O,onBlur:A,...R}),v&&f.jsxs("span",{style:B,children:[b,o?`/${o}`:""]})]})});m.displayName="Textarea";exports.Textarea=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),e=require("react"),m=require("../../../utils/styles.cjs"),O={sm:{fontSize:13,padding:10,lineHeight:1.5},md:{fontSize:14,padding:12,lineHeight:1.5},lg:{fontSize:15,padding:14,lineHeight:1.5}},H=e.forwardRef(function({size:x="md",variant:b="outline",isInvalid:d,autoResize:a,minRows:S=3,maxRows:k=10,showCount:w,maxLength:n,className:j,style:C,testId:T,disabled:s,value:r,defaultValue:c,onChange:N,...$},q){const[p,y]=e.useState(0),v=e.useRef(null),o=q||v,i=O[x],u=i.fontSize*i.lineHeight,l=u*S+i.padding*2,g=u*k+i.padding*2,f=e.useCallback(()=>{const t=o.current;if(!t||!a)return;t.style.height="auto";const E=t.scrollHeight,P=Math.min(Math.max(E,l),g);t.style.height=`${P}px`},[a,l,g,o]);e.useEffect(()=>{f()},[r,f]),e.useEffect(()=>{const t=String(r??c??"");y(t.length)},[r,c]);const z={minHeight:l,maxHeight:a?g:void 0,resize:s||a?"none":"vertical"},M=t=>{y(t.target.value.length),N?.(t)},R=p>=(n??1/0);return h.jsxs("div",{className:m.cx("brycks-textarea-wrapper",`brycks-textarea-wrapper--${b}`,`brycks-textarea-wrapper--${x}`,d&&"brycks-textarea-wrapper--invalid",s&&"brycks-textarea-wrapper--disabled",j),style:C,children:[h.jsx("textarea",{ref:o,className:"brycks-textarea",style:z,disabled:s,"aria-invalid":d,"data-testid":T,value:r,defaultValue:c,maxLength:n,onChange:M,...$}),w&&h.jsxs("span",{className:m.cx("brycks-textarea-count",R&&"brycks-textarea-count--limit"),children:[p,n?`/${n}`:""]})]})});H.displayName="Textarea";exports.Textarea=H;
 //# sourceMappingURL=Textarea.cjs.map

package/dist/components/form/Textarea/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["/**\r\n * Textarea Component\r\n *\r\n * Multi-line text input with Apple-inspired styling.\r\n * Supports auto-resize and character counting.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  type CSSProperties,\r\n  type TextareaHTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type TextareaSize = 'sm' | 'md' | 'lg'\r\nexport type TextareaVariant = 'outline' | 'filled'\r\n\r\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {\r\n  /** Textarea size */\r\n  size?: TextareaSize\r\n  /** Visual variant */\r\n  variant?: TextareaVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Auto resize based on content */\r\n  autoResize?: boolean\r\n  /** Minimum rows */\r\n  minRows?: number\r\n  /** Maximum rows */\r\n  maxRows?: number\r\n  /** Show character count */\r\n  showCount?: boolean\r\n  /** Max character length */\r\n  maxLength?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nconst sizeStyles: Record<TextareaSize, { fontSize: number; padding: number; lineHeight: number }> = {\r\n  sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },\r\n  md: { fontSize: 14, padding: 12, lineHeight: 1.5 },\r\n  lg: { fontSize: 15, padding: 14, lineHeight: 1.5 },\r\n}\r\n\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    autoResize,\r\n    minRows = 3,\r\n    maxRows = 10,\r\n    showCount,\r\n    maxLength,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n    onFocus,\r\n    onBlur,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [charCount, setCharCount] = useState(0)\r\n  const internalRef = useRef<HTMLTextAreaElement>(null)\r\n  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef\r\n\r\n  const sizeValue = sizeStyles[size]\r\n  const lineHeightPx = sizeValue.fontSize * sizeValue.lineHeight\r\n  const minHeight = lineHeightPx * minRows + sizeValue.padding * 2\r\n  const maxHeight = lineHeightPx * maxRows + sizeValue.padding * 2\r\n\r\n  const adjustHeight = useCallback(() => {\r\n    const textarea = textareaRef.current\r\n    if (!textarea || !autoResize) return\r\n\r\n    textarea.style.height = 'auto'\r\n    const scrollHeight = textarea.scrollHeight\r\n    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight)\r\n    textarea.style.height = `${newHeight}px`\r\n  }, [autoResize, minHeight, maxHeight, textareaRef])\r\n\r\n  useEffect(() => {\r\n    adjustHeight()\r\n  }, [value, adjustHeight])\r\n\r\n  useEffect(() => {\r\n    const initialValue = String(value ?? defaultValue ?? '')\r\n    setCharCount(initialValue.length)\r\n  }, [value, defaultValue])\r\n\r\n  const getTextareaStyle = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      width: '100%',\r\n      minHeight,\r\n      maxHeight: autoResize ? maxHeight : undefined,\r\n      padding: sizeValue.padding,\r\n      fontSize: sizeValue.fontSize,\r\n      lineHeight: sizeValue.lineHeight,\r\n      fontFamily: 'var(--brycks-font-sans)',\r\n      color: 'var(--brycks-foreground-default)',\r\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-app)',\r\n      border: `1px solid ${\r\n        isInvalid\r\n          ? 'var(--brycks-error-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : variant === 'filled'\r\n              ? 'transparent'\r\n              : 'var(--brycks-border-default)'\r\n      }`,\r\n      borderRadius: 'var(--brycks-radius-default)',\r\n      outline: 'none',\r\n      resize: autoResize ? 'none' : 'vertical',\r\n      transition: 'all 200ms ease-out',\r\n      boxShadow: isFocused\r\n        ? isInvalid\r\n          ? '0 0 0 3px rgba(239, 68, 68, 0.15)'\r\n          : '0 0 0 3px rgba(85, 120, 244, 0.15)'\r\n        : 'none',\r\n    }\r\n\r\n    if (disabled) {\r\n      base.opacity = 0.5\r\n      base.cursor = 'not-allowed'\r\n      base.resize = 'none'\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: '100%',\r\n  }\r\n\r\n  const countStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    bottom: 8,\r\n    right: 12,\r\n    fontSize: 11,\r\n    color: charCount >= (maxLength ?? Infinity)\r\n      ? 'var(--brycks-error-default)'\r\n      : 'var(--brycks-foreground-muted)',\r\n    pointerEvents: 'none',\r\n    transition: 'color 150ms ease-out',\r\n  }\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n    setCharCount(e.target.value.length)\r\n    onChange?.(e)\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-textarea-wrapper',\r\n        `brycks-textarea-wrapper--${variant}`,\r\n        `brycks-textarea-wrapper--${size}`,\r\n        isInvalid && 'brycks-textarea-wrapper--invalid',\r\n        disabled && 'brycks-textarea-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n    >\r\n      <textarea\r\n        ref={textareaRef}\r\n        className=\"brycks-textarea\"\r\n        style={getTextareaStyle()}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        value={value}\r\n        defaultValue={defaultValue}\r\n        maxLength={maxLength}\r\n        onChange={handleChange}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      />\r\n\r\n      {showCount && (\r\n        <span style={countStyle}>\r\n          {charCount}{maxLength ? `/${maxLength}` : ''}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nTextarea.displayName = 'Textarea'\r\n"],"names":["sizeStyles","Textarea","forwardRef","size","variant","isInvalid","autoResize","minRows","maxRows","showCount","maxLength","className","style","testId","disabled","value","defaultValue","onChange","onFocus","onBlur","props","ref","isFocused","setIsFocused","useState","charCount","setCharCount","internalRef","useRef","textareaRef","sizeValue","lineHeightPx","minHeight","maxHeight","adjustHeight","useCallback","textarea","scrollHeight","newHeight","useEffect","initialValue","getTextareaStyle","base","wrapperStyle","countStyle","handleChange","handleFocus","handleBlur","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Textarea.cjs","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["/**\n * Textarea Component\n *\n * Multi-line text input with Apple-inspired styling.\n * Supports auto-resize and character counting.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type TextareaHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TextareaSize = 'sm' | 'md' | 'lg'\nexport type TextareaVariant = 'outline' | 'filled'\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {\n  /** Textarea size */\n  size?: TextareaSize\n  /** Visual variant */\n  variant?: TextareaVariant\n  /** Error state */\n  isInvalid?: boolean\n  /** Auto resize based on content */\n  autoResize?: boolean\n  /** Minimum rows */\n  minRows?: number\n  /** Maximum rows */\n  maxRows?: number\n  /** Show character count */\n  showCount?: boolean\n  /** Max character length */\n  maxLength?: number\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<TextareaSize, { fontSize: number; padding: number; lineHeight: number }> = {\n  sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },\n  md: { fontSize: 14, padding: 12, lineHeight: 1.5 },\n  lg: { fontSize: 15, padding: 14, lineHeight: 1.5 },\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    size = 'md',\n    variant = 'outline',\n    isInvalid,\n    autoResize,\n    minRows = 3,\n    maxRows = 10,\n    showCount,\n    maxLength,\n    className,\n    style,\n    testId,\n    disabled,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  },\n  ref\n) {\n  const [charCount, setCharCount] = useState(0)\n  const internalRef = useRef<HTMLTextAreaElement>(null)\n  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef\n\n  const sizeValue = sizeStyles[size]\n  const lineHeightPx = sizeValue.fontSize * sizeValue.lineHeight\n  const minHeight = lineHeightPx * minRows + sizeValue.padding * 2\n  const maxHeight = lineHeightPx * maxRows + sizeValue.padding * 2\n\n  const adjustHeight = useCallback(() => {\n    const textarea = textareaRef.current\n    if (!textarea || !autoResize) return\n\n    textarea.style.height = 'auto'\n    const scrollHeight = textarea.scrollHeight\n    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight)\n    textarea.style.height = `${newHeight}px`\n  }, [autoResize, minHeight, maxHeight, textareaRef])\n\n  useEffect(() => {\n    adjustHeight()\n  }, [value, adjustHeight])\n\n  useEffect(() => {\n    const initialValue = String(value ?? defaultValue ?? '')\n    setCharCount(initialValue.length)\n  }, [value, defaultValue])\n\n  // Only the computed min/max height (derived from rows + font metrics) and the\n  // resize mode are dynamic; the rest of the visual styling lives in CSS.\n  const textareaStyle: CSSProperties = {\n    minHeight,\n    maxHeight: autoResize ? maxHeight : undefined,\n    resize: disabled || autoResize ? 'none' : 'vertical',\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setCharCount(e.target.value.length)\n    onChange?.(e)\n  }\n\n  const atLimit = charCount >= (maxLength ?? Infinity)\n\n  return (\n    <div\n      className={cx(\n        'brycks-textarea-wrapper',\n        `brycks-textarea-wrapper--${variant}`,\n        `brycks-textarea-wrapper--${size}`,\n        isInvalid && 'brycks-textarea-wrapper--invalid',\n        disabled && 'brycks-textarea-wrapper--disabled',\n        className\n      )}\n      style={style}\n    >\n      <textarea\n        ref={textareaRef}\n        className=\"brycks-textarea\"\n        style={textareaStyle}\n        disabled={disabled}\n        aria-invalid={isInvalid}\n        data-testid={testId}\n        value={value}\n        defaultValue={defaultValue}\n        maxLength={maxLength}\n        onChange={handleChange}\n        {...props}\n      />\n\n      {showCount && (\n        <span className={cx('brycks-textarea-count', atLimit && 'brycks-textarea-count--limit')}>\n          {charCount}{maxLength ? `/${maxLength}` : ''}\n        </span>\n      )}\n    </div>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n"],"names":["sizeStyles","Textarea","forwardRef","size","variant","isInvalid","autoResize","minRows","maxRows","showCount","maxLength","className","style","testId","disabled","value","defaultValue","onChange","props","ref","charCount","setCharCount","useState","internalRef","useRef","textareaRef","sizeValue","lineHeightPx","minHeight","maxHeight","adjustHeight","useCallback","textarea","scrollHeight","newHeight","useEffect","initialValue","textareaStyle","handleChange","e","atLimit","jsxs","cx","jsx"],"mappings":"+KA4CMA,EAA8F,CAClG,GAAI,CAAE,SAAU,GAAI,QAAS,GAAI,WAAY,GAAA,EAC7C,GAAI,CAAE,SAAU,GAAI,QAAS,GAAI,WAAY,GAAA,EAC7C,GAAI,CAAE,SAAU,GAAI,QAAS,GAAI,WAAY,GAAA,CAC/C,EAEaC,EAAWC,EAAAA,WAA+C,SACrE,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,UAAAC,EACA,WAAAC,EACA,QAAAC,EAAU,EACV,QAAAC,EAAU,GACV,UAAAC,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,CAAC,EACtCC,EAAcC,EAAAA,OAA4B,IAAI,EAC9CC,EAAeN,GAAgDI,EAE/DG,EAAY1B,EAAWG,CAAI,EAC3BwB,EAAeD,EAAU,SAAWA,EAAU,WAC9CE,EAAYD,EAAepB,EAAUmB,EAAU,QAAU,EACzDG,EAAYF,EAAenB,EAAUkB,EAAU,QAAU,EAEzDI,EAAeC,EAAAA,YAAY,IAAM,CACrC,MAAMC,EAAWP,EAAY,QAC7B,GAAI,CAACO,GAAY,CAAC1B,EAAY,OAE9B0B,EAAS,MAAM,OAAS,OACxB,MAAMC,EAAeD,EAAS,aACxBE,EAAY,KAAK,IAAI,KAAK,IAAID,EAAcL,CAAS,EAAGC,CAAS,EACvEG,EAAS,MAAM,OAAS,GAAGE,CAAS,IACtC,EAAG,CAAC5B,EAAYsB,EAAWC,EAAWJ,CAAW,CAAC,EAElDU,EAAAA,UAAU,IAAM,CACdL,EAAA,CACF,EAAG,CAACf,EAAOe,CAAY,CAAC,EAExBK,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAe,OAAOrB,GAASC,GAAgB,EAAE,EACvDK,EAAae,EAAa,MAAM,CAClC,EAAG,CAACrB,EAAOC,CAAY,CAAC,EAIxB,MAAMqB,EAA+B,CACnC,UAAAT,EACA,UAAWtB,EAAauB,EAAY,OACpC,OAAQf,GAAYR,EAAa,OAAS,UAAA,EAGtCgC,EAAgBC,GAA8C,CAClElB,EAAakB,EAAE,OAAO,MAAM,MAAM,EAClCtB,IAAWsB,CAAC,CACd,EAEMC,EAAUpB,IAAcV,GAAa,KAE3C,OACE+B,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,0BACA,4BAA4BtC,CAAO,GACnC,4BAA4BD,CAAI,GAChCE,GAAa,mCACbS,GAAY,oCACZH,CAAA,EAEF,MAAAC,EAEA,SAAA,CAAA+B,EAAAA,IAAC,WAAA,CACC,IAAKlB,EACL,UAAU,kBACV,MAAOY,EACP,SAAAvB,EACA,eAAcT,EACd,cAAaQ,EACb,MAAAE,EACA,aAAAC,EACA,UAAAN,EACA,SAAU4B,EACT,GAAGpB,CAAA,CAAA,EAGLT,UACE,OAAA,CAAK,UAAWiC,KAAG,wBAAyBF,GAAW,8BAA8B,EACnF,SAAA,CAAApB,EAAWV,EAAY,IAAIA,CAAS,GAAK,EAAA,CAAA,CAC5C,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDT,EAAS,YAAc"}

package/dist/components/form/Textarea/Textarea.js

@@ -1,121 +1,87 @@
-import { jsxs as k, jsx as K } from "react/jsx-runtime";
-import { forwardRef as O, useState as m, useRef as Q, useCallback as U, useEffect as H } from "react";
-import { cx as V } from "../../../utils/styles.js";
-const W = {
+import { jsxs as f, jsx as q } from "react/jsx-runtime";
+import { forwardRef as A, useState as B, useRef as D, useCallback as F, useEffect as y } from "react";
+import { cx as H } from "../../../utils/styles.js";
+const G = {
   sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },
   md: { fontSize: 14, padding: 12, lineHeight: 1.5 },
   lg: { fontSize: 15, padding: 14, lineHeight: 1.5 }
-}, X = O(function({
-  size: p = "md",
-  variant: s = "outline",
-  isInvalid: r,
-  autoResize: n,
-  minRows: S = 3,
-  maxRows: w = 10,
-  showCount: v,
-  maxLength: o,
-  className: z,
+}, I = A(function({
+  size: h = "md",
+  variant: k = "outline",
+  isInvalid: g,
+  autoResize: e,
+  minRows: u = 3,
+  maxRows: b = 10,
+  showCount: S,
+  maxLength: a,
+  className: w,
   style: C,
-  testId: F,
+  testId: N,
   disabled: i,
-  value: a,
-  defaultValue: c,
+  value: r,
+  defaultValue: s,
   onChange: $,
-  onFocus: T,
-  onBlur: j,
-  ...N
-}, B) {
-  const [u, f] = m(!1), [h, b] = m(0), E = Q(null), l = B || E, t = W[p], y = t.fontSize * t.lineHeight, d = y * S + t.padding * 2, g = y * w + t.padding * 2, x = U(() => {
-    const e = l.current;
-    if (!e || !n) return;
-    e.style.height = "auto";
-    const G = e.scrollHeight, J = Math.min(Math.max(G, d), g);
-    e.style.height = `${J}px`;
-  }, [n, d, g, l]);
-  H(() => {
-    x();
-  }, [a, x]), H(() => {
-    const e = String(a ?? c ?? "");
-    b(e.length);
-  }, [a, c]);
-  const M = () => {
-    const e = {
-      width: "100%",
-      minHeight: d,
-      maxHeight: n ? g : void 0,
-      padding: t.padding,
-      fontSize: t.fontSize,
-      lineHeight: t.lineHeight,
-      fontFamily: "var(--brycks-font-sans)",
-      color: "var(--brycks-foreground-default)",
-      backgroundColor: s === "filled" ? "var(--brycks-background-muted)" : "var(--brycks-background-app)",
-      border: `1px solid ${r ? "var(--brycks-error-default)" : u ? "var(--brycks-border-focus)" : s === "filled" ? "transparent" : "var(--brycks-border-default)"}`,
-      borderRadius: "var(--brycks-radius-default)",
-      outline: "none",
-      resize: n ? "none" : "vertical",
-      transition: "all 200ms ease-out",
-      boxShadow: u ? r ? "0 0 0 3px rgba(239, 68, 68, 0.15)" : "0 0 0 3px rgba(85, 120, 244, 0.15)" : "none"
-    };
-    return i && (e.opacity = 0.5, e.cursor = "not-allowed", e.resize = "none"), e;
-  }, R = {
-    position: "relative",
-    width: "100%"
-  }, P = {
-    position: "absolute",
-    bottom: 8,
-    right: 12,
-    fontSize: 11,
-    color: h >= (o ?? 1 / 0) ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
-    pointerEvents: "none",
-    transition: "color 150ms ease-out"
-  }, q = (e) => {
-    b(e.target.value.length), $?.(e);
-  }, A = (e) => {
-    f(!0), T?.(e);
-  }, D = (e) => {
-    f(!1), j?.(e);
-  };
-  return /* @__PURE__ */ k(
+  ...j
+}, z) {
+  const [p, x] = B(0), T = D(null), c = z || T, n = G[h], d = n.fontSize * n.lineHeight, o = d * u + n.padding * 2, l = d * b + n.padding * 2, m = F(() => {
+    const t = c.current;
+    if (!t || !e) return;
+    t.style.height = "auto";
+    const P = t.scrollHeight, R = Math.min(Math.max(P, o), l);
+    t.style.height = `${R}px`;
+  }, [e, o, l, c]);
+  y(() => {
+    m();
+  }, [r, m]), y(() => {
+    const t = String(r ?? s ?? "");
+    x(t.length);
+  }, [r, s]);
+  const v = {
+    minHeight: o,
+    maxHeight: e ? l : void 0,
+    resize: i || e ? "none" : "vertical"
+  }, M = (t) => {
+    x(t.target.value.length), $?.(t);
+  }, E = p >= (a ?? 1 / 0);
+  return /* @__PURE__ */ f(
     "div",
     {
-      className: V(
+      className: H(
         "brycks-textarea-wrapper",
-        `brycks-textarea-wrapper--${s}`,
-        `brycks-textarea-wrapper--${p}`,
-        r && "brycks-textarea-wrapper--invalid",
+        `brycks-textarea-wrapper--${k}`,
+        `brycks-textarea-wrapper--${h}`,
+        g && "brycks-textarea-wrapper--invalid",
         i && "brycks-textarea-wrapper--disabled",
-        z
+        w
       ),
-      style: { ...R, ...C },
+      style: C,
       children: [
-        /* @__PURE__ */ K(
+        /* @__PURE__ */ q(
           "textarea",
           {
-            ref: l,
+            ref: c,
             className: "brycks-textarea",
-            style: M(),
+            style: v,
             disabled: i,
-            "aria-invalid": r,
-            "data-testid": F,
-            value: a,
-            defaultValue: c,
-            maxLength: o,
-            onChange: q,
-            onFocus: A,
-            onBlur: D,
-            ...N
+            "aria-invalid": g,
+            "data-testid": N,
+            value: r,
+            defaultValue: s,
+            maxLength: a,
+            onChange: M,
+            ...j
           }
         ),
-        v && /* @__PURE__ */ k("span", { style: P, children: [
-          h,
-          o ? `/${o}` : ""
+        S && /* @__PURE__ */ f("span", { className: H("brycks-textarea-count", E && "brycks-textarea-count--limit"), children: [
+          p,
+          a ? `/${a}` : ""
         ] })
       ]
     }
   );
 });
-X.displayName = "Textarea";
+I.displayName = "Textarea";
 export {
-  X as Textarea
+  I as Textarea
 };
 //# sourceMappingURL=Textarea.js.map

package/dist/components/form/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["/**\r\n * Textarea Component\r\n *\r\n * Multi-line text input with Apple-inspired styling.\r\n * Supports auto-resize and character counting.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  type CSSProperties,\r\n  type TextareaHTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type TextareaSize = 'sm' | 'md' | 'lg'\r\nexport type TextareaVariant = 'outline' | 'filled'\r\n\r\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {\r\n  /** Textarea size */\r\n  size?: TextareaSize\r\n  /** Visual variant */\r\n  variant?: TextareaVariant\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Auto resize based on content */\r\n  autoResize?: boolean\r\n  /** Minimum rows */\r\n  minRows?: number\r\n  /** Maximum rows */\r\n  maxRows?: number\r\n  /** Show character count */\r\n  showCount?: boolean\r\n  /** Max character length */\r\n  maxLength?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nconst sizeStyles: Record<TextareaSize, { fontSize: number; padding: number; lineHeight: number }> = {\r\n  sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },\r\n  md: { fontSize: 14, padding: 12, lineHeight: 1.5 },\r\n  lg: { fontSize: 15, padding: 14, lineHeight: 1.5 },\r\n}\r\n\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\r\n  {\r\n    size = 'md',\r\n    variant = 'outline',\r\n    isInvalid,\r\n    autoResize,\r\n    minRows = 3,\r\n    maxRows = 10,\r\n    showCount,\r\n    maxLength,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n    onFocus,\r\n    onBlur,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [charCount, setCharCount] = useState(0)\r\n  const internalRef = useRef<HTMLTextAreaElement>(null)\r\n  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef\r\n\r\n  const sizeValue = sizeStyles[size]\r\n  const lineHeightPx = sizeValue.fontSize * sizeValue.lineHeight\r\n  const minHeight = lineHeightPx * minRows + sizeValue.padding * 2\r\n  const maxHeight = lineHeightPx * maxRows + sizeValue.padding * 2\r\n\r\n  const adjustHeight = useCallback(() => {\r\n    const textarea = textareaRef.current\r\n    if (!textarea || !autoResize) return\r\n\r\n    textarea.style.height = 'auto'\r\n    const scrollHeight = textarea.scrollHeight\r\n    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight)\r\n    textarea.style.height = `${newHeight}px`\r\n  }, [autoResize, minHeight, maxHeight, textareaRef])\r\n\r\n  useEffect(() => {\r\n    adjustHeight()\r\n  }, [value, adjustHeight])\r\n\r\n  useEffect(() => {\r\n    const initialValue = String(value ?? defaultValue ?? '')\r\n    setCharCount(initialValue.length)\r\n  }, [value, defaultValue])\r\n\r\n  const getTextareaStyle = (): CSSProperties => {\r\n    const base: CSSProperties = {\r\n      width: '100%',\r\n      minHeight,\r\n      maxHeight: autoResize ? maxHeight : undefined,\r\n      padding: sizeValue.padding,\r\n      fontSize: sizeValue.fontSize,\r\n      lineHeight: sizeValue.lineHeight,\r\n      fontFamily: 'var(--brycks-font-sans)',\r\n      color: 'var(--brycks-foreground-default)',\r\n      backgroundColor: variant === 'filled' ? 'var(--brycks-background-muted)' : 'var(--brycks-background-app)',\r\n      border: `1px solid ${\r\n        isInvalid\r\n          ? 'var(--brycks-error-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : variant === 'filled'\r\n              ? 'transparent'\r\n              : 'var(--brycks-border-default)'\r\n      }`,\r\n      borderRadius: 'var(--brycks-radius-default)',\r\n      outline: 'none',\r\n      resize: autoResize ? 'none' : 'vertical',\r\n      transition: 'all 200ms ease-out',\r\n      boxShadow: isFocused\r\n        ? isInvalid\r\n          ? '0 0 0 3px rgba(239, 68, 68, 0.15)'\r\n          : '0 0 0 3px rgba(85, 120, 244, 0.15)'\r\n        : 'none',\r\n    }\r\n\r\n    if (disabled) {\r\n      base.opacity = 0.5\r\n      base.cursor = 'not-allowed'\r\n      base.resize = 'none'\r\n    }\r\n\r\n    return base\r\n  }\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: '100%',\r\n  }\r\n\r\n  const countStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    bottom: 8,\r\n    right: 12,\r\n    fontSize: 11,\r\n    color: charCount >= (maxLength ?? Infinity)\r\n      ? 'var(--brycks-error-default)'\r\n      : 'var(--brycks-foreground-muted)',\r\n    pointerEvents: 'none',\r\n    transition: 'color 150ms ease-out',\r\n  }\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n    setCharCount(e.target.value.length)\r\n    onChange?.(e)\r\n  }\r\n\r\n  const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\r\n    setIsFocused(true)\r\n    onFocus?.(e)\r\n  }\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\r\n    setIsFocused(false)\r\n    onBlur?.(e)\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-textarea-wrapper',\r\n        `brycks-textarea-wrapper--${variant}`,\r\n        `brycks-textarea-wrapper--${size}`,\r\n        isInvalid && 'brycks-textarea-wrapper--invalid',\r\n        disabled && 'brycks-textarea-wrapper--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n    >\r\n      <textarea\r\n        ref={textareaRef}\r\n        className=\"brycks-textarea\"\r\n        style={getTextareaStyle()}\r\n        disabled={disabled}\r\n        aria-invalid={isInvalid}\r\n        data-testid={testId}\r\n        value={value}\r\n        defaultValue={defaultValue}\r\n        maxLength={maxLength}\r\n        onChange={handleChange}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        {...props}\r\n      />\r\n\r\n      {showCount && (\r\n        <span style={countStyle}>\r\n          {charCount}{maxLength ? `/${maxLength}` : ''}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nTextarea.displayName = 'Textarea'\r\n"],"names":["sizeStyles","Textarea","forwardRef","size","variant","isInvalid","autoResize","minRows","maxRows","showCount","maxLength","className","style","testId","disabled","value","defaultValue","onChange","onFocus","onBlur","props","ref","isFocused","setIsFocused","useState","charCount","setCharCount","internalRef","useRef","textareaRef","sizeValue","lineHeightPx","minHeight","maxHeight","adjustHeight","useCallback","textarea","scrollHeight","newHeight","useEffect","initialValue","getTextareaStyle","base","wrapperStyle","countStyle","handleChange","handleFocus","handleBlur","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["/**\n * Textarea Component\n *\n * Multi-line text input with Apple-inspired styling.\n * Supports auto-resize and character counting.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type TextareaHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type TextareaSize = 'sm' | 'md' | 'lg'\nexport type TextareaVariant = 'outline' | 'filled'\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {\n  /** Textarea size */\n  size?: TextareaSize\n  /** Visual variant */\n  variant?: TextareaVariant\n  /** Error state */\n  isInvalid?: boolean\n  /** Auto resize based on content */\n  autoResize?: boolean\n  /** Minimum rows */\n  minRows?: number\n  /** Maximum rows */\n  maxRows?: number\n  /** Show character count */\n  showCount?: boolean\n  /** Max character length */\n  maxLength?: number\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<TextareaSize, { fontSize: number; padding: number; lineHeight: number }> = {\n  sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },\n  md: { fontSize: 14, padding: 12, lineHeight: 1.5 },\n  lg: { fontSize: 15, padding: 14, lineHeight: 1.5 },\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    size = 'md',\n    variant = 'outline',\n    isInvalid,\n    autoResize,\n    minRows = 3,\n    maxRows = 10,\n    showCount,\n    maxLength,\n    className,\n    style,\n    testId,\n    disabled,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  },\n  ref\n) {\n  const [charCount, setCharCount] = useState(0)\n  const internalRef = useRef<HTMLTextAreaElement>(null)\n  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef\n\n  const sizeValue = sizeStyles[size]\n  const lineHeightPx = sizeValue.fontSize * sizeValue.lineHeight\n  const minHeight = lineHeightPx * minRows + sizeValue.padding * 2\n  const maxHeight = lineHeightPx * maxRows + sizeValue.padding * 2\n\n  const adjustHeight = useCallback(() => {\n    const textarea = textareaRef.current\n    if (!textarea || !autoResize) return\n\n    textarea.style.height = 'auto'\n    const scrollHeight = textarea.scrollHeight\n    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight)\n    textarea.style.height = `${newHeight}px`\n  }, [autoResize, minHeight, maxHeight, textareaRef])\n\n  useEffect(() => {\n    adjustHeight()\n  }, [value, adjustHeight])\n\n  useEffect(() => {\n    const initialValue = String(value ?? defaultValue ?? '')\n    setCharCount(initialValue.length)\n  }, [value, defaultValue])\n\n  // Only the computed min/max height (derived from rows + font metrics) and the\n  // resize mode are dynamic; the rest of the visual styling lives in CSS.\n  const textareaStyle: CSSProperties = {\n    minHeight,\n    maxHeight: autoResize ? maxHeight : undefined,\n    resize: disabled || autoResize ? 'none' : 'vertical',\n  }\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setCharCount(e.target.value.length)\n    onChange?.(e)\n  }\n\n  const atLimit = charCount >= (maxLength ?? Infinity)\n\n  return (\n    <div\n      className={cx(\n        'brycks-textarea-wrapper',\n        `brycks-textarea-wrapper--${variant}`,\n        `brycks-textarea-wrapper--${size}`,\n        isInvalid && 'brycks-textarea-wrapper--invalid',\n        disabled && 'brycks-textarea-wrapper--disabled',\n        className\n      )}\n      style={style}\n    >\n      <textarea\n        ref={textareaRef}\n        className=\"brycks-textarea\"\n        style={textareaStyle}\n        disabled={disabled}\n        aria-invalid={isInvalid}\n        data-testid={testId}\n        value={value}\n        defaultValue={defaultValue}\n        maxLength={maxLength}\n        onChange={handleChange}\n        {...props}\n      />\n\n      {showCount && (\n        <span className={cx('brycks-textarea-count', atLimit && 'brycks-textarea-count--limit')}>\n          {charCount}{maxLength ? `/${maxLength}` : ''}\n        </span>\n      )}\n    </div>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n"],"names":["sizeStyles","Textarea","forwardRef","size","variant","isInvalid","autoResize","minRows","maxRows","showCount","maxLength","className","style","testId","disabled","value","defaultValue","onChange","props","ref","charCount","setCharCount","useState","internalRef","useRef","textareaRef","sizeValue","lineHeightPx","minHeight","maxHeight","adjustHeight","useCallback","textarea","scrollHeight","newHeight","useEffect","initialValue","textareaStyle","handleChange","e","atLimit","jsxs","cx","jsx"],"mappings":";;;AA4CA,MAAMA,IAA8F;AAAA,EAClG,IAAI,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY,IAAA;AAAA,EAC7C,IAAI,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY,IAAA;AAAA,EAC7C,IAAI,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY,IAAA;AAC/C,GAEaC,IAAWC,EAA+C,SACrE;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,CAAC,GACtCC,IAAcC,EAA4B,IAAI,GAC9CC,IAAeN,KAAgDI,GAE/DG,IAAY1B,EAAWG,CAAI,GAC3BwB,IAAeD,EAAU,WAAWA,EAAU,YAC9CE,IAAYD,IAAepB,IAAUmB,EAAU,UAAU,GACzDG,IAAYF,IAAenB,IAAUkB,EAAU,UAAU,GAEzDI,IAAeC,EAAY,MAAM;AACrC,UAAMC,IAAWP,EAAY;AAC7B,QAAI,CAACO,KAAY,CAAC1B,EAAY;AAE9B,IAAA0B,EAAS,MAAM,SAAS;AACxB,UAAMC,IAAeD,EAAS,cACxBE,IAAY,KAAK,IAAI,KAAK,IAAID,GAAcL,CAAS,GAAGC,CAAS;AACvE,IAAAG,EAAS,MAAM,SAAS,GAAGE,CAAS;AAAA,EACtC,GAAG,CAAC5B,GAAYsB,GAAWC,GAAWJ,CAAW,CAAC;AAElD,EAAAU,EAAU,MAAM;AACd,IAAAL,EAAA;AAAA,EACF,GAAG,CAACf,GAAOe,CAAY,CAAC,GAExBK,EAAU,MAAM;AACd,UAAMC,IAAe,OAAOrB,KAASC,KAAgB,EAAE;AACvD,IAAAK,EAAae,EAAa,MAAM;AAAA,EAClC,GAAG,CAACrB,GAAOC,CAAY,CAAC;AAIxB,QAAMqB,IAA+B;AAAA,IACnC,WAAAT;AAAA,IACA,WAAWtB,IAAauB,IAAY;AAAA,IACpC,QAAQf,KAAYR,IAAa,SAAS;AAAA,EAAA,GAGtCgC,IAAe,CAACC,MAA8C;AAClE,IAAAlB,EAAakB,EAAE,OAAO,MAAM,MAAM,GAClCtB,IAAWsB,CAAC;AAAA,EACd,GAEMC,IAAUpB,MAAcV,KAAa;AAE3C,SACE,gBAAA+B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,4BAA4BtC,CAAO;AAAA,QACnC,4BAA4BD,CAAI;AAAA,QAChCE,KAAa;AAAA,QACbS,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAA+B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKlB;AAAA,YACL,WAAU;AAAA,YACV,OAAOY;AAAA,YACP,UAAAvB;AAAA,YACA,gBAAcT;AAAA,YACd,eAAaQ;AAAA,YACb,OAAAE;AAAA,YACA,cAAAC;AAAA,YACA,WAAAN;AAAA,YACA,UAAU4B;AAAA,YACT,GAAGpB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGLT,uBACE,QAAA,EAAK,WAAWiC,EAAG,yBAAyBF,KAAW,8BAA8B,GACnF,UAAA;AAAA,UAAApB;AAAA,UAAWV,IAAY,IAAIA,CAAS,KAAK;AAAA,QAAA,EAAA,CAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDT,EAAS,cAAc;"}

package/dist/components/navigation/ContextMenu/ContextMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),z=require("react-dom"),L=require("../../../utils/styles.cjs"),M=require("../../../design-system/tokens/spacing.cjs"),S=require("../../../design-system/tokens/motion.cjs"),j=require("../../../design-system/tokens/typography.cjs"),v=require("../../../design-system/primitives/sizing.cjs"),I=r.createContext(null);function R(){return o.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M4.5 3l3 3-3 3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function P({items:i,position:h,onClose:u,level:p=0}){const[l,x]=r.useState(-1),[b,c]=r.useState(null),y=r.useRef(null),a=i.filter(e=>!e.separator&&!e.disabled),g=r.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n+1;return s>=a.length?0:s});break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n-1;return s<0?a.length-1:s});break;case"ArrowRight":{e.preventDefault(),e.stopPropagation();const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}break}case"ArrowLeft":p>0&&(e.preventDefault(),e.stopPropagation(),u());break;case"Enter":case" ":if(e.preventDefault(),e.stopPropagation(),l>=0){const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}else n?.onClick&&(n.onClick(),u())}break;case"Escape":e.preventDefault(),e.stopPropagation(),u();break}},[l,a,i,p,u]);r.useEffect(()=>{y.current?.focus()},[]);const w={position:"fixed",top:h.y,left:h.x,minWidth:180,maxWidth:280,backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:M.spacing[1],zIndex:"var(--brycks-z-dropdown)",outline:"none"},C=(e,n)=>({display:"flex",alignItems:"center",gap:M.spacing[2],padding:`${v.componentPaddingY.sm}px ${v.componentPaddingX.sm}px`,fontSize:j.fontSizes.sm,fontWeight:400,color:n?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:n?"not-allowed":"pointer",transition:`background-color ${S.durations.fast}ms ${S.easings.easeOut}`}),k={display:"flex",alignItems:"center",justifyContent:"center",width:v.iconSizes.sm,height:v.iconSizes.sm,color:"inherit"},d={marginLeft:"auto",fontSize:j.fontSizes.xs,color:"var(--brycks-foreground-muted)"},m={height:1,margin:`${M.spacing[1]}px 0`,backgroundColor:"var(--brycks-border-default)"};let t=-1;return o.jsx("ul",{ref:y,role:"menu",tabIndex:0,style:w,onKeyDown:g,children:i.map((e,n)=>{if(e.separator)return o.jsx("li",{role:"separator",style:m},e.id);e.disabled||t++;const s=t,E=!e.disabled&&s===l,f=e.children&&e.children.length>0;return o.jsxs("li",{role:"menuitem","aria-disabled":e.disabled,"aria-haspopup":f?"menu":void 0,"aria-expanded":f&&b===n?"true":void 0,style:C(E,!!e.disabled),onMouseEnter:()=>{e.disabled||(x(s),c(f?n:null))},onMouseLeave:()=>{f||c(null)},onClick:()=>{e.disabled||(f?c(n):e.onClick&&(e.onClick(),u()))},children:[e.icon&&o.jsx("span",{style:k,children:e.icon}),o.jsx("span",{style:{flex:1},children:e.label}),e.shortcut&&o.jsx("span",{style:d,children:e.shortcut}),f&&o.jsx("span",{style:k,children:o.jsx(R,{})}),f&&b===n&&e.children&&o.jsx(P,{items:e.children,position:{x:176,y:0},onClose:()=>c(null),level:p+1})]},e.id)})})}const D=r.forwardRef(function({items:h,children:u,onOpen:p,onClose:l,disabled:x=!1,className:b,testId:c},y){const[a,g]=r.useState(!1),[w,C]=r.useState({x:0,y:0}),k=r.useCallback(t=>{if(x)return;t.preventDefault(),t.stopPropagation();const e=Math.min(t.clientX,window.innerWidth-200),n=Math.min(t.clientY,window.innerHeight-300);C({x:e,y:n}),g(!0),p?.()},[x,p]),d=r.useCallback(()=>{g(!1),l?.()},[l]);r.useEffect(()=>{if(!a)return;const t=()=>{d()};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[a,d]),r.useEffect(()=>{if(!a)return;const t=e=>{e.key==="Escape"&&d()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,d]);const m={display:"contents"};return o.jsx(I.Provider,{value:{closeMenu:d},children:o.jsxs("div",{ref:y,className:L.cx("brycks-contextmenu",b),style:m,"data-testid":c,onContextMenu:k,children:[u,a&&z.createPortal(o.jsx("div",{style:{position:"fixed",inset:0,zIndex:"var(--brycks-z-dropdown)"},onMouseDown:t=>t.stopPropagation(),children:o.jsx(P,{items:h,position:w,onClose:d})}),document.body)]})})});D.displayName="ContextMenu";function q(){const i=r.useContext(I);if(!i)throw new Error("useContextMenu must be used within a ContextMenu");return i}exports.ContextMenu=D;exports.useContextMenu=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),z=require("react-dom"),L=require("../../../utils/styles.cjs"),v=require("../../../design-system/primitives/sizing.cjs"),M=require("../../../design-system/tokens/spacing.cjs"),S=require("../../../design-system/tokens/motion.cjs"),j=require("../../../design-system/tokens/typography.cjs"),I=r.createContext(null);function R(){return o.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M4.5 3l3 3-3 3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function P({items:i,position:h,onClose:u,level:p=0}){const[l,x]=r.useState(-1),[b,c]=r.useState(null),y=r.useRef(null),a=i.filter(e=>!e.separator&&!e.disabled),g=r.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n+1;return s>=a.length?0:s});break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n-1;return s<0?a.length-1:s});break;case"ArrowRight":{e.preventDefault(),e.stopPropagation();const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}break}case"ArrowLeft":p>0&&(e.preventDefault(),e.stopPropagation(),u());break;case"Enter":case" ":if(e.preventDefault(),e.stopPropagation(),l>=0){const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}else n?.onClick&&(n.onClick(),u())}break;case"Escape":e.preventDefault(),e.stopPropagation(),u();break}},[l,a,i,p,u]);r.useEffect(()=>{y.current?.focus()},[]);const w={position:"fixed",top:h.y,left:h.x,minWidth:180,maxWidth:280,backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:M.spacing[1],zIndex:"var(--brycks-z-dropdown)",outline:"none"},C=(e,n)=>({display:"flex",alignItems:"center",gap:M.spacing[2],padding:`${v.componentPaddingY.sm}px ${v.componentPaddingX.sm}px`,fontSize:j.fontSizes.sm,fontWeight:400,color:n?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:n?"not-allowed":"pointer",transition:`background-color ${S.durations.fast}ms ${S.easings.easeOut}`}),k={display:"flex",alignItems:"center",justifyContent:"center",width:v.iconSizes.sm,height:v.iconSizes.sm,color:"inherit"},d={marginLeft:"auto",fontSize:j.fontSizes.xs,color:"var(--brycks-foreground-muted)"},m={height:1,margin:`${M.spacing[1]}px 0`,backgroundColor:"var(--brycks-border-default)"};let t=-1;return o.jsx("ul",{ref:y,role:"menu",tabIndex:0,style:w,onKeyDown:g,children:i.map((e,n)=>{if(e.separator)return o.jsx("li",{role:"separator",style:m},e.id);e.disabled||t++;const s=t,E=!e.disabled&&s===l,f=e.children&&e.children.length>0;return o.jsxs("li",{role:"menuitem","aria-disabled":e.disabled,"aria-haspopup":f?"menu":void 0,"aria-expanded":f&&b===n?"true":void 0,style:C(E,!!e.disabled),onMouseEnter:()=>{e.disabled||(x(s),c(f?n:null))},onMouseLeave:()=>{f||c(null)},onClick:()=>{e.disabled||(f?c(n):e.onClick&&(e.onClick(),u()))},children:[e.icon&&o.jsx("span",{style:k,children:e.icon}),o.jsx("span",{style:{flex:1},children:e.label}),e.shortcut&&o.jsx("span",{style:d,children:e.shortcut}),f&&o.jsx("span",{style:k,children:o.jsx(R,{})}),f&&b===n&&e.children&&o.jsx(P,{items:e.children,position:{x:176,y:0},onClose:()=>c(null),level:p+1})]},e.id)})})}const D=r.forwardRef(function({items:h,children:u,onOpen:p,onClose:l,disabled:x=!1,className:b,testId:c},y){const[a,g]=r.useState(!1),[w,C]=r.useState({x:0,y:0}),k=r.useCallback(t=>{if(x)return;t.preventDefault(),t.stopPropagation();const e=Math.min(t.clientX,window.innerWidth-200),n=Math.min(t.clientY,window.innerHeight-300);C({x:e,y:n}),g(!0),p?.()},[x,p]),d=r.useCallback(()=>{g(!1),l?.()},[l]);r.useEffect(()=>{if(!a)return;const t=()=>{d()};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[a,d]),r.useEffect(()=>{if(!a)return;const t=e=>{e.key==="Escape"&&d()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,d]);const m={display:"contents"};return o.jsx(I.Provider,{value:{closeMenu:d},children:o.jsxs("div",{ref:y,className:L.cx("brycks-contextmenu",b),style:m,"data-testid":c,onContextMenu:k,children:[u,a&&z.createPortal(o.jsx("div",{style:{position:"fixed",inset:0,zIndex:"var(--brycks-z-dropdown)"},onMouseDown:t=>t.stopPropagation(),children:o.jsx(P,{items:h,position:w,onClose:d})}),document.body)]})})});D.displayName="ContextMenu";function q(){const i=r.useContext(I);if(!i)throw new Error("useContextMenu must be used within a ContextMenu");return i}exports.ContextMenu=D;exports.useContextMenu=q;
 //# sourceMappingURL=ContextMenu.cjs.map