@wow-two-beta/ui 0.0.6 → 0.0.8

package/dist/chunk-RIW2V3N4.js

@@ -0,0 +1,596 @@
+import { tv } from './chunk-BMBIZLO4.js';
+import { Icon } from './chunk-TDX22OWF.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { X, Check, TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+// src/feedback/spinner/Spinner.variants.ts
+var spinnerVariants = tv({
+  base: "inline-block animate-spin rounded-full border-current border-b-transparent",
+  variants: {
+    size: {
+      xs: "h-3 w-3 border",
+      sm: "h-4 w-4 border-2",
+      md: "h-5 w-5 border-2",
+      lg: "h-8 w-8 border-2",
+      xl: "h-12 w-12 border-[3px]"
+    },
+    tone: {
+      default: "text-muted-foreground",
+      brand: "text-primary",
+      muted: "text-border",
+      current: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "default"
+  }
+});
+var Spinner = forwardRef(
+  ({ className, size, tone, label = "Loading", role = "status", ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, role, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: cn(spinnerVariants({ size, tone }), className) }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+  ] })
+);
+Spinner.displayName = "Spinner";
+
+// src/feedback/skeleton/Skeleton.variants.ts
+var skeletonVariants = tv({
+  base: "animate-pulse bg-muted",
+  variants: {
+    shape: {
+      rect: "rounded-md",
+      text: "h-4 rounded-sm",
+      circle: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    shape: "rect"
+  }
+});
+var Skeleton = forwardRef(
+  ({ className, shape, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(skeletonVariants({ shape }), className),
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+// src/feedback/progressBar/ProgressBar.variants.ts
+var progressTrackVariants = tv({
+  base: "h-2 w-full overflow-hidden rounded-full bg-muted",
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var progressFillVariants = tv({
+  base: "h-full rounded-full transition-[width] duration-300",
+  variants: {
+    tone: {
+      brand: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-destructive",
+      neutral: "bg-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    tone: "brand"
+  }
+});
+var ProgressBar = forwardRef(
+  ({ value, max = 100, size, tone, label, className, ...props }, ref) => {
+    const determinate = typeof value === "number";
+    const pct = determinate ? Math.min(100, Math.max(0, value / max * 100)) : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": determinate ? value : void 0,
+        className: cn(progressTrackVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              progressFillVariants({ tone }),
+              !determinate && "w-1/3 animate-[indeterminate_1.4s_ease-in-out_infinite]"
+            ),
+            style: determinate ? { width: `${pct}%` } : void 0
+          }
+        )
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+var TONE_CLASS = {
+  brand: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+  neutral: "text-muted-foreground"
+};
+var ProgressCircle = forwardRef(
+  ({ value, max = 100, size = 40, thickness = 4, tone = "brand", label, className, ...props }, ref) => {
+    const determinate = typeof value === "number";
+    const radius = (size - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const pct = determinate ? Math.min(100, Math.max(0, value / max * 100)) : 25;
+    const offset = circumference - pct / 100 * circumference;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": determinate ? value : void 0,
+        className: cn("inline-block", !determinate && "animate-spin", TONE_CLASS[tone], className),
+        style: { width: size, height: size },
+        ...props,
+        children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              stroke: "currentColor",
+              strokeWidth: thickness,
+              fill: "none",
+              opacity: 0.2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              stroke: "currentColor",
+              strokeWidth: thickness,
+              strokeLinecap: "round",
+              fill: "none",
+              strokeDasharray: circumference,
+              strokeDashoffset: offset,
+              transform: `rotate(-90 ${size / 2} ${size / 2})`,
+              style: { transition: "stroke-dashoffset 300ms ease" }
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+ProgressCircle.displayName = "ProgressCircle";
+
+// src/feedback/alertSimple/AlertSimple.variants.ts
+var alertSimpleVariants = tv({
+  base: "rounded-md border px-4 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "border-info-soft bg-info-soft text-info-soft-foreground",
+      success: "border-success-soft bg-success-soft text-success-soft-foreground",
+      warning: "border-warning-soft bg-warning-soft text-warning-soft-foreground",
+      danger: "border-destructive-soft bg-destructive-soft text-destructive-soft-foreground",
+      neutral: "border-border bg-muted text-foreground"
+    }
+  },
+  defaultVariants: {
+    severity: "info"
+  }
+});
+var AlertSimple = forwardRef(
+  ({ className, severity, role = "status", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(alertSimpleVariants({ severity }), className),
+      ...props
+    }
+  )
+);
+AlertSimple.displayName = "AlertSimple";
+
+// src/feedback/bannerSimple/BannerSimple.variants.ts
+var bannerSimpleVariants = tv({
+  base: "w-full px-6 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "bg-info text-info-foreground",
+      success: "bg-success text-success-foreground",
+      warning: "bg-warning text-warning-foreground",
+      danger: "bg-destructive text-destructive-foreground",
+      neutral: "bg-inverse text-inverse-foreground"
+    }
+  },
+  defaultVariants: {
+    severity: "info"
+  }
+});
+var BannerSimple = forwardRef(
+  ({ className, severity, role = "status", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(bannerSimpleVariants({ severity }), className),
+      ...props
+    }
+  )
+);
+BannerSimple.displayName = "BannerSimple";
+
+// src/feedback/toastSimple/ToastSimple.variants.ts
+var toastSimpleVariants = tv({
+  base: "pointer-events-auto rounded-md border bg-popover text-popover-foreground shadow-lg px-4 py-3 text-sm",
+  variants: {
+    severity: {
+      info: "border-info-soft",
+      success: "border-success-soft",
+      warning: "border-warning-soft",
+      danger: "border-destructive-soft",
+      neutral: "border-border"
+    }
+  },
+  defaultVariants: {
+    severity: "neutral"
+  }
+});
+var ToastSimple = forwardRef(
+  ({ className, severity, role = "status", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role,
+      "aria-live": "polite",
+      className: cn(toastSimpleVariants({ severity }), className),
+      ...props
+    }
+  )
+);
+ToastSimple.displayName = "ToastSimple";
+var Alert = forwardRef(
+  ({ icon, title, description, actions, onClose, closeLabel = "Dismiss", severity, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    AlertSimple,
+    {
+      ref,
+      severity,
+      className: cn("flex items-start gap-3", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: cn("text-sm", title && "mt-0.5 opacity-90"), children: description }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: actions })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeLabel,
+            onClick: onClose,
+            className: "-mr-1 grid h-6 w-6 shrink-0 place-items-center rounded text-current opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 14 })
+          }
+        )
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+var Banner = forwardRef(
+  ({ icon, title, description, actions, onClose, closeLabel = "Dismiss", severity, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    BannerSimple,
+    {
+      ref,
+      severity,
+      className: cn("flex items-center gap-4", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsx("span", { className: "opacity-90", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeLabel,
+            onClick: onClose,
+            className: "-mr-2 grid h-7 w-7 shrink-0 place-items-center rounded text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 16 })
+          }
+        )
+      ]
+    }
+  )
+);
+Banner.displayName = "Banner";
+var Toast = forwardRef(
+  ({ icon, title, description, actions, onClose, closeLabel = "Dismiss", severity, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    ToastSimple,
+    {
+      ref,
+      severity,
+      className: cn("flex items-start gap-3", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: cn("text-sm", title && "mt-0.5 text-muted-foreground"), children: description }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: actions })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeLabel,
+            onClick: onClose,
+            className: "-mr-1 grid h-6 w-6 shrink-0 place-items-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 14 })
+          }
+        )
+      ]
+    }
+  )
+);
+Toast.displayName = "Toast";
+var SEVERITY = {
+  info: "border-l-info text-foreground",
+  success: "border-l-success text-foreground",
+  warning: "border-l-warning text-foreground",
+  danger: "border-l-destructive text-foreground",
+  neutral: "border-l-border text-foreground"
+};
+var Callout = forwardRef(
+  ({ severity = "info", icon, title, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-start gap-3 rounded-md border-l-4 bg-card px-4 py-3 text-sm",
+        SEVERITY[severity],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "mb-0.5 font-medium", children: title }),
+          children
+        ] })
+      ]
+    }
+  )
+);
+Callout.displayName = "Callout";
+var InlineSpinner = forwardRef(
+  ({ children = "Loading\u2026", size = "sm", tone = "default", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-2 text-sm text-muted-foreground", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size, tone }),
+        children
+      ]
+    }
+  )
+);
+InlineSpinner.displayName = "InlineSpinner";
+var LoadingState = forwardRef(
+  ({ title = "Loading\u2026", description, size = "lg", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size, tone: "brand" }),
+        title && /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description })
+      ]
+    }
+  )
+);
+LoadingState.displayName = "LoadingState";
+var ProgressSteps = forwardRef(
+  ({ steps, current, orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex",
+        orientation === "horizontal" ? "flex-row items-center gap-2" : "flex-col gap-3",
+        className
+      ),
+      ...props,
+      children: steps.map((label, i) => {
+        const status = i < current ? "complete" : i === current ? "current" : "upcoming";
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-2",
+              orientation === "horizontal" && i < steps.length - 1 && "flex-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "grid h-7 w-7 place-items-center rounded-full text-xs font-medium",
+                    status === "complete" && "bg-primary text-primary-foreground",
+                    status === "current" && "border-2 border-primary text-primary",
+                    status === "upcoming" && "border border-border text-muted-foreground"
+                  ),
+                  "aria-current": status === "current" ? "step" : void 0,
+                  children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { icon: Check, size: 14 }) : i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm",
+                    status === "upcoming" ? "text-muted-foreground" : "text-foreground"
+                  ),
+                  children: label
+                }
+              ),
+              orientation === "horizontal" && i < steps.length - 1 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "h-px flex-1",
+                    i < current ? "bg-primary" : "bg-border"
+                  ),
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          },
+          i
+        );
+      })
+    }
+  )
+);
+ProgressSteps.displayName = "ProgressSteps";
+var TONE = {
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+  neutral: "bg-muted-foreground"
+};
+var StatusIndicator = forwardRef(
+  ({ tone = "success", label, description, pulse, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative mt-1 inline-flex", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("inline-block h-2.5 w-2.5 rounded-full", TONE[tone]) }),
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 inline-block rounded-full opacity-75 animate-ping",
+                TONE[tone]
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: label }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  )
+);
+StatusIndicator.displayName = "StatusIndicator";
+var SIZE = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var MeterBar = forwardRef(
+  ({ value, max = 100, thresholds, size = "md", label, className, ...props }, ref) => {
+    const [good, warn] = thresholds ?? [max * 0.7, max * 0.9];
+    const tone = value <= good ? "bg-success" : value <= warn ? "bg-warning" : "bg-destructive";
+    const pct = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "meter",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        className: cn("w-full overflow-hidden rounded-full bg-muted", SIZE[size], className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-[width] duration-300", tone),
+            style: { width: `${pct}%` }
+          }
+        )
+      }
+    );
+  }
+);
+MeterBar.displayName = "MeterBar";
+var SIZE_TEXT = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base"
+};
+var SIZE_ICON = {
+  xs: 12,
+  sm: 14,
+  md: 16
+};
+var TrendIndicator = forwardRef(
+  ({ value, format, inverse, label, size = "sm", className, ...props }, ref) => {
+    const direction = value > 0 ? "up" : value < 0 ? "down" : "flat";
+    const positive = direction === "flat" ? false : direction === "up" !== Boolean(inverse);
+    const tone = direction === "flat" ? "text-muted-foreground" : positive ? "text-success" : "text-destructive";
+    const arrow = direction === "up" ? TrendingUp : direction === "down" ? TrendingDown : Minus;
+    const display = format ? format(value) : `${value > 0 ? "+" : ""}${value}%`;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-1 font-medium", SIZE_TEXT[size], tone, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: arrow, size: SIZE_ICON[size] }),
+          display,
+          label && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            " ",
+            label
+          ] })
+        ]
+      }
+    );
+  }
+);
+TrendIndicator.displayName = "TrendIndicator";
+
+export { Alert, AlertSimple, Banner, BannerSimple, Callout, InlineSpinner, LoadingState, MeterBar, ProgressBar, ProgressCircle, ProgressSteps, Skeleton, Spinner, StatusIndicator, Toast, ToastSimple, TrendIndicator, alertSimpleVariants, bannerSimpleVariants, progressFillVariants, progressTrackVariants, skeletonVariants, spinnerVariants, toastSimpleVariants };
+//# sourceMappingURL=chunk-RIW2V3N4.js.map
+//# sourceMappingURL=chunk-RIW2V3N4.js.map