@webdevarif/dashui 0.1.2 → 0.1.4

package/dist/index.js

@@ -32,6 +32,14 @@ var index_exports = {};
 __export(index_exports, {
   Alert: () => Alert,
   AppShell: () => AppShell,
+  AuthButton: () => AuthButton,
+  AuthCard: () => AuthCard,
+  AuthDivider: () => AuthDivider,
+  AuthField: () => AuthField,
+  AuthFootnote: () => AuthFootnote,
+  AuthHeader: () => AuthHeader,
+  AuthLogo: () => AuthLogo,
+  AuthShell: () => AuthShell,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
@@ -93,7 +101,7 @@ __export(index_exports, {
   SelectValue: () => SelectValue,
   Separator: () => Separator3,
   Sidebar: () => Sidebar,
-  Skeleton: () => Skeleton,
+  Skeleton: () => Skeleton2,
   Stats: () => Stats,
   Switch: () => Switch,
   Tabs: () => Tabs,
@@ -1558,12 +1566,371 @@ function usePagination(total, pageSize = 20) {
   return { page, setPage, pageSize, total, totalPages };
 }
 
+// src/components/auth/AuthShell.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function AuthShell({ children, pattern = "dots" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "div",
+    {
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "24px",
+        background: "var(--background)",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: "radial-gradient(circle, var(--border) 1px, transparent 1px)",
+              backgroundSize: "28px 28px",
+              opacity: 0.5,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
+              backgroundSize: "32px 32px",
+              opacity: 0.4,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth: "440px" }, children })
+      ]
+    }
+  );
+}
+
+// src/components/auth/AuthCard.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function AuthCard({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      style: {
+        background: "var(--card)",
+        border: "1px solid var(--border)",
+        borderRadius: "calc(var(--radius, 0.5rem) * 1.5)",
+        boxShadow: "0 4px 32px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04)",
+        padding: "36px 40px",
+        width: "100%"
+      },
+      children
+    }
+  );
+}
+
+// src/components/auth/AuthLogo.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "img",
+      {
+        src: imageUrl,
+        alt: appName,
+        width: size,
+        height: size,
+        style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        style: {
+          width: size,
+          height: size,
+          background: "var(--primary)",
+          borderRadius: "calc(var(--radius, 0.5rem) * 1.2)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--primary-foreground)",
+          fontWeight: 800,
+          fontSize: `${size * 0.44}px`,
+          flexShrink: 0
+        },
+        children: letter
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "span",
+      {
+        style: {
+          fontWeight: 700,
+          fontSize: "1.125rem",
+          color: "var(--foreground)",
+          letterSpacing: "-0.02em"
+        },
+        children: appName
+      }
+    )
+  ] });
+}
+
+// src/components/auth/AuthHeader.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function AuthHeader({ title, description }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "h1",
+      {
+        style: {
+          fontSize: "1.375rem",
+          fontWeight: 700,
+          color: "var(--foreground)",
+          margin: 0,
+          letterSpacing: "-0.02em"
+        },
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "p",
+      {
+        style: {
+          marginTop: "6px",
+          fontSize: "0.875rem",
+          color: "var(--muted-foreground)",
+          lineHeight: 1.5
+        },
+        children: description
+      }
+    )
+  ] });
+}
+
+// src/components/auth/AuthField.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function AuthField({ label, error, hint, rightLabel, id, ...props }) {
+  const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "label",
+        {
+          htmlFor: fieldId,
+          style: {
+            fontSize: "0.8125rem",
+            fontWeight: 500,
+            color: "var(--foreground)"
+          },
+          children: label
+        }
+      ),
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "input",
+      {
+        id: fieldId,
+        style: {
+          height: "40px",
+          padding: "0 12px",
+          background: "var(--background)",
+          border: `1px solid ${error ? "var(--destructive)" : "var(--border)"}`,
+          borderRadius: "var(--radius, 0.5rem)",
+          color: "var(--foreground)",
+          fontSize: "0.875rem",
+          outline: "none",
+          width: "100%",
+          boxSizing: "border-box",
+          transition: "border-color 0.15s, box-shadow 0.15s"
+        },
+        onFocus: (e) => {
+          e.currentTarget.style.borderColor = "var(--ring)";
+          e.currentTarget.style.boxShadow = "0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent)";
+          props.onFocus?.(e);
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.borderColor = error ? "var(--destructive)" : "var(--border)";
+          e.currentTarget.style.boxShadow = "none";
+          props.onBlur?.(e);
+        },
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+  ] });
+}
+
+// src/components/auth/AuthButton.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function AuthButton({
+  loading,
+  variant = "primary",
+  fullWidth = true,
+  children,
+  disabled,
+  style,
+  ...props
+}) {
+  const base = {
+    height: "42px",
+    padding: "0 20px",
+    borderRadius: "var(--radius, 0.5rem)",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    cursor: loading || disabled ? "not-allowed" : "pointer",
+    opacity: loading || disabled ? 0.65 : 1,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    border: "none",
+    outline: "none",
+    transition: "opacity 0.15s, filter 0.15s",
+    width: fullWidth ? "100%" : "auto",
+    ...style
+  };
+  const variantStyles = {
+    primary: {
+      background: "var(--primary)",
+      color: "var(--primary-foreground)"
+    },
+    outline: {
+      background: "transparent",
+      color: "var(--foreground)",
+      border: "1px solid var(--border)"
+    },
+    ghost: {
+      background: "transparent",
+      color: "var(--foreground)"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "button",
+    {
+      disabled: loading || disabled,
+      style: { ...base, ...variantStyles[variant] },
+      onMouseEnter: (e) => {
+        if (!loading && !disabled) e.currentTarget.style.filter = "brightness(0.9)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.filter = "none";
+      },
+      ...props,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "span",
+          {
+            style: {
+              width: 14,
+              height: 14,
+              border: "2px solid currentColor",
+              borderTopColor: "transparent",
+              borderRadius: "50%",
+              display: "inline-block",
+              animation: "dashui-spin 0.7s linear infinite"
+            }
+          }
+        ),
+        children
+      ] }) : children
+    }
+  );
+}
+
+// src/components/auth/AuthDivider.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function AuthDivider({ label = "or" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  ] });
+}
+
+// src/components/auth/AuthFootnote.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function AuthFootnote({ text, linkText, linkHref }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { style: {
+    textAlign: "center",
+    marginTop: "20px",
+    fontSize: "0.8125rem",
+    color: "var(--muted-foreground)"
+  }, children: [
+    text,
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "a",
+      {
+        href: linkHref,
+        style: {
+          color: "var(--primary)",
+          fontWeight: 600,
+          textDecoration: "none"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
+        onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
+        children: linkText
+      }
+    )
+  ] });
+}
+
+// src/components/Skeleton.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Skeleton2({ width = "100%", height = 16, rounded, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        background: "var(--muted, #e5e7eb)",
+        borderRadius: rounded ?? "var(--radius, 0.5rem)",
+        overflow: "hidden",
+        position: "relative",
+        flexShrink: 0,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--background, #fff) 40%, transparent) 50%, transparent 100%)",
+            animation: "dashui-shimmer 1.6s ease-in-out infinite"
+          }
+        }
+      )
+    }
+  );
+}
+
 // src/index.ts
 var import_next_themes = require("next-themes");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
   AppShell,
+  AuthButton,
+  AuthCard,
+  AuthDivider,
+  AuthField,
+  AuthFootnote,
+  AuthHeader,
+  AuthLogo,
+  AuthShell,
   Badge,
   Button,
   Card,