@majapisoftwares/ui 5.0.0 → 6.1.0

package/src/patterns/workspace-switcher.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "cn";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "../components/ui/sidebar";
+import { Skeleton } from "../components/ui/skeleton";
+import { defineMessages, useMessages } from "../lib/i18n";
+
+const messages = defineMessages({
+  en: { switchWorkspace: "Switch workspace", workspaces: "Workspaces" },
+  "pt-BR": { switchWorkspace: "Trocar workspace", workspaces: "Workspaces" },
+});
+
+export interface Workspace {
+  id: string;
+  name: string;
+  /** Second line, e.g. plan or owner. */
+  description?: string;
+  /** Square mark; defaults to the name's initial. */
+  icon?: ReactNode;
+  /** Workspaces sharing a group are listed together (e.g. by company). */
+  group?: string;
+}
+
+function WorkspaceMark({
+  workspace,
+  className,
+}: {
+  workspace: Workspace;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        // Forced: focused menu items recolor all descendants to the accent color.
+        "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground **:text-primary-foreground! [&_svg]:size-4",
+        className,
+      )}
+    >
+      {workspace.icon ?? (
+        <span className="text-sm font-semibold">
+          {workspace.name.charAt(0).toUpperCase()}
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * Sidebar workspace selector (place it in `AppShell` `sidebarHeader`).
+ * Selecting a workspace calls `onSelect`; routing and data stay in the app.
+ */
+export function WorkspaceSwitcher({
+  workspaces,
+  activeId,
+  onSelect,
+  actions,
+  loading = false,
+}: {
+  workspaces: Workspace[];
+  activeId: string;
+  onSelect: (workspace: Workspace) => void;
+  /** Extra menu items after the list, e.g. "Manage workspaces". */
+  actions?: ReactNode;
+  loading?: boolean;
+}) {
+  const t = useMessages(messages);
+  const { isMobile } = useSidebar();
+  const active = workspaces.find((workspace) => workspace.id === activeId);
+  const groups = workspaces.reduce<Map<string, Workspace[]>>(
+    (map, workspace) => {
+      const key = workspace.group ?? "";
+      map.set(key, [...(map.get(key) ?? []), workspace]);
+      return map;
+    },
+    new Map(),
+  );
+
+  if (loading || !active)
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <div className="flex h-14 items-center gap-2 px-3 group-data-[collapsible=icon]:px-0">
+            <Skeleton className="size-8 rounded-lg" />
+            <Skeleton className="h-4 flex-1 group-data-[collapsible=icon]:hidden" />
+          </div>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                aria-label={t.switchWorkspace}
+                // Card-like surface so the current workspace reads as a distinct control.
+                className="bg-card shadow-xs ring-1 ring-foreground/5 hover:bg-sidebar-accent data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground dark:ring-foreground/10"
+              />
+            }
+          >
+            <WorkspaceMark workspace={active} />
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{active.name}</span>
+              {active.description ? (
+                <span className="truncate text-xs text-muted-foreground">
+                  {active.description}
+                </span>
+              ) : null}
+            </div>
+            <ChevronsUpDownIcon className="ml-auto text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--anchor-width) min-w-60"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            {[...groups.entries()].map(([group, items], index) => (
+              <DropdownMenuGroup key={group || index}>
+                {index > 0 ? <DropdownMenuSeparator /> : null}
+                <DropdownMenuLabel>{group || t.workspaces}</DropdownMenuLabel>
+                {items.map((workspace) => (
+                  <DropdownMenuItem
+                    key={workspace.id}
+                    onClick={() => onSelect(workspace)}
+                  >
+                    <WorkspaceMark workspace={workspace} className="size-6" />
+                    <div className="grid flex-1 leading-tight">
+                      <span className="truncate">{workspace.name}</span>
+                      {workspace.description ? (
+                        <span className="truncate text-xs text-muted-foreground">
+                          {workspace.description}
+                        </span>
+                      ) : null}
+                    </div>
+                    {workspace.id === activeId ? (
+                      <CheckIcon className="ml-auto" />
+                    ) : null}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
+            ))}
+            {actions ? (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>{actions}</DropdownMenuGroup>
+              </>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

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}