@mdigital_ui/ui 0.3.7 → 0.3.9

package/dist/chunk-2TLOWZE4.js

@@ -0,0 +1,689 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var circleSizes = {
+  xs: { size: 60, strokeWidth: 4 },
+  sm: { size: 80, strokeWidth: 6 },
+  md: { size: 120, strokeWidth: 8 },
+  lg: { size: 160, strokeWidth: 10 }
+};
+var progressContainerVariants = cva("w-full rounded-full overflow-hidden", {
+  variants: {
+    size: {
+      xs: "h-1",
+      sm: "h-2",
+      md: "h-3",
+      lg: "h-4"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var progressBarVariants = cva(
+  "h-full transition-[width,height] duration-300 ease-in-out rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var backgroundColorStyles = {
+  default: {
+    default: "bg-surface",
+    solid: "bg-surface",
+    soft: "bg-surface/50"
+  },
+  primary: {
+    default: "bg-primary/10",
+    solid: "bg-primary/20",
+    soft: "bg-primary/10"
+  },
+  secondary: {
+    default: "bg-secondary/10",
+    solid: "bg-secondary/20",
+    soft: "bg-secondary/10"
+  },
+  accent: {
+    default: "bg-accent/10",
+    solid: "bg-accent/20",
+    soft: "bg-accent/10"
+  },
+  success: {
+    default: "bg-success/10",
+    solid: "bg-success/20",
+    soft: "bg-success/10"
+  },
+  error: {
+    default: "bg-error/10",
+    solid: "bg-error/20",
+    soft: "bg-error/10"
+  },
+  warning: {
+    default: "bg-warning/10",
+    solid: "bg-warning/20",
+    soft: "bg-warning/10"
+  },
+  info: {
+    default: "bg-info/10",
+    solid: "bg-info/20",
+    soft: "bg-info/10"
+  }
+};
+var barColorStyles = {
+  default: {
+    default: "bg-surface border border-border",
+    solid: "bg-surface",
+    soft: "bg-surface/80"
+  },
+  primary: {
+    default: "bg-primary/20 border border-primary",
+    solid: "bg-primary",
+    soft: "bg-primary/60"
+  },
+  secondary: {
+    default: "bg-secondary/20 border border-secondary",
+    solid: "bg-secondary",
+    soft: "bg-secondary/60"
+  },
+  accent: {
+    default: "bg-accent/20 border border-accent",
+    solid: "bg-accent",
+    soft: "bg-accent/60"
+  },
+  success: {
+    default: "bg-success/20 border border-success",
+    solid: "bg-success",
+    soft: "bg-success/60"
+  },
+  error: {
+    default: "bg-error/20 border border-error",
+    solid: "bg-error",
+    soft: "bg-error/60"
+  },
+  warning: {
+    default: "bg-warning/20 border border-warning",
+    solid: "bg-warning",
+    soft: "bg-warning/60"
+  },
+  info: {
+    default: "bg-info/20 border border-info",
+    solid: "bg-info",
+    soft: "bg-info/60"
+  }
+};
+var circleStrokeColors = {
+  default: {
+    default: "stroke-surface",
+    solid: "stroke-surface",
+    soft: "stroke-surface/80"
+  },
+  primary: {
+    default: "stroke-primary",
+    solid: "stroke-primary",
+    soft: "stroke-primary/60"
+  },
+  secondary: {
+    default: "stroke-secondary",
+    solid: "stroke-secondary",
+    soft: "stroke-secondary/60"
+  },
+  accent: {
+    default: "stroke-accent",
+    solid: "stroke-accent",
+    soft: "stroke-accent/60"
+  },
+  success: {
+    default: "stroke-success",
+    solid: "stroke-success",
+    soft: "stroke-success/60"
+  },
+  error: {
+    default: "stroke-error",
+    solid: "stroke-error",
+    soft: "stroke-error/60"
+  },
+  warning: {
+    default: "stroke-warning",
+    solid: "stroke-warning",
+    soft: "stroke-warning/60"
+  },
+  info: {
+    default: "stroke-info",
+    solid: "stroke-info",
+    soft: "stroke-info/60"
+  }
+};
+var circleTrailColors = {
+  default: {
+    default: "stroke-surface",
+    solid: "stroke-surface",
+    soft: "stroke-surface/50"
+  },
+  primary: {
+    default: "stroke-primary/10",
+    solid: "stroke-primary/20",
+    soft: "stroke-primary/10"
+  },
+  secondary: {
+    default: "stroke-secondary/10",
+    solid: "stroke-secondary/20",
+    soft: "stroke-secondary/10"
+  },
+  accent: {
+    default: "stroke-accent/10",
+    solid: "stroke-accent/20",
+    soft: "stroke-accent/10"
+  },
+  success: {
+    default: "stroke-success/10",
+    solid: "stroke-success/20",
+    soft: "stroke-success/10"
+  },
+  error: {
+    default: "stroke-error/10",
+    solid: "stroke-error/20",
+    soft: "stroke-error/10"
+  },
+  warning: {
+    default: "stroke-warning/10",
+    solid: "stroke-warning/20",
+    soft: "stroke-warning/10"
+  },
+  info: {
+    default: "stroke-info/10",
+    solid: "stroke-info/20",
+    soft: "stroke-info/10"
+  }
+};
+function getVerticalWidthClass(size) {
+  switch (size) {
+    case "xs":
+      return "w-1";
+    case "sm":
+      return "w-2";
+    case "md":
+      return "w-3";
+    case "lg":
+      return "w-4";
+    default:
+      return "w-3";
+  }
+}
+function getStripedStyle(striped, isCompleted = true) {
+  if (!striped || !isCompleted) return {};
+  return {
+    backgroundImage: "linear-gradient(45deg, var(--overlay-stripe) 25%, transparent 25%, transparent 50%, var(--overlay-stripe) 50%, var(--overlay-stripe) 75%, transparent 75%, transparent)",
+    backgroundSize: "1rem 1rem"
+  };
+}
+var ProgressLabel = ({
+  label,
+  showProgress,
+  clampedValue,
+  classNames
+}) => {
+  if (!label) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 text-sm text-text-primary", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("progress_label", classNames?.label), children: label }),
+    showProgress && /* @__PURE__ */ jsxs("span", { className: cn("font-medium", "progress_value", classNames?.value), children: [
+      clampedValue,
+      "%"
+    ] })
+  ] });
+};
+var CircleProgress = ({
+  size = "md",
+  circleSize: customCircleSize,
+  strokeWidth: customStrokeWidth,
+  color = "primary",
+  variant = "default",
+  label,
+  className,
+  classNames,
+  clampedValue,
+  progressLabel
+}) => {
+  const preset = circleSizes[size];
+  const circleSize = customCircleSize ?? preset.size;
+  const strokeWidth = customStrokeWidth ?? preset.strokeWidth;
+  const radius = (circleSize - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - clampedValue / 100 * circumference;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex flex-col items-center",
+        "progress_root",
+        className,
+        classNames?.root
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative",
+          style: { width: circleSize, height: circleSize },
+          role: "progressbar",
+          "aria-valuenow": clampedValue,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": progressLabel,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: circleSize,
+                height: circleSize,
+                className: "transform -rotate-90",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: circleSize / 2,
+                      cy: circleSize / 2,
+                      r: radius,
+                      fill: "none",
+                      strokeWidth,
+                      className: cn(
+                        circleTrailColors[color][variant],
+                        "progress_track",
+                        classNames?.track
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: circleSize / 2,
+                      cy: circleSize / 2,
+                      r: radius,
+                      fill: "none",
+                      strokeWidth,
+                      strokeDasharray: circumference,
+                      strokeDashoffset: offset,
+                      strokeLinecap: "round",
+                      className: cn(
+                        circleStrokeColors[color][variant],
+                        "transition-[width,height] duration-300 ease-in-out",
+                        "progress_fill",
+                        classNames?.fill
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: label ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "p-2 text-text-secondary",
+                  "progress_label",
+                  classNames?.label
+                ),
+                style: { fontSize: `${circleSize / Math.floor(label.length * 1.5)}px` },
+                children: label
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "text-text-primary font-semibold",
+                  "progress_value",
+                  classNames?.value
+                ),
+                style: { fontSize: circleSize / 5 },
+                children: [
+                  clampedValue,
+                  "%"
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+var StepProgress = ({
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  variant = "default",
+  label,
+  showProgress = false,
+  striped = false,
+  animated = false,
+  className,
+  classNames,
+  totalSteps = 5,
+  clampedValue,
+  progressLabel
+}) => {
+  const currentStep = Math.ceil(clampedValue / 100 * totalSteps);
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "h-full flex flex-col",
+          "progress_root",
+          className,
+          classNames?.root
+        ),
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": progressLabel,
+        children: [
+          /* @__PURE__ */ jsx(
+            ProgressLabel,
+            {
+              label,
+              showProgress,
+              clampedValue,
+              classNames
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 rounded-full overflow-hidden flex flex-col-reverse gap-1",
+                getVerticalWidthClass(size),
+                "progress_track",
+                classNames?.track
+              ),
+              children: Array.from({ length: totalSteps }, (_, index) => {
+                const stepNumber = index + 1;
+                const isCompleted = stepNumber <= currentStep;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "w-full rounded-full transition-[width,height] flex-1",
+                      isCompleted ? barColorStyles[color][variant] : backgroundColorStyles[color][variant],
+                      animated && striped && "progress-shimmer",
+                      "progress_fill",
+                      classNames?.fill
+                    ),
+                    style: getStripedStyle(striped, isCompleted)
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full", "progress_root", className, classNames?.root),
+      role: "progressbar",
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": progressLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProgressLabel,
+          {
+            label,
+            showProgress,
+            clampedValue,
+            classNames
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-full rounded-full overflow-hidden flex gap-1",
+              progressContainerVariants({ size }),
+              "progress_track",
+              classNames?.track
+            ),
+            children: Array.from({ length: totalSteps }, (_, index) => {
+              const stepNumber = index + 1;
+              const isCompleted = stepNumber <= currentStep;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-full rounded-full transition-[width,height] flex-1",
+                    isCompleted ? barColorStyles[color][variant] : backgroundColorStyles[color][variant],
+                    animated && striped && "progress-shimmer",
+                    "progress_fill",
+                    classNames?.fill
+                  ),
+                  style: getStripedStyle(striped, isCompleted)
+                },
+                index
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+var LineProgress = ({
+  orientation = "horizontal",
+  size = "md",
+  color = "primary",
+  variant = "default",
+  label,
+  showProgress = false,
+  striped = false,
+  animated = false,
+  className,
+  classNames,
+  clampedValue,
+  progressLabel
+}) => {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "h-full flex flex-col",
+          "progress_root",
+          className,
+          classNames?.root
+        ),
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": progressLabel,
+        children: [
+          /* @__PURE__ */ jsx(
+            ProgressLabel,
+            {
+              label,
+              showProgress,
+              clampedValue,
+              classNames
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 rounded-full overflow-hidden flex flex-col justify-end",
+                getVerticalWidthClass(size),
+                backgroundColorStyles[color][variant],
+                "progress_track",
+                classNames?.track
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-full transition-[width,height] duration-300 ease-in-out rounded-full",
+                    barColorStyles[color][variant],
+                    animated && striped && "progress-shimmer",
+                    "progress_fill",
+                    classNames?.fill
+                  ),
+                  style: {
+                    height: `${clampedValue}%`,
+                    ...getStripedStyle(striped)
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full", "progress_root", className, classNames?.root),
+      role: "progressbar",
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": progressLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          ProgressLabel,
+          {
+            label,
+            showProgress,
+            clampedValue,
+            classNames
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              progressContainerVariants({ size }),
+              backgroundColorStyles[color][variant],
+              "progress_track",
+              classNames?.track
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  progressBarVariants({ size }),
+                  barColorStyles[color][variant],
+                  animated && striped && "progress-shimmer",
+                  "progress_fill",
+                  classNames?.fill
+                ),
+                style: {
+                  width: `${clampedValue}%`,
+                  ...getStripedStyle(striped)
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var Progress = React.memo(
+  ({
+    value,
+    color = "primary",
+    size = "md",
+    circleSize: customCircleSize,
+    strokeWidth: customStrokeWidth,
+    variant = "default",
+    type = "line",
+    orientation = "horizontal",
+    showProgress = false,
+    label,
+    striped = false,
+    animated = false,
+    className,
+    classNames,
+    totalSteps = 5,
+    "aria-label": ariaLabel
+  }) => {
+    const clampedValue = Math.min(Math.max(value, 0), 100);
+    const progressLabel = ariaLabel || label || "Progress";
+    if (type === "circle") {
+      return /* @__PURE__ */ jsx(
+        CircleProgress,
+        {
+          size,
+          circleSize: customCircleSize,
+          strokeWidth: customStrokeWidth,
+          color,
+          variant,
+          label,
+          className,
+          classNames,
+          clampedValue,
+          progressLabel
+        }
+      );
+    }
+    if (type === "step") {
+      return /* @__PURE__ */ jsx(
+        StepProgress,
+        {
+          orientation,
+          size,
+          color,
+          variant,
+          label,
+          showProgress,
+          striped,
+          animated,
+          className,
+          classNames,
+          totalSteps,
+          clampedValue,
+          progressLabel
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      LineProgress,
+      {
+        orientation,
+        size,
+        color,
+        variant,
+        label,
+        showProgress,
+        striped,
+        animated,
+        className,
+        classNames,
+        clampedValue,
+        progressLabel
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var progress_default = Progress;
+
+export { progress_default };
+//# sourceMappingURL=chunk-2TLOWZE4.js.map
+//# sourceMappingURL=chunk-2TLOWZE4.js.map