@yuva-devlab/ui 1.3.0 → 1.3.2

package/dist/components/sonner/sonner.css

@@ -1,25 +1,54 @@
 .dl-toaster {
   font-family: inherit;
+  --normal-bg: var(--card, var(--background));
+  --normal-text: var(--card-foreground, var(--foreground));
+  --normal-border: var(--border);
 }
 
-.dl-toast {
+[data-sonner-toaster][data-sonner-theme="dark"],
+.dark [data-sonner-toaster],
+[data-theme*="dark"] [data-sonner-toaster] {
+  --normal-bg: var(--card, var(--background));
+  --normal-text: var(--card-foreground, var(--foreground));
+  --normal-border: var(--border);
+}
+
+[data-sonner-toaster][data-sonner-theme="light"],
+.light [data-sonner-toaster],
+[data-theme*="light"] [data-sonner-toaster] {
+  --normal-bg: var(--card, var(--background));
+  --normal-text: var(--card-foreground, var(--foreground));
+  --normal-border: var(--border);
+}
+
+.dl-toaster .dl-toast,
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
   border-radius: var(--radius-md, 0.375rem);
   border: 1px solid var(--border);
-  background-color: var(--background);
-  color: var(--foreground);
+  background-color: var(--card, var(--background));
+  color: var(--card-foreground, var(--foreground));
   box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
 }
 
-.dl-toast__desc {
+.dl-toaster .dl-toast__desc,
+[data-sonner-toaster] [data-sonner-toast] [data-description] {
   color: var(--muted-foreground);
 }
 
-.dl-toast__action {
+.dl-toaster .dl-toast__action,
+[data-sonner-toaster] [data-sonner-toast] [data-button] {
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
 
-.dl-toast__cancel {
+.dl-toaster .dl-toast__cancel,
+[data-sonner-toaster] [data-sonner-toast] [data-cancel] {
   background-color: var(--muted);
   color: var(--muted-foreground);
 }
+
+[data-sonner-toaster] [data-sonner-toast] [data-close-button] {
+  background-color: var(--card, var(--background));
+  border-color: var(--border);
+  color: var(--card-foreground, var(--foreground));
+}

package/dist/components.css

@@ -2204,30 +2204,59 @@
   /* ── sonner ── */
   .dl-toaster {
     font-family: inherit;
+    --normal-bg: var(--card, var(--background));
+    --normal-text: var(--card-foreground, var(--foreground));
+    --normal-border: var(--border);
   }
 
-  .dl-toast {
+  [data-sonner-toaster][data-sonner-theme="dark"],
+  .dark [data-sonner-toaster],
+  [data-theme*="dark"] [data-sonner-toaster] {
+    --normal-bg: var(--card, var(--background));
+    --normal-text: var(--card-foreground, var(--foreground));
+    --normal-border: var(--border);
+  }
+
+  [data-sonner-toaster][data-sonner-theme="light"],
+  .light [data-sonner-toaster],
+  [data-theme*="light"] [data-sonner-toaster] {
+    --normal-bg: var(--card, var(--background));
+    --normal-text: var(--card-foreground, var(--foreground));
+    --normal-border: var(--border);
+  }
+
+  .dl-toaster .dl-toast,
+  [data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
     border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--border);
-    background-color: var(--background);
-    color: var(--foreground);
+    background-color: var(--card, var(--background));
+    color: var(--card-foreground, var(--foreground));
     box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
   }
 
-  .dl-toast__desc {
+  .dl-toaster .dl-toast__desc,
+  [data-sonner-toaster] [data-sonner-toast] [data-description] {
     color: var(--muted-foreground);
   }
 
-  .dl-toast__action {
+  .dl-toaster .dl-toast__action,
+  [data-sonner-toaster] [data-sonner-toast] [data-button] {
     background-color: var(--primary);
     color: var(--primary-foreground);
   }
 
-  .dl-toast__cancel {
+  .dl-toaster .dl-toast__cancel,
+  [data-sonner-toaster] [data-sonner-toast] [data-cancel] {
     background-color: var(--muted);
     color: var(--muted-foreground);
   }
 
+  [data-sonner-toaster] [data-sonner-toast] [data-close-button] {
+    background-color: var(--card, var(--background));
+    border-color: var(--border);
+    color: var(--card-foreground, var(--foreground));
+  }
+
   /* ── status-badge ── */
   .dl-status-badge {
     display: inline-flex;

package/dist/index.cjs

@@ -3621,12 +3621,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 +3667,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 +3688,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 +3709,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 +3732,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 +3752,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 +3767,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 +3808,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 +3821,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 +3830,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 +3841,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 +3870,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 +3881,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 +3898,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,
     {