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

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

@@ -0,0 +1,210 @@
+"use client";
+var Q = Object.defineProperty, U = Object.defineProperties;
+var W = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var q = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
+var j = (r, s, e) => s in r ? Q(r, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[s] = e, H = (r, s) => {
+  for (var e in s || (s = {}))
+    q.call(s, e) && j(r, e, s[e]);
+  if (p)
+    for (var e of p(s))
+      z.call(s, e) && j(r, e, s[e]);
+  return r;
+}, V = (r, s) => U(r, W(s));
+var E = (r, s) => {
+  var e = {};
+  for (var l in r)
+    q.call(r, l) && s.indexOf(l) < 0 && (e[l] = r[l]);
+  if (r != null && p)
+    for (var l of p(r))
+      s.indexOf(l) < 0 && z.call(r, l) && (e[l] = r[l]);
+  return e;
+};
+import { jsxs as L, jsx as d } from "react/jsx-runtime";
+import { memo as M, forwardRef as X, useId as Y, useMemo as a, useCallback as Z } from "react";
+import { getTypographySize as h, getTypographyClasses as A } from "../../tokens/typography.js";
+import { getRadiusClass as _ } from "../../tokens/radius.js";
+import { getSpacingClass as f } from "../../tokens/spacing.js";
+import { cva as T } from "../../utils/cva.js";
+import { cn as t } from "../../utils/cn.js";
+const G = M(function({
+  error: s,
+  success: e,
+  helperText: l,
+  errorId: m,
+  helperId: c
+}) {
+  const i = a(
+    () => t(
+      f("xs", "mt"),
+      A("caption"),
+      s && "text-fg-error",
+      e && "text-fg-success",
+      !s && !e && "text-fg-secondary"
+    ),
+    [s, e]
+  ), n = a(
+    () => l || (s ? "Error" : e ? "Success" : ""),
+    [l, s, e]
+  );
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      id: m || c,
+      className: i,
+      role: s || e ? "alert" : void 0,
+      children: n
+    }
+  );
+}), ee = M(
+  X(function(se, D) {
+    var S = se, {
+      options: s = [],
+      optionGroups: e,
+      placeholder: l,
+      label: m,
+      error: c = !1,
+      success: i = !1,
+      helperText: n,
+      size: y = "md",
+      className: x = "",
+      disabled: v = !1,
+      id: B
+    } = S, C = E(S, [
+      "options",
+      "optionGroups",
+      "placeholder",
+      "label",
+      "error",
+      "success",
+      "helperText",
+      "size",
+      "className",
+      "disabled",
+      "id"
+    ]);
+    const J = Y(), u = B || `select-${J}`, R = a(
+      () => c ? `${u}-error` : void 0,
+      [c, u]
+    ), F = a(
+      () => n ? `${u}-helper` : void 0,
+      [n, u]
+    ), I = a(() => "focus:border-line-focus", []), w = a(() => "focus:border-error", []), N = a(() => "focus:border-success", []), b = Z(
+      (o) => o === "error" ? w.replace("focus:border-", "focus:ring-") : o === "success" ? N.replace("focus:border-", "focus:ring-") : I.replace("focus:border-", "focus:ring-"),
+      [w, N, I]
+    ), k = a(
+      () => T(
+        // Base classes
+        t(
+          "block",
+          "w-full",
+          _("md"),
+          "border",
+          "bg-surface-base",
+          "transition-colors",
+          "focus:outline-none",
+          "focus:ring-2",
+          "focus:ring-offset-2",
+          "disabled:opacity-50",
+          "disabled:cursor-not-allowed"
+        ),
+        {
+          variants: {
+            size: {
+              sm: t(
+                "h-8",
+                h("bodySmall"),
+                f("md", "px")
+              ),
+              md: t(
+                "h-10",
+                h("body"),
+                f("base", "px")
+              ),
+              lg: t(
+                "h-12",
+                h("bodyLarge"),
+                f("lg", "px")
+              )
+            },
+            state: {
+              default: t("border-line-default", b()),
+              error: t("border-error", b("error")),
+              success: t("border-success", b("success"))
+            }
+          },
+          defaultVariants: {
+            size: "md",
+            state: "default"
+          }
+        }
+      ),
+      [b]
+    ), $ = a(
+      () => c ? "error" : i ? "success" : "default",
+      [c, i]
+    ), K = a(
+      () => t(k({ size: y, state: $ }), x),
+      [k, y, $, x]
+    ), O = a(
+      () => t(
+        "block",
+        A("label"),
+        f("xs", "mb"),
+        v && "opacity-50"
+      ),
+      [v]
+    );
+    return /* @__PURE__ */ L("div", { className: "w-full", children: [
+      m && /* @__PURE__ */ d("label", { htmlFor: u, className: O, children: m }),
+      /* @__PURE__ */ L(
+        "select",
+        V(H({
+          id: u,
+          ref: D,
+          className: K,
+          disabled: v,
+          "aria-invalid": c,
+          "aria-required": C.required,
+          "aria-describedby": R || F
+        }, C), {
+          children: [
+            l && /* @__PURE__ */ d("option", { value: "", disabled: !0, children: l }),
+            e && e.length > 0 ? e.map((o, P) => /* @__PURE__ */ d("optgroup", { label: o.label, children: (o.options || []).map((g) => /* @__PURE__ */ d(
+              "option",
+              {
+                value: g.value,
+                disabled: g.disabled,
+                children: g.label
+              },
+              g.value
+            )) }, P)) : (s || []).map((o) => /* @__PURE__ */ d(
+              "option",
+              {
+                value: o.value,
+                disabled: o.disabled,
+                children: o.label
+              },
+              o.value
+            ))
+          ]
+        })
+      ),
+      (c || i || n) && /* @__PURE__ */ d(
+        G,
+        {
+          error: c,
+          success: i,
+          helperText: n,
+          errorId: R,
+          helperId: F
+        }
+      )
+    ] });
+  })
+);
+ee.displayName = "Select";
+export {
+  ee as default
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../src/ui/primitives/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback } from \"react\";\nimport type { SelectHTMLAttributes, ReactNode } from \"react\";\nimport {\n  getTypographyClasses,\n  getTypographySize,\n} from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn, cva } from \"../../utils\";\n\n/**\n * Helper Text Component\n * Memoized component for helper/error text\n */\nconst HelperText = memo(function HelperText({\n  error,\n  success,\n  helperText,\n  errorId,\n  helperId,\n}: {\n  error: boolean;\n  success: boolean;\n  helperText?: string;\n  errorId?: string;\n  helperId?: string;\n}) {\n  const helperClasses = useMemo(\n    () =>\n      cn(\n        getSpacingClass(\"xs\", \"mt\"),\n        getTypographyClasses(\"caption\"),\n        error && \"text-fg-error\",\n        success && \"text-fg-success\",\n        !error && !success && \"text-fg-secondary\",\n      ),\n    [error, success],\n  );\n\n  const text = useMemo(\n    () => helperText || (error ? \"Error\" : success ? \"Success\" : \"\"),\n    [helperText, error, success],\n  );\n\n  return (\n    <div\n      id={errorId || helperId}\n      className={helperClasses}\n      role={error || success ? \"alert\" : undefined}\n    >\n      {text}\n    </div>\n  );\n});\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectOptionGroup {\n  label: string;\n  options: SelectOption[];\n}\n\nexport interface SelectProps extends Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  \"children\" | \"size\"\n> {\n  options: SelectOption[];\n  optionGroups?: SelectOptionGroup[];\n  placeholder?: string;\n  label?: ReactNode;\n  error?: boolean;\n  success?: boolean;\n  helperText?: string;\n  size?: SelectSize;\n}\n\n/**\n * Select Component\n *\n * A styled select dropdown component for forms.\n * Follows Atomic Design principles as an Atom component.\n * Supports both flat options and option groups.\n *\n * @example\n * ```tsx\n * <Select\n *   label=\"Choose option\"\n *   options={[\n *     { value: \"1\", label: \"Option 1\" },\n *     { value: \"2\", label: \"Option 2\" }\n *   ]}\n *   placeholder=\"Select an option\"\n * />\n * ```\n */\nconst Select = memo(\n  forwardRef<HTMLSelectElement, SelectProps>(function Select(\n    {\n      options = [],\n      optionGroups,\n      placeholder,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      size = \"md\",\n      className = \"\",\n      disabled = false,\n      id,\n      ...props\n    },\n    ref,\n  ) {\n    // Stable fallback id when the consumer doesn't provide one. useId\n    // is SSR-safe and stable across renders, replacing the deprecated\n    // Math.random().substr() pattern.\n    const reactId = useId();\n    const selectId = id || `select-${reactId}`;\n\n    const errorId = useMemo(\n      () => (error ? `${selectId}-error` : undefined),\n      [error, selectId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${selectId}-helper` : undefined),\n      [helperText, selectId],\n    );\n\n    // Memoize focus ring colors\n    const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n    const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n    const successFocusRing = useMemo(() => \"focus:border-success\", []);\n\n    // Memoize focus ring color function\n    const getFocusRingColor = useCallback(\n      (stateType?: \"error\" | \"success\"): string => {\n        if (stateType === \"error\") {\n          return errorFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n        }\n        if (stateType === \"success\") {\n          return successFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n        }\n        return primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n      },\n      [errorFocusRing, successFocusRing, primaryFocusRing],\n    );\n\n    // Select variants using CVA — memoize so the function reference is\n    // stable across renders. selectClasses below depends on this; without\n    // memoization a fresh cva() each render would invalidate that memo\n    // on every render (defeating its purpose).\n    const selectVariants = useMemo(\n      () =>\n        cva(\n          // Base classes\n          cn(\n            \"block\",\n            \"w-full\",\n            getRadiusClass(\"md\"),\n            \"border\",\n            \"bg-surface-base\",\n            \"transition-colors\",\n            \"focus:outline-none\",\n            \"focus:ring-2\",\n            \"focus:ring-offset-2\",\n            \"disabled:opacity-50\",\n            \"disabled:cursor-not-allowed\",\n          ),\n          {\n            variants: {\n              size: {\n                sm: cn(\n                  \"h-8\",\n                  getTypographySize(\"bodySmall\"),\n                  getSpacingClass(\"md\", \"px\"),\n                ),\n                md: cn(\n                  \"h-10\",\n                  getTypographySize(\"body\"),\n                  getSpacingClass(\"base\", \"px\"),\n                ),\n                lg: cn(\n                  \"h-12\",\n                  getTypographySize(\"bodyLarge\"),\n                  getSpacingClass(\"lg\", \"px\"),\n                ),\n              },\n              state: {\n                default: cn(\"border-line-default\", getFocusRingColor()),\n                error: cn(\"border-error\", getFocusRingColor(\"error\")),\n                success: cn(\"border-success\", getFocusRingColor(\"success\")),\n              },\n            },\n            defaultVariants: {\n              size: \"md\",\n              state: \"default\",\n            },\n          },\n        ),\n      [getFocusRingColor],\n    );\n\n    // Memoize state\n    const selectState = useMemo(\n      () => (error ? \"error\" : success ? \"success\" : \"default\"),\n      [error, success],\n    );\n\n    // Memoize classes\n    const selectClasses = useMemo(\n      () => cn(selectVariants({ size, state: selectState }), className),\n      [selectVariants, size, selectState, className],\n    );\n\n    const labelClasses = useMemo(\n      () =>\n        cn(\n          \"block\",\n          getTypographyClasses(\"label\"),\n          getSpacingClass(\"xs\", \"mb\"),\n          disabled && \"opacity-50\",\n        ),\n      [disabled],\n    );\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label htmlFor={selectId} className={labelClasses}>\n            {label}\n          </label>\n        )}\n        <select\n          id={selectId}\n          ref={ref}\n          className={selectClasses}\n          disabled={disabled}\n          aria-invalid={error}\n          aria-required={props.required}\n          aria-describedby={errorId || helperId}\n          {...props}\n        >\n          {placeholder && (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          )}\n          {optionGroups && optionGroups.length > 0\n            ? optionGroups.map((group, groupIndex) => (\n                <optgroup key={groupIndex} label={group.label}>\n                  {(group.options || []).map((option) => (\n                    <option\n                      key={option.value}\n                      value={option.value}\n                      disabled={option.disabled}\n                    >\n                      {option.label}\n                    </option>\n                  ))}\n                </optgroup>\n              ))\n            : (options || []).map((option) => (\n                <option\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                >\n                  {option.label}\n                </option>\n              ))}\n        </select>\n        {(error || success || helperText) && (\n          <HelperText\n            error={error}\n            success={success}\n            helperText={helperText}\n            errorId={errorId}\n            helperId={helperId}\n          />\n        )}\n      </div>\n    );\n  }),\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n"],"names":["HelperText","memo","error","success","helperText","errorId","helperId","helperClasses","useMemo","cn","getSpacingClass","getTypographyClasses","text","jsx","Select","forwardRef","_a","ref","_b","options","optionGroups","placeholder","label","size","className","disabled","id","props","__objRest","reactId","useId","selectId","primaryFocusRing","errorFocusRing","successFocusRing","getFocusRingColor","useCallback","stateType","selectVariants","cva","getRadiusClass","getTypographySize","selectState","selectClasses","labelClasses","jsxs","__spreadProps","__spreadValues","group","groupIndex","option"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+"use client";
+var h = Object.defineProperty;
+var t = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var n = (r, a, e) => a in r ? h(r, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[a] = e, s = (r, a) => {
+  for (var e in a || (a = {}))
+    c.call(a, e) && n(r, e, a[e]);
+  if (t)
+    for (var e of t(a))
+      m.call(a, e) && n(r, e, a[e]);
+  return r;
+};
+var f = (r, a) => {
+  var e = {};
+  for (var o in r)
+    c.call(r, o) && a.indexOf(o) < 0 && (e[o] = r[o]);
+  if (r != null && t)
+    for (var o of t(r))
+      a.indexOf(o) < 0 && m.call(r, o) && (e[o] = r[o]);
+  return e;
+};
+import { jsx as p } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { cn as b } from "../../utils/cn.js";
+const v = {
+  horizontal: "w-full border-t",
+  vertical: "h-full border-l self-stretch"
+}, z = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted"
+}, N = u(function(S) {
+  var i = S, {
+    orientation: a = "horizontal",
+    variant: e = "solid",
+    className: o = ""
+  } = i, l = f(i, [
+    "orientation",
+    "variant",
+    "className"
+  ]);
+  const d = b(
+    "border-0",
+    "border-line-default",
+    v[a],
+    z[e],
+    o
+  );
+  return a === "vertical" ? /* @__PURE__ */ p(
+    "div",
+    s({
+      className: d,
+      role: "separator",
+      "aria-orientation": "vertical"
+    }, l)
+  ) : /* @__PURE__ */ p(
+    "hr",
+    s({
+      className: d,
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }, l)
+  );
+});
+N.displayName = "Separator";
+export {
+  N as default
+};
+//# sourceMappingURL=Separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../../../src/ui/primitives/Separator/Separator.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\nexport type SeparatorVariant = \"solid\" | \"dashed\" | \"dotted\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  orientation?: SeparatorOrientation;\n  variant?: SeparatorVariant;\n}\n\n/**\n * Separator Component\n *\n * A visual separator component for dividing content.\n * Follows Atomic Design principles as an Atom component.\n * Optimized with React.memo to prevent unnecessary re-renders.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * <Separator orientation=\"vertical\" variant=\"dashed\" />\n * ```\n */\nconst separatorOrientationClasses = {\n  horizontal: \"w-full border-t\",\n  vertical: \"h-full border-l self-stretch\",\n} as const;\n\nconst separatorVariantClasses = {\n  solid: \"border-solid\",\n  dashed: \"border-dashed\",\n  dotted: \"border-dotted\",\n} as const;\n\nconst Separator = memo(function Separator({\n  orientation = \"horizontal\",\n  variant = \"solid\",\n  className = \"\",\n  ...props\n}: SeparatorProps) {\n  const classes = cn(\n    \"border-0\",\n    \"border-line-default\",\n    separatorOrientationClasses[orientation],\n    separatorVariantClasses[variant],\n    className,\n  );\n\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        className={classes}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return (\n    <hr\n      className={classes}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      {...props}\n    />\n  );\n});\n\nSeparator.displayName = \"Separator\";\n\nexport default Separator;\n"],"names":["separatorOrientationClasses","separatorVariantClasses","Separator","memo","_a","_b","orientation","variant","className","props","__objRest","classes","cn","jsx","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAA8B;AAAA,EAClC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEMC,IAA0B;AAAA,EAC9B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV,GAEMC,IAAYC,EAAK,SAAmBC,GAKvB;AALuB,MAAAC,IAAAD,GACxC;AAAA,iBAAAE,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MAH4BH,GAIrCI,IAAAC,EAJqCL,GAIrC;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC;AAAA,IACd;AAAA,IACA;AAAA,IACAZ,EAA4BM,CAAW;AAAA,IACvCL,EAAwBM,CAAO;AAAA,IAC/BC;AAAA,EAAA;AAGF,SAAIF,MAAgB,aAEhB,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACZF;AAAA,EAAA,IAMT,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,WAAWH;AAAA,MACX,MAAK;AAAA,MACL,oBAAiB;AAAA,OACbF;AAAA,EAAA;AAGV,CAAC;AAEDP,EAAU,cAAc;"}

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

@@ -0,0 +1,87 @@
+"use client";
+var A = Object.defineProperty, L = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var d = (a, s, t) => s in a ? A(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t, i = (a, s) => {
+  for (var t in s || (s = {}))
+    b.call(s, t) && d(a, t, s[t]);
+  if (l)
+    for (var t of l(s))
+      h.call(s, t) && d(a, t, s[t]);
+  return a;
+}, p = (a, s) => L(a, S(s));
+var g = (a, s) => {
+  var t = {};
+  for (var e in a)
+    b.call(a, e) && s.indexOf(e) < 0 && (t[e] = a[e]);
+  if (a != null && l)
+    for (var e of l(a))
+      s.indexOf(e) < 0 && h.call(a, e) && (t[e] = a[e]);
+  return t;
+};
+import { jsx as o } from "react/jsx-runtime";
+import { getRadiusClass as y } from "../../tokens/radius.js";
+import { getSpacingClass as j } from "../../tokens/spacing.js";
+import { cn as k } from "../../utils/cn.js";
+function D(w) {
+  var m = w, {
+    variant: a = "text",
+    width: s,
+    height: t,
+    lines: e = 1,
+    className: x = "",
+    "aria-label": C
+  } = m, c = g(m, [
+    "variant",
+    "width",
+    "height",
+    "lines",
+    "className",
+    "aria-label"
+  ]);
+  const N = [
+    "motion-safe:animate-pulse",
+    "bg-surface-muted",
+    y("sm")
+  ], v = {
+    text: "h-4",
+    card: "h-32",
+    list: "h-12",
+    circle: y("full")
+  }, u = k(...N, v[a], x), r = {};
+  s && (r.width = s), t && (r.height = t);
+  const n = C || `Loading ${a} content`;
+  return a === "text" && e > 1 ? /* @__PURE__ */ o(
+    "div",
+    p(i({
+      className: j("sm", "space-y"),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": n
+    }, c), {
+      children: Array.from({ length: e }).map((R, f) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: u,
+          style: f === e - 1 ? { width: "75%" } : r,
+          "aria-hidden": "true"
+        },
+        f
+      ))
+    })
+  ) : /* @__PURE__ */ o(
+    "div",
+    i({
+      className: u,
+      style: r,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": n
+    }, c)
+  );
+}
+export {
+  D as default
+};
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../../src/ui/primitives/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"text\" | \"card\" | \"list\" | \"circle\";\n  width?: string;\n  height?: string;\n  lines?: number;\n}\n\n/**\n * Skeleton Component\n *\n * A skeleton loader component for displaying loading states.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Skeleton variant=\"card\" />\n * <Skeleton variant=\"text\" lines={3} />\n * ```\n */\nexport default function Skeleton({\n  variant = \"text\",\n  width,\n  height,\n  lines = 1,\n  className = \"\",\n  \"aria-label\": ariaLabel,\n  ...props\n}: SkeletonProps) {\n  const baseClasses = [\n    \"motion-safe:animate-pulse\",\n    \"bg-surface-muted\",\n    getRadiusClass(\"sm\"),\n  ];\n\n  const variantClasses: Record<\n    NonNullable<SkeletonProps[\"variant\"]>,\n    string\n  > = {\n    text: \"h-4\",\n    card: \"h-32\",\n    list: \"h-12\",\n    circle: getRadiusClass(\"full\"),\n  };\n\n  const classes = cn(...baseClasses, variantClasses[variant], className);\n\n  const style: React.CSSProperties = {};\n  if (width) style.width = width;\n  if (height) style.height = height;\n\n  const defaultAriaLabel = ariaLabel || `Loading ${variant} content`;\n\n  if (variant === \"text\" && lines > 1) {\n    return (\n      <div\n        className={getSpacingClass(\"sm\", \"space-y\")}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label={defaultAriaLabel}\n        {...props}\n      >\n        {Array.from({ length: lines }).map((_, index) => (\n          <div\n            key={index}\n            className={classes}\n            style={index === lines - 1 ? { width: \"75%\" } : style}\n            aria-hidden=\"true\"\n          />\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classes}\n      style={style}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={defaultAriaLabel}\n      {...props}\n    />\n  );\n}\n"],"names":["Skeleton","_a","_b","variant","width","height","lines","className","ariaLabel","props","__objRest","baseClasses","getRadiusClass","variantClasses","classes","cn","style","defaultAriaLabel","jsx","__spreadProps","__spreadValues","getSpacingClass","_","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAwBA,EAASC,GAQf;AARe,MAAAC,IAAAD,GAC/B;AAAA,aAAAE,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,cAAcC;AAAA,MANiBN,GAO5BO,IAAAC,EAP4BR,GAO5B;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAe,IAAI;AAAA,EAAA,GAGfC,IAGF;AAAA,IACF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQD,EAAe,MAAM;AAAA,EAAA,GAGzBE,IAAUC,EAAG,GAAGJ,GAAaE,EAAeV,CAAO,GAAGI,CAAS,GAE/DS,IAA6B,CAAA;AACnC,EAAIZ,QAAa,QAAQA,IACrBC,QAAc,SAASA;AAE3B,QAAMY,IAAmBT,KAAa,WAAWL,CAAO;AAExD,SAAIA,MAAY,UAAUG,IAAQ,IAE9B,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAgB,MAAM,SAAS;AAAA,MAC1C,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYJ;AAAA,OACRR,IALL;AAAA,MAOE,UAAA,MAAM,KAAK,EAAE,QAAQH,GAAO,EAAE,IAAI,CAACgB,GAAGC,MACrC,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWJ;AAAA,UACX,OAAOS,MAAUjB,IAAQ,IAAI,EAAE,OAAO,UAAUU;AAAA,UAChD,eAAY;AAAA,QAAA;AAAA,QAHPO;AAAA,MAAA,CAKR;AAAA,IAAA;AAAA,EAAA,IAML,gBAAAL;AAAA,IAAC;AAAA,IAAAE,EAAA;AAAA,MACC,WAAWN;AAAA,MACX,OAAAE;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYC;AAAA,OACRR;AAAA,EAAA;AAGV;"}