@underverse-ui/underverse 0.1.13 → 0.1.15

package/dist/index.js

@@ -1440,6 +1440,148 @@ var Skeleton = ({
     }
   );
 };
+var SkeletonAvatar = ({
+  size = "md",
+  className
+}) => {
+  const sizeClasses2 = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12"
+  };
+  return /* @__PURE__ */ jsx10(
+    Skeleton,
+    {
+      variant: "circular",
+      className: cn(sizeClasses2[size], className)
+    }
+  );
+};
+var SkeletonButton = ({
+  size = "md",
+  className
+}) => {
+  const sizeClasses2 = {
+    sm: "h-8 w-20",
+    md: "h-10 w-24",
+    lg: "h-12 w-28"
+  };
+  return /* @__PURE__ */ jsx10(
+    Skeleton,
+    {
+      variant: "rounded",
+      className: cn(sizeClasses2[size], className)
+    }
+  );
+};
+var SkeletonText = ({
+  lines = 3,
+  className,
+  width = "100%"
+}) => {
+  return /* @__PURE__ */ jsx10(
+    Skeleton,
+    {
+      variant: "text",
+      lines,
+      width,
+      className
+    }
+  );
+};
+var SkeletonCard = ({
+  showAvatar = true,
+  showImage = false,
+  textLines = 3,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("p-4 space-y-4 rounded-lg border bg-card", className), children: [
+    showAvatar && /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsx10(SkeletonAvatar, {}),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-16" })
+      ] })
+    ] }),
+    showImage && /* @__PURE__ */ jsx10(Skeleton, { className: "h-48 w-full rounded-md" }),
+    /* @__PURE__ */ jsx10(SkeletonText, { lines: textLines }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ jsx10(SkeletonButton, { size: "sm" }),
+      /* @__PURE__ */ jsx10(SkeletonButton, { size: "sm" })
+    ] })
+  ] });
+};
+var SkeletonPost = ({ className }) => {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("p-6 space-y-4 rounded-xl border bg-card", className), children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsx10(SkeletonAvatar, { size: "lg" }),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-20" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10(SkeletonText, { lines: 2 }),
+    /* @__PURE__ */ jsx10(Skeleton, { className: "h-64 w-full rounded-lg" }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-16" }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-20" }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-12" })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-between pt-2 border-t border-border", children: /* @__PURE__ */ jsxs9("div", { className: "flex space-x-4", children: [
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-8 w-16" }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-8 w-20" }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-8 w-16" })
+    ] }) })
+  ] });
+};
+var SkeletonMessage = ({
+  own = false,
+  showAvatar = true,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs9("div", { className: cn(
+    "flex items-end space-x-2",
+    own && "flex-row-reverse space-x-reverse",
+    className
+  ), children: [
+    showAvatar && !own && /* @__PURE__ */ jsx10(SkeletonAvatar, { size: "sm" }),
+    /* @__PURE__ */ jsxs9("div", { className: cn(
+      "max-w-xs space-y-1",
+      own ? "items-end" : "items-start"
+    ), children: [
+      /* @__PURE__ */ jsx10(Skeleton, { className: cn(
+        "h-10 rounded-2xl",
+        own ? "w-32 bg-primary/20" : "w-40 bg-muted"
+      ) }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-12" })
+    ] })
+  ] });
+};
+var SkeletonList = ({
+  items = 5,
+  itemHeight = 60,
+  showAvatar = true,
+  className
+}) => {
+  return /* @__PURE__ */ jsx10("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-3 p-3 rounded-lg", children: [
+    showAvatar && /* @__PURE__ */ jsx10(SkeletonAvatar, {}),
+    /* @__PURE__ */ jsxs9("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ jsx10(Skeleton, { className: "h-3 w-1/2" })
+    ] }),
+    /* @__PURE__ */ jsx10(Skeleton, { className: "h-6 w-16" })
+  ] }, index)) });
+};
+var SkeletonTable = ({
+  rows = 5,
+  columns = 4,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx10("div", { className: "flex space-x-4 p-3 border-b border-border", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 flex-1" }, index)) }),
+    Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx10("div", { className: "flex space-x-4 p-3", children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 flex-1" }, colIndex)) }, rowIndex))
+  ] });
+};
 var Skeleton_default = Skeleton;
 
 // ../../components/ui/Progress.tsx
@@ -1538,7 +1680,356 @@ var Progress = ({
     )
   ] });
 };
-var Progress_default = Progress;
+var CircularProgress = ({
+  value,
+  max = 100,
+  size = 64,
+  strokeWidth = 4,
+  className,
+  variant = "primary",
+  showValue = false,
+  children,
+  indeterminate = false,
+  status = "normal",
+  trackColor = "stroke-muted/20"
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * Math.PI * 2;
+  const offset = circumference - percentage / 100 * circumference;
+  const isComplete = status === "complete" || percentage >= 100;
+  const isError = status === "error";
+  const variantColors = {
+    default: "stroke-muted-foreground",
+    primary: "stroke-primary",
+    success: "stroke-success",
+    warning: "stroke-warning",
+    danger: "stroke-destructive",
+    info: "stroke-info"
+  };
+  const getContentIcon = () => {
+    if (isComplete) return /* @__PURE__ */ jsx11(Check2, { className: "w-5 h-5 text-success" });
+    if (isError) return /* @__PURE__ */ jsx11(X2, { className: "w-5 h-5 text-destructive" });
+    return null;
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn("relative inline-flex items-center justify-center", className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": indeterminate ? void 0 : max,
+      "aria-valuenow": indeterminate ? void 0 : Math.round(percentage),
+      "aria-label": children ? void 0 : "Progress",
+      children: [
+        /* @__PURE__ */ jsxs10(
+          "svg",
+          {
+            width: size,
+            height: size,
+            className: cn(
+              "transform -rotate-90",
+              indeterminate && "animate-spin"
+            ),
+            style: { animationDuration: indeterminate ? "2s" : void 0 },
+            children: [
+              /* @__PURE__ */ jsx11(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  stroke: "currentColor",
+                  strokeWidth,
+                  fill: "transparent",
+                  className: trackColor
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  strokeWidth,
+                  fill: "transparent",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: indeterminate ? circumference * 0.25 : offset,
+                  className: cn(
+                    "transition-all duration-700 ease-out",
+                    isComplete ? "stroke-success" : isError ? "stroke-destructive" : variantColors[variant],
+                    "drop-shadow-sm"
+                  ),
+                  strokeLinecap: "round",
+                  style: {
+                    filter: `drop-shadow(0 0 4px ${isComplete ? "hsl(var(--success) / 0.3)" : isError ? "hsl(var(--destructive) / 0.3)" : "hsl(var(--primary) / 0.2)"})`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center", children: children ? children : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          getContentIcon(),
+          showValue && !indeterminate && /* @__PURE__ */ jsx11("span", { className: cn(
+            "text-sm font-semibold",
+            isComplete ? "text-success" : isError ? "text-destructive" : "text-foreground"
+          ), children: isComplete ? "\u2713" : isError ? "\u2717" : `${Math.round(percentage)}%` }),
+          indeterminate && /* @__PURE__ */ jsx11(Clock, { className: "w-4 h-4 text-muted-foreground animate-pulse" })
+        ] }) })
+      ]
+    }
+  );
+};
+var StepProgress = ({
+  steps,
+  currentStep,
+  className,
+  variant = "primary",
+  size = "md"
+}) => {
+  const stepSizes = {
+    sm: "w-6 h-6 text-xs",
+    md: "w-8 h-8 text-sm",
+    lg: "w-10 h-10 text-base"
+  };
+  const getStepStatus = (stepIndex) => {
+    if (stepIndex < currentStep) return "completed";
+    if (stepIndex === currentStep) return "current";
+    return "upcoming";
+  };
+  return /* @__PURE__ */ jsx11("div", { className: cn("w-full", className), role: "list", "aria-label": "Progress steps", children: /* @__PURE__ */ jsx11("div", { className: "flex items-center justify-between", children: steps.map((step, index) => {
+    const status = getStepStatus(index);
+    return /* @__PURE__ */ jsxs10("div", { className: "flex items-center", role: "listitem", "aria-current": status === "current" ? "step" : void 0, children: [
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: cn(
+            "rounded-full border-2 flex items-center justify-center font-medium transition-all duration-300",
+            "shadow-sm hover:shadow-md",
+            stepSizes[size],
+            status === "completed" && [
+              "border-success bg-success text-success-foreground",
+              "shadow-success/20"
+            ],
+            status === "current" && [
+              "border-primary bg-primary/10 text-primary",
+              "ring-2 ring-primary/20 ring-offset-2",
+              "shadow-primary/20"
+            ],
+            status === "upcoming" && [
+              "border-muted-foreground/30 text-muted-foreground bg-background",
+              "hover:border-muted-foreground/50"
+            ]
+          ),
+          children: status === "completed" ? /* @__PURE__ */ jsx11(Check2, { className: "w-3 h-3" }) : index + 1
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: cn(
+            "ml-2 text-sm font-medium transition-colors duration-200",
+            status === "completed" && variantStyles2[variant].replace("bg-", "text-"),
+            status === "current" && "text-foreground",
+            status === "upcoming" && "text-muted-foreground"
+          ),
+          children: step
+        }
+      ),
+      index < steps.length - 1 && /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: cn(
+            "flex-1 h-0.5 mx-4 transition-colors duration-200",
+            index < currentStep ? variantStyles2[variant] : "bg-muted"
+          )
+        }
+      )
+    ] }, step);
+  }) }) });
+};
+var MiniProgress = ({
+  value,
+  max = 100,
+  className,
+  variant = "primary",
+  showValue = false
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "flex-1 h-1.5 bg-muted/50 rounded-full overflow-hidden",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.round(percentage),
+        children: /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: cn(
+              "h-full transition-all duration-500 ease-out rounded-full",
+              variantStyles2[variant]
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    showValue && /* @__PURE__ */ jsxs10("span", { className: "text-xs font-medium text-muted-foreground min-w-[2.5rem] text-right", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+};
+var BatteryProgress = ({
+  value,
+  max = 100,
+  className,
+  charging = false,
+  showValue = false
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const getVariant = () => {
+    if (charging) return "info";
+    if (percentage <= 20) return "danger";
+    if (percentage <= 50) return "warning";
+    return "success";
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "relative", role: "progressbar", "aria-label": "Battery level", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.round(percentage), children: [
+      /* @__PURE__ */ jsxs10("div", { className: "w-6 h-3 border-2 border-foreground/20 rounded-sm relative", children: [
+        /* @__PURE__ */ jsx11("div", { className: "absolute -right-1 top-0.5 w-0.5 h-1 bg-foreground/20 rounded-r-sm" }),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: cn(
+              "h-full transition-all duration-500 ease-out rounded-sm",
+              variantStyles2[getVariant()],
+              charging && "animate-pulse"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      ] }),
+      charging && /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx11("div", { className: "w-2 h-2 text-info-foreground", children: "\u26A1" }) })
+    ] }),
+    showValue && /* @__PURE__ */ jsxs10("span", { className: cn(
+      "text-xs font-medium",
+      percentage <= 20 ? "text-destructive" : "text-muted-foreground"
+    ), children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+};
+var SegmentedProgress = ({
+  segments,
+  activeSegments,
+  className,
+  variant = "primary",
+  size = "md"
+}) => {
+  const segmentSizes = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cn("flex gap-1", className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": segments,
+      "aria-valuenow": activeSegments,
+      children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: cn(
+            "flex-1 rounded-full transition-all duration-300",
+            segmentSizes[size],
+            index < activeSegments ? variantStyles2[variant] : "bg-muted/50"
+          )
+        },
+        index
+      ))
+    }
+  );
+};
+var LoadingProgress = ({
+  value,
+  max = 100,
+  className,
+  variant = "primary",
+  label,
+  status = "loading",
+  speed,
+  timeRemaining
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const getStatusIcon = () => {
+    switch (status) {
+      case "complete":
+        return /* @__PURE__ */ jsx11(Check2, { className: "w-4 h-4 text-success" });
+      case "error":
+        return /* @__PURE__ */ jsx11(X2, { className: "w-4 h-4 text-destructive" });
+      case "paused":
+        return /* @__PURE__ */ jsx11(Clock, { className: "w-4 h-4 text-warning" });
+      default:
+        return /* @__PURE__ */ jsx11("div", { className: "w-2 h-2 bg-primary rounded-full animate-bounce" });
+    }
+  };
+  const getStatusColor = () => {
+    switch (status) {
+      case "complete":
+        return "success";
+      case "error":
+        return "danger";
+      case "paused":
+        return "warning";
+      default:
+        return variant;
+    }
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cn("w-full space-y-2", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+        getStatusIcon(),
+        label && /* @__PURE__ */ jsx11("span", { className: "font-medium text-foreground", children: label })
+      ] }),
+      /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: status === "complete" ? "Complete" : `${Math.round(percentage)}%` })
+    ] }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "w-full h-2 bg-muted/50 rounded-full overflow-hidden",
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.round(percentage),
+        "aria-label": label || "Loading progress",
+        children: /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: cn(
+              "h-full transition-all duration-300 ease-out rounded-full",
+              variantStyles2[getStatusColor()],
+              status === "loading" && "animate-pulse"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    (speed || timeRemaining) && /* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
+      speed && /* @__PURE__ */ jsx11("span", { children: speed }),
+      timeRemaining && /* @__PURE__ */ jsx11("span", { children: timeRemaining })
+    ] })
+  ] });
+};
 
 // ../../components/ui/Modal.tsx
 import * as React9 from "react";
@@ -3254,6 +3745,31 @@ var DropdownMenuItem = ({ children, onClick, disabled, destructive, className })
     children
   }
 );
+var DropdownMenuSeparator = ({ className }) => /* @__PURE__ */ jsx22("div", { className: cn("h-px bg-border my-1", className) });
+var SelectDropdown = ({ options, value, onChange, placeholder = "Select...", className }) => /* @__PURE__ */ jsx22(
+  DropdownMenu,
+  {
+    trigger: /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        className: cn(
+          "inline-flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-md border bg-background",
+          "hover:bg-accent/50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx22("span", { className: "truncate max-w-[16rem] text-foreground/90", children: value || placeholder }),
+          /* @__PURE__ */ jsx22("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", className: "opacity-70", children: /* @__PURE__ */ jsx22("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
+      }
+    ),
+    items: options.map((option) => ({
+      label: option,
+      onClick: () => onChange(option)
+    }))
+  }
+);
 var DropdownMenu_default = DropdownMenu;
 
 // ../../components/ui/Pagination.tsx
@@ -5109,7 +5625,6 @@ var RadioGroupItem = React23.forwardRef(
   }
 );
 RadioGroupItem.displayName = "RadioGroupItem";
-var RadioGroup_default = RadioGroup;
 
 // ../../components/ui/Slider.tsx
 import * as React24 from "react";
@@ -8047,11 +8562,15 @@ var useFormField = () => {
   const fieldContext = React31.useContext(FormFieldContext);
   const itemContext = React31.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
-  const t = useTranslations8("Form");
-  const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
-    throw new Error(t("validation.mustBeUsedWithinForm"));
+    try {
+      const t = useTranslations8("Form");
+      throw new Error(t("validation.mustBeUsedWithinForm"));
+    } catch {
+      throw new Error("useFormField must be used within FormField");
+    }
   }
+  const fieldState = getFieldState(fieldContext.name, formState);
   const { id } = itemContext;
   return {
     id,
@@ -8815,6 +9334,7 @@ export {
   Avatar_default as Avatar,
   Badge_default as Badge,
   Badge as BadgeBase,
+  BatteryProgress,
   BottomSheet,
   Breadcrumb_default as Breadcrumb,
   Button_default as Button,
@@ -8823,6 +9343,7 @@ export {
   Carousel,
   CategoryTreeSelect,
   Checkbox,
+  CircularProgress,
   ClientOnly,
   Combobox,
   CompactPagination,
@@ -8832,6 +9353,8 @@ export {
   date_exports as DateUtils,
   Drawer,
   DropdownMenu_default as DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
   FloatingContacts,
   Form,
   FormActions,
@@ -8855,7 +9378,9 @@ export {
   LanguageSwitcherHeadless,
   LoadingBar,
   LoadingDots,
+  LoadingProgress,
   LoadingSpinner,
+  MiniProgress,
   Modal_default as Modal,
   MultiCombobox,
   NotificationBadge,
@@ -8866,21 +9391,34 @@ export {
   PasswordInput,
   PillTabs,
   Popover,
-  Progress_default as Progress,
+  Progress,
   PulseBadge,
-  RadioGroup_default as RadioGroup,
+  RadioGroup,
+  RadioGroupItem,
   SIZE_STYLES_BTN,
   ScrollArea,
+  SearchInput,
   Section_default as Section,
+  SegmentedProgress,
+  SelectDropdown,
   Sheet,
   SidebarSheet,
   SimplePagination,
   SimpleTabs,
   Skeleton_default as Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonList,
+  SkeletonMessage,
+  SkeletonPost,
+  SkeletonTable,
+  SkeletonText,
   SlideOver,
   Slider,
   SmartImage,
   StatusBadge,
+  StepProgress,
   Switch_default as Switch,
   Table,
   TableBody,