@majapisoftwares/ui 4.3.16 → 5.0.0

package/src/styles.css

@@ -0,0 +1,465 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@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;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(0.982 0.006 105);
+  --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-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --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);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.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);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --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);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --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;
+  }
+  .wb-catalog-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .wb-catalog-section h2 {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+  @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;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/src/templates/admin-dashboard.tsx

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

package/src/templates/auth-layout.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+export function AuthLayout({
+  children,
+  brand = "workbench",
+  brandMark = "w.",
+  title,
+  description,
+  aside,
+  footer,
+}: {
+  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>
+  );
+}

package/src/templates/login-form.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useId, type ReactNode } from "react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldDescription,
+} from "../components/ui/field";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+
+export interface LoginValues {
+  email: string;
+  password: string;
+}
+export interface LoginFormProps {
+  onSubmit: (values: LoginValues) => void;
+  pending?: boolean;
+  error?: string;
+  title?: string;
+  description?: string;
+  submitLabel?: string;
+  footer?: ReactNode;
+  recovery?: ReactNode;
+  alternative?: ReactNode;
+}
+export function LoginForm({
+  onSubmit,
+  pending = false,
+  error,
+  title = "Entrar na sua conta",
+  description = "Use seu e-mail e senha para continuar.",
+  submitLabel = "Entrar",
+  footer,
+  recovery,
+  alternative,
+}: LoginFormProps) {
+  const id = useId();
+  return (
+    <form
+      className="wb-auth-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        onSubmit({
+          email: String(data.get("email") ?? ""),
+          password: String(data.get("password") ?? ""),
+        });
+      }}
+      aria-busy={pending}
+    >
+      <header>
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </header>
+      {error ? (
+        <Alert variant="destructive">
+          <AlertTitle>Não foi possível entrar</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor={`${id}-email`}>E-mail</FieldLabel>
+          <Input
+            id={`${id}-email`}
+            name="email"
+            type="email"
+            autoComplete="username"
+            placeholder="voce@empresa.com"
+            required
+            disabled={pending}
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor={`${id}-password`}>Senha</FieldLabel>
+          <Input
+            id={`${id}-password`}
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            disabled={pending}
+          />
+          {recovery ? <FieldDescription>{recovery}</FieldDescription> : null}
+        </Field>
+        <Button type="submit" disabled={pending}>
+          {pending ? "Entrando…" : submitLabel}
+        </Button>
+      </FieldGroup>
+      {alternative}
+      {footer ? <footer>{footer}</footer> : null}
+    </form>
+  );
+}