@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-NY2WZ4P2.js

@@ -0,0 +1,127 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-XXWCMY2G.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { FunnelChart as FunnelChart$1, Funnel, Cell, LabelList } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function FunnelChart({
+  animationDuration = 400,
+  className,
+  config,
+  data,
+  enableLegendSlider = false,
+  isReversed = false,
+  labelPosition = "right",
+  legendPosition = "bottom",
+  nameKey = "name",
+  onClick,
+  showLabels = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  valueFormatter,
+  valueKey = "value",
+  ...props
+}) {
+  const prevTooltipStateRef = React.useRef(false);
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props2) => {
+      const { active = false, payload } = props2;
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active;
+        tooltipCallback({
+          active,
+          name: payload?.[0]?.name,
+          payload: payload?.map((p) => ({
+            name: p.name,
+            value: p.value,
+            payload: p.payload
+          }))
+        });
+      }
+      return /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          formatter: valueFormatter ? (value) => valueFormatter(Number(value)) : void 0,
+          indicator: tooltipIndicator,
+          nameKey,
+          ...props2
+        }
+      );
+    },
+    [tooltipCallback, tooltipIndicator, nameKey, valueFormatter]
+  );
+  const handleClick = onClick ? (_, index) => {
+    const item = data[index];
+    if (item) onClick(item, index);
+  } : void 0;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "funnel-chart", ...props, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      className: cn(className),
+      config,
+      children: /* @__PURE__ */ jsxs(FunnelChart$1, { children: [
+        showTooltip && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            content: tooltipCallback ? /* @__PURE__ */ jsx(TooltipContentWithCallback, {}) : /* @__PURE__ */ jsx(
+              ChartTooltipContent,
+              {
+                formatter: valueFormatter ? (value) => valueFormatter(Number(value)) : void 0,
+                indicator: tooltipIndicator,
+                nameKey
+              }
+            )
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            align: legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center",
+            content: /* @__PURE__ */ jsx(ChartLegendContent, { enableSlider: enableLegendSlider, nameKey }),
+            layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+            verticalAlign: legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Funnel,
+          {
+            animationDuration,
+            data,
+            dataKey: valueKey,
+            isAnimationActive: animationDuration > 0,
+            nameKey,
+            reversed: isReversed,
+            onClick: handleClick,
+            children: [
+              data.map((entry) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: entry.fill ?? `var(--color-${entry.name.toLowerCase().replaceAll(" ", "-")})`,
+                  style: onClick ? { cursor: "pointer" } : void 0
+                },
+                entry.name
+              )),
+              showLabels && /* @__PURE__ */ jsx(
+                LabelList,
+                {
+                  className: "fill-foreground",
+                  dataKey: nameKey,
+                  position: labelPosition,
+                  stroke: "none"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+FunnelChart.displayName = "FunnelChart";
+
+export { FunnelChart };
+//# sourceMappingURL=chunk-NY2WZ4P2.js.map
+//# sourceMappingURL=chunk-NY2WZ4P2.js.map

package/dist/chunk-NY2WZ4P2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FunnelChart/FunnelChart.tsx"],"names":["props","RechartsFunnelChart"],"mappings":"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","file":"chunk-NY2WZ4P2.js","sourcesContent":["\"use client\"\n\nimport type {\n  FunnelChartDataItem,\n  FunnelChartProps,\n} from \"./FunnelChart.types\"\n\nimport * as React from \"react\"\nimport {\n  Cell,\n  Funnel,\n  LabelList,\n  FunnelChart as RechartsFunnelChart,\n} from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"../Chart\"\n\n/**\n * FunnelChart - Data visualization for conversion/process stages\n *\n * Displays data as a funnel with progressively smaller stages,\n * ideal for visualizing conversion rates, sales pipelines,\n * or any sequential process with drop-off.\n *\n * @example\n * ```tsx\n * const data = [\n *   { name: \"Visitors\", value: 5000, fill: \"var(--color-visitors)\" },\n *   { name: \"Leads\", value: 3000, fill: \"var(--color-leads)\" },\n *   { name: \"Opportunities\", value: 1500, fill: \"var(--color-opportunities)\" },\n *   { name: \"Sales\", value: 500, fill: \"var(--color-sales)\" },\n * ]\n *\n * const config = {\n *   visitors: { label: \"Visitors\", color: \"hsl(var(--chart-1))\" },\n *   leads: { label: \"Leads\", color: \"hsl(var(--chart-2))\" },\n *   opportunities: { label: \"Opportunities\", color: \"hsl(var(--chart-3))\" },\n *   sales: { label: \"Sales\", color: \"hsl(var(--chart-4))\" },\n * }\n *\n * <FunnelChart data={data} config={config} />\n * ```\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity -- Chart component requires handling many props and rendering logic\nexport function FunnelChart({\n  animationDuration = 400,\n  className,\n  config,\n  data,\n  enableLegendSlider = false,\n  isReversed = false,\n  labelPosition = \"right\",\n  legendPosition = \"bottom\",\n  nameKey = \"name\",\n  onClick,\n  showLabels = true,\n  showLegend = false,\n  showTooltip = true,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  valueFormatter,\n  valueKey = \"value\",\n  ...props\n}: FunnelChartProps) {\n  const prevTooltipStateRef = React.useRef<boolean>(false)\n\n  /* eslint-disable react-hooks/static-components, @eslint-react/no-nested-component-definitions, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access -- Intentional: memoized render function with Recharts any-typed props */\n  // Custom tooltip content wrapper for tooltipCallback\n  const TooltipContentWithCallback = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (props: any) => {\n      const { active = false, payload } = props\n\n      // Call tooltipCallback when state changes\n      if (tooltipCallback && active !== prevTooltipStateRef.current) {\n        prevTooltipStateRef.current = active\n        tooltipCallback({\n          active,\n          name: payload?.[0]?.name,\n          payload: payload?.map((p: { name: string; payload: FunnelChartDataItem; value: number; }) => ({\n            name: p.name,\n            value: p.value,\n            payload: p.payload,\n          })),\n        })\n      }\n\n      return (\n        <ChartTooltipContent\n          formatter={valueFormatter ? (value) => valueFormatter(Number(value)) : undefined}\n          indicator={tooltipIndicator}\n          nameKey={nameKey}\n          {...props}\n        />\n      )\n    },\n    [tooltipCallback, tooltipIndicator, nameKey, valueFormatter]\n  )\n\n  // Event handler for click\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleClick: any = onClick\n    ? (_: unknown, index: number) => {\n        const item = data[index]\n        if (item) onClick(item, index)\n      }\n    : undefined\n\n  return (\n    <div data-slot=\"funnel-chart\" {...props}>\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n        <RechartsFunnelChart>\n          {showTooltip && (\n            <ChartTooltip\n              content={\n                tooltipCallback\n                  ? <TooltipContentWithCallback />\n                  : <ChartTooltipContent\n                      formatter={valueFormatter ? (value) => valueFormatter(Number(value)) : undefined}\n                      indicator={tooltipIndicator}\n                      nameKey={nameKey}\n                    />\n              }\n            />\n          )}\n\n          {showLegend && (\n            <ChartLegend\n              align={legendPosition === \"left\" ? \"left\" : legendPosition === \"right\" ? \"right\" : \"center\"}\n              content={<ChartLegendContent enableSlider={enableLegendSlider} nameKey={nameKey} />}\n              layout={legendPosition === \"left\" || legendPosition === \"right\" ? \"vertical\" : \"horizontal\"}\n              verticalAlign={legendPosition === \"top\" ? \"top\" : legendPosition === \"bottom\" ? \"bottom\" : \"middle\"}\n            />\n          )}\n\n          <Funnel\n            animationDuration={animationDuration}\n            data={data}\n            dataKey={valueKey}\n            isAnimationActive={animationDuration > 0}\n            nameKey={nameKey}\n            reversed={isReversed}\n            onClick={handleClick}\n          >\n            {data.map((entry) => (\n              <Cell\n                key={entry.name}\n                fill={entry.fill ?? `var(--color-${entry.name.toLowerCase().replaceAll(\" \", \"-\")})`}\n                style={onClick ? { cursor: \"pointer\" } : undefined}\n              />\n            ))}\n\n            {showLabels && (\n              <LabelList\n                className=\"fill-foreground\"\n                dataKey={nameKey}\n                position={labelPosition}\n                stroke=\"none\"\n              />\n            )}\n          </Funnel>\n        </RechartsFunnelChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nFunnelChart.displayName = \"FunnelChart\"\n"]}

package/dist/chunk-O6LFU3KB.js

@@ -0,0 +1,115 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Loader2Icon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var spinnerVariants = cva("animate-spin motion-reduce:animate-none", {
+  variants: {
+    size: {
+      xs: "size-[var(--spinner-size-xs)]",
+      sm: "size-[var(--spinner-size-sm)]",
+      md: "size-[var(--spinner-size-md)]",
+      lg: "size-[var(--spinner-size-lg)]",
+      xl: "size-[var(--spinner-size-xl)]"
+    },
+    color: {
+      default: "text-[color:var(--spinner-color-default)]",
+      primary: "text-[color:var(--spinner-color-primary)]",
+      secondary: "text-[color:var(--spinner-color-secondary)]",
+      success: "text-[color:var(--spinner-color-success)]",
+      warning: "text-[color:var(--spinner-color-warning)]",
+      error: "text-[color:var(--spinner-color-error)]",
+      current: "text-[color:var(--spinner-color-current)]"
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    color: "current"
+  }
+});
+var gradientSpinnerVariants = cva("animate-spin motion-reduce:animate-none", {
+  variants: {
+    size: {
+      xs: "size-[var(--spinner-size-xs)]",
+      sm: "size-[var(--spinner-size-sm)]",
+      md: "size-[var(--spinner-size-md)]",
+      lg: "size-[var(--spinner-size-lg)]",
+      xl: "size-[var(--spinner-size-xl)]"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function GradientSpinner({
+  className,
+  size,
+  ...props
+}) {
+  const gradientId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Loading",
+      className: cn(gradientSpinnerVariants({ size }), className),
+      "data-slot": "spinner",
+      "data-variant": "gradient",
+      fill: "none",
+      role: "status",
+      viewBox: "0 0 44 44",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            gradientUnits: "userSpaceOnUse",
+            id: gradientId,
+            x1: "0",
+            x2: "44",
+            y1: "22",
+            y2: "22",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--spinner-gradient-start, #3be476)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--spinner-gradient-end, #1a7a3e)" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 4C12.059 4 4 12.059 4 22",
+            stroke: `url(#${gradientId})`,
+            strokeLinecap: "round",
+            strokeWidth: "6"
+          }
+        )
+      ]
+    }
+  );
+}
+function Spinner({
+  className,
+  size,
+  color,
+  variant = "default",
+  ...props
+}) {
+  if (variant === "gradient") {
+    return /* @__PURE__ */ jsx(GradientSpinner, { className, size, ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    Loader2Icon,
+    {
+      "aria-label": "Loading",
+      className: cn(spinnerVariants({ size, color }), className),
+      "data-slot": "spinner",
+      role: "status",
+      ...props
+    }
+  );
+}
+
+export { GradientSpinner, Spinner, gradientSpinnerVariants, spinnerVariants };
+//# sourceMappingURL=chunk-O6LFU3KB.js.map
+//# sourceMappingURL=chunk-O6LFU3KB.js.map

package/dist/chunk-O6LFU3KB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Spinner/Spinner.variants.ts","../src/components/primitives/Spinner/Spinner.tsx"],"names":[],"mappings":"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","file":"chunk-O6LFU3KB.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Spinner variants using CVA\n */\nexport const spinnerVariants = cva(\"animate-spin motion-reduce:animate-none\", {\n  variants: {\n    size: {\n      xs: \"size-[var(--spinner-size-xs)]\",\n      sm: \"size-[var(--spinner-size-sm)]\",\n      md: \"size-[var(--spinner-size-md)]\",\n      lg: \"size-[var(--spinner-size-lg)]\",\n      xl: \"size-[var(--spinner-size-xl)]\",\n    },\n    color: {\n      default: \"text-[color:var(--spinner-color-default)]\",\n      primary: \"text-[color:var(--spinner-color-primary)]\",\n      secondary: \"text-[color:var(--spinner-color-secondary)]\",\n      success: \"text-[color:var(--spinner-color-success)]\",\n      warning: \"text-[color:var(--spinner-color-warning)]\",\n      error: \"text-[color:var(--spinner-color-error)]\",\n      current: \"text-[color:var(--spinner-color-current)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n    color: \"current\",\n  },\n})\n\n/**\n * Gradient spinner container variants\n */\nexport const gradientSpinnerVariants = cva(\"animate-spin motion-reduce:animate-none\", {\n  variants: {\n    size: {\n      xs: \"size-[var(--spinner-size-xs)]\",\n      sm: \"size-[var(--spinner-size-sm)]\",\n      md: \"size-[var(--spinner-size-md)]\",\n      lg: \"size-[var(--spinner-size-lg)]\",\n      xl: \"size-[var(--spinner-size-xl)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n})\n\nexport type SpinnerVariants = VariantProps<typeof spinnerVariants>\nexport type GradientSpinnerVariants = VariantProps<typeof gradientSpinnerVariants>\n","import type { SpinnerProps } from \"./Spinner.types\"\n\nimport { Loader2Icon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { gradientSpinnerVariants, spinnerVariants } from \"./Spinner.variants\"\n\n/**\n * GradientSpinner - Arc spinner with gradient effect\n */\nfunction GradientSpinner({\n  className,\n  size,\n  ...props\n}: Omit<SpinnerProps, \"color\" | \"variant\">) {\n  // Generate unique ID for gradient\n  const gradientId = React.useId()\n\n  return (\n    <svg\n      aria-label=\"Loading\"\n      className={cn(gradientSpinnerVariants({ size }), className)}\n      data-slot=\"spinner\"\n      data-variant=\"gradient\"\n      fill=\"none\"\n      role=\"status\"\n      viewBox=\"0 0 44 44\"\n      {...props}\n    >\n      <defs>\n        <linearGradient\n          gradientUnits=\"userSpaceOnUse\"\n          id={gradientId}\n          x1=\"0\"\n          x2=\"44\"\n          y1=\"22\"\n          y2=\"22\"\n        >\n          <stop offset=\"0%\" stopColor=\"var(--spinner-gradient-start, #3be476)\" />\n          <stop offset=\"100%\" stopColor=\"var(--spinner-gradient-end, #1a7a3e)\" />\n        </linearGradient>\n      </defs>\n      <path\n        d=\"M22 4C12.059 4 4 12.059 4 22\"\n        stroke={`url(#${gradientId})`}\n        strokeLinecap=\"round\"\n        strokeWidth=\"6\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Spinner component for displaying loading indicators.\n *\n * Built with Lucide's Loader2Icon and supports multiple sizes and colors.\n * The gradient variant uses a custom SVG arc with gradient effect.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Spinner />\n *\n * // Different sizes\n * <Spinner size=\"lg\" />\n *\n * // Different colors\n * <Spinner color=\"primary\" />\n *\n * // Gradient variant\n * <Spinner variant=\"gradient\" />\n * <Spinner variant=\"gradient\" size=\"lg\" />\n *\n * // Combined\n * <Spinner size=\"xl\" color=\"success\" />\n * ```\n */\nfunction Spinner({\n  className,\n  size,\n  color,\n  variant = \"default\",\n  ...props\n}: SpinnerProps) {\n  if (variant === \"gradient\") {\n    return <GradientSpinner className={className} size={size} {...props} />\n  }\n\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn(spinnerVariants({ size, color }), className)}\n      data-slot=\"spinner\"\n      role=\"status\"\n      {...props}\n    />\n  )\n}\n\nexport { GradientSpinner, gradientSpinnerVariants, Spinner, spinnerVariants }\n"]}

package/dist/chunk-OAES72MK.js

@@ -0,0 +1,108 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var headingVariants = cva(
+  "scroll-m-[var(--heading-base-scroll-margin)] tracking-[var(--heading-base-letter-spacing)] font-[var(--heading-base-font-weight)] text-[color:var(--heading-base-color)] font-[family-name:var(--heading-base-font-family)]",
+  {
+    variants: {
+      level: {
+        1: "text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]",
+        2: "text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]",
+        3: "text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]",
+        4: "text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]",
+        5: "text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]",
+        6: "text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]"
+      },
+      size: {
+        "4xl": "text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]",
+        "3xl": "text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]",
+        "2xl": "text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]",
+        xl: "text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]",
+        lg: "text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]",
+        base: "text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]",
+        sm: "text-[length:var(--heading-size-sm-font-size)] leading-[var(--heading-size-sm-line-height)]"
+      },
+      weight: {
+        normal: "font-[var(--heading-weight-normal)]",
+        medium: "font-[var(--heading-weight-medium)]",
+        semibold: "font-[var(--heading-weight-semibold)]",
+        bold: "font-[var(--heading-weight-bold)]",
+        extrabold: "font-[var(--heading-weight-extrabold)]"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      },
+      color: {
+        default: "text-[color:var(--heading-color-default)]",
+        muted: "text-[color:var(--heading-color-muted)]",
+        primary: "text-[color:var(--heading-color-primary)]",
+        destructive: "text-[color:var(--heading-color-destructive)]"
+      },
+      gradient: {
+        none: "",
+        primary: "bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+        secondary: "bg-gradient-to-r from-secondary-foreground to-secondary-foreground/60 bg-clip-text text-transparent",
+        accent: "bg-gradient-to-r from-accent-foreground to-accent-foreground/60 bg-clip-text text-transparent",
+        rainbow: "bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 bg-clip-text text-transparent"
+      },
+      truncate: {
+        true: "truncate",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      level: 2,
+      weight: "semibold",
+      align: "left",
+      color: "default",
+      gradient: "none",
+      truncate: false
+    }
+  }
+);
+function Heading({
+  className,
+  level = 2,
+  size,
+  weight,
+  align,
+  color,
+  gradient,
+  truncate,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  const Tag = asChild ? Slot : `h${String(level)}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn(
+        headingVariants({
+          level: size ? void 0 : level,
+          size,
+          weight,
+          align,
+          // When gradient is applied, ignore color (gradient overrides it)
+          color: gradient && gradient !== "none" ? void 0 : color,
+          gradient,
+          truncate
+        }),
+        className
+      ),
+      "data-gradient": gradient && gradient !== "none" ? gradient : void 0,
+      "data-level": level,
+      "data-slot": "heading",
+      ...props
+    }
+  );
+}
+
+export { Heading, headingVariants };
+//# sourceMappingURL=chunk-OAES72MK.js.map
+//# sourceMappingURL=chunk-OAES72MK.js.map

package/dist/chunk-OAES72MK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Heading/Heading.tsx"],"names":[],"mappings":"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","file":"chunk-OAES72MK.js","sourcesContent":["import type { HeadingProps } from \"./Heading.types\"\nimport type { ElementType } from \"react\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst headingVariants = cva(\n  \"scroll-m-[var(--heading-base-scroll-margin)] tracking-[var(--heading-base-letter-spacing)] font-[var(--heading-base-font-weight)] text-[color:var(--heading-base-color)] font-[family-name:var(--heading-base-font-family)]\",\n  {\n    variants: {\n      level: {\n        1: \"text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]\",\n        2: \"text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]\",\n        3: \"text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]\",\n        4: \"text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]\",\n        5: \"text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]\",\n        6: \"text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]\",\n      },\n      size: {\n        \"4xl\": \"text-[length:var(--heading-size-4xl-font-size)] leading-[var(--heading-size-4xl-line-height)] font-[var(--heading-weight-bold)]\",\n        \"3xl\": \"text-[length:var(--heading-size-3xl-font-size)] leading-[var(--heading-size-3xl-line-height)]\",\n        \"2xl\": \"text-[length:var(--heading-size-2xl-font-size)] leading-[var(--heading-size-2xl-line-height)]\",\n        xl: \"text-[length:var(--heading-size-xl-font-size)] leading-[var(--heading-size-xl-line-height)]\",\n        lg: \"text-[length:var(--heading-size-lg-font-size)] leading-[var(--heading-size-lg-line-height)]\",\n        base: \"text-[length:var(--heading-size-base-font-size)] leading-[var(--heading-size-base-line-height)]\",\n        sm: \"text-[length:var(--heading-size-sm-font-size)] leading-[var(--heading-size-sm-line-height)]\",\n      },\n      weight: {\n        normal: \"font-[var(--heading-weight-normal)]\",\n        medium: \"font-[var(--heading-weight-medium)]\",\n        semibold: \"font-[var(--heading-weight-semibold)]\",\n        bold: \"font-[var(--heading-weight-bold)]\",\n        extrabold: \"font-[var(--heading-weight-extrabold)]\",\n      },\n      align: {\n        left: \"text-left\",\n        center: \"text-center\",\n        right: \"text-right\",\n      },\n      color: {\n        default: \"text-[color:var(--heading-color-default)]\",\n        muted: \"text-[color:var(--heading-color-muted)]\",\n        primary: \"text-[color:var(--heading-color-primary)]\",\n        destructive: \"text-[color:var(--heading-color-destructive)]\",\n      },\n      gradient: {\n        none: \"\",\n        primary: \"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\",\n        secondary: \"bg-gradient-to-r from-secondary-foreground to-secondary-foreground/60 bg-clip-text text-transparent\",\n        accent: \"bg-gradient-to-r from-accent-foreground to-accent-foreground/60 bg-clip-text text-transparent\",\n        rainbow: \"bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 bg-clip-text text-transparent\",\n      },\n      truncate: {\n        true: \"truncate\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      level: 2,\n      weight: \"semibold\",\n      align: \"left\",\n      color: \"default\",\n      gradient: \"none\",\n      truncate: false,\n    },\n  }\n)\n\n/**\n * Heading - Componente de titulo semantico com niveis h1-h6.\n *\n * Permite separar o nivel semantico (para acessibilidade e SEO)\n * do tamanho visual (para design), usando as props `level` e `size`.\n *\n * @example\n * // H2 semantico com tamanho visual de H1\n * <Heading level={2} size=\"4xl\">Titulo Grande</Heading>\n */\nfunction Heading({\n  className,\n  level = 2,\n  size,\n  weight,\n  align,\n  color,\n  gradient,\n  truncate,\n  asChild = false,\n  ref,\n  ...props\n}: HeadingProps) {\n  const Tag: ElementType = asChild ? Slot : (`h${String(level)}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\")\n\n  return (\n    <Tag\n      ref={ref}\n      className={cn(\n        headingVariants({\n          level: size ? undefined : level,\n          size,\n          weight,\n          align,\n          // When gradient is applied, ignore color (gradient overrides it)\n          color: gradient && gradient !== \"none\" ? undefined : color,\n          gradient,\n          truncate,\n        }),\n        className\n      )}\n      data-gradient={gradient && gradient !== \"none\" ? gradient : undefined}\n      data-level={level}\n      data-slot=\"heading\"\n      {...props}\n    />\n  )\n}\n\nexport { Heading, headingVariants }\n"]}

package/dist/chunk-OCH7GGZF.js

@@ -0,0 +1,136 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var tabsVariants = cva([
+  "flex flex-col gap-[var(--tabs-root-gap)]"
+]);
+var tabsListVariants = cva(
+  "inline-flex w-fit items-center justify-center",
+  {
+    variants: {
+      variant: {
+        solid: [
+          "bg-[color:var(--tabs-list-bg)] text-[color:var(--tabs-list-fg)]",
+          "h-[var(--tabs-list-height)] rounded-[var(--tabs-list-radius)] p-[var(--tabs-list-padding)]"
+        ],
+        line: [
+          "border-b border-border",
+          "gap-1"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "solid"
+    }
+  }
+);
+var tabsTriggerVariants = cva(
+  [
+    // Base styles shared by all variants
+    "inline-flex items-center justify-center gap-[var(--tabs-trigger-base-gap)]",
+    "text-[length:var(--tabs-trigger-base-text)] font-[var(--tabs-trigger-base-weight)] whitespace-nowrap",
+    "transition-[color,box-shadow,border-color]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      variant: {
+        solid: [
+          "flex-1 h-[calc(100%-1px)]",
+          "rounded-[var(--tabs-trigger-base-radius)] border border-transparent",
+          "px-[var(--tabs-trigger-base-padding-x)] py-[var(--tabs-trigger-base-padding-y)]",
+          "text-[color:var(--tabs-trigger-inactive-fg)] dark:text-muted-foreground",
+          "data-[state=active]:bg-[color:var(--tabs-trigger-active-bg)] data-[state=active]:text-[color:var(--tabs-trigger-active-fg)] data-[state=active]:shadow-[var(--tabs-trigger-active-shadow)]",
+          "dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
+          "focus-visible:border-[color:var(--tabs-trigger-focus-ring)] focus-visible:ring-[color:var(--tabs-trigger-focus-ring)]/50 focus-visible:outline-[color:var(--tabs-trigger-focus-ring)]"
+        ],
+        line: [
+          "-mb-px px-3 py-2",
+          "border-b-2 border-transparent",
+          "text-muted-foreground",
+          "hover:text-foreground hover:border-muted-foreground/50",
+          "data-[state=active]:border-primary data-[state=active]:text-primary",
+          "dark:data-[state=active]:border-primary dark:data-[state=active]:text-primary"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "solid"
+    }
+  }
+);
+var tabsContentVariants = cva([
+  "flex-1 outline-none"
+]);
+var TabsVariantContext = React.createContext("solid");
+function Tabs({ className, variant = "solid", ...props }) {
+  return /* @__PURE__ */ jsx(TabsVariantContext, { value: variant, children: /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      className: cn(tabsVariants(), className),
+      "data-slot": "tabs",
+      "data-variant": variant,
+      ...props
+    }
+  ) });
+}
+function TabsList({ className, ...props }) {
+  const variant = React.use(TabsVariantContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      className: cn(tabsListVariants({ variant }), className),
+      "data-slot": "tabs-list",
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  children,
+  icon,
+  badge,
+  ...props
+}) {
+  const variant = React.use(TabsVariantContext);
+  const hasSlots = icon !== void 0 || badge !== void 0;
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      className: cn(tabsTriggerVariants({ variant }), className),
+      "data-slot": "tabs-trigger",
+      ...props,
+      children: hasSlots ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon !== void 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "tabs-trigger-icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { "data-slot": "tabs-trigger-label", children }),
+        badge !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ml-1 inline-flex items-center rounded-[var(--tabs-trigger-badge-radius)] bg-[color:var(--tabs-trigger-badge-bg)] px-[var(--tabs-trigger-badge-padding-x)] text-xs text-[color:var(--tabs-trigger-badge-fg)]",
+            "data-slot": "tabs-trigger-badge",
+            children: badge
+          }
+        )
+      ] }) : children
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      className: cn(tabsContentVariants(), className),
+      "data-slot": "tabs-content",
+      ...props
+    }
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsContentVariants, tabsListVariants, tabsTriggerVariants, tabsVariants };
+//# sourceMappingURL=chunk-OCH7GGZF.js.map
+//# sourceMappingURL=chunk-OCH7GGZF.js.map

package/dist/chunk-OCH7GGZF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.variants.ts","../src/components/navigation/Tabs/Tabs.tsx"],"names":[],"mappings":"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","file":"chunk-OCH7GGZF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Tabs root variant styles\n */\nexport const tabsVariants = cva([\n  \"flex flex-col gap-[var(--tabs-root-gap)]\",\n])\n\n/**\n * TabsList variant styles - supports solid and line variants\n */\nexport const tabsListVariants = cva(\n  \"inline-flex w-fit items-center justify-center\",\n  {\n    variants: {\n      variant: {\n        solid: [\n          \"bg-[color:var(--tabs-list-bg)] text-[color:var(--tabs-list-fg)]\",\n          \"h-[var(--tabs-list-height)] rounded-[var(--tabs-list-radius)] p-[var(--tabs-list-padding)]\",\n        ],\n        line: [\n          \"border-b border-border\",\n          \"gap-1\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\n/**\n * TabsTrigger variant styles - supports solid and line variants\n */\nexport const tabsTriggerVariants = cva(\n  [\n    // Base styles shared by all variants\n    \"inline-flex items-center justify-center gap-[var(--tabs-trigger-base-gap)]\",\n    \"text-[length:var(--tabs-trigger-base-text)] font-[var(--tabs-trigger-base-weight)] whitespace-nowrap\",\n    \"transition-[color,box-shadow,border-color]\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      variant: {\n        solid: [\n          \"flex-1 h-[calc(100%-1px)]\",\n          \"rounded-[var(--tabs-trigger-base-radius)] border border-transparent\",\n          \"px-[var(--tabs-trigger-base-padding-x)] py-[var(--tabs-trigger-base-padding-y)]\",\n          \"text-[color:var(--tabs-trigger-inactive-fg)] dark:text-muted-foreground\",\n          \"data-[state=active]:bg-[color:var(--tabs-trigger-active-bg)] data-[state=active]:text-[color:var(--tabs-trigger-active-fg)] data-[state=active]:shadow-[var(--tabs-trigger-active-shadow)]\",\n          \"dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30\",\n          \"focus-visible:border-[color:var(--tabs-trigger-focus-ring)] focus-visible:ring-[color:var(--tabs-trigger-focus-ring)]/50 focus-visible:outline-[color:var(--tabs-trigger-focus-ring)]\",\n        ],\n        line: [\n          \"-mb-px px-3 py-2\",\n          \"border-b-2 border-transparent\",\n          \"text-muted-foreground\",\n          \"hover:text-foreground hover:border-muted-foreground/50\",\n          \"data-[state=active]:border-primary data-[state=active]:text-primary\",\n          \"dark:data-[state=active]:border-primary dark:data-[state=active]:text-primary\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\n/**\n * TabsContent variant styles\n */\nexport const tabsContentVariants = cva([\n  \"flex-1 outline-none\",\n])\n","\"use client\"\n\nimport type {\n  TabsContentProps,\n  TabsListProps,\n  TabsProps,\n  TabsTriggerProps,\n  TabsVariant,\n} from \"./Tabs.types\"\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  tabsContentVariants,\n  tabsListVariants,\n  tabsTriggerVariants,\n  tabsVariants,\n} from \"./Tabs.variants\"\n\n/**\n * Context for Tabs variant\n */\nconst TabsVariantContext = React.createContext<TabsVariant>(\"solid\")\n\n/**\n * Tabs - A set of layered sections of content, displayed one at a time.\n *\n * Built on top of Radix UI Tabs primitive with accessible keyboard navigation.\n * Supports two visual styles: solid (pill-style) and line (underline-style).\n *\n * @example\n * ```tsx\n * // Solid variant (default)\n * <Tabs defaultValue=\"tab1\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n *   <TabsContent value=\"tab2\">Content 2</TabsContent>\n * </Tabs>\n *\n * // Line variant\n * <Tabs defaultValue=\"tab1\" variant=\"line\">\n *   <TabsList>\n *     <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n *     <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"tab1\">Content 1</TabsContent>\n *   <TabsContent value=\"tab2\">Content 2</TabsContent>\n * </Tabs>\n * ```\n */\nfunction Tabs({ className, variant = \"solid\", ...props }: TabsProps) {\n  return (\n    <TabsVariantContext value={variant}>\n      <TabsPrimitive.Root\n        className={cn(tabsVariants(), className)}\n        data-slot=\"tabs\"\n        data-variant={variant}\n        {...props}\n      />\n    </TabsVariantContext>\n  )\n}\n\n/**\n * TabsList - Container for tab triggers.\n */\nfunction TabsList({ className, ...props }: TabsListProps) {\n  const variant = React.use(TabsVariantContext)\n\n  return (\n    <TabsPrimitive.List\n      className={cn(tabsListVariants({ variant }), className)}\n      data-slot=\"tabs-list\"\n      {...props}\n    />\n  )\n}\n\n/**\n * TabsTrigger - Button that activates its associated tab content.\n *\n * Supports optional `icon` (before label) and `badge` (after label) slots\n * matching the Figma `Tabs / Trigger` anatomy. When neither slot is provided,\n * `children` is rendered directly so existing call sites keep working.\n */\nfunction TabsTrigger({\n  className,\n  children,\n  icon,\n  badge,\n  ...props\n}: TabsTriggerProps) {\n  const variant = React.use(TabsVariantContext)\n  const hasSlots = icon !== undefined || badge !== undefined\n\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      data-slot=\"tabs-trigger\"\n      {...props}\n    >\n      {hasSlots ? (\n        <>\n          {icon !== undefined && (\n            <span aria-hidden=\"true\" data-slot=\"tabs-trigger-icon\">\n              {icon}\n            </span>\n          )}\n          <span data-slot=\"tabs-trigger-label\">{children}</span>\n          {badge !== undefined && (\n            <span\n              className=\"ml-1 inline-flex items-center rounded-[var(--tabs-trigger-badge-radius)] bg-[color:var(--tabs-trigger-badge-bg)] px-[var(--tabs-trigger-badge-padding-x)] text-xs text-[color:var(--tabs-trigger-badge-fg)]\"\n              data-slot=\"tabs-trigger-badge\"\n            >\n              {badge}\n            </span>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </TabsPrimitive.Trigger>\n  )\n}\n\n/**\n * TabsContent - Contains the content associated with each tab.\n */\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Content\n      className={cn(tabsContentVariants(), className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger }\n"]}