@holaboss/ui 0.1.0

package/src/layouts/data-table.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils.js";
+import { LoadingState } from "./loading-state.js";
+import { EmptyState } from "../primitives/empty-state.js";
+
+export interface DataTableColumn<Row> {
+  /** Column key — must be unique within a table. */
+  id: string;
+  /** Header label. */
+  header: ReactNode;
+  /** Cell content; receives the full row. */
+  cell: (row: Row) => ReactNode;
+  /**
+   * Cell alignment. `right` for numeric / monetary columns; `center`
+   * for icons / status badges.
+   */
+  align?: "left" | "right" | "center";
+  /** Hide on small viewports (< sm). */
+  hideOnSmall?: boolean;
+  /** Width hint in CSS units (e.g. `120px`, `20%`). */
+  width?: string;
+}
+
+export interface DataTableProps<Row> {
+  columns: DataTableColumn<Row>[];
+  rows: Row[];
+  /** Stable key per row. */
+  rowKey: (row: Row) => string;
+  /** Per-row click handler. Renders rows with hover affordance. */
+  onRowClick?: (row: Row) => void;
+  /** When true, body is replaced with a <LoadingState>. */
+  isLoading?: boolean;
+  /** Empty-state title (shown when not loading and rows is empty). */
+  emptyTitle?: string;
+  emptyDescription?: ReactNode;
+  className?: string;
+}
+
+const alignClass: Record<NonNullable<DataTableColumn<unknown>["align"]>, string> = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center",
+};
+
+export function DataTable<Row>({
+  columns,
+  rows,
+  rowKey,
+  onRowClick,
+  isLoading,
+  emptyTitle = "No data yet",
+  emptyDescription,
+  className,
+}: DataTableProps<Row>) {
+  if (isLoading) {
+    return <LoadingState variant="list" />;
+  }
+  if (rows.length === 0) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} />;
+  }
+  return (
+    <div className={cn("w-full overflow-x-auto", className)}>
+      <table className="w-full table-fixed border-collapse text-sm">
+        <thead className="border-b border-border bg-background">
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.id}
+                className={cn(
+                  "px-3 py-2 text-xs font-medium text-muted-foreground",
+                  alignClass[col.align ?? "left"],
+                  col.hideOnSmall && "hidden sm:table-cell",
+                )}
+                style={col.width ? { width: col.width } : undefined}
+              >
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr
+              key={rowKey(row)}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              className={cn(
+                "border-b border-border last:border-b-0 transition-colors",
+                onRowClick && "cursor-pointer hover:bg-accent",
+              )}
+            >
+              {columns.map((col) => (
+                <td
+                  key={col.id}
+                  className={cn(
+                    "truncate px-3 py-2 text-sm text-foreground",
+                    alignClass[col.align ?? "left"],
+                    col.hideOnSmall && "hidden sm:table-cell",
+                  )}
+                >
+                  {col.cell(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/layouts/error-state.tsx

@@ -0,0 +1,52 @@
+import { AlertTriangle } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "../primitives/button.js";
+import { cn } from "../lib/utils.js";
+
+/**
+ * Centered error display with an optional retry action. Use for the
+ * body of a pane when data fetch / mutation fails. Title is short, the
+ * `detail` is the developer-relevant message (truncate-friendly).
+ */
+export interface ErrorStateProps {
+  title?: string;
+  /** Concrete error description — the API error text, etc. */
+  detail?: ReactNode;
+  /** Click handler for the retry button. Omit to skip the button. */
+  onRetry?: () => void;
+  retryLabel?: string;
+  className?: string;
+}
+
+export function ErrorState({
+  title = "Something went wrong",
+  detail,
+  onRetry,
+  retryLabel = "Try again",
+  className,
+}: ErrorStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 px-4 py-14 text-center",
+        className,
+      )}
+    >
+      <div className="grid size-10 place-items-center rounded-xl bg-destructive/10 text-destructive">
+        <AlertTriangle className="size-4" strokeWidth={1.6} />
+      </div>
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {detail ? (
+        <p className="max-w-md text-xs leading-5 text-muted-foreground">
+          {detail}
+        </p>
+      ) : null}
+      {onRetry ? (
+        <Button size="sm" variant="outline" onClick={onRetry}>
+          {retryLabel}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/layouts/filter-bar.tsx

@@ -0,0 +1,58 @@
+import { Search } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Input } from "../primitives/input.js";
+import { cn } from "../lib/utils.js";
+
+/**
+ * Search input + filter chip slot + right-aligned actions. Sits at the
+ * top of a list / table to provide a consistent control row across
+ * apps.
+ */
+export interface FilterBarProps {
+  /** Search input value (controlled). */
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  /** Filter chips / selects / segmented controls. */
+  filters?: ReactNode;
+  /** Right-aligned actions (e.g. "New", "Refresh"). */
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function FilterBar({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Search…",
+  filters,
+  actions,
+  className,
+}: FilterBarProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-2 border-b border-border px-4 py-2",
+        className,
+      )}
+    >
+      {onSearchChange ? (
+        <div className="relative min-w-[180px] flex-1">
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            className="h-7 pl-7 text-sm"
+            value={search ?? ""}
+            placeholder={searchPlaceholder}
+            onChange={(event) => onSearchChange(event.target.value)}
+          />
+        </div>
+      ) : null}
+      {filters ? (
+        <div className="flex flex-wrap items-center gap-1.5">{filters}</div>
+      ) : null}
+      {actions ? (
+        <div className="ml-auto flex items-center gap-1.5">{actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/layouts/loading-state.tsx

@@ -0,0 +1,67 @@
+import { cn } from "../lib/utils.js";
+
+/**
+ * Skeleton-style loading placeholder. Use for the body of a pane while
+ * data is fetching. The default presentation is a vertical stack of
+ * pulsing bars; `variant="list"` mimics a row list and `variant="card"`
+ * mimics card-grid loading.
+ *
+ * Solid backgrounds + subtle pulse only. No shimmer gradients.
+ */
+export interface LoadingStateProps {
+  variant?: "rows" | "list" | "card";
+  /** How many placeholder elements to render. Default 4. */
+  count?: number;
+  className?: string;
+}
+
+export function LoadingState({
+  variant = "rows",
+  count = 4,
+  className,
+}: LoadingStateProps) {
+  const items = Array.from({ length: count }, (_, i) => i);
+  if (variant === "card") {
+    return (
+      <div
+        className={cn(
+          "grid grid-cols-1 gap-3 p-4 sm:grid-cols-2 lg:grid-cols-3",
+          className,
+        )}
+      >
+        {items.map((i) => (
+          <div
+            key={i}
+            className="h-24 animate-pulse rounded-xl border border-border bg-muted"
+          />
+        ))}
+      </div>
+    );
+  }
+  if (variant === "list") {
+    return (
+      <div className={cn("flex flex-col divide-y divide-border", className)}>
+        {items.map((i) => (
+          <div key={i} className="flex items-center gap-3 px-4 py-3">
+            <div className="size-8 shrink-0 animate-pulse rounded-full bg-muted" />
+            <div className="min-w-0 flex-1 space-y-1.5">
+              <div className="h-3 w-1/3 animate-pulse rounded bg-muted" />
+              <div className="h-2.5 w-2/3 animate-pulse rounded bg-muted" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className={cn("flex flex-col gap-2 p-4", className)}>
+      {items.map((i) => (
+        <div
+          key={i}
+          className="h-4 animate-pulse rounded bg-muted"
+          style={{ width: `${100 - i * 8}%` }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/layouts/page-header.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils.js";
+
+/**
+ * Title + optional subtitle + optional right-aligned actions. The
+ * canonical first child of `<DashboardShell header={...}>`. Density and
+ * weight stay consistent regardless of which app drops it in.
+ */
+export interface PageHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Right-aligned action slot (typically buttons). */
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-between gap-4 px-4 py-3",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        <h1 className="truncate text-base font-semibold text-foreground">
+          {title}
+        </h1>
+        {description ? (
+          <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-1.5">{actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/layouts/section.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils.js";
+
+/**
+ * Title + optional description over a content block. Use to group
+ * related controls or stats inside a pane.
+ */
+export interface SectionProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Right-aligned action slot next to the title. */
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+export function Section({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName,
+}: SectionProps) {
+  return (
+    <section className={cn("px-4 py-3", className)}>
+      {title || description || actions ? (
+        <header className="mb-2 flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            {title ? (
+              <h2 className="text-sm font-medium text-foreground">{title}</h2>
+            ) : null}
+            {description ? (
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {description}
+              </p>
+            ) : null}
+          </div>
+          {actions ? (
+            <div className="flex shrink-0 items-center gap-1.5">{actions}</div>
+          ) : null}
+        </header>
+      ) : null}
+      <div className={contentClassName}>{children}</div>
+    </section>
+  );
+}

package/src/layouts/stat-pill.tsx

@@ -0,0 +1,57 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils.js";
+
+/**
+ * Small metric display — label on top, value below, optional icon and
+ * trend chip. Use in a grid at the top of a dashboard. Stays tight; no
+ * shadows or gradients.
+ */
+export interface StatPillProps {
+  label: ReactNode;
+  value: ReactNode;
+  icon?: LucideIcon;
+  /** Optional trend / hint chip rendered next to the value. */
+  trend?: ReactNode;
+  /** Visual tone for the value. Default `neutral` (foreground). */
+  tone?: "neutral" | "positive" | "negative";
+  className?: string;
+}
+
+const toneClass: Record<NonNullable<StatPillProps["tone"]>, string> = {
+  neutral: "text-foreground",
+  positive: "text-emerald-600 dark:text-emerald-400",
+  negative: "text-destructive",
+};
+
+export function StatPill({
+  label,
+  value,
+  icon: Icon,
+  trend,
+  tone = "neutral",
+  className,
+}: StatPillProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 rounded-lg border border-border bg-card px-3 py-2",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        {Icon ? <Icon className="size-3" strokeWidth={1.6} /> : null}
+        <span className="truncate">{label}</span>
+      </div>
+      <div className="flex items-baseline gap-2">
+        <span className={cn("text-lg font-semibold", toneClass[tone])}>
+          {value}
+        </span>
+        {trend ? (
+          <span className="text-xs text-muted-foreground">{trend}</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/primitives/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/primitives/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/primitives/button.tsx

@@ -0,0 +1,61 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg text-sm font-medium whitespace-nowrap transition-colors duration-150 ease-out outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 [a]:hover:bg-primary/90",
+        bordered:
+          "border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        outline:
+          "border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }