@fabio.caffarello/react-design-system 3.12.0 → 3.13.0

package/dist/granular/index.js.map

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

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

@@ -0,0 +1,68 @@
+"use client";
+var C = Object.defineProperty, v = Object.defineProperties;
+var z = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var m = (o, s, r) => s in o ? C(o, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[s] = r, p = (o, s) => {
+  for (var r in s || (s = {}))
+    t.call(s, r) && m(o, r, s[r]);
+  if (i)
+    for (var r of i(s))
+      a.call(s, r) && m(o, r, s[r]);
+  return o;
+}, f = (o, s) => v(o, z(s));
+var g = (o, s) => {
+  var r = {};
+  for (var l in o)
+    t.call(o, l) && s.indexOf(l) < 0 && (r[l] = o[l]);
+  if (o != null && i)
+    for (var l of i(o))
+      s.indexOf(l) < 0 && a.call(o, l) && (r[l] = o[l]);
+  return r;
+};
+import { jsx as j } from "react/jsx-runtime";
+import { getSpacingClass as n } from "../../tokens/spacing.js";
+import { cn as w } from "../../utils/cn.js";
+import { getRadiusClass as B } from "../../tokens/radius.js";
+function q(G) {
+  var e = G, {
+    children: o,
+    orientation: s = "horizontal",
+    size: r = "md",
+    attached: l = !1,
+    className: u = ""
+  } = e, c = g(e, [
+    "children",
+    "orientation",
+    "size",
+    "attached",
+    "className"
+  ]);
+  const x = {
+    horizontal: "flex-row",
+    vertical: "flex-col"
+  }, d = {
+    sm: l ? "" : n("xs", "gap"),
+    md: l ? "" : n("sm", "gap"),
+    lg: l ? "" : n("md", "gap")
+  };
+  return /* @__PURE__ */ j(
+    "div",
+    f(p({
+      role: "group",
+      className: w(
+        "inline-flex",
+        x[s],
+        d[r],
+        l && B("md"),
+        u
+      )
+    }, c), {
+      children: o
+    })
+  );
+}
+export {
+  q as default
+};
+//# sourceMappingURL=ButtonGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../src/ui/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, type HTMLAttributes } from \"react\";\nimport { getSpacingClass, getRadiusClass } from \"../../tokens\";\nimport { cn } from \"../../utils\";\n\nexport interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  orientation?: \"horizontal\" | \"vertical\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  attached?: boolean;\n}\n\n/**\n * ButtonGroup Component\n *\n * A group of buttons displayed together. A component — composed from\n * `Button` primitives.\n *\n * @example\n * ```tsx\n * <ButtonGroup>\n *   <Button>Left</Button>\n *   <Button>Middle</Button>\n *   <Button>Right</Button>\n * </ButtonGroup>\n * ```\n */\nexport default function ButtonGroup({\n  children,\n  orientation = \"horizontal\",\n  size = \"md\",\n  attached = false,\n  className = \"\",\n  ...props\n}: ButtonGroupProps) {\n  const orientationClasses = {\n    horizontal: \"flex-row\",\n    vertical: \"flex-col\",\n  };\n\n  const spacingClasses = {\n    sm: attached ? \"\" : getSpacingClass(\"xs\", \"gap\"),\n    md: attached ? \"\" : getSpacingClass(\"sm\", \"gap\"),\n    lg: attached ? \"\" : getSpacingClass(\"md\", \"gap\"),\n  };\n\n  return (\n    <div\n      role=\"group\"\n      className={cn(\n        \"inline-flex\",\n        orientationClasses[orientation],\n        spacingClasses[size],\n        attached && getRadiusClass(\"md\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["ButtonGroup","_a","_b","children","orientation","size","attached","className","props","__objRest","orientationClasses","spacingClasses","getSpacingClass","jsx","__spreadProps","__spreadValues","cn","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAwBA,EAAYC,GAOf;AAPe,MAAAC,IAAAD,GAClC;AAAA,cAAAE;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,MALsBL,GAM/BM,IAAAC,EAN+BP,GAM/B;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMQ,IAAqB;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA,GAGNC,IAAiB;AAAA,IACrB,IAAIL,IAAW,KAAKM,EAAgB,MAAM,KAAK;AAAA,IAC/C,IAAIN,IAAW,KAAKM,EAAgB,MAAM,KAAK;AAAA,IAC/C,IAAIN,IAAW,KAAKM,EAAgB,MAAM,KAAK;AAAA,EAAA;AAGjD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAN,EAAmBN,CAAW;AAAA,QAC9BO,EAAeN,CAAI;AAAA,QACnBC,KAAYW,EAAe,IAAI;AAAA,QAC/BV;AAAA,MAAA;AAAA,OAEEC,IATL;AAAA,MAWE,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/primitives/Dot/Dot.js

@@ -0,0 +1,99 @@
+"use client";
+var v = Object.defineProperty;
+var o = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var t = (a, n, r) => n in a ? v(a, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[n] = r, c = (a, n) => {
+  for (var r in n || (n = {}))
+    l.call(n, r) && t(a, r, n[r]);
+  if (o)
+    for (var r of o(n))
+      f.call(n, r) && t(a, r, n[r]);
+  return a;
+};
+var m = (a, n) => {
+  var r = {};
+  for (var i in a)
+    l.call(a, i) && n.indexOf(i) < 0 && (r[i] = a[i]);
+  if (a != null && o)
+    for (var i of o(a))
+      n.indexOf(i) < 0 && f.call(a, i) && (r[i] = a[i]);
+  return r;
+};
+import { jsx as h } from "react/jsx-runtime";
+import { memo as D, forwardRef as V, useMemo as g } from "react";
+import { getRadiusClass as x } from "../../tokens/radius.js";
+import { cn as u } from "../../utils/cn.js";
+import { cva as O } from "../../utils/cva.js";
+const R = O(
+  // Base classes
+  u("inline-block", x("full")),
+  {
+    variants: {
+      variant: {
+        online: "",
+        offline: "",
+        pending: "",
+        warning: "",
+        error: "",
+        info: ""
+      },
+      size: {
+        sm: "w-1.5 h-1.5",
+        md: "w-2 h-2",
+        lg: "w-2.5 h-2.5"
+      }
+    },
+    compoundVariants: [
+      // Map semantic variants to color tokens
+      { variant: "online", class: "bg-success" },
+      { variant: "offline", class: "bg-status-neutral" },
+      { variant: "pending", class: "bg-warning" },
+      { variant: "warning", class: "bg-warning" },
+      { variant: "error", class: "bg-error" },
+      { variant: "info", class: "bg-info" }
+    ],
+    defaultVariants: {
+      variant: "offline",
+      size: "md"
+    }
+  }
+), j = D(
+  V(function(k, p) {
+    var e = k, {
+      variant: n = "offline",
+      size: r = "md",
+      className: i = "",
+      "aria-label": s
+    } = e, d = m(e, [
+      "variant",
+      "size",
+      "className",
+      "aria-label"
+    ]);
+    const b = g(
+      () => u(R({ variant: n, size: r }), i),
+      [n, r, i]
+    ), w = g(() => s || {
+      online: "Online",
+      offline: "Offline",
+      pending: "Pending",
+      warning: "Warning",
+      error: "Error",
+      info: "Info"
+    }[n], [s, n]);
+    return /* @__PURE__ */ h(
+      "span",
+      c({
+        ref: p,
+        role: "status",
+        "aria-label": w,
+        className: b
+      }, d)
+    );
+  })
+);
+j.displayName = "Dot";
+export {
+  j as default
+};
+//# sourceMappingURL=Dot.js.map

package/dist/granular/ui/primitives/Dot/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","sources":["../../../../../src/ui/primitives/Dot/Dot.tsx"],"sourcesContent":["\"use client\";\n\nimport { memo, forwardRef, useMemo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { cn, cva } from \"../../utils\";\n\nexport type DotVariant =\n  | \"online\"\n  | \"offline\"\n  | \"pending\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\nexport type DotSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface DotProps extends HTMLAttributes<HTMLSpanElement> {\n  variant?: DotVariant;\n  size?: DotSize;\n  \"aria-label\"?: string;\n}\n\n/**\n * Dot Component\n *\n * A simple colored circle for status indication. A primitive —\n * indivisible, composes no other UI. Uses semantic color tokens for\n * consistent theming.\n *\n * @example\n * ```tsx\n * <Dot variant=\"online\" aria-label=\"User is online\" />\n * <Dot variant=\"error\" size=\"lg\" aria-label=\"Error occurred\" />\n * <Dot variant=\"pending\" size=\"sm\" aria-label=\"Action pending\" />\n * ```\n */\n// Dot variants using CVA\nconst dotVariants = cva(\n  // Base classes\n  cn(\"inline-block\", getRadiusClass(\"full\")),\n  {\n    variants: {\n      variant: {\n        online: \"\",\n        offline: \"\",\n        pending: \"\",\n        warning: \"\",\n        error: \"\",\n        info: \"\",\n      },\n      size: {\n        sm: \"w-1.5 h-1.5\",\n        md: \"w-2 h-2\",\n        lg: \"w-2.5 h-2.5\",\n      },\n    },\n    compoundVariants: [\n      // Map semantic variants to color tokens\n      { variant: \"online\", class: \"bg-success\" },\n      { variant: \"offline\", class: \"bg-status-neutral\" },\n      { variant: \"pending\", class: \"bg-warning\" },\n      { variant: \"warning\", class: \"bg-warning\" },\n      { variant: \"error\", class: \"bg-error\" },\n      { variant: \"info\", class: \"bg-info\" },\n    ],\n    defaultVariants: {\n      variant: \"offline\",\n      size: \"md\",\n    },\n  },\n);\n\nconst Dot = memo(\n  forwardRef<HTMLSpanElement, DotProps>(function Dot(\n    {\n      variant = \"offline\",\n      size = \"md\",\n      className = \"\",\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    // Memoize classes\n    const classes = useMemo(\n      () => cn(dotVariants({ variant, size }), className),\n      [variant, size, className],\n    );\n\n    // Memoize accessible label with default fallback\n    const accessibleLabel = useMemo(() => {\n      if (ariaLabel) return ariaLabel;\n      // Provide default labels based on variant\n      const defaultLabels: Record<DotVariant, string> = {\n        online: \"Online\",\n        offline: \"Offline\",\n        pending: \"Pending\",\n        warning: \"Warning\",\n        error: \"Error\",\n        info: \"Info\",\n      };\n      return defaultLabels[variant];\n    }, [ariaLabel, variant]);\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={accessibleLabel}\n        className={classes}\n        {...props}\n      />\n    );\n  }),\n);\n\nDot.displayName = \"Dot\";\n\nexport default Dot;\n"],"names":["dotVariants","cva","cn","getRadiusClass","Dot","memo","forwardRef","_a","ref","_b","variant","size","className","ariaLabel","props","__objRest","classes","useMemo","accessibleLabel","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,IAAcC;AAAA;AAAA,EAElBC,EAAG,gBAAgBC,EAAe,MAAM,CAAC;AAAA,EACzC;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB,EAAE,SAAS,UAAU,OAAO,aAAA;AAAA,MAC5B,EAAE,SAAS,WAAW,OAAO,oBAAA;AAAA,MAC7B,EAAE,SAAS,WAAW,OAAO,aAAA;AAAA,MAC7B,EAAE,SAAS,WAAW,OAAO,aAAA;AAAA,MAC7B,EAAE,SAAS,SAAS,OAAO,WAAA;AAAA,MAC3B,EAAE,SAAS,QAAQ,OAAO,UAAA;AAAA,IAAU;AAAA,IAEtC,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAEMC,IAAMC;AAAA,EACVC,EAAsC,SACpCC,GAOAC,GACA;AARA,QAAAC,IAAAF,GACE;AAAA,eAAAG,IAAU;AAAA,MACV,MAAAC,IAAO;AAAA,MACP,WAAAC,IAAY;AAAA,MACZ,cAAcC;AAAA,QAJhBJ,GAKKK,IAAAC,EALLN,GAKK;AAAA,MAJH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAMF,UAAMO,IAAUC;AAAA,MACd,MAAMf,EAAGF,EAAY,EAAE,SAAAU,GAAS,MAAAC,EAAA,CAAM,GAAGC,CAAS;AAAA,MAClD,CAACF,GAASC,GAAMC,CAAS;AAAA,IAAA,GAIrBM,IAAkBD,EAAQ,MAC1BJ,KAE8C;AAAA,MAChD,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA,EAEaH,CAAO,GAC3B,CAACG,GAAWH,CAAO,CAAC;AAEvB,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAAC,EAAA;AAAA,QACC,KAAAZ;AAAA,QACA,MAAK;AAAA,QACL,cAAYU;AAAA,QACZ,WAAWF;AAAA,SACPF;AAAA,IAAA;AAAA,EAGV,CAAC;AACH;AAEAV,EAAI,cAAc;"}