@etus/ui 0.4.0-beta.1 → 0.4.0-beta.10

package/dist/chunk-AR3OXNPL.js

@@ -0,0 +1,70 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var iconVariants = cva(
+  "shrink-0 transition-colors motion-reduce:animate-none",
+  {
+    variants: {
+      variant: {
+        default: "text-[color:var(--icon-color-default)]",
+        muted: "text-[color:var(--icon-color-muted)]",
+        primary: "text-[color:var(--icon-color-primary)]",
+        destructive: "text-[color:var(--icon-color-destructive)]",
+        success: "text-[color:var(--icon-color-success)]",
+        warning: "text-[color:var(--icon-color-warning)]"
+      },
+      size: {
+        xs: "size-[var(--icon-size-xs)]",
+        sm: "size-[var(--icon-size-sm)]",
+        md: "size-[var(--icon-size-md)]",
+        lg: "size-[var(--icon-size-lg)]",
+        xl: "size-[var(--icon-size-xl)]",
+        "2xl": "size-[var(--icon-size-2xl)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function Icon({
+  name: IconComponent,
+  variant,
+  size,
+  spin = false,
+  pulse = false,
+  decorative = true,
+  className,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+  role,
+  ref,
+  ...props
+}) {
+  const computedAriaHidden = ariaHidden ?? (decorative ? true : void 0);
+  const computedRole = role ?? (!decorative && ariaLabel ? "img" : void 0);
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      ref,
+      className: cn(
+        iconVariants({ variant, size }),
+        spin && "animate-spin",
+        pulse && "animate-pulse",
+        className
+      ),
+      "aria-hidden": computedAriaHidden,
+      "aria-label": ariaLabel,
+      "data-slot": "icon",
+      focusable: "false",
+      role: computedRole,
+      ...props
+    }
+  );
+}
+
+export { Icon, iconVariants };
+//# sourceMappingURL=chunk-AR3OXNPL.js.map
+//# sourceMappingURL=chunk-AR3OXNPL.js.map

package/dist/chunk-AR3OXNPL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Icon/Icon.tsx"],"names":[],"mappings":";;;;AAMA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wCAAA;AAAA,QACT,KAAA,EAAO,sCAAA;AAAA,QACP,OAAA,EAAS,wCAAA;AAAA,QACT,WAAA,EAAa,4CAAA;AAAA,QACb,OAAA,EAAS,wCAAA;AAAA,QACT,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,4BAAA;AAAA,QACJ,EAAA,EAAI,4BAAA;AAAA,QACJ,EAAA,EAAI,4BAAA;AAAA,QACJ,EAAA,EAAI,4BAAA;AAAA,QACJ,EAAA,EAAI,4BAAA;AAAA,QACJ,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,EAAM,aAAA;AAAA,EACN,OAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,KAAA,GAAQ,KAAA;AAAA,EACR,UAAA,GAAa,IAAA;AAAA,EACb,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,aAAA,EAAe,UAAA;AAAA,EACf,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AAIZ,EAAA,MAAM,kBAAA,GAAqB,UAAA,KAAe,UAAA,GAAa,IAAA,GAAO,MAAA,CAAA;AAC9D,EAAA,MAAM,YAAA,GAAe,IAAA,KAAS,CAAC,UAAA,IAAc,YAAY,KAAA,GAAQ,MAAA,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,YAAA,CAAa,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,QAC9B,IAAA,IAAQ,cAAA;AAAA,QACR,KAAA,IAAS,eAAA;AAAA,QACT;AAAA,OACF;AAAA,MACA,aAAA,EAAa,kBAAA;AAAA,MACb,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAM,YAAA;AAAA,MACL,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-AR3OXNPL.js","sourcesContent":["import type { IconProps } from \"./Icon.types\"\n\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst iconVariants = cva(\n  \"shrink-0 transition-colors motion-reduce:animate-none\",\n  {\n    variants: {\n      variant: {\n        default: \"text-[color:var(--icon-color-default)]\",\n        muted: \"text-[color:var(--icon-color-muted)]\",\n        primary: \"text-[color:var(--icon-color-primary)]\",\n        destructive: \"text-[color:var(--icon-color-destructive)]\",\n        success: \"text-[color:var(--icon-color-success)]\",\n        warning: \"text-[color:var(--icon-color-warning)]\",\n      },\n      size: {\n        xs: \"size-[var(--icon-size-xs)]\",\n        sm: \"size-[var(--icon-size-sm)]\",\n        md: \"size-[var(--icon-size-md)]\",\n        lg: \"size-[var(--icon-size-lg)]\",\n        xl: \"size-[var(--icon-size-xl)]\",\n        \"2xl\": \"size-[var(--icon-size-2xl)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nfunction Icon({\n  name: IconComponent,\n  variant,\n  size,\n  spin = false,\n  pulse = false,\n  decorative = true,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-hidden\": ariaHidden,\n  role,\n  ref,\n  ...props\n}: IconProps) {\n  // Determine accessibility attributes\n  // If decorative is explicitly true, always hide from screen readers\n  // If decorative is false and has aria-label, make it accessible\n  const computedAriaHidden = ariaHidden ?? (decorative ? true : undefined)\n  const computedRole = role ?? (!decorative && ariaLabel ? \"img\" : undefined)\n\n  return (\n    <IconComponent\n      ref={ref}\n      className={cn(\n        iconVariants({ variant, size }),\n        spin && \"animate-spin\",\n        pulse && \"animate-pulse\",\n        className\n      )}\n      aria-hidden={computedAriaHidden}\n      aria-label={ariaLabel}\n      data-slot=\"icon\"\n      focusable=\"false\"\n      role={computedRole}\n      {...props}\n    />\n  )\n}\n\nexport { Icon, iconVariants }\n"]}

package/dist/chunk-ARNVOHVW.js

@@ -0,0 +1,103 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var paragraphVariants = cva(
+  "font-[family-name:var(--paragraph-base-font-family)]",
+  {
+    variants: {
+      size: {
+        xs: "text-[length:var(--paragraph-size-xs-font-size)] leading-[var(--paragraph-size-xs-line-height)]",
+        sm: "text-[length:var(--paragraph-size-sm-font-size)] leading-[var(--paragraph-size-sm-line-height)]",
+        base: "text-[length:var(--paragraph-size-base-font-size)] leading-[var(--paragraph-size-base-line-height)]",
+        lg: "text-[length:var(--paragraph-size-lg-font-size)] leading-[var(--paragraph-size-lg-line-height)]",
+        xl: "text-[length:var(--paragraph-size-xl-font-size)] leading-[var(--paragraph-size-xl-line-height)]"
+      },
+      weight: {
+        normal: "font-[var(--paragraph-weight-normal)]",
+        medium: "font-[var(--paragraph-weight-medium)]",
+        semibold: "font-[var(--paragraph-weight-semibold)]",
+        bold: "font-[var(--paragraph-weight-bold)]"
+      },
+      color: {
+        default: "text-[color:var(--paragraph-color-default)]",
+        muted: "text-[color:var(--paragraph-color-muted)]",
+        primary: "text-[color:var(--paragraph-color-primary)]",
+        destructive: "text-[color:var(--paragraph-color-destructive)]",
+        success: "text-[color:var(--paragraph-color-success)]"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+        justify: "text-justify"
+      },
+      leading: {
+        tight: "leading-tight",
+        snug: "leading-snug",
+        normal: "leading-normal",
+        relaxed: "leading-relaxed",
+        loose: "leading-loose"
+      },
+      spacing: {
+        none: "mb-[var(--paragraph-spacing-none)]",
+        tight: "mb-[var(--paragraph-spacing-tight)]",
+        normal: "mb-[var(--paragraph-spacing-normal)]",
+        relaxed: "mb-[var(--paragraph-spacing-relaxed)]"
+      },
+      prose: {
+        true: "max-w-prose",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "base",
+      weight: "normal",
+      color: "default",
+      align: "left",
+      spacing: "normal",
+      prose: false
+    }
+  }
+);
+function Paragraph({
+  className,
+  size,
+  weight,
+  color,
+  align,
+  leading,
+  spacing,
+  prose,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(
+        paragraphVariants({
+          size,
+          weight,
+          color,
+          align,
+          leading,
+          spacing,
+          prose
+        }),
+        className
+      ),
+      "data-prose": prose ? "" : void 0,
+      "data-slot": "paragraph",
+      ...props
+    }
+  );
+}
+
+export { Paragraph, paragraphVariants };
+//# sourceMappingURL=chunk-ARNVOHVW.js.map
+//# sourceMappingURL=chunk-ARNVOHVW.js.map

package/dist/chunk-ARNVOHVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Paragraph/Paragraph.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB,sDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,iGAAA;AAAA,QACJ,EAAA,EAAI,iGAAA;AAAA,QACJ,IAAA,EAAM,qGAAA;AAAA,QACN,EAAA,EAAI,iGAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ,uCAAA;AAAA,QACR,MAAA,EAAQ,uCAAA;AAAA,QACR,QAAA,EAAU,yCAAA;AAAA,QACV,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,6CAAA;AAAA,QACT,KAAA,EAAO,2CAAA;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,WAAA,EAAa,iDAAA;AAAA,QACb,OAAA,EAAS;AAAA,OACX;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,WAAA;AAAA,QACN,MAAA,EAAQ,aAAA;AAAA,QACR,KAAA,EAAO,YAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,eAAA;AAAA,QACP,IAAA,EAAM,cAAA;AAAA,QACN,MAAA,EAAQ,gBAAA;AAAA,QACR,OAAA,EAAS,iBAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,oCAAA;AAAA,QACN,KAAA,EAAO,qCAAA;AAAA,QACP,MAAA,EAAQ,sCAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACX;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,MAAA;AAAA,MACN,MAAA,EAAQ,QAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,KAAA,EAAO,MAAA;AAAA,MACP,OAAA,EAAS,QAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ;AAiBA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,GAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,iBAAA,CAAkB;AAAA,UAChB,IAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,YAAA,EAAY,QAAQ,EAAA,GAAK,MAAA;AAAA,MACzB,WAAA,EAAU,WAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-ARNVOHVW.js","sourcesContent":["import type { ParagraphProps } from \"./Paragraph.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst paragraphVariants = cva(\n  \"font-[family-name:var(--paragraph-base-font-family)]\",\n  {\n    variants: {\n      size: {\n        xs: \"text-[length:var(--paragraph-size-xs-font-size)] leading-[var(--paragraph-size-xs-line-height)]\",\n        sm: \"text-[length:var(--paragraph-size-sm-font-size)] leading-[var(--paragraph-size-sm-line-height)]\",\n        base: \"text-[length:var(--paragraph-size-base-font-size)] leading-[var(--paragraph-size-base-line-height)]\",\n        lg: \"text-[length:var(--paragraph-size-lg-font-size)] leading-[var(--paragraph-size-lg-line-height)]\",\n        xl: \"text-[length:var(--paragraph-size-xl-font-size)] leading-[var(--paragraph-size-xl-line-height)]\",\n      },\n      weight: {\n        normal: \"font-[var(--paragraph-weight-normal)]\",\n        medium: \"font-[var(--paragraph-weight-medium)]\",\n        semibold: \"font-[var(--paragraph-weight-semibold)]\",\n        bold: \"font-[var(--paragraph-weight-bold)]\",\n      },\n      color: {\n        default: \"text-[color:var(--paragraph-color-default)]\",\n        muted: \"text-[color:var(--paragraph-color-muted)]\",\n        primary: \"text-[color:var(--paragraph-color-primary)]\",\n        destructive: \"text-[color:var(--paragraph-color-destructive)]\",\n        success: \"text-[color:var(--paragraph-color-success)]\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n        justify: \"text-justify\",\n      },\n      leading: {\n        tight: \"leading-tight\",\n        snug: \"leading-snug\",\n        normal: \"leading-normal\",\n        relaxed: \"leading-relaxed\",\n        loose: \"leading-loose\",\n      },\n      spacing: {\n        none: \"mb-[var(--paragraph-spacing-none)]\",\n        tight: \"mb-[var(--paragraph-spacing-tight)]\",\n        normal: \"mb-[var(--paragraph-spacing-normal)]\",\n        relaxed: \"mb-[var(--paragraph-spacing-relaxed)]\",\n      },\n      prose: {\n        true: \"max-w-prose\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n      weight: \"normal\",\n      color: \"default\",\n      align: \"left\",\n      spacing: \"normal\",\n      prose: false,\n    },\n  }\n)\n\n/**\n * Paragraph - Componente de paragrafo para blocos de texto.\n *\n * Suporta diferentes tamanhos, pesos, cores, alinhamentos e espacamentos.\n *\n * @example\n * // Paragrafo basico\n * <Paragraph>Texto do paragrafo</Paragraph>\n *\n * @example\n * // Paragrafo com estilo personalizado\n * <Paragraph size=\"lg\" weight=\"medium\" color=\"muted\">\n *   Texto destacado\n * </Paragraph>\n */\nfunction Paragraph({\n  className,\n  size,\n  weight,\n  color,\n  align,\n  leading,\n  spacing,\n  prose,\n  asChild = false,\n  ref,\n  ...props\n}: ParagraphProps) {\n  const Comp = asChild ? Slot : \"p\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        paragraphVariants({\n          size,\n          weight,\n          color,\n          align,\n          leading,\n          spacing,\n          prose,\n        }),\n        className\n      )}\n      data-prose={prose ? \"\" : undefined}\n      data-slot=\"paragraph\"\n      {...props}\n    />\n  )\n}\n\nexport { Paragraph, paragraphVariants }\n"]}

package/dist/chunk-ATIEGLR2.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-ATIEGLR2.js.map
+//# sourceMappingURL=chunk-ATIEGLR2.js.map

package/dist/chunk-ATIEGLR2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-ATIEGLR2.js"}

package/dist/chunk-AZANPNLR.js

@@ -0,0 +1,134 @@
+// src/lib/chart-colors.ts
+var chartColors = {
+  blue: {
+    bg: "bg-blue-500",
+    fill: "fill-blue-500",
+    stroke: "stroke-blue-500",
+    text: "text-blue-500"
+  },
+  emerald: {
+    bg: "bg-emerald-500",
+    fill: "fill-emerald-500",
+    stroke: "stroke-emerald-500",
+    text: "text-emerald-500"
+  },
+  violet: {
+    bg: "bg-violet-500",
+    fill: "fill-violet-500",
+    stroke: "stroke-violet-500",
+    text: "text-violet-500"
+  },
+  amber: {
+    bg: "bg-amber-500",
+    fill: "fill-amber-500",
+    stroke: "stroke-amber-500",
+    text: "text-amber-500"
+  },
+  rose: {
+    bg: "bg-rose-500",
+    fill: "fill-rose-500",
+    stroke: "stroke-rose-500",
+    text: "text-rose-500"
+  },
+  cyan: {
+    bg: "bg-cyan-500",
+    fill: "fill-cyan-500",
+    stroke: "stroke-cyan-500",
+    text: "text-cyan-500"
+  },
+  indigo: {
+    bg: "bg-indigo-500",
+    fill: "fill-indigo-500",
+    stroke: "stroke-indigo-500",
+    text: "text-indigo-500"
+  },
+  pink: {
+    bg: "bg-pink-500",
+    fill: "fill-pink-500",
+    stroke: "stroke-pink-500",
+    text: "text-pink-500"
+  },
+  lime: {
+    bg: "bg-lime-500",
+    fill: "fill-lime-500",
+    stroke: "stroke-lime-500",
+    text: "text-lime-500"
+  },
+  fuchsia: {
+    bg: "bg-fuchsia-500",
+    fill: "fill-fuchsia-500",
+    stroke: "stroke-fuchsia-500",
+    text: "text-fuchsia-500"
+  },
+  purple: {
+    bg: "bg-purple-500",
+    fill: "fill-purple-500",
+    stroke: "stroke-purple-500",
+    text: "text-purple-500"
+  },
+  orange: {
+    bg: "bg-orange-500",
+    fill: "fill-orange-500",
+    stroke: "stroke-orange-500",
+    text: "text-orange-500"
+  },
+  teal: {
+    bg: "bg-teal-500",
+    fill: "fill-teal-500",
+    stroke: "stroke-teal-500",
+    text: "text-teal-500"
+  },
+  gray: {
+    bg: "bg-gray-500",
+    fill: "fill-gray-500",
+    stroke: "stroke-gray-500",
+    text: "text-gray-500"
+  }
+};
+var availableChartColors = Object.keys(
+  chartColors
+);
+var defaultChartColors = [
+  "blue",
+  "emerald",
+  "violet",
+  "amber",
+  "rose",
+  "cyan",
+  "indigo",
+  "pink",
+  "lime",
+  "fuchsia"
+];
+function constructCategoryColors(categories, colors = defaultChartColors) {
+  const categoryColors = /* @__PURE__ */ new Map();
+  if (colors.length === 0) {
+    return categoryColors;
+  }
+  categories.forEach((category, index) => {
+    const color = colors[index % colors.length];
+    if (color) {
+      categoryColors.set(category, color);
+    }
+  });
+  return categoryColors;
+}
+function getColorClassName(color, type) {
+  const fallbackColor = {
+    bg: "bg-gray-500",
+    fill: "fill-gray-500",
+    stroke: "stroke-gray-500",
+    text: "text-gray-500"
+  };
+  const colorConfig = chartColors[color];
+  return colorConfig ? colorConfig[type] : fallbackColor[type];
+}
+function getYAxisDomain(autoMinValue, minValue, maxValue) {
+  const minDomain = autoMinValue ? "auto" : minValue ?? 0;
+  const maxDomain = maxValue ?? "auto";
+  return [minDomain, maxDomain];
+}
+
+export { availableChartColors, chartColors, constructCategoryColors, defaultChartColors, getColorClassName, getYAxisDomain };
+//# sourceMappingURL=chunk-AZANPNLR.js.map
+//# sourceMappingURL=chunk-AZANPNLR.js.map

package/dist/chunk-AZANPNLR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/chart-colors.ts"],"names":[],"mappings":"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","file":"chunk-AZANPNLR.js","sourcesContent":["/**\n * Chart color utilities for Seven Design System\n *\n * Provides a centralized color palette for charts (Recharts, etc.)\n * with Tailwind classes for bg, stroke, fill, and text utilities.\n */\n\nexport type ColorUtility = \"bg\" | \"fill\" | \"stroke\" | \"text\"\n\n/**\n * Chart color palette with Tailwind classes\n * Each color provides bg, stroke, fill, and text variants\n */\nexport const chartColors = {\n  blue: {\n    bg: \"bg-blue-500\",\n    fill: \"fill-blue-500\",\n    stroke: \"stroke-blue-500\",\n    text: \"text-blue-500\",\n  },\n  emerald: {\n    bg: \"bg-emerald-500\",\n    fill: \"fill-emerald-500\",\n    stroke: \"stroke-emerald-500\",\n    text: \"text-emerald-500\",\n  },\n  violet: {\n    bg: \"bg-violet-500\",\n    fill: \"fill-violet-500\",\n    stroke: \"stroke-violet-500\",\n    text: \"text-violet-500\",\n  },\n  amber: {\n    bg: \"bg-amber-500\",\n    fill: \"fill-amber-500\",\n    stroke: \"stroke-amber-500\",\n    text: \"text-amber-500\",\n  },\n  rose: {\n    bg: \"bg-rose-500\",\n    fill: \"fill-rose-500\",\n    stroke: \"stroke-rose-500\",\n    text: \"text-rose-500\",\n  },\n  cyan: {\n    bg: \"bg-cyan-500\",\n    fill: \"fill-cyan-500\",\n    stroke: \"stroke-cyan-500\",\n    text: \"text-cyan-500\",\n  },\n  indigo: {\n    bg: \"bg-indigo-500\",\n    fill: \"fill-indigo-500\",\n    stroke: \"stroke-indigo-500\",\n    text: \"text-indigo-500\",\n  },\n  pink: {\n    bg: \"bg-pink-500\",\n    fill: \"fill-pink-500\",\n    stroke: \"stroke-pink-500\",\n    text: \"text-pink-500\",\n  },\n  lime: {\n    bg: \"bg-lime-500\",\n    fill: \"fill-lime-500\",\n    stroke: \"stroke-lime-500\",\n    text: \"text-lime-500\",\n  },\n  fuchsia: {\n    bg: \"bg-fuchsia-500\",\n    fill: \"fill-fuchsia-500\",\n    stroke: \"stroke-fuchsia-500\",\n    text: \"text-fuchsia-500\",\n  },\n  purple: {\n    bg: \"bg-purple-500\",\n    fill: \"fill-purple-500\",\n    stroke: \"stroke-purple-500\",\n    text: \"text-purple-500\",\n  },\n  orange: {\n    bg: \"bg-orange-500\",\n    fill: \"fill-orange-500\",\n    stroke: \"stroke-orange-500\",\n    text: \"text-orange-500\",\n  },\n  teal: {\n    bg: \"bg-teal-500\",\n    fill: \"fill-teal-500\",\n    stroke: \"stroke-teal-500\",\n    text: \"text-teal-500\",\n  },\n  gray: {\n    bg: \"bg-gray-500\",\n    fill: \"fill-gray-500\",\n    stroke: \"stroke-gray-500\",\n    text: \"text-gray-500\",\n  },\n} as const satisfies Record<string, Record<ColorUtility, string>>\n\nexport type ChartColor = keyof typeof chartColors\n\n/**\n * Array of available chart color keys\n */\nexport const availableChartColors: ChartColor[] = Object.keys(\n  chartColors\n) as ChartColor[]\n\n/**\n * Default color sequence for multi-series charts\n */\nexport const defaultChartColors: ChartColor[] = [\n  \"blue\",\n  \"emerald\",\n  \"violet\",\n  \"amber\",\n  \"rose\",\n  \"cyan\",\n  \"indigo\",\n  \"pink\",\n  \"lime\",\n  \"fuchsia\",\n]\n\n/**\n * Constructs a map of category names to colors\n * Cycles through colors if there are more categories than colors\n *\n * @example\n * ```tsx\n * const categories = [\"Revenue\", \"Expenses\", \"Profit\"]\n * const colorMap = constructCategoryColors(categories, defaultChartColors)\n * // Map { \"Revenue\" => \"blue\", \"Expenses\" => \"emerald\", \"Profit\" => \"violet\" }\n * ```\n */\nexport function constructCategoryColors(\n  categories: string[],\n  colors: ChartColor[] = defaultChartColors\n): Map<string, ChartColor> {\n  const categoryColors = new Map<string, ChartColor>()\n  if (colors.length === 0) {\n    return categoryColors\n  }\n  categories.forEach((category, index) => {\n    const color = colors[index % colors.length]\n    if (color) {\n      categoryColors.set(category, color)\n    }\n  })\n  return categoryColors\n}\n\n/**\n * Gets the Tailwind class for a specific color and utility type\n *\n * @example\n * ```tsx\n * getColorClassName(\"blue\", \"fill\") // \"fill-blue-500\"\n * getColorClassName(\"emerald\", \"stroke\") // \"stroke-emerald-500\"\n * ```\n */\nexport function getColorClassName(\n  color: ChartColor,\n  type: ColorUtility\n): string {\n  const fallbackColor: Record<ColorUtility, string> = {\n    bg: \"bg-gray-500\",\n    fill: \"fill-gray-500\",\n    stroke: \"stroke-gray-500\",\n    text: \"text-gray-500\",\n  }\n  const colorConfig = chartColors[color]\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Defensive: runtime check for invalid color names\n  return colorConfig ? colorConfig[type] : fallbackColor[type]\n}\n\n/**\n * Gets the Y-axis domain for Recharts based on auto/manual min/max values\n *\n * @example\n * ```tsx\n * // Auto-calculate min, fixed max at 100\n * getYAxisDomain(true, undefined, 100) // [\"auto\", 100]\n *\n * // Start at 0, auto-calculate max\n * getYAxisDomain(false, 0, undefined) // [0, \"auto\"]\n * ```\n */\nexport function getYAxisDomain(\n  autoMinValue: boolean,\n  minValue?: number,\n  maxValue?: number\n): [\"auto\" | number, \"auto\" | number] {\n  const minDomain = autoMinValue ? \"auto\" : (minValue ?? 0)\n  const maxDomain = maxValue ?? \"auto\"\n  return [minDomain, maxDomain]\n}\n"]}

package/dist/chunk-B3BDIM4H.js

@@ -0,0 +1,137 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var gridVariants = cva("grid", {
+  variants: {
+    /**
+     * Number of columns in the grid
+     */
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      6: "grid-cols-6",
+      12: "grid-cols-12",
+      none: "grid-cols-none"
+    },
+    /**
+     * Number of rows in the grid
+     */
+    rows: {
+      1: "grid-rows-1",
+      2: "grid-rows-2",
+      3: "grid-rows-3",
+      4: "grid-rows-4",
+      6: "grid-rows-6",
+      none: "grid-rows-none"
+    },
+    /**
+     * Gap between grid items (both directions)
+     */
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8"
+    },
+    /**
+     * Horizontal gap between grid items
+     */
+    gapX: {
+      0: "gap-x-0",
+      1: "gap-x-1",
+      2: "gap-x-2",
+      4: "gap-x-4",
+      6: "gap-x-6",
+      8: "gap-x-8"
+    },
+    /**
+     * Vertical gap between grid items
+     */
+    gapY: {
+      0: "gap-y-0",
+      1: "gap-y-1",
+      2: "gap-y-2",
+      4: "gap-y-4",
+      6: "gap-y-6",
+      8: "gap-y-8"
+    },
+    /**
+     * Vertical alignment of grid items
+     */
+    items: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    /**
+     * Horizontal alignment of grid items
+     */
+    justify: {
+      start: "justify-items-start",
+      center: "justify-items-center",
+      end: "justify-items-end",
+      stretch: "justify-items-stretch"
+    },
+    /**
+     * Grid auto-flow direction
+     */
+    flow: {
+      row: "grid-flow-row",
+      col: "grid-flow-col",
+      dense: "grid-flow-dense",
+      "row-dense": "grid-flow-row-dense",
+      "col-dense": "grid-flow-col-dense"
+    }
+  },
+  defaultVariants: {
+    cols: "none",
+    gap: 4
+  }
+});
+function Grid({
+  as = "div",
+  cols,
+  rows,
+  gap,
+  gapX,
+  gapY,
+  items,
+  justify,
+  flow,
+  className,
+  ...props
+}) {
+  const Component = as;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        gridVariants({
+          cols,
+          rows,
+          // Only apply gap if gapX and gapY are not specified
+          gap: gapX !== void 0 || gapY !== void 0 ? void 0 : gap,
+          gapX,
+          gapY,
+          items,
+          justify,
+          flow
+        }),
+        className
+      ),
+      "data-slot": "grid",
+      ...props
+    }
+  );
+}
+
+export { Grid, gridVariants };
+//# sourceMappingURL=chunk-B3BDIM4H.js.map
+//# sourceMappingURL=chunk-B3BDIM4H.js.map

package/dist/chunk-B3BDIM4H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Grid/Grid.variants.ts","../src/components/layout/Grid/Grid.tsx"],"names":[],"mappings":"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","file":"chunk-B3BDIM4H.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Grid component variant styles\n * CSS Grid-based layout with declarative API for columns, rows, gap, and alignment\n */\nexport const gridVariants = cva(\"grid\", {\n  variants: {\n    /**\n     * Number of columns in the grid\n     */\n    cols: {\n      1: \"grid-cols-1\",\n      2: \"grid-cols-2\",\n      3: \"grid-cols-3\",\n      4: \"grid-cols-4\",\n      6: \"grid-cols-6\",\n      12: \"grid-cols-12\",\n      none: \"grid-cols-none\",\n    },\n    /**\n     * Number of rows in the grid\n     */\n    rows: {\n      1: \"grid-rows-1\",\n      2: \"grid-rows-2\",\n      3: \"grid-rows-3\",\n      4: \"grid-rows-4\",\n      6: \"grid-rows-6\",\n      none: \"grid-rows-none\",\n    },\n    /**\n     * Gap between grid items (both directions)\n     */\n    gap: {\n      0: \"gap-0\",\n      1: \"gap-1\",\n      2: \"gap-2\",\n      4: \"gap-4\",\n      6: \"gap-6\",\n      8: \"gap-8\",\n    },\n    /**\n     * Horizontal gap between grid items\n     */\n    gapX: {\n      0: \"gap-x-0\",\n      1: \"gap-x-1\",\n      2: \"gap-x-2\",\n      4: \"gap-x-4\",\n      6: \"gap-x-6\",\n      8: \"gap-x-8\",\n    },\n    /**\n     * Vertical gap between grid items\n     */\n    gapY: {\n      0: \"gap-y-0\",\n      1: \"gap-y-1\",\n      2: \"gap-y-2\",\n      4: \"gap-y-4\",\n      6: \"gap-y-6\",\n      8: \"gap-y-8\",\n    },\n    /**\n     * Vertical alignment of grid items\n     */\n    items: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      stretch: \"items-stretch\",\n    },\n    /**\n     * Horizontal alignment of grid items\n     */\n    justify: {\n      start: \"justify-items-start\",\n      center: \"justify-items-center\",\n      end: \"justify-items-end\",\n      stretch: \"justify-items-stretch\",\n    },\n    /**\n     * Grid auto-flow direction\n     */\n    flow: {\n      row: \"grid-flow-row\",\n      col: \"grid-flow-col\",\n      dense: \"grid-flow-dense\",\n      \"row-dense\": \"grid-flow-row-dense\",\n      \"col-dense\": \"grid-flow-col-dense\",\n    },\n  },\n  defaultVariants: {\n    cols: \"none\",\n    gap: 4,\n  },\n})\n\nexport type GridVariantProps = VariantProps<typeof gridVariants>\n","\"use client\"\n\nimport type { GridProps } from \"./Grid.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { gridVariants } from \"./Grid.variants\"\n\n/**\n * Grid component for CSS Grid-based layouts\n *\n * Provides a declarative API for creating complex grid layouts with\n * support for columns, rows, gaps, and alignment.\n *\n * @example\n * ```tsx\n * <Grid cols={3} gap={4}>\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </Grid>\n * ```\n */\nfunction Grid({\n  as = \"div\",\n  cols,\n  rows,\n  gap,\n  gapX,\n  gapY,\n  items,\n  justify,\n  flow,\n  className,\n  ...props\n}: GridProps) {\n  const Component = as\n  return (\n    <Component\n      className={cn(\n        gridVariants({\n          cols,\n          rows,\n          // Only apply gap if gapX and gapY are not specified\n          gap: gapX !== undefined || gapY !== undefined ? undefined : gap,\n          gapX,\n          gapY,\n          items,\n          justify,\n          flow,\n        }),\n        className\n      )}\n      data-slot=\"grid\"\n      {...(props as Record<string, unknown>)}\n    />\n  )\n}\n\nexport { Grid }\n"]}