@unicitylabs/sphere-ui 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -110,11 +110,12 @@ interface ConfirmDialogProps {
     title: string;
     message: string;
     confirmLabel?: string;
+    confirmPending?: boolean;
     variant?: 'danger' | 'default';
     onConfirm: () => void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ isOpen, title, message, confirmLabel, variant, onConfirm, onCancel, }: ConfirmDialogProps): react.ReactPortal | null;
+declare function ConfirmDialog({ isOpen, title, message, confirmLabel, confirmPending, variant, onConfirm, onCancel, }: ConfirmDialogProps): react.ReactPortal | null;
 
 interface StatusBadgeProps {
     status: string;

package/dist/index.js

@@ -1,10 +1,10 @@
 // src/components/DashboardLayout.tsx
 import { useState } from "react";
-import { Menu } from "lucide-react";
+import { Menu, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function DashboardLayout({ logo, nav, footer, children }) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen flex", style: { background: "var(--bg-root)" }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen flex sphere-dashboard", style: { background: "var(--bg-root)" }, children: [
     mobileOpen && /* @__PURE__ */ jsx(
       "div",
       {
@@ -15,9 +15,9 @@ function DashboardLayout({ logo, nav, footer, children }) {
     /* @__PURE__ */ jsxs(
       "aside",
       {
-        className: `fixed lg:static inset-y-0 left-0 z-50 w-56 shrink-0 flex flex-col relative transition-transform lg:translate-x-0 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`,
+        className: `fixed lg:static inset-y-0 left-0 z-50 w-56 shrink-0 flex flex-col transition-transform duration-300 ease-out lg:translate-x-0 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`,
         style: {
-          background: "linear-gradient(180deg, rgba(255,111,0,0.03) 0%, var(--bg-root) 40%)",
+          background: "var(--bg-root)",
           borderRight: "1px solid var(--border)"
         },
         children: [
@@ -28,7 +28,27 @@ function DashboardLayout({ logo, nav, footer, children }) {
               style: { background: "linear-gradient(90deg, transparent, var(--accent), transparent)" }
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "px-5 py-5", style: { borderBottom: "1px solid var(--border)" }, children: logo }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { background: "linear-gradient(180deg, rgba(255,111,0,0.03) 0%, transparent 40%)" }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "px-5 py-5 relative", style: { borderBottom: "1px solid var(--border)" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "lg:hidden absolute top-4 right-4 p-1 rounded-md transition-colors",
+                style: { color: "var(--text-muted)" },
+                onClick: () => setMobileOpen(false),
+                onMouseEnter: (e) => e.currentTarget.style.color = "var(--text-primary)",
+                onMouseLeave: (e) => e.currentTarget.style.color = "var(--text-muted)",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            ),
+            logo
+          ] }),
           /* @__PURE__ */ jsx("nav", { className: "flex-1 px-3 py-3 flex flex-col overflow-y-auto", children: nav }),
           footer && /* @__PURE__ */ jsx("div", { className: "px-3 py-4", style: { borderTop: "1px solid var(--border)" }, children: footer })
         ]
@@ -327,6 +347,7 @@ function ConfirmDialog({
   title,
   message,
   confirmLabel = "Confirm",
+  confirmPending,
   variant = "default",
   onConfirm,
   onCancel
@@ -345,13 +366,20 @@ function ConfirmDialog({
       /* @__PURE__ */ jsx7("h3", { className: "font-semibold text-white mb-2", children: title }),
       /* @__PURE__ */ jsx7("p", { className: "text-sm mb-5", style: { color: "var(--text-muted)" }, children: message }),
       /* @__PURE__ */ jsxs7("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsx7("button", { onClick: onCancel, className: "btn-secondary flex-1", children: "Cancel" }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx7("button", { onClick: onCancel, disabled: confirmPending, className: "btn-secondary flex-1", children: "Cancel" }),
+        /* @__PURE__ */ jsxs7(
           "button",
           {
             onClick: onConfirm,
-            className: `flex-1 ${variant === "danger" ? "btn-danger" : "btn-primary"}`,
-            children: confirmLabel
+            disabled: confirmPending,
+            className: `flex-1 inline-flex items-center justify-center gap-2 ${variant === "danger" ? "btn-danger" : "btn-primary"}`,
+            children: [
+              confirmPending && /* @__PURE__ */ jsxs7("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+                /* @__PURE__ */ jsx7("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsx7("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+              ] }),
+              confirmLabel
+            ]
           }
         )
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",