@yuva-devlab/ui 1.3.1 → 1.4.0

package/dist/index.cjs

@@ -111,6 +111,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  CopyButton: () => CopyButton,
   DatePicker: () => DatePicker,
   Dialog: () => Dialog,
   DialogBody: () => DialogBody,
@@ -181,6 +182,8 @@ __export(index_exports, {
   MenubarSubContent: () => MenubarSubContent,
   MenubarSubTrigger: () => MenubarSubTrigger,
   MenubarTrigger: () => MenubarTrigger,
+  MetricCard: () => MetricCard,
+  MetricsGrid: () => MetricsGrid,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuIndicator: () => NavigationMenuIndicator,
@@ -210,6 +213,7 @@ __export(index_exports, {
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
   SearchableSelect: () => SearchableSelect,
+  SecretRevealCard: () => SecretRevealCard,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -1930,12 +1934,16 @@ var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority4.cva)("dl-label");
-var Label3 = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var Label3 = React21.forwardRef(({ className, children, required = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
   LabelPrimitive.Root,
   {
     ref,
     className: cn(labelVariants(), className),
-    ...props
+    ...props,
+    children: [
+      children,
+      required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "dl-label-required text-destructive ml-0.5", children: "*" })
+    ]
   }
 ));
 Label3.displayName = LabelPrimitive.Root.displayName;
@@ -3621,12 +3629,37 @@ var Slider = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/sonner/sonner.tsx
+var import_react2 = require("react");
 var import_sonner = require("sonner");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var Toaster = ({ ...props }) => {
+var Toaster = ({ theme: propTheme, ...props }) => {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react2.useState)("system");
+  (0, import_react2.useEffect)(() => {
+    if (propTheme) return;
+    const root = document.documentElement;
+    const detect = () => {
+      const isDark = root.classList.contains("dark") || (root.getAttribute("data-theme")?.includes("dark") ?? false);
+      const isLight = root.classList.contains("light") || (root.getAttribute("data-theme")?.includes("light") ?? false);
+      if (isDark) {
+        setResolvedTheme("dark");
+      } else if (isLight) {
+        setResolvedTheme("light");
+      } else {
+        setResolvedTheme("system");
+      }
+    };
+    detect();
+    const observer = new MutationObserver(detect);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, [propTheme]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_sonner.Toaster,
     {
+      theme: propTheme ?? resolvedTheme,
       className: "dl-toaster",
       toastOptions: {
         classNames: {
@@ -3642,7 +3675,7 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/status-badge/status-badge.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var statusCategoryMap = {
   Completed: "dl-status-badge--success",
@@ -3663,7 +3696,7 @@ var statusCategoryMap = {
   DISABLED: "dl-status-badge--muted",
   IDLE: "dl-status-badge--muted"
 };
-var StatusBadge = React40.forwardRef(
+var StatusBadge = React41.forwardRef(
   ({ status, className, ...props }, ref) => {
     const normalizedStatus = status?.trim() ?? "";
     const colorClass = statusCategoryMap[normalizedStatus] ?? "dl-status-badge--muted";
@@ -3684,7 +3717,7 @@ var StatusBadge = React40.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/status-chip/status-chip.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var statusToneMap = {
   active: "dl-status-chip--primary",
@@ -3707,7 +3740,7 @@ var statusToneMap = {
   error: "dl-status-chip--destructive",
   offline: "dl-status-chip--destructive"
 };
-var StatusChip = React41.forwardRef(
+var StatusChip = React42.forwardRef(
   ({ status, className, ...props }, ref) => {
     const toneClass = statusToneMap[status] ?? "dl-status-chip--muted";
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -3727,10 +3760,10 @@ var StatusChip = React41.forwardRef(
 StatusChip.displayName = "StatusChip";
 
 // src/components/switch/switch.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var Switch = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var Switch = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   SwitchPrimitives.Root,
   {
     className: cn("dl-switch", className),
@@ -3742,37 +3775,37 @@ var Switch = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table/table.tsx
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var Table = React43.forwardRef(
+var Table = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("table", { ref, className: cn("dl-table", className), ...props }) })
 );
 Table.displayName = "Table";
-var TableHeader = React43.forwardRef(
+var TableHeader = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { ref, className: cn("dl-table__head", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React43.forwardRef(
+var TableBody = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { ref, className: cn("dl-table__body", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React43.forwardRef(
+var TableFooter = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tfoot", { ref, className: cn("dl-table__foot", className), ...props })
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React43.forwardRef(
+var TableRow = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { ref, className: cn("dl-table__row", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React43.forwardRef(
+var TableHead = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { ref, className: cn("dl-table__head-cell", className), ...props })
 );
 TableHead.displayName = "TableHead";
-var TableCell = React43.forwardRef(
+var TableCell = React44.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { ref, className: cn("dl-table__cell", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var TableCaption = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   "caption",
   {
     ref,
@@ -3783,11 +3816,11 @@ var TableCaption = React43.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/tabs/tabs.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
-var TabsList = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsList = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.List,
   {
     ref,
@@ -3796,7 +3829,7 @@ var TabsList = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsTrigger = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3805,7 +3838,7 @@ var TabsTrigger = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   TabsPrimitive.Content,
   {
     ref,
@@ -3816,15 +3849,15 @@ var TabsContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/textarea/textarea.tsx
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var Textarea = React45.forwardRef(
+var Textarea = React46.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("textarea", { className: cn("dl-textarea", className), ref, ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/toggle/toggle.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"), 1);
 var import_class_variance_authority8 = require("class-variance-authority");
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -3845,7 +3878,7 @@ var toggleVariants = (0, import_class_variance_authority8.cva)("dl-toggle", {
     size: "default"
   }
 });
-var Toggle = React46.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var Toggle = React47.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   TogglePrimitive.Root,
   {
     ref,
@@ -3856,14 +3889,14 @@ var Toggle = React46.forwardRef(({ className, variant, size, ...props }, ref) =>
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 // src/components/toggle-group/toggle-group.tsx
-var React47 = __toESM(require("react"), 1);
+var React48 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var ToggleGroupContext = React47.createContext({
+var ToggleGroupContext = React48.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React47.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var ToggleGroup = React48.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
@@ -3873,8 +3906,8 @@ var ToggleGroup = React47.forwardRef(({ className, variant, size, children, ...p
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React47.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React47.useContext(ToggleGroupContext);
+var ToggleGroupItem = React48.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React48.useContext(ToggleGroupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     ToggleGroupPrimitive.Item,
     {
@@ -3892,6 +3925,112 @@ var ToggleGroupItem = React47.forwardRef(({ className, children, variant, size,
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+// src/components/metric-card/metric-card.tsx
+var React49 = __toESM(require("react"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var MetricCard = React49.forwardRef(
+  ({ label, value, note, positive, icon, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ref, className: cn("dl-metric-card", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "dl-metric-card__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__label", children: label }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__icon", children: icon })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "dl-metric-card__value-row", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dl-metric-card__value", children: value }) }),
+      note && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "div",
+        {
+          className: cn(
+            "dl-metric-card__note",
+            positive === true && "dl-metric-card__note--positive",
+            positive === false && "dl-metric-card__note--negative"
+          ),
+          children: note
+        }
+      )
+    ] });
+  }
+);
+MetricCard.displayName = "MetricCard";
+var MetricsGrid = React49.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref, className: cn("dl-metrics-grid", className), ...props, children });
+  }
+);
+MetricsGrid.displayName = "MetricsGrid";
+
+// src/components/copy-button/copy-button.tsx
+var React50 = __toESM(require("react"), 1);
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var CopyButton = React50.forwardRef(
+  ({
+    textToCopy,
+    label = "Copy",
+    copiedLabel = "Copied",
+    resetTimeoutMs = 2e3,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const [isCopied, setIsCopied] = React50.useState(false);
+    const handleCopy = async (e) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), resetTimeoutMs);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "dl-copy-button",
+          isCopied && "dl-copy-button--copied",
+          className
+        ),
+        onClick: handleCopy,
+        ...props,
+        children: [
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Check, { className: "dl-copy-button__icon" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Copy, { className: "dl-copy-button__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: isCopied ? copiedLabel : label })
+        ]
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+
+// src/components/secret-reveal-card/secret-reveal-card.tsx
+var React51 = __toESM(require("react"), 1);
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var SecretRevealCard = React51.forwardRef(
+  ({
+    secret,
+    warningMessage = "One-time reveal. Please copy and store this credential securely before closing.",
+    copyLabel = "Copy Secret",
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: cn("dl-secret-reveal", className), ...props, children: [
+      warningMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "dl-secret-reveal__warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react22.AlertTriangle, { className: "shrink-0 size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: warningMessage })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "dl-secret-reveal__code-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("code", { className: "dl-secret-reveal__code", children: secret }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CopyButton, { textToCopy: secret, label: copyLabel })
+      ] })
+    ] });
+  }
+);
+SecretRevealCard.displayName = "SecretRevealCard";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -3974,6 +4113,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  CopyButton,
   DatePicker,
   Dialog,
   DialogBody,
@@ -4044,6 +4184,8 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  MetricCard,
+  MetricsGrid,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,
@@ -4073,6 +4215,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
   ScrollArea,
   ScrollBar,
   SearchableSelect,
+  SecretRevealCard,
   Select,
   SelectContent,
   SelectGroup,