@jinaan/uikit 0.0.0-stage → 0.1.0

package/src/segmented.tsx

@@ -0,0 +1,76 @@
+import { useId, type ReactNode } from "react";
+
+import { cn } from "./utils";
+
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  icon?: ReactNode;
+}
+
+interface SegmentedProps<T extends string> {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  size?: "sm" | "md";
+  className?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * Single-choice control for a small set of options, styled after the Clerk
+ * dashboard: a recessed track with an elevated selected pill. Implemented as a
+ * `radiogroup` of native radios, so arrow-key roving and forms work natively.
+ */
+export function Segmented<T extends string>({
+  value,
+  onValueChange,
+  options,
+  size = "sm",
+  className,
+  ...rest
+}: SegmentedProps<T>) {
+  const name = useId();
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={rest["aria-label"]}
+      className={cn(
+        "inline-flex w-fit items-center rounded-lg border border-line bg-canvas",
+        size === "sm" ? "h-(--control-h-sm)" : "h-(--control-h-md)",
+        className,
+      )}
+    >
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <label
+            key={option.value}
+            className={cn(
+              "inline-flex h-full cursor-pointer items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors",
+              "has-focus-visible:ring-2 has-focus-visible:ring-focus/40",
+              size === "sm"
+                ? "px-(--control-pad-x-sm) [&_svg]:size-(--control-icon-sm)"
+                : "px-(--control-pad-x-md) [&_svg]:size-(--control-icon-md)",
+              active
+                ? "btn-fill bg-(--button-secondary-bg) text-fg"
+                : "text-muted hover:text-fg",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={active}
+              onChange={() => onValueChange(option.value)}
+              className="sr-only"
+            />
+            {option.icon}
+            {option.label}
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/src/select.tsx

@@ -0,0 +1,91 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CaretDown, Check } from "@phosphor-icons/react";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-line bg-surface px-3 text-sm text-fg",
+      "focus:outline-none focus:border-primary focus:ring-2 focus:ring-focus/30 disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:truncate",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretDown className="size-3.5 text-subtle" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      position={position}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-line bg-surface p-1 shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        "duration-150 ease-out",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-0">{children}</SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-fg outline-none focus:bg-elevated data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-3.5" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-subtle", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";

package/src/separator.tsx

@@ -0,0 +1,22 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const Separator = forwardRef<
+  ElementRef<typeof SeparatorPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-line",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";

package/src/skeleton.tsx

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "./utils";
+
+export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-elevated", className)}
+      {...props}
+    />
+  );
+}

package/src/spinner.tsx

@@ -0,0 +1,13 @@
+import { CircleNotch } from "@phosphor-icons/react";
+
+import { cn } from "./utils";
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <CircleNotch
+      className={cn("size-4 animate-spin text-muted", className)}
+      weight="bold"
+      aria-hidden
+    />
+  );
+}

package/src/table-empty-state.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+interface TableEmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Centered, contextual empty state for a table panel: an 80px icon chip, a
+ * large heading, supporting text, and an optional accent action.
+ */
+export function TableEmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: TableEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[22rem] flex-col items-center justify-center gap-5 px-6 py-16 text-center",
+        className,
+      )}
+    >
+      {icon ? (
+        <div className="flex size-[var(--table-empty-icon)] items-center justify-center rounded-2xl border border-table-empty-icon-border bg-table-empty-icon text-table-muted [&_svg]:size-8">
+          {icon}
+        </div>
+      ) : null}
+      <div className="space-y-2">
+        <p className="text-[1.75rem] font-semibold leading-tight text-table-header-active">
+          {title}
+        </p>
+        {description ? (
+          <p className="mx-auto max-w-md text-base leading-relaxed text-table-muted">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {action ? (
+        <div className="text-sm font-medium text-table-accent">{action}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/table-surface.tsx

@@ -0,0 +1,122 @@
+import type { ReactNode } from "react";
+
+import { Button } from "./button";
+import { TableContainer, TablePanel } from "./table";
+import { cn } from "./utils";
+
+export type TableSurfaceTone = "default" | "muted" | "transparent";
+
+export interface TableSurfaceAction {
+  label: string;
+  icon?: ReactNode;
+  variant?: "primary" | "outline" | "ghost" | "destructive";
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+}
+
+interface TableSurfaceProps {
+  /** Header row content (a single row of column cells). */
+  header?: ReactNode;
+  /** Panel content: the body table, or an empty / loading / error state. */
+  children: ReactNode;
+  /** Optional action at the top-right of the header band. */
+  action?: ReactNode | TableSurfaceAction;
+  /** Surface preset; `className` / `headerClassName` / `panelClassName` win. */
+  tone?: TableSurfaceTone;
+  /** Outer shell overrides (background, radius, padding, …). */
+  className?: string;
+  /** Header band overrides (background, text color, …). */
+  headerClassName?: string;
+  /** Inner panel overrides (background, border color, …). */
+  panelClassName?: string;
+  /** Minimum panel height; keeps empty states from collapsing. */
+  minHeight?: string;
+}
+
+const SHELL_TONE: Record<TableSurfaceTone, string> = {
+  default: "bg-table-container",
+  muted: "bg-surface border border-line",
+  transparent: "bg-transparent",
+};
+
+const PANEL_TONE: Record<TableSurfaceTone, string> = {
+  default: "bg-table-panel border-table-panel-border",
+  muted: "bg-elevated border-line",
+  transparent: "bg-transparent border-line",
+};
+
+function isActionConfig(
+  action: ReactNode | TableSurfaceAction,
+): action is TableSurfaceAction {
+  return (
+    typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    typeof (action as TableSurfaceAction).label === "string"
+  );
+}
+
+/**
+ * Layered table surface: an outer shell holding a header band and an inset
+ * inner panel. Header and panel share one horizontal scroller so their columns
+ * stay aligned; the optional action stays pinned to the header's top-right.
+ * Colors come from the `--table-*` tokens and can be adjusted per surface with
+ * `tone` plus `headerClassName` / `panelClassName`.
+ */
+export function TableSurface({
+  header,
+  children,
+  action,
+  tone = "default",
+  className,
+  headerClassName,
+  panelClassName,
+  minHeight,
+}: TableSurfaceProps) {
+  const actionNode = isActionConfig(action) ? (
+    <Button
+      variant={action.variant ?? "primary"}
+      size="xs"
+      leadingIcon={action.href ? undefined : action.icon}
+      onClick={action.onClick}
+      disabled={action.disabled}
+      asChild={Boolean(action.href)}
+    >
+      {action.href ? (
+        <a href={action.href}>
+          {action.icon}
+          {action.label}
+        </a>
+      ) : (
+        action.label
+      )}
+    </Button>
+  ) : (
+    action
+  );
+
+  return (
+    <TableContainer className={cn("relative", SHELL_TONE[tone], className)}>
+      <div className="overflow-x-auto">
+        {header ? (
+          // Header rows must not inherit the body row hover surface.
+          <div className={cn("[--table-row-hover:transparent]", headerClassName)}>
+            {header}
+          </div>
+        ) : null}
+        <TablePanel
+          className={cn(PANEL_TONE[tone], panelClassName)}
+          style={minHeight ? { minHeight } : undefined}
+        >
+          {children}
+        </TablePanel>
+      </div>
+      {actionNode ? (
+        <div className="pointer-events-none absolute right-4 top-(--table-inset) flex h-(--table-header-h) items-center">
+          <div className="pointer-events-auto">{actionNode}</div>
+        </div>
+      ) : null}
+    </TableContainer>
+  );
+}

package/src/table.tsx

@@ -0,0 +1,91 @@
+import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+
+import { cn } from "./utils";
+
+/**
+ * Outer table shell: near-black surface with generous rounding that holds the
+ * header row and the inset inner panel. Surface contrast, not borders/shadows.
+ */
+export function TableContainer({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "w-full overflow-hidden rounded-(--table-radius-outer) bg-table-container p-(--table-inset)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Inset panel holding the table body (and its empty/loading/error states). */
+export function TablePanel({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-(--table-radius-panel) border border-table-panel-border bg-table-panel",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>) {
+  return (
+    <table
+      className={cn("w-full table-fixed border-collapse caption-bottom text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableHeader({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={className} {...props} />;
+}
+
+export function TableBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-table-panel-border transition-colors last:border-0 hover:bg-table-row-hover data-[state=selected]:bg-table-row-selected",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableHead({ className, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn(
+        "h-(--table-header-h) whitespace-nowrap px-(--table-pad-x) text-left align-middle text-[0.8125rem] font-medium text-table-header",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={cn(
+        "px-(--table-pad-x) py-3 align-middle text-sm text-table-row data-numeric:font-numeric data-numeric:tabular-nums",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/tooltip.tsx

@@ -0,0 +1,32 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border border-line bg-elevated px-2 py-1 text-xs text-fg shadow-md",
+        "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=delayed-open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=delayed-open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
+        "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
+        "duration-150 ease-out",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = "TooltipContent";

package/src/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge conditional class names with Tailwind conflict resolution. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}