@webdevarif/dashui 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -326,4 +326,56 @@ declare function usePagination(total: number, pageSize?: number): {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type Stat, Stats, type StatsProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };
+interface AuthShellProps {
+    children: React$1.ReactNode;
+    /** Optional background pattern — 'dots' | 'grid' | 'none' */
+    pattern?: 'dots' | 'grid' | 'none';
+}
+declare function AuthShell({ children, pattern }: AuthShellProps): react_jsx_runtime.JSX.Element;
+
+interface AuthCardProps {
+    children: React$1.ReactNode;
+}
+declare function AuthCard({ children }: AuthCardProps): react_jsx_runtime.JSX.Element;
+
+interface AuthLogoProps {
+    /** App name shown next to the logo mark */
+    appName?: string;
+    /** Single letter shown inside the logo box */
+    letter?: string;
+}
+declare function AuthLogo({ appName, letter }: AuthLogoProps): react_jsx_runtime.JSX.Element;
+
+interface AuthHeaderProps {
+    title: string;
+    description?: string;
+}
+declare function AuthHeader({ title, description }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface AuthFieldProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    error?: string;
+    hint?: string;
+    rightLabel?: React$1.ReactNode;
+}
+declare function AuthField({ label, error, hint, rightLabel, id, ...props }: AuthFieldProps): react_jsx_runtime.JSX.Element;
+
+interface AuthButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    variant?: 'primary' | 'outline' | 'ghost';
+    fullWidth?: boolean;
+}
+declare function AuthButton({ loading, variant, fullWidth, children, disabled, style, ...props }: AuthButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function AuthDivider({ label }: {
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface AuthFootnoteProps {
+    text: string;
+    linkText: string;
+    linkHref: string;
+}
+declare function AuthFootnote({ text, linkText, linkHref }: AuthFootnoteProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type Stat, Stats, type StatsProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };

package/dist/index.d.ts

@@ -326,4 +326,56 @@ declare function usePagination(total: number, pageSize?: number): {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type Stat, Stats, type StatsProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };
+interface AuthShellProps {
+    children: React$1.ReactNode;
+    /** Optional background pattern — 'dots' | 'grid' | 'none' */
+    pattern?: 'dots' | 'grid' | 'none';
+}
+declare function AuthShell({ children, pattern }: AuthShellProps): react_jsx_runtime.JSX.Element;
+
+interface AuthCardProps {
+    children: React$1.ReactNode;
+}
+declare function AuthCard({ children }: AuthCardProps): react_jsx_runtime.JSX.Element;
+
+interface AuthLogoProps {
+    /** App name shown next to the logo mark */
+    appName?: string;
+    /** Single letter shown inside the logo box */
+    letter?: string;
+}
+declare function AuthLogo({ appName, letter }: AuthLogoProps): react_jsx_runtime.JSX.Element;
+
+interface AuthHeaderProps {
+    title: string;
+    description?: string;
+}
+declare function AuthHeader({ title, description }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface AuthFieldProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    error?: string;
+    hint?: string;
+    rightLabel?: React$1.ReactNode;
+}
+declare function AuthField({ label, error, hint, rightLabel, id, ...props }: AuthFieldProps): react_jsx_runtime.JSX.Element;
+
+interface AuthButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    variant?: 'primary' | 'outline' | 'ghost';
+    fullWidth?: boolean;
+}
+declare function AuthButton({ loading, variant, fullWidth, children, disabled, style, ...props }: AuthButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function AuthDivider({ label }: {
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface AuthFootnoteProps {
+    text: string;
+    linkText: string;
+    linkHref: string;
+}
+declare function AuthFootnote({ text, linkText, linkHref }: AuthFootnoteProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type Stat, Stats, type StatsProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };

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,
@@ -1558,12 +1566,331 @@ 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" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        style: {
+          width: 36,
+          height: 36,
+          background: "var(--primary)",
+          borderRadius: "calc(var(--radius, 0.5rem) * 1.2)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--primary-foreground)",
+          fontWeight: 800,
+          fontSize: "1rem",
+          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/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,