@majapisoftwares/ui 5.0.0 → 6.0.0

package/src/styles.css

@@ -2,99 +2,14 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "@fontsource-variable/geist";
+@import "./components/ui/orb.css";
 @source "./";
 
-@layer components {
-  .wb-shell,
-  .wb-auth {
-    background: var(--background);
-    color: var(--foreground);
-  }
-  .wb-auth {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    min-height: 100dvh;
-  }
-  .wb-auth-intro {
-    background: var(--foreground);
-    color: var(--background);
-    padding: clamp(2rem, 6vw, 6rem);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 3rem;
-  }
-  .wb-auth-intro h1 {
-    font: 3.5rem/1.1 var(--font-heading);
-    letter-spacing: -0.04em;
-    max-width: 12ch;
-  }
-  .wb-auth-intro p {
-    margin-top: 1.5rem;
-    max-width: 36ch;
-    opacity: 0.7;
-    line-height: 1.8;
-  }
-  .wb-auth-intro footer {
-    font-size: 0.75rem;
-    opacity: 0.7;
-  }
-  .wb-auth-panel {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-  }
-  .wb-auth-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    width: min(100%, 380px);
-  }
-  .wb-auth-form h2 {
-    font-size: 1.6rem;
-    font-weight: 600;
-    letter-spacing: -0.04em;
-  }
-  .wb-auth-form header p,
-  .wb-auth-form footer {
-    font-size: 0.875rem;
-    color: var(--muted-foreground);
-    margin-top: 0.75rem;
-  }
-  @media (max-width: 767px) {
-    .wb-auth {
-      grid-template-columns: 1fr;
-    }
-    .wb-auth-intro {
-      padding: 1.5rem;
-      gap: 1.5rem;
-    }
-    .wb-auth-intro h1 {
-      font-size: 2rem;
-      max-width: none;
-    }
-    .wb-auth-intro p,
-    .wb-auth-intro footer {
-      display: none;
-    }
-    .wb-auth-panel {
-      padding: 2rem 1.5rem;
-    }
-    .wb-sidebar {
-      flex-wrap: wrap;
-    }
-    .wb-sidebar nav {
-      flex-wrap: wrap;
-    }
-  }
-}
-
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-heading: Georgia, serif;
-  --font-sans: "Geist Variable", sans-serif;
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -140,13 +55,14 @@
 }
 
 :root {
-  --background: oklch(0.982 0.006 105);
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.52 0.15 42);
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -158,16 +74,15 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.5rem;
-  --success: oklch(0.94 0.03 145);
-  --success-foreground: oklch(0.36 0.08 145);
-  --warning: oklch(0.96 0.045 85);
-  --warning-foreground: oklch(0.4 0.08 65);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --success: oklch(0.95 0.05 155);
+  --success-foreground: oklch(0.42 0.1 155);
+  --warning: oklch(0.96 0.06 85);
+  --warning-foreground: oklch(0.45 0.1 65);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -179,10 +94,6 @@
 }
 
 .dark {
-  --success: oklch(0.25 0.035 145);
-  --success-foreground: oklch(0.83 0.1 145);
-  --warning: oklch(0.28 0.035 85);
-  --warning-foreground: oklch(0.87 0.1 85);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -201,11 +112,15 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --success: oklch(0.3 0.06 155);
+  --success-foreground: oklch(0.85 0.12 155);
+  --warning: oklch(0.32 0.06 85);
+  --warning-foreground: oklch(0.88 0.12 85);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -216,243 +131,28 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
-@layer components {
-  .wb-shell {
-    min-height: 100dvh;
-    display: grid;
-    grid-template-columns: 224px minmax(0, 1fr);
-  }
-  .wb-sidebar {
-    --sidebar-foreground: var(--background);
-    --sidebar-accent: color-mix(
-      in oklch,
-      var(--background) 12%,
-      var(--foreground)
-    );
-    --sidebar-accent-foreground: var(--background);
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    padding: 2rem 1.25rem;
-    background: var(--foreground);
-    color: var(--background);
-  }
-  .wb-brand {
-    font-weight: 600;
-    font-size: 1.25rem;
-    letter-spacing: -0.04em;
-  }
-  .wb-brand span {
-    color: oklch(0.78 0.13 45);
-    font:
-      italic 2rem Georgia,
-      serif;
-    margin-right: 0.6rem;
-  }
-  .wb-sidebar nav {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .wb-sidebar [data-slot="button"] {
-    justify-content: flex-start;
-    color: inherit;
-  }
-  .wb-sidebar [data-slot="button"]:hover,
-  .wb-sidebar [data-active="true"] {
-    background: color-mix(in oklch, var(--background) 12%, transparent);
-    color: inherit;
-  }
-  .wb-sidebar-footer {
-    margin-top: auto;
-    font-size: 0.75rem;
-    opacity: 0.7;
-    line-height: 1.8;
-  }
-  .wb-topbar {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 4.5rem;
-    padding: 1rem 2.5rem;
-    border-bottom: 1px solid var(--border);
-    font-size: 0.75rem;
-    color: var(--muted-foreground);
-  }
-  .wb-main {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    padding: 2.5rem;
-    max-width: 1600px;
-    margin-inline: auto;
-  }
-  .wb-page-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-  }
-  .wb-page-header h1 {
-    font: 2.75rem/1.15 var(--font-heading);
-    letter-spacing: -0.04em;
-  }
-  .wb-page-header p {
-    color: var(--muted-foreground);
-    font-size: 0.875rem;
-    margin-top: 0.75rem;
-  }
-  .wb-eyebrow {
-    color: var(--primary);
-    font: 0.65rem/1.5 monospace;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    margin-bottom: 0.75rem;
-  }
-  .wb-metrics {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    border-block: 1px solid var(--border);
-    padding-block: 1.5rem;
-    gap: 1.5rem;
-  }
-  .wb-metric-label {
-    color: var(--muted-foreground);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    font: 0.65rem/1.6 monospace;
-  }
-  .wb-metric-value {
-    font-size: 1.8rem;
-    font-weight: 400;
-    margin-block: 0.5rem;
-  }
-  .wb-metric-note {
-    font-size: 0.7rem;
-    color: var(--muted-foreground);
-  }
-  .wb-status[data-tone="success"] {
-    background: var(--success);
-    color: var(--success-foreground);
-  }
-  .wb-status[data-tone="warning"] {
-    background: var(--warning);
-    color: var(--warning-foreground);
-  }
-  .wb-status[data-tone="danger"] {
-    background: var(--destructive);
-    color: var(--background);
-  }
-  .wb-status-dot {
-    width: 0.35rem;
-    height: 0.35rem;
-    border-radius: 50%;
-    background: currentColor;
-  }
-  .wb-table-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 1rem;
-    background: var(--muted);
-    border-radius: var(--radius) var(--radius) 0 0;
-  }
-  .wb-table-toolbar [data-slot="input"] {
-    flex: 1;
-    min-width: 200px;
-  }
-  .wb-table-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 0;
-    font-size: 0.75rem;
-    color: var(--muted-foreground);
-  }
-  .wb-details {
-    display: grid;
-    gap: 1.5rem;
-  }
-  .wb-details dt {
-    font-size: 0.7rem;
-    color: var(--muted-foreground);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-  .wb-details dd {
-    font-size: 0.875rem;
-    margin-top: 0.35rem;
-    overflow-wrap: anywhere;
+@layer base {
+  /* Native controls (scrollbars, date pickers) follow the active theme. */
+  :root {
+    color-scheme: light;
   }
-  .wb-catalog-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  .dark {
+    color-scheme: dark;
   }
-  .wb-catalog-section h2 {
-    font-size: 1.125rem;
-    font-weight: 600;
+  /* Thin scrollbars that stay hidden until the pointer is over the scrolling
+     area, tinted with the theme foreground. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
   }
-  @media (max-width: 767px) {
-    .wb-shell {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    .wb-sidebar {
-      padding: 1rem;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-    }
-    .wb-sidebar nav {
-      flex-direction: row;
-    }
-    .wb-sidebar-footer {
-      display: none;
-    }
-    .wb-main {
-      padding: 1.5rem 1rem;
-      gap: 1.5rem;
-    }
-    .wb-topbar {
-      padding: 1rem;
-    }
-    .wb-page-header {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-    .wb-page-header h1 {
-      font-size: 2.2rem;
-    }
-    .wb-metrics {
-      grid-template-columns: 1fr 1fr;
-    }
-    .wb-table-footer {
-      flex-wrap: wrap;
-    }
-    [data-slot="input"],
-    [data-slot="native-select"] {
-      font-size: 16px;
-      min-height: 44px;
-    }
-    [data-slot="button"] {
-      min-height: 44px;
-    }
+  *:hover {
+    scrollbar-color: color-mix(in oklch, var(--foreground) 25%, transparent)
+      transparent;
   }
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      transition-duration: 0.01ms !important;
-    }
+  /* Set by preferencesScript until the saved language has rendered. */
+  html[data-locale-pending] body {
+    visibility: hidden;
   }
-}
-
-@layer base {
   * {
     @apply border-border outline-ring/50;
   }

package/src/templates/admin-dashboard.tsx

@@ -1,58 +1,39 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { AppShell, type NavigationItem } from "../patterns/app-shell";
-import { PageHeader, MetricStrip } from "../patterns/page-header";
+import { AppShell, type AppShellProps } from "../patterns/app-shell";
+import { PageHeader, MetricStrip, type Metric } from "../patterns/page-header";
 import { DataTable, type DataTableProps } from "../patterns/data-table";
 
-export interface AdminDashboardProps<T> {
+export interface AdminDashboardProps<T> extends Omit<
+  AppShellProps,
+  "children"
+> {
   title: string;
-  description: string;
-  navigation: NavigationItem[];
-  activeId: string;
-  onNavigate: (id: string) => void;
-  metrics: Parameters<typeof MetricStrip>[0]["items"];
+  description?: string;
+  metrics: Metric[];
   table: DataTableProps<T>;
-  brand?: string;
-  brandMark?: ReactNode;
-  context?: ReactNode;
-  actions?: ReactNode;
+  /** Page-level actions next to the title. */
+  pageActions?: ReactNode;
   beforeTable?: ReactNode;
   afterTable?: ReactNode;
-  footer?: ReactNode;
 }
 export function AdminDashboard<T>({
   title,
   description,
-  navigation,
-  activeId,
-  onNavigate,
   metrics,
   table,
-  brand,
-  brandMark,
-  context,
-  actions,
+  pageActions,
   beforeTable,
   afterTable,
-  footer,
+  ...shell
 }: AdminDashboardProps<T>) {
   return (
-    <AppShell
-      title={title}
-      context={context}
-      navigation={navigation}
-      activeId={activeId}
-      onNavigate={onNavigate}
-      brand={brand}
-      brandMark={brandMark}
-      footer={footer}
-    >
+    <AppShell {...shell}>
       <PageHeader
-        eyebrow="Painel administrativo"
         title={title}
         description={description}
-        actions={actions}
+        actions={pageActions}
       />
       <MetricStrip items={metrics} />
       {beforeTable}

package/src/templates/auth-layout.tsx

@@ -1,36 +1,30 @@
 import type { ReactNode } from "react";
+
+/** Centered auth page: brand on top, form card below, optional footer. */
 export function AuthLayout({
+  brand,
   children,
-  brand = "workbench",
-  brandMark = "w.",
-  title,
-  description,
-  aside,
   footer,
 }: {
+  brand?: ReactNode;
   children: ReactNode;
-  brand?: string;
-  brandMark?: ReactNode;
-  title: string;
-  description: string;
-  aside?: ReactNode;
   footer?: ReactNode;
 }) {
   return (
-    <main className="wb-auth">
-      <section className="wb-auth-intro">
-        <div className="wb-brand">
-          <span>{brandMark}</span>
-          {brand}
-        </div>
-        <div>
-          <h1>{title}</h1>
-          <p>{description}</p>
-        </div>
-        {aside}
-        <footer>{footer}</footer>
-      </section>
-      <section className="wb-auth-panel">{children}</section>
+    <main className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        {brand ? (
+          <div className="flex items-center gap-2 self-center font-medium">
+            {brand}
+          </div>
+        ) : null}
+        {children}
+        {footer ? (
+          <div className="text-center text-xs text-balance text-muted-foreground">
+            {footer}
+          </div>
+        ) : null}
+      </div>
     </main>
   );
 }