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

package/dist/chunk-IFHF4UES.js

@@ -0,0 +1,387 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { Check, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var stepperVariants = cva("flex transition-all duration-200", {
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  },
+  variants: {
+    size: {
+      default: "gap-4",
+      lg: "gap-6",
+      sm: "gap-2"
+    },
+    variant: {
+      compact: "flex-row items-center gap-2",
+      default: "flex-row items-start",
+      vertical: "flex-col"
+    }
+  }
+});
+var stepperItemVariants = cva("relative flex min-w-0 transition-all duration-200", {
+  compoundVariants: [
+    {
+      className: "flex-1 min-w-0",
+      variant: "default"
+    },
+    {
+      className: "flex-1 min-w-0",
+      variant: "compact"
+    },
+    {
+      className: "w-full",
+      variant: "vertical"
+    }
+  ],
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  },
+  variants: {
+    size: {
+      default: "",
+      lg: "",
+      sm: ""
+    },
+    variant: {
+      compact: "flex-col items-center",
+      default: "flex-col items-center",
+      vertical: "flex-row items-start gap-3"
+    }
+  }
+});
+var stepperIndicatorVariants = cva(
+  "relative z-10 flex shrink-0 items-center justify-center rounded-full font-medium transition-all duration-200",
+  {
+    compoundVariants: [
+      // Active step with ring highlight
+      {
+        className: "ring-4 ring-primary/20",
+        status: "active"
+      }
+    ],
+    defaultVariants: {
+      size: "default",
+      status: "pending"
+    },
+    variants: {
+      size: {
+        default: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        sm: "h-8 w-8 text-xs"
+      },
+      status: {
+        active: "border-2 border-primary bg-primary text-primary-foreground",
+        complete: "bg-primary text-primary-foreground",
+        error: "bg-destructive text-destructive-foreground",
+        pending: "border-2 border-muted bg-muted text-muted-foreground"
+      }
+    }
+  }
+);
+var stepperConnectorHorizontalVariants = cva(
+  "absolute top-1/2 h-0.5 -translate-y-1/2 transition-all duration-200",
+  {
+    defaultVariants: {
+      size: "default",
+      status: "pending"
+    },
+    variants: {
+      size: {
+        default: "left-[calc(50%+var(--stepper-connector-offset-default))] right-[calc(-50%+var(--stepper-connector-offset-default))]",
+        lg: "left-[calc(50%+var(--stepper-connector-offset-lg))] right-[calc(-50%+var(--stepper-connector-offset-lg))]",
+        sm: "left-[calc(50%+var(--stepper-connector-offset-sm))] right-[calc(-50%+var(--stepper-connector-offset-sm))]"
+      },
+      status: {
+        active: "bg-primary/50",
+        complete: "bg-primary",
+        error: "bg-destructive/50",
+        pending: "bg-muted"
+      }
+    }
+  }
+);
+var stepperConnectorVerticalVariants = cva(
+  "absolute w-0.5 transition-all duration-200",
+  {
+    defaultVariants: {
+      size: "default",
+      status: "pending"
+    },
+    variants: {
+      size: {
+        default: "left-5 top-12 h-[calc(100%-var(--stepper-connector-vertical-height-offset-default))]",
+        lg: "left-6 top-14 h-[calc(100%-var(--stepper-connector-vertical-height-offset-lg))]",
+        sm: "left-4 top-10 h-[calc(100%-var(--stepper-connector-vertical-height-offset-sm))]"
+      },
+      status: {
+        active: "bg-primary/50",
+        complete: "bg-primary",
+        error: "bg-destructive/50",
+        pending: "bg-muted"
+      }
+    }
+  }
+);
+var stepperLabelVariants = cva("font-medium transition-colors", {
+  defaultVariants: {
+    size: "default",
+    status: "pending"
+  },
+  variants: {
+    size: {
+      default: "text-sm",
+      lg: "text-base",
+      sm: "text-xs"
+    },
+    status: {
+      active: "text-foreground",
+      complete: "text-foreground",
+      error: "text-destructive",
+      pending: "text-muted-foreground"
+    }
+  }
+});
+var stepperDescriptionVariants = cva("text-muted-foreground transition-colors", {
+  defaultVariants: {
+    size: "default"
+  },
+  variants: {
+    size: {
+      default: "text-xs",
+      lg: "text-sm",
+      sm: "text-xs"
+    }
+  }
+});
+function computeStepStatus(step, index, currentStep, completed) {
+  if (step.status) {
+    return step.status;
+  }
+  if (completed?.includes(index)) {
+    return "complete";
+  }
+  if (index < currentStep) {
+    return "complete";
+  }
+  if (index === currentStep) {
+    return "active";
+  }
+  return "pending";
+}
+function StepIndicatorContent({
+  index,
+  size = "default",
+  status,
+  step
+}) {
+  const iconSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  if (step.icon) {
+    return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", `[&>svg]:${iconSize}`), children: step.icon });
+  }
+  if (status === "complete") {
+    return /* @__PURE__ */ jsx(Check, { className: iconSize });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx(X, { className: iconSize });
+  }
+  return /* @__PURE__ */ jsx("span", { children: index + 1 });
+}
+function StepperItem({
+  clickable = false,
+  index,
+  isLast = false,
+  onClick,
+  showConnector = true,
+  size = "default",
+  status,
+  step,
+  variant = "default"
+}) {
+  const isVertical = variant === "vertical";
+  const isDisabled = step.disabled ?? false;
+  const connectorStatus = status === "complete" ? "complete" : "pending";
+  const handleClick = () => {
+    if (clickable && !isDisabled && onClick) {
+      onClick(index);
+    }
+    step.onClick?.();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        stepperItemVariants({ size, variant }),
+        clickable && !isDisabled && "cursor-pointer",
+        isDisabled && "cursor-not-allowed opacity-50"
+      ),
+      "aria-current": status === "active" ? "step" : void 0,
+      "data-slot": "stepper-item",
+      "data-status": status,
+      tabIndex: clickable && !isDisabled ? 0 : void 0,
+      onClick: clickable ? handleClick : void 0,
+      onKeyDown: clickable && !isDisabled ? handleKeyDown : void 0,
+      children: [
+        !isVertical && /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: stepperIndicatorVariants({ size, status }),
+              "data-slot": "stepper-indicator",
+              children: /* @__PURE__ */ jsx(
+                StepIndicatorContent,
+                {
+                  index,
+                  size,
+                  status,
+                  step
+                }
+              )
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: stepperConnectorHorizontalVariants({
+                size,
+                status: connectorStatus
+              }),
+              "aria-hidden": "true",
+              "data-slot": "stepper-connector"
+            }
+          )
+        ] }),
+        isVertical && /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: stepperIndicatorVariants({ size, status }),
+              "data-slot": "stepper-indicator",
+              children: /* @__PURE__ */ jsx(
+                StepIndicatorContent,
+                {
+                  index,
+                  size,
+                  status,
+                  step
+                }
+              )
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                stepperConnectorVerticalVariants({ size, status: connectorStatus }),
+                "min-h-8"
+              ),
+              "aria-hidden": "true",
+              "data-slot": "stepper-connector"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-col",
+              isVertical ? "flex-1" : "mt-2 items-center text-center"
+            ),
+            "data-slot": "stepper-content",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(stepperLabelVariants({ size, status }), "max-w-full truncate"),
+                  "data-slot": "stepper-label",
+                  children: step.label
+                }
+              ),
+              step.description && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: stepperDescriptionVariants({ size }),
+                  "data-slot": "stepper-description",
+                  children: step.description
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Stepper({
+  children,
+  className,
+  clickable = false,
+  completed,
+  currentStep = 0,
+  onStepClick,
+  showConnectors = true,
+  size = "default",
+  steps,
+  variant = "default",
+  ...props
+}) {
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": "Stepper",
+        className: cn(stepperVariants({ size, variant }), className),
+        "data-slot": "stepper",
+        role: "list",
+        ...props,
+        children
+      }
+    );
+  }
+  const totalSteps = steps?.length ?? 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Stepper",
+      "aria-valuemax": totalSteps,
+      "aria-valuemin": 0,
+      "aria-valuenow": currentStep + 1,
+      className: cn(stepperVariants({ size, variant }), className),
+      "data-slot": "stepper",
+      "data-variant": variant,
+      role: "progressbar",
+      ...props,
+      children: steps?.map((step, index) => {
+        const status = computeStepStatus(step, index, currentStep, completed);
+        return /* @__PURE__ */ jsx(
+          StepperItem,
+          {
+            clickable,
+            index,
+            isLast: index === steps.length - 1,
+            showConnector: showConnectors,
+            size,
+            status,
+            step,
+            variant,
+            onClick: onStepClick
+          },
+          step.id
+        );
+      })
+    }
+  );
+}
+
+export { Stepper, stepperConnectorHorizontalVariants, stepperConnectorVerticalVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperItemVariants, stepperLabelVariants, stepperVariants };
+//# sourceMappingURL=chunk-IFHF4UES.js.map
+//# sourceMappingURL=chunk-IFHF4UES.js.map

package/dist/chunk-IFHF4UES.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow/Stepper/Stepper.variants.ts","../src/components/workflow/Stepper/Stepper.tsx"],"names":[],"mappings":"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","file":"chunk-IFHF4UES.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Stepper container variants\n */\nexport const stepperVariants = cva(\"flex transition-all duration-200\", {\n  defaultVariants: {\n    size: \"default\",\n    variant: \"default\",\n  },\n  variants: {\n    size: {\n      default: \"gap-4\",\n      lg: \"gap-6\",\n      sm: \"gap-2\",\n    },\n    variant: {\n      compact: \"flex-row items-center gap-2\",\n      default: \"flex-row items-start\",\n      vertical: \"flex-col\",\n    },\n  },\n})\n\n/**\n * Step item container variants\n */\nexport const stepperItemVariants = cva(\"relative flex min-w-0 transition-all duration-200\", {\n  compoundVariants: [\n    {\n      className: \"flex-1 min-w-0\",\n      variant: \"default\",\n    },\n    {\n      className: \"flex-1 min-w-0\",\n      variant: \"compact\",\n    },\n    {\n      className: \"w-full\",\n      variant: \"vertical\",\n    },\n  ],\n  defaultVariants: {\n    size: \"default\",\n    variant: \"default\",\n  },\n  variants: {\n    size: {\n      default: \"\",\n      lg: \"\",\n      sm: \"\",\n    },\n    variant: {\n      compact: \"flex-col items-center\",\n      default: \"flex-col items-center\",\n      vertical: \"flex-row items-start gap-3\",\n    },\n  },\n})\n\n/**\n * Step indicator (circle) variants\n */\nexport const stepperIndicatorVariants = cva(\n  \"relative z-10 flex shrink-0 items-center justify-center rounded-full font-medium transition-all duration-200\",\n  {\n    compoundVariants: [\n      // Active step with ring highlight\n      {\n        className: \"ring-4 ring-primary/20\",\n        status: \"active\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      status: \"pending\",\n    },\n    variants: {\n      size: {\n        default: \"h-10 w-10 text-sm\",\n        lg: \"h-12 w-12 text-base\",\n        sm: \"h-8 w-8 text-xs\",\n      },\n      status: {\n        active: \"border-2 border-primary bg-primary text-primary-foreground\",\n        complete: \"bg-primary text-primary-foreground\",\n        error: \"bg-destructive text-destructive-foreground\",\n        pending: \"border-2 border-muted bg-muted text-muted-foreground\",\n      },\n    },\n  }\n)\n\n/**\n * Horizontal connector variants\n */\nexport const stepperConnectorHorizontalVariants = cva(\n  \"absolute top-1/2 h-0.5 -translate-y-1/2 transition-all duration-200\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      status: \"pending\",\n    },\n    variants: {\n      size: {\n        default: \"left-[calc(50%+var(--stepper-connector-offset-default))] right-[calc(-50%+var(--stepper-connector-offset-default))]\",\n        lg: \"left-[calc(50%+var(--stepper-connector-offset-lg))] right-[calc(-50%+var(--stepper-connector-offset-lg))]\",\n        sm: \"left-[calc(50%+var(--stepper-connector-offset-sm))] right-[calc(-50%+var(--stepper-connector-offset-sm))]\",\n      },\n      status: {\n        active: \"bg-primary/50\",\n        complete: \"bg-primary\",\n        error: \"bg-destructive/50\",\n        pending: \"bg-muted\",\n      },\n    },\n  }\n)\n\n/**\n * Vertical connector variants\n */\nexport const stepperConnectorVerticalVariants = cva(\n  \"absolute w-0.5 transition-all duration-200\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      status: \"pending\",\n    },\n    variants: {\n      size: {\n        default: \"left-5 top-12 h-[calc(100%-var(--stepper-connector-vertical-height-offset-default))]\",\n        lg: \"left-6 top-14 h-[calc(100%-var(--stepper-connector-vertical-height-offset-lg))]\",\n        sm: \"left-4 top-10 h-[calc(100%-var(--stepper-connector-vertical-height-offset-sm))]\",\n      },\n      status: {\n        active: \"bg-primary/50\",\n        complete: \"bg-primary\",\n        error: \"bg-destructive/50\",\n        pending: \"bg-muted\",\n      },\n    },\n  }\n)\n\n/**\n * Step label variants\n */\nexport const stepperLabelVariants = cva(\"font-medium transition-colors\", {\n  defaultVariants: {\n    size: \"default\",\n    status: \"pending\",\n  },\n  variants: {\n    size: {\n      default: \"text-sm\",\n      lg: \"text-base\",\n      sm: \"text-xs\",\n    },\n    status: {\n      active: \"text-foreground\",\n      complete: \"text-foreground\",\n      error: \"text-destructive\",\n      pending: \"text-muted-foreground\",\n    },\n  },\n})\n\n/**\n * Step description variants\n */\nexport const stepperDescriptionVariants = cva(\"text-muted-foreground transition-colors\", {\n  defaultVariants: {\n    size: \"default\",\n  },\n  variants: {\n    size: {\n      default: \"text-xs\",\n      lg: \"text-sm\",\n      sm: \"text-xs\",\n    },\n  },\n})\n\n// Export variant prop types\nexport type StepperVariantProps = VariantProps<typeof stepperVariants>\nexport type StepperItemVariantProps = VariantProps<typeof stepperItemVariants>\nexport type StepperIndicatorVariantProps = VariantProps<typeof stepperIndicatorVariants>\nexport type StepperConnectorHorizontalVariantProps = VariantProps<\n  typeof stepperConnectorHorizontalVariants\n>\nexport type StepperConnectorVerticalVariantProps = VariantProps<\n  typeof stepperConnectorVerticalVariants\n>\n","import type { StepItem, StepperItemProps, StepperProps } from \"./Stepper.types\"\n\nimport { Check, X } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  stepperConnectorHorizontalVariants,\n  stepperConnectorVerticalVariants,\n  stepperDescriptionVariants,\n  stepperIndicatorVariants,\n  stepperItemVariants,\n  stepperLabelVariants,\n  stepperVariants,\n} from \"./Stepper.variants\"\n\n/**\n * Compute the status of a step based on its index, current step, and completed array\n */\nfunction computeStepStatus(\n  step: StepItem,\n  index: number,\n  currentStep: number,\n  completed?: number[]\n): \"active\" | \"complete\" | \"error\" | \"pending\" {\n  // If step has explicit status, use it\n  if (step.status) {\n    return step.status\n  }\n\n  // Check if this step is in the completed array\n  if (completed?.includes(index)) {\n    return \"complete\"\n  }\n\n  // Auto-compute based on currentStep\n  if (index < currentStep) {\n    return \"complete\"\n  }\n  if (index === currentStep) {\n    return \"active\"\n  }\n  return \"pending\"\n}\n\n/**\n * Render step indicator content\n */\nfunction StepIndicatorContent({\n  index,\n  size = \"default\",\n  status,\n  step,\n}: {\n  index: number\n  size?: \"default\" | \"lg\" | \"sm\"\n  status: \"active\" | \"complete\" | \"error\" | \"pending\"\n  step: StepItem\n}) {\n  const iconSize = size === \"sm\" ? \"h-3 w-3\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\"\n\n  // Show custom icon if provided\n  if (step.icon) {\n    return (\n      <span className={cn(\"flex items-center justify-center\", `[&>svg]:${iconSize}`)}>\n        {step.icon}\n      </span>\n    )\n  }\n\n  // Show checkmark for complete\n  if (status === \"complete\") {\n    return <Check className={iconSize} />\n  }\n\n  // Show X for error\n  if (status === \"error\") {\n    return <X className={iconSize} />\n  }\n\n  // Show step number for active/pending\n  return <span>{index + 1}</span>\n}\n\n/**\n * Single step item component\n */\nfunction StepperItem({\n  clickable = false,\n  index,\n  isLast = false,\n  onClick,\n  showConnector = true,\n  size = \"default\",\n  status,\n  step,\n  variant = \"default\",\n}: StepperItemProps) {\n  const isVertical = variant === \"vertical\"\n  const isDisabled = step.disabled ?? false\n\n  // Get connector status\n  const connectorStatus = status === \"complete\" ? \"complete\" : \"pending\"\n\n  // Handle click\n  const handleClick = () => {\n    if (clickable && !isDisabled && onClick) {\n      onClick(index)\n    }\n    step.onClick?.()\n  }\n\n  // Handle keyboard navigation\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault()\n      handleClick()\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        stepperItemVariants({ size, variant }),\n        clickable && !isDisabled && \"cursor-pointer\",\n        isDisabled && \"cursor-not-allowed opacity-50\"\n      )}\n      aria-current={status === \"active\" ? \"step\" : undefined}\n      data-slot=\"stepper-item\"\n      data-status={status}\n      tabIndex={clickable && !isDisabled ? 0 : undefined}\n      onClick={clickable ? handleClick : undefined}\n      onKeyDown={clickable && !isDisabled ? handleKeyDown : undefined}\n    >\n      {/* Indicator wrapper for horizontal orientation */}\n      {!isVertical && (\n        <div className=\"relative flex w-full items-center justify-center\">\n          {/* Step indicator circle */}\n          <div\n            className={stepperIndicatorVariants({ size, status })}\n            data-slot=\"stepper-indicator\"\n          >\n            <StepIndicatorContent\n              index={index}\n              size={size}\n              status={status}\n              step={step}\n            />\n          </div>\n\n          {/* Horizontal connector */}\n          {showConnector && !isLast && (\n            <div\n              className={stepperConnectorHorizontalVariants({\n                size,\n                status: connectorStatus,\n              })}\n              aria-hidden=\"true\"\n              data-slot=\"stepper-connector\"\n            />\n          )}\n        </div>\n      )}\n\n      {/* Vertical layout indicator */}\n      {isVertical && (\n        <div className=\"relative flex flex-col items-center\">\n          {/* Step indicator circle */}\n          <div\n            className={stepperIndicatorVariants({ size, status })}\n            data-slot=\"stepper-indicator\"\n          >\n            <StepIndicatorContent\n              index={index}\n              size={size}\n              status={status}\n              step={step}\n            />\n          </div>\n\n          {/* Vertical connector */}\n          {showConnector && !isLast && (\n            <div\n              className={cn(\n                stepperConnectorVerticalVariants({ size, status: connectorStatus }),\n                \"min-h-8\"\n              )}\n              aria-hidden=\"true\"\n              data-slot=\"stepper-connector\"\n            />\n          )}\n        </div>\n      )}\n\n      {/* Labels and description */}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-col\",\n          isVertical ? \"flex-1\" : \"mt-2 items-center text-center\"\n        )}\n        data-slot=\"stepper-content\"\n      >\n        <span\n          className={cn(stepperLabelVariants({ size, status }), \"max-w-full truncate\")}\n          data-slot=\"stepper-label\"\n        >\n          {step.label}\n        </span>\n        {step.description && (\n          <span\n            className={stepperDescriptionVariants({ size })}\n            data-slot=\"stepper-description\"\n          >\n            {step.description}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Stepper component displays a sequence of steps in a workflow.\n *\n * @example\n * ```tsx\n * const steps = [\n *   { id: \"1\", label: \"Informações\" },\n *   { id: \"2\", label: \"Verificação\" },\n *   { id: \"3\", label: \"Conclusão\" },\n * ]\n *\n * <Stepper steps={steps} currentStep={1} />\n * ```\n */\nfunction Stepper({\n  children,\n  className,\n  clickable = false,\n  completed,\n  currentStep = 0,\n  onStepClick,\n  showConnectors = true,\n  size = \"default\",\n  steps,\n  variant = \"default\",\n  ...props\n}: StepperProps) {\n  // If children are provided, render custom content\n  if (children) {\n    return (\n      <div\n        aria-label=\"Stepper\"\n        className={cn(stepperVariants({ size, variant }), className)}\n        data-slot=\"stepper\"\n        role=\"list\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  // Compute progress values for aria\n  const totalSteps = steps?.length ?? 0\n\n  return (\n    <div\n      aria-label=\"Stepper\"\n      aria-valuemax={totalSteps}\n      aria-valuemin={0}\n      aria-valuenow={currentStep + 1}\n      className={cn(stepperVariants({ size, variant }), className)}\n      data-slot=\"stepper\"\n      data-variant={variant}\n      role=\"progressbar\"\n      {...props}\n    >\n      {steps?.map((step, index) => {\n        const status = computeStepStatus(step, index, currentStep, completed)\n\n        return (\n          <StepperItem\n            key={step.id}\n            clickable={clickable}\n            index={index}\n            isLast={index === steps.length - 1}\n            showConnector={showConnectors}\n            size={size}\n            status={status}\n            step={step}\n            variant={variant}\n            onClick={onStepClick}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport { Stepper }\nexport type { StepItem, StepperProps }\n"]}

package/dist/chunk-IRIIK3BU.js

@@ -0,0 +1,215 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var imageVariants = cva(
+  "transition-opacity duration-300 motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "",
+        rounded: "rounded-md",
+        circle: "rounded-full",
+        square: "aspect-square"
+      },
+      size: {
+        xs: "size-8",
+        sm: "size-12",
+        md: "size-16",
+        lg: "size-24",
+        xl: "size-32",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "full"
+    }
+  }
+);
+function Image(props) {
+  const imageKey = props.src;
+  return /* @__PURE__ */ jsx(ImageInner, { ...props }, imageKey);
+}
+function ImageInner({
+  src,
+  alt,
+  variant,
+  size,
+  fallback,
+  placeholder,
+  aspectRatio = "auto",
+  objectFit = "cover",
+  objectPosition = "center",
+  loading = "lazy",
+  className,
+  onLoad,
+  onError,
+  ref,
+  style,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const normalizedSrc = src.trim();
+  const isMissingSrc = normalizedSrc.length === 0;
+  const handleLoad = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(false);
+      onLoad?.(event);
+    },
+    [onLoad]
+  );
+  const handleError = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const aspectRatioStyle = React.useMemo(() => {
+    if (aspectRatio === "auto") return;
+    if (aspectRatio === "square") return;
+    if (aspectRatio === "video") return;
+    if (aspectRatio === "portrait") return { aspectRatio: "3/4" };
+    if (typeof aspectRatio === "number") {
+      return { aspectRatio: String(aspectRatio) };
+    }
+    return;
+  }, [aspectRatio]);
+  const objectFitClass = React.useMemo(() => {
+    switch (objectFit) {
+      case "cover":
+        return "object-cover";
+      case "contain":
+        return "object-contain";
+      case "fill":
+        return "object-fill";
+      case "none":
+        return "object-none";
+      default:
+        return "object-cover";
+    }
+  }, [objectFit]);
+  const objectPositionClass = React.useMemo(() => {
+    switch (objectPosition) {
+      case "center":
+        return "object-center";
+      case "top":
+        return "object-top";
+      case "bottom":
+        return "object-bottom";
+      case "left":
+        return "object-left";
+      case "right":
+        return "object-right";
+      default:
+        return;
+    }
+  }, [objectPosition]);
+  const objectPositionStyle = React.useMemo(() => {
+    if (!objectPositionClass && objectPosition !== "center") {
+      return { objectPosition };
+    }
+    return;
+  }, [objectPosition, objectPositionClass]);
+  const aspectRatioClass = React.useMemo(() => {
+    if (aspectRatio === "square") return "aspect-square";
+    if (aspectRatio === "video") return "aspect-video";
+    return;
+  }, [aspectRatio]);
+  const mergedStyle = React.useMemo(() => {
+    if (!aspectRatioStyle && !style) return;
+    return { ...aspectRatioStyle, ...style };
+  }, [aspectRatioStyle, style]);
+  if ((hasError || isMissingSrc) && fallback) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "flex items-center justify-center bg-muted",
+          className
+        ),
+        "data-slot": "image-fallback",
+        style: mergedStyle,
+        children: fallback
+      }
+    );
+  }
+  if (isMissingSrc) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative inline-block overflow-hidden",
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "bg-muted",
+          className
+        ),
+        "data-slot": "image-empty",
+        style: mergedStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative inline-block overflow-hidden",
+        imageVariants({ variant, size }),
+        aspectRatioClass,
+        className
+      ),
+      style: mergedStyle,
+      children: [
+        isLoading && placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 flex items-center justify-center",
+            "data-slot": "image-skeleton",
+            children: placeholder
+          }
+        ),
+        isLoading && !placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none",
+            "data-slot": "image-skeleton"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            className: cn(
+              "size-full transition-opacity duration-300 motion-reduce:transition-none",
+              objectFitClass,
+              objectPositionClass,
+              isLoading ? "opacity-0" : "opacity-100"
+            ),
+            alt,
+            "data-slot": "image",
+            loading,
+            src: normalizedSrc,
+            style: objectPositionStyle,
+            onError: handleError,
+            onLoad: handleLoad,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Image, imageVariants };
+//# sourceMappingURL=chunk-IRIIK3BU.js.map
+//# sourceMappingURL=chunk-IRIIK3BU.js.map

package/dist/chunk-IRIIK3BU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Image/Image.tsx"],"names":[],"mappings":"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","file":"chunk-IRIIK3BU.js","sourcesContent":["\"use client\"\n\nimport type { ImageProps } from \"./Image.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst imageVariants = cva(\n  \"transition-opacity duration-300 motion-reduce:transition-none\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        rounded: \"rounded-md\",\n        circle: \"rounded-full\",\n        square: \"aspect-square\",\n      },\n      size: {\n        xs: \"size-8\",\n        sm: \"size-12\",\n        md: \"size-16\",\n        lg: \"size-24\",\n        xl: \"size-32\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"full\",\n    },\n  }\n)\n\n/**\n * Image - A component for displaying images with lazy loading, fallback, and aspect ratio support.\n *\n * Features:\n * - Lazy loading by default\n * - Fallback content on error\n * - Placeholder during loading\n * - Aspect ratio control\n * - Object-fit and position options\n *\n * @example\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Description\" />\n *\n * @example\n * // With fallback and placeholder\n * <Image\n *   src=\"/photo.jpg\"\n *   alt=\"Product\"\n *   fallback={<div>Failed to load</div>}\n *   placeholder={<div className=\"animate-pulse bg-muted\" />}\n * />\n */\nfunction Image(props: ImageProps) {\n  const imageKey = props.src\n  return <ImageInner key={imageKey} {...props} />\n}\n\nfunction ImageInner({\n  src,\n  alt,\n  variant,\n  size,\n  fallback,\n  placeholder,\n  aspectRatio = \"auto\",\n  objectFit = \"cover\",\n  objectPosition = \"center\",\n  loading = \"lazy\",\n  className,\n  onLoad,\n  onError,\n  ref,\n  style,\n  ...props\n}: ImageProps) {\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [hasError, setHasError] = React.useState(false)\n  const normalizedSrc = src.trim()\n  const isMissingSrc = normalizedSrc.length === 0\n\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(false)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(true)\n      onError?.(event)\n    },\n    [onError]\n  )\n\n  // Compute aspect ratio style\n  const aspectRatioStyle = React.useMemo(() => {\n    if (aspectRatio === \"auto\") return\n    if (aspectRatio === \"square\") return // handled by class\n    if (aspectRatio === \"video\") return // handled by class\n    if (aspectRatio === \"portrait\") return { aspectRatio: \"3/4\" }\n    if (typeof aspectRatio === \"number\") {\n      return { aspectRatio: String(aspectRatio) }\n    }\n    return\n  }, [aspectRatio])\n\n  // Compute object-fit class\n  const objectFitClass = React.useMemo(() => {\n    switch (objectFit) {\n      case \"cover\":\n        return \"object-cover\"\n      case \"contain\":\n        return \"object-contain\"\n      case \"fill\":\n        return \"object-fill\"\n      case \"none\":\n        return \"object-none\"\n      default:\n        return \"object-cover\"\n    }\n  }, [objectFit])\n\n  // Compute object-position class or style\n  const objectPositionClass = React.useMemo(() => {\n    switch (objectPosition) {\n      case \"center\":\n        return \"object-center\"\n      case \"top\":\n        return \"object-top\"\n      case \"bottom\":\n        return \"object-bottom\"\n      case \"left\":\n        return \"object-left\"\n      case \"right\":\n        return \"object-right\"\n      default:\n        return\n    }\n  }, [objectPosition])\n\n  const objectPositionStyle = React.useMemo(() => {\n    if (!objectPositionClass && objectPosition !== \"center\") {\n      return { objectPosition }\n    }\n    return\n  }, [objectPosition, objectPositionClass])\n\n  // Compute aspect ratio classes\n  const aspectRatioClass = React.useMemo(() => {\n    if (aspectRatio === \"square\") return \"aspect-square\"\n    if (aspectRatio === \"video\") return \"aspect-video\"\n    return\n  }, [aspectRatio])\n\n  // Merge styles (must be before any early return to respect hooks rules)\n  const mergedStyle = React.useMemo(() => {\n    if (!aspectRatioStyle && !style) return\n    return { ...aspectRatioStyle, ...style }\n  }, [aspectRatioStyle, style])\n\n  // Show fallback for missing/errored images when content is provided.\n  if ((hasError || isMissingSrc) && fallback) {\n    return (\n      <div\n        className={cn(\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"flex items-center justify-center bg-muted\",\n          className\n        )}\n        data-slot=\"image-fallback\"\n        style={mergedStyle}\n      >\n        {fallback}\n      </div>\n    )\n  }\n\n  if (isMissingSrc) {\n    return (\n      <div\n        className={cn(\n          \"relative inline-block overflow-hidden\",\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"bg-muted\",\n          className\n        )}\n        data-slot=\"image-empty\"\n        style={mergedStyle}\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-block overflow-hidden\",\n        imageVariants({ variant, size }),\n        aspectRatioClass,\n        className\n      )}\n      style={mergedStyle}\n    >\n      {/* Placeholder shown while loading */}\n      {isLoading && placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 flex items-center justify-center\"\n          data-slot=\"image-skeleton\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      {/* Default skeleton if no placeholder provided */}\n      {isLoading && !placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none\"\n          data-slot=\"image-skeleton\"\n        />\n      )}\n\n      {/* The actual image */}\n      <img\n        ref={ref}\n        className={cn(\n          \"size-full transition-opacity duration-300 motion-reduce:transition-none\",\n          objectFitClass,\n          objectPositionClass,\n          isLoading ? \"opacity-0\" : \"opacity-100\"\n        )}\n        alt={alt}\n        data-slot=\"image\"\n        loading={loading}\n        src={normalizedSrc}\n        style={objectPositionStyle}\n        onError={handleError}\n        onLoad={handleLoad}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { Image, imageVariants }\n"]}