@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/EmptyState/EmptyState.js

@@ -0,0 +1,102 @@
+"use client";
+var v = Object.defineProperty, T = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var n = (e, t, r) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, f = (e, t) => {
+  for (var r in t || (t = {}))
+    h.call(t, r) && n(e, r, t[r]);
+  if (m)
+    for (var r of m(t))
+      d.call(t, r) && n(e, r, t[r]);
+  return e;
+}, x = (e, t) => T(e, C(t));
+var y = (e, t) => {
+  var r = {};
+  for (var s in e)
+    h.call(e, s) && t.indexOf(s) < 0 && (r[s] = e[s]);
+  if (e != null && m)
+    for (var s of m(e))
+      t.indexOf(s) < 0 && d.call(e, s) && (r[s] = e[s]);
+  return r;
+};
+import { jsxs as F, jsx as i } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn.js";
+import { getSpacingClass as a } from "../../tokens/spacing.js";
+import g from "../../primitives/Text/Text.js";
+import { getTypographyWeightFromFontWeight as I, getTypographySize as u } from "../../tokens/typography.js";
+import { Button as W } from "../../primitives/Button/Button.js";
+function G($) {
+  var p = $, {
+    title: e,
+    message: t,
+    actionLabel: r,
+    onAction: s,
+    illustration: l,
+    variant: c = "default",
+    className: b = ""
+  } = p, w = y(p, [
+    "title",
+    "message",
+    "actionLabel",
+    "onAction",
+    "illustration",
+    "variant",
+    "className"
+  ]);
+  const N = o(
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "text-center",
+    a("xl", "py"),
+    a("base", "px"),
+    b
+  ), S = c === "withAction" || r && s, j = c === "withIllustration" || l;
+  return /* @__PURE__ */ F(
+    "div",
+    x(f({
+      className: N,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `${e}. ${t}`
+    }, w), {
+      children: [
+        j && l && /* @__PURE__ */ i("div", { className: o(a("base", "mb")), "aria-hidden": "true", children: l }),
+        /* @__PURE__ */ i(
+          g,
+          {
+            as: "h3",
+            className: o(
+              u("h4"),
+              I("semibold"),
+              "text-fg-primary",
+              a("sm", "mb")
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ i(
+          g,
+          {
+            as: "p",
+            className: o(
+              u("bodySmall"),
+              "text-fg-secondary",
+              a("md", "mb"),
+              "max-w-sm"
+              // Max width utility - justified as layout constraint
+            ),
+            children: t
+          }
+        ),
+        S && r && s && /* @__PURE__ */ i(W, { variant: "primary", onClick: s, children: r })
+      ]
+    })
+  );
+}
+export {
+  G as default
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/granular/ui/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../../../src/ui/components/EmptyState/EmptyState.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Button } from \"../../primitives\";\nimport { Text } from \"../../primitives\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getTypographySize,\n  getTypographyWeightFromFontWeight,\n} from \"../../tokens\";\n\nexport interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {\n  title: string;\n  message: string;\n  actionLabel?: string;\n  onAction?: () => void;\n  illustration?: ReactNode;\n  variant?: \"default\" | \"withAction\" | \"withIllustration\";\n}\n\n/**\n * EmptyState Component\n *\n * A component for displaying empty states when there's no content to show.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <EmptyState\n *   title=\"No epics yet\"\n *   message=\"Get started by creating your first epic\"\n *   actionLabel=\"Create Epic\"\n *   onAction={() => router.push('/epics/new')}\n * />\n * ```\n */\nexport default function EmptyState({\n  title,\n  message,\n  actionLabel,\n  onAction,\n  illustration,\n  variant = \"default\",\n  className = \"\",\n  ...props\n}: EmptyStateProps) {\n  const classes = cn(\n    \"flex\",\n    \"flex-col\",\n    \"items-center\",\n    \"justify-center\",\n    \"text-center\",\n    getSpacingClass(\"xl\", \"py\"),\n    getSpacingClass(\"base\", \"px\"),\n    className,\n  );\n\n  const showAction = variant === \"withAction\" || (actionLabel && onAction);\n  const showIllustration = variant === \"withIllustration\" || illustration;\n\n  return (\n    <div\n      className={classes}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={`${title}. ${message}`}\n      {...props}\n    >\n      {showIllustration && illustration && (\n        <div className={cn(getSpacingClass(\"base\", \"mb\"))} aria-hidden=\"true\">\n          {illustration}\n        </div>\n      )}\n\n      <Text\n        as=\"h3\"\n        className={cn(\n          getTypographySize(\"h4\"),\n          getTypographyWeightFromFontWeight(\"semibold\"),\n          \"text-fg-primary\",\n          getSpacingClass(\"sm\", \"mb\"),\n        )}\n      >\n        {title}\n      </Text>\n\n      <Text\n        as=\"p\"\n        className={cn(\n          getTypographySize(\"bodySmall\"),\n          \"text-fg-secondary\",\n          getSpacingClass(\"md\", \"mb\"),\n          \"max-w-sm\", // Max width utility - justified as layout constraint\n        )}\n      >\n        {message}\n      </Text>\n\n      {showAction && actionLabel && onAction && (\n        <Button variant=\"primary\" onClick={onAction}>\n          {actionLabel}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["EmptyState","_a","_b","title","message","actionLabel","onAction","illustration","variant","className","props","__objRest","classes","cn","getSpacingClass","showAction","showIllustration","jsxs","__spreadProps","__spreadValues","jsx","Text","getTypographySize","getTypographyWeightFromFontWeight","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAwBA,EAAWC,GASf;AATe,MAAAC,IAAAD,GACjC;AAAA,WAAAE;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MAPqBP,GAQ9BQ,IAAAC,EAR8BT,GAQ9B;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMU,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAC,EAAgB,MAAM,IAAI;AAAA,IAC1BA,EAAgB,QAAQ,IAAI;AAAA,IAC5BL;AAAA,EAAA,GAGIM,IAAaP,MAAY,gBAAiBH,KAAeC,GACzDU,IAAmBR,MAAY,sBAAsBD;AAE3D,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWP;AAAA,MACX,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,GAAGT,CAAK,KAAKC,CAAO;AAAA,OAC5BM,IALL;AAAA,MAOE,UAAA;AAAA,QAAAM,KAAoBT,KACnB,gBAAAa,EAAC,OAAA,EAAI,WAAWP,EAAGC,EAAgB,QAAQ,IAAI,CAAC,GAAG,eAAY,QAC5D,UAAAP,GACH;AAAA,QAGF,gBAAAa;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAWR;AAAA,cACTS,EAAkB,IAAI;AAAA,cACtBC,EAAkC,UAAU;AAAA,cAC5C;AAAA,cACAT,EAAgB,MAAM,IAAI;AAAA,YAAA;AAAA,YAG3B,UAAAX;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAWR;AAAA,cACTS,EAAkB,WAAW;AAAA,cAC7B;AAAA,cACAR,EAAgB,MAAM,IAAI;AAAA,cAC1B;AAAA;AAAA,YAAA;AAAA,YAGD,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFW,KAAcV,KAAeC,KAC5B,gBAAAc,EAACI,KAAO,SAAQ,WAAU,SAASlB,GAChC,UAAAD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/granular/ui/components/FileUpload/FileUpload.js

@@ -0,0 +1,342 @@
+"use client";
+var _ = Object.defineProperty, P = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var T = Object.getOwnPropertySymbols;
+var ee = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
+var W = (n, c, a) => c in n ? _(n, c, { enumerable: !0, configurable: !0, writable: !0, value: a }) : n[c] = a, C = (n, c) => {
+  for (var a in c || (c = {}))
+    ee.call(c, a) && W(n, a, c[a]);
+  if (T)
+    for (var a of T(c))
+      re.call(c, a) && W(n, a, c[a]);
+  return n;
+}, O = (n, c) => P(n, U(c));
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as S, useRef as se } from "react";
+import { Upload as te, File as ae, AlertCircle as ce, CheckCircle2 as ne, X as oe } from "lucide-react";
+import { Button as ie } from "../../primitives/Button/Button.js";
+import le from "../../primitives/Progress/Progress.js";
+import { cn as r } from "../../utils/cn.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import { getTypographyWeightFromFontWeight as z, getTypographySizeFromFontSize as m } from "../../tokens/typography.js";
+import { getAnimationClass as me } from "../../tokens/animations.js";
+import { getRadiusClass as A } from "../../tokens/radius.js";
+function De({
+  accept: n,
+  multiple: c = !1,
+  maxSize: a,
+  maxFiles: B,
+  onFilesChange: g,
+  onFileRemove: h,
+  showPreview: F = !0,
+  showProgress: x = !1,
+  disabled: d = !1,
+  className: E = "",
+  label: v,
+  description: N
+}) {
+  const [p, y] = S([]), [b, D] = S(!1), u = se(null), w = (e) => {
+    if (e === 0) return "0 Bytes";
+    const s = 1024, i = ["Bytes", "KB", "MB", "GB"], f = Math.floor(Math.log(e) / Math.log(s));
+    return Math.round(e / Math.pow(s, f) * 100) / 100 + " " + i[f];
+  }, G = (e) => a && e.size > a ? `File size exceeds ${w(a)}` : null, $ = (e) => {
+    const s = Array.from(e), i = [];
+    return s.forEach((f) => {
+      const k = G(f), j = `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, V = {
+        file: f,
+        id: j,
+        error: k != null ? k : void 0,
+        progress: x ? 0 : void 0
+      };
+      if (F && f.type.startsWith("image/")) {
+        const L = new FileReader();
+        L.onload = (Y) => {
+          y(
+            (Z) => Z.map(
+              (M) => {
+                var R;
+                return M.id === j ? O(C({}, M), { preview: (R = Y.target) == null ? void 0 : R.result }) : M;
+              }
+            )
+          );
+        }, L.readAsDataURL(f);
+      }
+      i.push(V);
+    }), i;
+  }, I = (e) => {
+    const s = c ? [...p, ...e] : e, i = B ? s.slice(0, B) : s;
+    y(i), g == null || g(i);
+  }, K = (e) => {
+    if (e.preventDefault(), D(!1), d) return;
+    const s = e.dataTransfer.files;
+    if (s.length > 0) {
+      const i = $(s);
+      I(i);
+    }
+  }, X = (e) => {
+    e.preventDefault(), d || D(!0);
+  }, q = (e) => {
+    e.preventDefault(), D(!1);
+  }, H = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const s = $(e.target.files);
+      I(s);
+    }
+    u.current && (u.current.value = "");
+  }, J = (e) => {
+    const s = p.filter((i) => i.id !== e);
+    y(s), g == null || g(s), h == null || h(e);
+  }, Q = () => {
+    var e;
+    d || (e = u.current) == null || e.click();
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: r(
+        o("lg", "gap"),
+        "flex",
+        "flex-col",
+        E
+      ),
+      children: [
+        (v || N) && /* @__PURE__ */ l("div", { children: [
+          v && /* @__PURE__ */ t(
+            "label",
+            {
+              className: r(
+                "block",
+                m("sm"),
+                z("medium"),
+                "text-fg-primary",
+                o("xs", "mb")
+              ),
+              children: v
+            }
+          ),
+          N && /* @__PURE__ */ t(
+            "p",
+            {
+              className: r(
+                m("sm"),
+                "text-fg-secondary"
+              ),
+              children: N
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            onDrop: K,
+            onDragOver: X,
+            onDragLeave: q,
+            onClick: Q,
+            className: r(
+              "relative",
+              "border-2",
+              "border-dashed",
+              b ? "border-line-brand" : "border-line-default",
+              A("lg"),
+              o("lg", "p"),
+              "text-center",
+              "cursor-pointer",
+              me("base"),
+              "focus:border-line-focus",
+              d ? "opacity-50 cursor-not-allowed" : r(
+                "hover:border-line-strong",
+                "focus:outline-none",
+                "focus:ring-2",
+                "focus:ring-offset-2"
+              )
+            ),
+            role: "button",
+            tabIndex: d ? -1 : 0,
+            "aria-label": "Upload files",
+            "aria-disabled": d,
+            children: [
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  ref: u,
+                  type: "file",
+                  accept: n,
+                  multiple: c,
+                  onChange: H,
+                  disabled: d,
+                  className: "hidden"
+                }
+              ),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: r(
+                    "flex",
+                    "flex-col",
+                    "items-center",
+                    o("sm", "gap")
+                  ),
+                  children: [
+                    /* @__PURE__ */ t(
+                      te,
+                      {
+                        className: r(
+                          "h-8",
+                          "w-8",
+                          b ? "text-fg-brand" : "text-fg-secondary"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ l("div", { children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          className: r(
+                            m("sm"),
+                            z("medium"),
+                            "text-fg-primary"
+                          ),
+                          children: b ? "Drop files here" : "Click to upload or drag and drop"
+                        }
+                      ),
+                      n && /* @__PURE__ */ l(
+                        "p",
+                        {
+                          className: r(
+                            m("xs"),
+                            "text-fg-secondary",
+                            o("xs", "mt")
+                          ),
+                          children: [
+                            "Accepted: ",
+                            n
+                          ]
+                        }
+                      ),
+                      a && /* @__PURE__ */ l(
+                        "p",
+                        {
+                          className: r(
+                            m("xs"),
+                            "text-fg-secondary"
+                          ),
+                          children: [
+                            "Max size: ",
+                            w(a)
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        p.length > 0 && /* @__PURE__ */ t("div", { className: r("flex", "flex-col", o("sm", "gap")), children: p.map((e) => /* @__PURE__ */ l(
+          "div",
+          {
+            className: r(
+              "flex",
+              "items-center",
+              o("md", "gap"),
+              o("base", "p"),
+              "border",
+              "border-line-default",
+              A("md"),
+              e.error ? "bg-error-bg" : "bg-surface-muted"
+            ),
+            children: [
+              F && e.preview ? /* @__PURE__ */ t(
+                "img",
+                {
+                  src: e.preview,
+                  alt: e.file.name,
+                  className: r(
+                    "w-12",
+                    "h-12",
+                    "object-cover",
+                    A("md")
+                  )
+                }
+              ) : /* @__PURE__ */ t(ae, { className: r("h-8", "w-8", "text-fg-secondary") }),
+              /* @__PURE__ */ l("div", { className: r("flex-1", "min-w-0"), children: [
+                /* @__PURE__ */ t(
+                  "p",
+                  {
+                    className: r(
+                      m("sm"),
+                      z("medium"),
+                      "text-fg-primary",
+                      "truncate"
+                    ),
+                    children: e.file.name
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "p",
+                  {
+                    className: r(
+                      m("xs"),
+                      "text-fg-secondary"
+                    ),
+                    children: w(e.file.size)
+                  }
+                ),
+                e.error && /* @__PURE__ */ l(
+                  "div",
+                  {
+                    className: r(
+                      "flex",
+                      "items-center",
+                      o("xs", "gap"),
+                      o("xs", "mt")
+                    ),
+                    children: [
+                      /* @__PURE__ */ t(
+                        ce,
+                        {
+                          className: r("h-3", "w-3", "text-fg-error")
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          className: r(
+                            m("xs"),
+                            "text-fg-error"
+                          ),
+                          children: e.error
+                        }
+                      )
+                    ]
+                  }
+                ),
+                x && e.progress !== void 0 && /* @__PURE__ */ t("div", { className: r(o("sm", "mt")), children: /* @__PURE__ */ t(le, { value: e.progress, size: "sm" }) })
+              ] }),
+              !e.error && !x && /* @__PURE__ */ t(ne, { className: r("h-5", "w-5", "text-fg-success") }),
+              /* @__PURE__ */ t(
+                ie,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: (s) => {
+                    s.stopPropagation(), J(e.id);
+                  },
+                  className: `h-auto ${o("xs", "p")}`,
+                  "aria-label": `Remove ${e.file.name}`,
+                  children: /* @__PURE__ */ t(oe, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          },
+          e.id
+        )) })
+      ]
+    }
+  );
+}
+export {
+  De as default
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/granular/ui/components/FileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../../../../src/ui/components/FileUpload/FileUpload.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, type DragEvent, type ChangeEvent } from \"react\";\nimport { Upload, X, File, CheckCircle2, AlertCircle } from \"lucide-react\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getRadiusClass,\n  getAnimationClass,\n  getTypographySizeFromFontSize,\n  getTypographyWeightFromFontWeight,\n} from \"../../tokens\";\nimport Button from \"../../primitives/Button/Button\";\nimport Progress from \"../../primitives/Progress/Progress\";\n\nexport interface FileUploadFile {\n  file: File;\n  id: string;\n  preview?: string;\n  progress?: number;\n  error?: string;\n}\n\nexport interface FileUploadProps {\n  accept?: string;\n  multiple?: boolean;\n  maxSize?: number; // in bytes\n  maxFiles?: number;\n  onFilesChange?: (files: FileUploadFile[]) => void;\n  onFileRemove?: (fileId: string) => void;\n  showPreview?: boolean;\n  showProgress?: boolean;\n  disabled?: boolean;\n  className?: string;\n  label?: string;\n  description?: string;\n}\n\n/**\n * FileUpload Component\n *\n * A file upload component with drag and drop, preview, validation, and progress.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={5 * 1024 * 1024} // 5MB\n *   onFilesChange={(files) => console.log(files)}\n * />\n * ```\n */\nexport default function FileUpload({\n  accept,\n  multiple = false,\n  maxSize,\n  maxFiles,\n  onFilesChange,\n  onFileRemove,\n  showPreview = true,\n  showProgress = false,\n  disabled = false,\n  className = \"\",\n  label,\n  description,\n}: FileUploadProps) {\n  const [files, setFiles] = useState<FileUploadFile[]>([]);\n  const [isDragging, setIsDragging] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return \"0 Bytes\";\n    const k = 1024;\n    const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + \" \" + sizes[i];\n  };\n\n  const validateFile = (file: File): string | null => {\n    if (maxSize && file.size > maxSize) {\n      return `File size exceeds ${formatFileSize(maxSize)}`;\n    }\n    return null;\n  };\n\n  const processFiles = (fileList: FileList | File[]): FileUploadFile[] => {\n    const fileArray = Array.from(fileList);\n    const newFiles: FileUploadFile[] = [];\n\n    fileArray.forEach((file) => {\n      const error = validateFile(file);\n      const fileId = `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;\n\n      const fileUpload: FileUploadFile = {\n        file,\n        id: fileId,\n        error: error ?? undefined,\n        progress: showProgress ? 0 : undefined,\n      };\n\n      // Generate preview for images\n      if (showPreview && file.type.startsWith(\"image/\")) {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          setFiles((prev) =>\n            prev.map((f) =>\n              f.id === fileId\n                ? { ...f, preview: e.target?.result as string }\n                : f,\n            ),\n          );\n        };\n        reader.readAsDataURL(file);\n      }\n\n      newFiles.push(fileUpload);\n    });\n\n    return newFiles;\n  };\n\n  const handleFiles = (newFiles: FileUploadFile[]) => {\n    const updatedFiles = multiple ? [...files, ...newFiles] : newFiles;\n    const limitedFiles = maxFiles\n      ? updatedFiles.slice(0, maxFiles)\n      : updatedFiles;\n\n    setFiles(limitedFiles);\n    onFilesChange?.(limitedFiles);\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsDragging(false);\n\n    if (disabled) return;\n\n    const droppedFiles = e.dataTransfer.files;\n    if (droppedFiles.length > 0) {\n      const processedFiles = processFiles(droppedFiles);\n      handleFiles(processedFiles);\n    }\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    if (!disabled) {\n      setIsDragging(true);\n    }\n  };\n\n  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsDragging(false);\n  };\n\n  const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files && e.target.files.length > 0) {\n      const processedFiles = processFiles(e.target.files);\n      handleFiles(processedFiles);\n    }\n    // Reset input\n    if (fileInputRef.current) {\n      fileInputRef.current.value = \"\";\n    }\n  };\n\n  const handleRemove = (fileId: string) => {\n    const updatedFiles = files.filter((f) => f.id !== fileId);\n    setFiles(updatedFiles);\n    onFilesChange?.(updatedFiles);\n    onFileRemove?.(fileId);\n  };\n\n  const handleClick = () => {\n    if (!disabled) {\n      fileInputRef.current?.click();\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        getSpacingClass(\"lg\", \"gap\"),\n        \"flex\",\n        \"flex-col\",\n        className,\n      )}\n    >\n      {(label || description) && (\n        <div>\n          {label && (\n            <label\n              className={cn(\n                \"block\",\n                getTypographySizeFromFontSize(\"sm\"),\n                getTypographyWeightFromFontWeight(\"medium\"),\n                \"text-fg-primary\",\n                getSpacingClass(\"xs\", \"mb\"),\n              )}\n            >\n              {label}\n            </label>\n          )}\n          {description && (\n            <p\n              className={cn(\n                getTypographySizeFromFontSize(\"sm\"),\n                \"text-fg-secondary\",\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      <div\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onClick={handleClick}\n        className={cn(\n          \"relative\",\n          \"border-2\",\n          \"border-dashed\",\n          isDragging ? \"border-line-brand\" : \"border-line-default\",\n          getRadiusClass(\"lg\"),\n          getSpacingClass(\"lg\", \"p\"),\n          \"text-center\",\n          \"cursor-pointer\",\n          getAnimationClass(\"base\"),\n          \"focus:border-line-focus\",\n          disabled\n            ? \"opacity-50 cursor-not-allowed\"\n            : cn(\n                \"hover:border-line-strong\",\n                \"focus:outline-none\",\n                \"focus:ring-2\",\n                \"focus:ring-offset-2\",\n              ),\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label=\"Upload files\"\n        aria-disabled={disabled}\n      >\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleFileInput}\n          disabled={disabled}\n          className=\"hidden\"\n        />\n\n        <div\n          className={cn(\n            \"flex\",\n            \"flex-col\",\n            \"items-center\",\n            getSpacingClass(\"sm\", \"gap\"),\n          )}\n        >\n          <Upload\n            className={cn(\n              \"h-8\",\n              \"w-8\",\n              isDragging ? \"text-fg-brand\" : \"text-fg-secondary\",\n            )}\n          />\n          <div>\n            <span\n              className={cn(\n                getTypographySizeFromFontSize(\"sm\"),\n                getTypographyWeightFromFontWeight(\"medium\"),\n                \"text-fg-primary\",\n              )}\n            >\n              {isDragging\n                ? \"Drop files here\"\n                : \"Click to upload or drag and drop\"}\n            </span>\n            {accept && (\n              <p\n                className={cn(\n                  getTypographySizeFromFontSize(\"xs\"),\n                  \"text-fg-secondary\",\n                  getSpacingClass(\"xs\", \"mt\"),\n                )}\n              >\n                Accepted: {accept}\n              </p>\n            )}\n            {maxSize && (\n              <p\n                className={cn(\n                  getTypographySizeFromFontSize(\"xs\"),\n                  \"text-fg-secondary\",\n                )}\n              >\n                Max size: {formatFileSize(maxSize)}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {files.length > 0 && (\n        <div className={cn(\"flex\", \"flex-col\", getSpacingClass(\"sm\", \"gap\"))}>\n          {files.map((fileUpload) => (\n            <div\n              key={fileUpload.id}\n              className={cn(\n                \"flex\",\n                \"items-center\",\n                getSpacingClass(\"md\", \"gap\"),\n                getSpacingClass(\"base\", \"p\"),\n                \"border\",\n                \"border-line-default\",\n                getRadiusClass(\"md\"),\n                fileUpload.error ? \"bg-error-bg\" : \"bg-surface-muted\",\n              )}\n            >\n              {showPreview && fileUpload.preview ? (\n                <img\n                  src={fileUpload.preview}\n                  alt={fileUpload.file.name}\n                  className={cn(\n                    \"w-12\",\n                    \"h-12\",\n                    \"object-cover\",\n                    getRadiusClass(\"md\"),\n                  )}\n                />\n              ) : (\n                <File className={cn(\"h-8\", \"w-8\", \"text-fg-secondary\")} />\n              )}\n\n              <div className={cn(\"flex-1\", \"min-w-0\")}>\n                <p\n                  className={cn(\n                    getTypographySizeFromFontSize(\"sm\"),\n                    getTypographyWeightFromFontWeight(\"medium\"),\n                    \"text-fg-primary\",\n                    \"truncate\",\n                  )}\n                >\n                  {fileUpload.file.name}\n                </p>\n                <p\n                  className={cn(\n                    getTypographySizeFromFontSize(\"xs\"),\n                    \"text-fg-secondary\",\n                  )}\n                >\n                  {formatFileSize(fileUpload.file.size)}\n                </p>\n                {fileUpload.error && (\n                  <div\n                    className={cn(\n                      \"flex\",\n                      \"items-center\",\n                      getSpacingClass(\"xs\", \"gap\"),\n                      getSpacingClass(\"xs\", \"mt\"),\n                    )}\n                  >\n                    <AlertCircle\n                      className={cn(\"h-3\", \"w-3\", \"text-fg-error\")}\n                    />\n                    <span\n                      className={cn(\n                        getTypographySizeFromFontSize(\"xs\"),\n                        \"text-fg-error\",\n                      )}\n                    >\n                      {fileUpload.error}\n                    </span>\n                  </div>\n                )}\n                {showProgress && fileUpload.progress !== undefined && (\n                  <div className={cn(getSpacingClass(\"sm\", \"mt\"))}>\n                    <Progress value={fileUpload.progress} size=\"sm\" />\n                  </div>\n                )}\n              </div>\n\n              {!fileUpload.error && !showProgress && (\n                <CheckCircle2 className={cn(\"h-5\", \"w-5\", \"text-fg-success\")} />\n              )}\n\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  handleRemove(fileUpload.id);\n                }}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label={`Remove ${fileUpload.file.name}`}\n              >\n                <X className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["FileUpload","accept","multiple","maxSize","maxFiles","onFilesChange","onFileRemove","showPreview","showProgress","disabled","className","label","description","files","setFiles","useState","isDragging","setIsDragging","fileInputRef","useRef","formatFileSize","bytes","k","sizes","i","validateFile","file","processFiles","fileList","fileArray","newFiles","error","fileId","fileUpload","reader","e","prev","f","__spreadProps","__spreadValues","_a","handleFiles","updatedFiles","limitedFiles","handleDrop","droppedFiles","processedFiles","handleDragOver","handleDragLeave","handleFileInput","handleRemove","handleClick","jsxs","cn","getSpacingClass","jsx","getTypographySizeFromFontSize","getTypographyWeightFromFontWeight","getRadiusClass","getAnimationClass","Upload","File","AlertCircle","Progress","CheckCircle2","Button","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAwBA,GAAW;AAAA,EACjC,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC;AACF,GAAoB;AAClB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA2B,CAAA,CAAE,GACjD,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5CG,IAAeC,GAAyB,IAAI,GAE5CC,IAAiB,CAACC,MAA0B;AAChD,QAAIA,MAAU,EAAG,QAAO;AACxB,UAAMC,IAAI,MACJC,IAAQ,CAAC,SAAS,MAAM,MAAM,IAAI,GAClCC,IAAI,KAAK,MAAM,KAAK,IAAIH,CAAK,IAAI,KAAK,IAAIC,CAAC,CAAC;AAClD,WAAO,KAAK,MAAOD,IAAQ,KAAK,IAAIC,GAAGE,CAAC,IAAK,GAAG,IAAI,MAAM,MAAMD,EAAMC,CAAC;AAAA,EACzE,GAEMC,IAAe,CAACC,MAChBvB,KAAWuB,EAAK,OAAOvB,IAClB,qBAAqBiB,EAAejB,CAAO,CAAC,KAE9C,MAGHwB,IAAe,CAACC,MAAkD;AACtE,UAAMC,IAAY,MAAM,KAAKD,CAAQ,GAC/BE,IAA6B,CAAA;AAEnC,WAAAD,EAAU,QAAQ,CAACH,MAAS;AAC1B,YAAMK,IAAQN,EAAaC,CAAI,GACzBM,IAAS,GAAG,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,IAEjEC,IAA6B;AAAA,QACjC,MAAAP;AAAA,QACA,IAAIM;AAAA,QACJ,OAAOD,KAAA,OAAAA,IAAS;AAAA,QAChB,UAAUvB,IAAe,IAAI;AAAA,MAAA;AAI/B,UAAID,KAAemB,EAAK,KAAK,WAAW,QAAQ,GAAG;AACjD,cAAMQ,IAAS,IAAI,WAAA;AACnB,QAAAA,EAAO,SAAS,CAACC,MAAM;AACrB,UAAArB;AAAA,YAAS,CAACsB,MACRA,EAAK;AAAA,cAAI,CAACC,MAAA;;AACR,uBAAAA,EAAE,OAAOL,IACLM,EAAAC,EAAA,IAAKF,IAAL,EAAQ,UAASG,IAAAL,EAAE,WAAF,gBAAAK,EAAU,OAAA,KAC3BH;AAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAEJ,GACAH,EAAO,cAAcR,CAAI;AAAA,MAC3B;AAEA,MAAAI,EAAS,KAAKG,CAAU;AAAA,IAC1B,CAAC,GAEMH;AAAA,EACT,GAEMW,IAAc,CAACX,MAA+B;AAClD,UAAMY,IAAexC,IAAW,CAAC,GAAGW,GAAO,GAAGiB,CAAQ,IAAIA,GACpDa,IAAevC,IACjBsC,EAAa,MAAM,GAAGtC,CAAQ,IAC9BsC;AAEJ,IAAA5B,EAAS6B,CAAY,GACrBtC,KAAA,QAAAA,EAAgBsC;AAAA,EAClB,GAEMC,IAAa,CAAC,MAAiC;AAInD,QAHA,EAAE,eAAA,GACF3B,EAAc,EAAK,GAEfR,EAAU;AAEd,UAAMoC,IAAe,EAAE,aAAa;AACpC,QAAIA,EAAa,SAAS,GAAG;AAC3B,YAAMC,IAAiBnB,EAAakB,CAAY;AAChD,MAAAJ,EAAYK,CAAc;AAAA,IAC5B;AAAA,EACF,GAEMC,IAAiB,CAAC,MAAiC;AACvD,MAAE,eAAA,GACGtC,KACHQ,EAAc,EAAI;AAAA,EAEtB,GAEM+B,IAAkB,CAAC,MAAiC;AACxD,MAAE,eAAA,GACF/B,EAAc,EAAK;AAAA,EACrB,GAEMgC,IAAkB,CAAC,MAAqC;AAC5D,QAAI,EAAE,OAAO,SAAS,EAAE,OAAO,MAAM,SAAS,GAAG;AAC/C,YAAMH,IAAiBnB,EAAa,EAAE,OAAO,KAAK;AAClD,MAAAc,EAAYK,CAAc;AAAA,IAC5B;AAEA,IAAI5B,EAAa,YACfA,EAAa,QAAQ,QAAQ;AAAA,EAEjC,GAEMgC,IAAe,CAAClB,MAAmB;AACvC,UAAMU,IAAe7B,EAAM,OAAO,CAACwB,MAAMA,EAAE,OAAOL,CAAM;AACxD,IAAAlB,EAAS4B,CAAY,GACrBrC,KAAA,QAAAA,EAAgBqC,IAChBpC,KAAA,QAAAA,EAAe0B;AAAA,EACjB,GAEMmB,IAAc,MAAM;;AACxB,IAAK1C,MACH+B,IAAAtB,EAAa,YAAb,QAAAsB,EAAsB;AAAA,EAE1B;AAEA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAgB,MAAM,KAAK;AAAA,QAC3B;AAAA,QACA;AAAA,QACA5C;AAAA,MAAA;AAAA,MAGA,UAAA;AAAA,SAAAC,KAASC,wBACR,OAAA,EACE,UAAA;AAAA,UAAAD,KACC,gBAAA4C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF;AAAA,gBACT;AAAA,gBACAG,EAA8B,IAAI;AAAA,gBAClCC,EAAkC,QAAQ;AAAA,gBAC1C;AAAA,gBACAH,EAAgB,MAAM,IAAI;AAAA,cAAA;AAAA,cAG3B,UAAA3C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJC,KACC,gBAAA2C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF;AAAA,gBACTG,EAA8B,IAAI;AAAA,gBAClC;AAAA,cAAA;AAAA,cAGD,UAAA5C;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GAEJ;AAAA,QAGF,gBAAAwC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAQR;AAAA,YACR,YAAYG;AAAA,YACZ,aAAaC;AAAA,YACb,SAASG;AAAA,YACT,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACArC,IAAa,sBAAsB;AAAA,cACnC0C,EAAe,IAAI;AAAA,cACnBJ,EAAgB,MAAM,GAAG;AAAA,cACzB;AAAA,cACA;AAAA,cACAK,GAAkB,MAAM;AAAA,cACxB;AAAA,cACAlD,IACI,kCACA4C;AAAA,gBACE;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YACF;AAAA,YAEN,MAAK;AAAA,YACL,UAAU5C,IAAW,KAAK;AAAA,YAC1B,cAAW;AAAA,YACX,iBAAeA;AAAA,YAEf,UAAA;AAAA,cAAA,gBAAA8C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKrC;AAAA,kBACL,MAAK;AAAA,kBACL,QAAAjB;AAAA,kBACA,UAAAC;AAAA,kBACA,UAAU+C;AAAA,kBACV,UAAAxC;AAAA,kBACA,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGZ,gBAAA2C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAC,EAAgB,MAAM,KAAK;AAAA,kBAAA;AAAA,kBAG7B,UAAA;AAAA,oBAAA,gBAAAC;AAAA,sBAACK;AAAA,sBAAA;AAAA,wBACC,WAAWP;AAAA,0BACT;AAAA,0BACA;AAAA,0BACArC,IAAa,kBAAkB;AAAA,wBAAA;AAAA,sBACjC;AAAA,oBAAA;AAAA,sCAED,OAAA,EACC,UAAA;AAAA,sBAAA,gBAAAuC;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWF;AAAA,4BACTG,EAA8B,IAAI;AAAA,4BAClCC,EAAkC,QAAQ;AAAA,4BAC1C;AAAA,0BAAA;AAAA,0BAGD,cACG,oBACA;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAELxD,KACC,gBAAAmD;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWC;AAAA,4BACTG,EAA8B,IAAI;AAAA,4BAClC;AAAA,4BACAF,EAAgB,MAAM,IAAI;AAAA,0BAAA;AAAA,0BAE7B,UAAA;AAAA,4BAAA;AAAA,4BACYrD;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAGdE,KACC,gBAAAiD;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWC;AAAA,4BACTG,EAA8B,IAAI;AAAA,4BAClC;AAAA,0BAAA;AAAA,0BAEH,UAAA;AAAA,4BAAA;AAAA,4BACYpC,EAAejB,CAAO;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACnC,EAAA,CAEJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAGDU,EAAM,SAAS,KACd,gBAAA0C,EAAC,OAAA,EAAI,WAAWF,EAAG,QAAQ,YAAYC,EAAgB,MAAM,KAAK,CAAC,GAChE,UAAAzC,EAAM,IAAI,CAACoB,MACV,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACAC,EAAgB,MAAM,KAAK;AAAA,cAC3BA,EAAgB,QAAQ,GAAG;AAAA,cAC3B;AAAA,cACA;AAAA,cACAI,EAAe,IAAI;AAAA,cACnBzB,EAAW,QAAQ,gBAAgB;AAAA,YAAA;AAAA,YAGpC,UAAA;AAAA,cAAA1B,KAAe0B,EAAW,UACzB,gBAAAsB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKtB,EAAW;AAAA,kBAChB,KAAKA,EAAW,KAAK;AAAA,kBACrB,WAAWoB;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAK,EAAe,IAAI;AAAA,kBAAA;AAAA,gBACrB;AAAA,cAAA,sBAGDG,IAAA,EAAK,WAAWR,EAAG,OAAO,OAAO,mBAAmB,GAAG;AAAA,gCAGzD,OAAA,EAAI,WAAWA,EAAG,UAAU,SAAS,GACpC,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWF;AAAA,sBACTG,EAA8B,IAAI;AAAA,sBAClCC,EAAkC,QAAQ;AAAA,sBAC1C;AAAA,sBACA;AAAA,oBAAA;AAAA,oBAGD,YAAW,KAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEnB,gBAAAF;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWF;AAAA,sBACTG,EAA8B,IAAI;AAAA,sBAClC;AAAA,oBAAA;AAAA,oBAGD,UAAApC,EAAea,EAAW,KAAK,IAAI;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAErCA,EAAW,SACV,gBAAAmB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACA;AAAA,sBACAC,EAAgB,MAAM,KAAK;AAAA,sBAC3BA,EAAgB,MAAM,IAAI;AAAA,oBAAA;AAAA,oBAG5B,UAAA;AAAA,sBAAA,gBAAAC;AAAA,wBAACO;AAAA,wBAAA;AAAA,0BACC,WAAWT,EAAG,OAAO,OAAO,eAAe;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAE7C,gBAAAE;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWF;AAAA,4BACTG,EAA8B,IAAI;AAAA,4BAClC;AAAA,0BAAA;AAAA,0BAGD,UAAAvB,EAAW;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACd;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGHzB,KAAgByB,EAAW,aAAa,4BACtC,OAAA,EAAI,WAAWoB,EAAGC,EAAgB,MAAM,IAAI,CAAC,GAC5C,4BAACS,IAAA,EAAS,OAAO9B,EAAW,UAAU,MAAK,MAAK,EAAA,CAClD;AAAA,cAAA,GAEJ;AAAA,cAEC,CAACA,EAAW,SAAS,CAACzB,KACrB,gBAAA+C,EAACS,IAAA,EAAa,WAAWX,EAAG,OAAO,OAAO,iBAAiB,EAAA,CAAG;AAAA,cAGhE,gBAAAE;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAAS,CAAC9B,MAAM;AACd,oBAAAA,EAAE,gBAAA,GACFe,EAAajB,EAAW,EAAE;AAAA,kBAC5B;AAAA,kBACA,WAAW,UAAUqB,EAAgB,MAAM,GAAG,CAAC;AAAA,kBAC/C,cAAY,UAAUrB,EAAW,KAAK,IAAI;AAAA,kBAE1C,UAAA,gBAAAsB,EAACW,IAAA,EAAE,WAAU,UAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA;AAAA,UA1FKjC,EAAW;AAAA,QAAA,CA4FnB,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/granular/ui/components/FilterChips/FilterChips.js

@@ -0,0 +1,67 @@
+"use client";
+var p = Object.defineProperty, x = Object.defineProperties;
+var g = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var o = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var l = (e, r, a) => r in e ? p(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, c = (e, r) => {
+  for (var a in r || (r = {}))
+    o.call(r, a) && l(e, a, r[a]);
+  if (n)
+    for (var a of n(r))
+      m.call(r, a) && l(e, a, r[a]);
+  return e;
+}, u = (e, r) => x(e, g(r));
+var f = (e, r) => {
+  var a = {};
+  for (var s in e)
+    o.call(e, s) && r.indexOf(s) < 0 && (a[s] = e[s]);
+  if (e != null && n)
+    for (var s of n(e))
+      r.indexOf(s) < 0 && m.call(e, s) && (a[s] = e[s]);
+  return a;
+};
+import { jsxs as h, jsx as C } from "react/jsx-runtime";
+import { getSpacingClass as N } from "../../tokens/spacing.js";
+import { cn as v } from "../../utils/cn.js";
+function F(y) {
+  var i = y, {
+    label: e,
+    children: r,
+    wrap: a = !0,
+    className: s
+  } = i, t = f(i, [
+    "label",
+    "children",
+    "wrap",
+    "className"
+  ]);
+  const d = !(t["aria-label"] != null || t["aria-labelledby"] != null) && typeof e == "string" && e !== "" ? e : void 0;
+  return /* @__PURE__ */ h(
+    "div",
+    u(c({
+      role: "group",
+      "aria-label": d,
+      className: v(
+        "flex items-center",
+        a ? "flex-wrap" : "flex-nowrap",
+        N("sm", "gap"),
+        s
+      )
+    }, t), {
+      children: [
+        e ? (
+          // shrink-0 keeps the label a stable leading unit: in the wrapping
+          // flex run it must not be squeezed or mid-word-wrapped when the
+          // chips overflow — it stays on one line and the chips wrap around it.
+          /* @__PURE__ */ C("span", { className: "shrink-0 text-fg-secondary text-sm", children: e })
+        ) : null,
+        r
+      ]
+    })
+  );
+}
+export {
+  F as FilterChips,
+  F as default
+};
+//# sourceMappingURL=FilterChips.js.map

package/dist/granular/ui/components/FilterChips/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.js","sources":["../../../../../src/ui/components/FilterChips/FilterChips.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface FilterChipsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional group label rendered as neutral text at the left of the\n   * chips (e.g. \"Filtros\"). Deliberately NOT a `<legend>`/`<fieldset>`\n   * pair — FilterChips groups navigation/selection chips, not form\n   * controls, and fieldset semantics would imply a form that isn't\n   * there. When `label` is a plain string it doubles as the group's\n   * accessible name (see the aria-label contract in the component\n   * JSDoc).\n   */\n  label?: ReactNode;\n  /**\n   * The chips. Typically `<Chip>` elements — including the\n   * `<Chip asChild><Link/></Chip>` navigation form — but any inline\n   * content composes.\n   */\n  children: ReactNode;\n  /**\n   * Whether chips wrap to new lines when they overflow the container\n   * width. `true` (default) applies `flex-wrap` — the responsive\n   * filter-bar behavior; `false` applies `flex-nowrap` and keeps\n   * everything on one line (consumer owns overflow handling).\n   * @default true\n   */\n  wrap?: boolean;\n}\n\n/**\n * `FilterChips` — groups `Chip`s into a labeled filter bar.\n *\n * The shell of every chip-based filter row: a `role=\"group\"` container\n * with an optional neutral text label at the left and a flex run of\n * chips that wraps responsively by default. Purely presentational — the\n * interactive identity (select, navigate, remove) lives in each `Chip`\n * (`onClick`/`onRemove`, or `asChild` with a consumer `<Link>`), never\n * in this wrapper.\n *\n * ### Accessible name contract\n *\n * The container carries `role=\"group\"` so assistive technology can\n * announce the chips as one named unit. The accessible name resolves in\n * this order:\n *\n * 1. An explicit `aria-label` OR `aria-labelledby` passed by the\n *    consumer always wins — when either is present, no name is derived\n *    from `label`, so the consumer's attribute is the only naming on the\n *    element (no redundant `aria-label` is left alongside an\n *    `aria-labelledby`).\n * 2. Otherwise, when `label` is a non-empty plain string, it is reused\n *    as the group's `aria-label` automatically.\n * 3. When `label` is a non-string `ReactNode` (or absent), no\n *    `aria-label` is derived — supply `aria-label`/`aria-labelledby`\n *    yourself if the group needs a name AT users can identify it by.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * the `./server` entry. Consumer-supplied chips may themselves be\n * client components (`<Chip onRemove>`); React's RSC boundary handles\n * that normally, and the zero-JS path (`<Chip asChild><Link/></Chip>`)\n * stays fully server-rendered.\n *\n * @example\n * ```tsx\n * // Navigation filter bar — server-rendered, zero-JS-friendly.\n * <FilterChips label=\"Filtros\">\n *   <Chip asChild selected>\n *     <Link href=\"?uf=SP\" aria-current=\"page\">UF: SP</Link>\n *   </Chip>\n *   <Chip asChild>\n *     <Link href=\"?partido=PT\">Partido: PT</Link>\n *   </Chip>\n * </FilterChips>\n *\n * // Single-line variant (consumer owns horizontal overflow).\n * <FilterChips label=\"Período\" wrap={false}>\n *   <Chip>2024</Chip>\n *   <Chip>2025</Chip>\n * </FilterChips>\n * ```\n */\nexport function FilterChips({\n  label,\n  children,\n  wrap = true,\n  className,\n  ...props\n}: FilterChipsProps) {\n  // The string label doubles as the group's accessible name — but only\n  // when the consumer supplies no naming of their own. An explicit\n  // `aria-label` OR `aria-labelledby` (both spread onto the root below)\n  // takes precedence; deriving a name alongside `aria-labelledby` would\n  // leave a redundant `aria-label` on the element, so suppress it here\n  // rather than relying on ARIA name-computation precedence to hide it.\n  const hasConsumerName =\n    props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n  const derivedAriaLabel =\n    !hasConsumerName && typeof label === \"string\" && label !== \"\"\n      ? label\n      : undefined;\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={derivedAriaLabel}\n      className={cn(\n        \"flex items-center\",\n        wrap ? \"flex-wrap\" : \"flex-nowrap\",\n        getSpacingClass(\"sm\", \"gap\"),\n        className,\n      )}\n      {...props}\n    >\n      {label ? (\n        // shrink-0 keeps the label a stable leading unit: in the wrapping\n        // flex run it must not be squeezed or mid-word-wrapped when the\n        // chips overflow — it stays on one line and the chips wrap around it.\n        <span className=\"shrink-0 text-fg-secondary text-sm\">{label}</span>\n      ) : null}\n      {children}\n    </div>\n  );\n}\n\nexport default FilterChips;\n"],"names":["FilterChips","_a","_b","label","children","wrap","className","props","__objRest","derivedAriaLabel","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqFO,SAASA,EAAYC,GAMP;AANO,MAAAC,IAAAD,GAC1B;AAAA,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,MAJ0BJ,GAKvBK,IAAAC,EALuBN,GAKvB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAWA,QAAMO,IACJ,EAFAF,EAAM,YAAY,KAAK,QAAQA,EAAM,iBAAiB,KAAK,SAEvC,OAAOJ,KAAU,YAAYA,MAAU,KACvDA,IACA;AAEN,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,WAAWI;AAAA,QACT;AAAA,QACAR,IAAO,cAAc;AAAA,QACrBS,EAAgB,MAAM,KAAK;AAAA,QAC3BR;AAAA,MAAA;AAAA,OAEEC,IATL;AAAA,MAWE,UAAA;AAAA,QAAAJ;AAAA;AAAA;AAAA;AAAA,UAIC,gBAAAY,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAZ,EAAA,CAAM;AAAA,YAC1D;AAAA,QACHC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}