@jinaan/uikit 0.0.0-stage → 0.1.1

package/src/dialog.tsx

@@ -0,0 +1,123 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "@phosphor-icons/react";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+} from "react";
+
+import { cn } from "./utils";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-overlay backdrop-blur-[1px] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0" />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 flex max-h-[min(85vh,44rem)] w-full max-w-[22.4rem] -translate-x-1/2 -translate-y-1/2 flex-col gap-0 overflow-hidden",
+        "rounded-2xl border border-[var(--dialog-shell-border)] bg-[var(--dialog-shell-bg)] pb-3 shadow-[var(--dialog-shell-shadow)] sm:pb-4",
+        "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-[state=open]:slide-in-from-top-2 duration-200 ease-out",
+        "focus:outline-none",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-3.5 top-3.5 z-10 rounded-sm text-subtle transition-colors hover:text-fg focus-visible:outline-none">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+));
+DialogContent.displayName = "DialogContent";
+
+/**
+ * Elevated inner card inside the dialog shell. Flush to the shell's left, top
+ * and right edges (the shell clips its top corners); the footer stays below on
+ * the shell so the two surfaces read as distinct layers.
+ */
+export function DialogPanel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="panel"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col overflow-hidden rounded-b-2xl border-x-0 border-t-0 border-b border-[var(--dialog-panel-border)] bg-[var(--dialog-panel-bg)] shadow-[var(--dialog-panel-shadow)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Scrollable region inside `DialogPanel`; keeps the footer pinned. */
+export function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="body"
+      className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="header"
+      className={cn(
+        "flex shrink-0 flex-col gap-1.5 border-b border-[var(--dialog-panel-border)] px-5 py-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="footer"
+      className={cn(
+        "flex shrink-0 flex-col-reverse gap-2 px-3 pt-3 sm:flex-row sm:justify-end sm:px-4 sm:pt-3.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const DialogTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold text-fg", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+export const DialogDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = "DialogDescription";

package/src/dropdown-menu.tsx

@@ -0,0 +1,103 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "@phosphor-icons/react";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from "react";
+
+import { cn } from "./utils";
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+export const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-48 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}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+export const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-fg outline-none transition-colors",
+      "focus:bg-elevated data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:size-4 [&_svg]:text-muted",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export const DropdownMenuCheckboxItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    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 transition-colors focus:bg-elevated",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-4 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="size-3.5" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+export const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-subtle", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+export const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-line", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";

package/src/empty-state.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-4 rounded-card border border-line bg-surface px-6 py-16 text-center",
+        className,
+      )}
+    >
+      {icon ? (
+        <div className="flex size-11 items-center justify-center rounded-xl border border-line bg-elevated text-subtle [&_svg]:size-6">
+          {icon}
+        </div>
+      ) : null}
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-fg">{title}</p>
+        {description ? (
+          <p className="mx-auto max-w-sm text-sm text-muted">{description}</p>
+        ) : null}
+      </div>
+      {action}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+export * from "./agent-prompt";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./callout";
+export * from "./card";
+export * from "./checkbox";
+export * from "./choice-dialog";
+export * from "./code-block";
+export * from "./data-table";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./empty-state";
+export * from "./input";
+export * from "./kbd";
+export * from "./label";
+export * from "./radio-group";
+export * from "./segmented";
+export * from "./select";
+export * from "./separator";
+export * from "./skeleton";
+export * from "./spinner";
+export * from "./table";
+export * from "./table-empty-state";
+export * from "./table-surface";
+export * from "./tooltip";

package/src/input.tsx

@@ -0,0 +1,195 @@
+import { X } from "@phosphor-icons/react";
+import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type InputSize = "sm" | "md" | "lg" | "xl";
+
+const HEIGHT: Record<InputSize, string> = {
+  sm: "h-[var(--control-h-sm)] text-sm",
+  md: "h-[var(--control-h-md)] text-sm",
+  lg: "h-[var(--control-h-lg)] text-sm",
+  xl: "h-[var(--control-h-xl)] rounded-[var(--control-radius-xl)] text-base",
+};
+
+const PAD_X: Record<InputSize, string> = {
+  sm: "px-[var(--control-pad-x-sm)]",
+  md: "px-[var(--control-pad-x-md)]",
+  lg: "px-[var(--control-pad-x-lg)]",
+  xl: "px-[var(--control-pad-x-xl)]",
+};
+
+const LEAD_INSET: Record<InputSize, string> = {
+  sm: "left-[var(--control-pad-x-sm)]",
+  md: "left-[var(--control-pad-x-md)]",
+  lg: "left-[var(--control-pad-x-lg)]",
+  xl: "left-[var(--control-pad-x-xl)]",
+};
+
+const TRAIL_INSET: Record<InputSize, string> = {
+  sm: "right-[var(--control-pad-x-sm)]",
+  md: "right-[var(--control-pad-x-md)]",
+  lg: "right-[var(--control-pad-x-lg)]",
+  xl: "right-[var(--control-pad-x-xl)]",
+};
+
+const ICON: Record<InputSize, string> = {
+  sm: "size-[var(--control-icon-sm)]",
+  md: "size-[var(--control-icon-md)]",
+  lg: "size-[var(--control-icon-lg)]",
+  xl: "size-[var(--control-icon-xl)]",
+};
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Control height preset. Defaults to `md`. */
+  size?: InputSize;
+  /** Optional icon rendered inside the field, before the text. */
+  leadingIcon?: ReactNode;
+  /** Optional icon rendered inside the field, after the text. */
+  trailingIcon?: ReactNode;
+  /** Shows a real clear button when the field has a value. */
+  onClear?: () => void;
+  /** Error styling; also pairs with `helperText` for the message. */
+  error?: boolean;
+  /** Helper or error message shown below the field (wired to aria-describedby). */
+  helperText?: string;
+  /** Wrapper class when icons or a helper message render a container. */
+  containerClassName?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      containerClassName,
+      type = "text",
+      size = "md",
+      leadingIcon,
+      trailingIcon,
+      onClear,
+      value,
+      defaultValue,
+      error = false,
+      helperText,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      disabled,
+      readOnly,
+      ...props
+    },
+    ref,
+  ) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const hasMessage = Boolean(helperText);
+    const showClear = Boolean(onClear && (value !== undefined ? String(value).length > 0 : defaultValue !== undefined ? String(defaultValue).length > 0 : false));
+    const messageId = hasMessage ? `${inputId}-description` : undefined;
+    const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || undefined;
+
+    const field = (
+      <input
+        ref={ref}
+        id={inputId}
+        type={type}
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-invalid={error || undefined}
+        aria-describedby={describedBy}
+        style={
+          leadingIcon || trailingIcon || showClear
+            ? {
+                paddingInlineStart: leadingIcon
+                  ? `calc(var(--control-pad-x-${size}) + var(--control-icon-${size}) + var(--control-gap))`
+                  : undefined,
+                paddingInlineEnd:
+                  trailingIcon || showClear
+                    ? `calc(var(--control-pad-x-${size}) + var(--control-icon-${size}) + var(--control-gap))`
+                    : undefined,
+              }
+            : undefined
+        }
+        className={cn(
+          "flex w-full rounded-[var(--control-radius)] border bg-[var(--input-bg)] text-[var(--input-fg)] transition-colors",
+          HEIGHT[size],
+          PAD_X[size],
+          "placeholder:text-[var(--input-placeholder)]",
+          "hover:border-[var(--input-border-hover)]",
+          "focus-visible:outline-none focus-visible:border-[var(--input-border-focus)] focus-visible:ring-2 focus-visible:ring-focus/30",
+          error &&
+            "border-error hover:border-error focus-visible:border-error focus-visible:ring-error/30",
+          !error && "border-[var(--input-border)]",
+          disabled &&
+            "cursor-not-allowed bg-[var(--input-bg-disabled)] opacity-60 hover:border-[var(--input-border)]",
+          readOnly && "cursor-default focus-visible:ring-0",
+          className,
+        )}
+        value={value}
+        defaultValue={defaultValue}
+        {...props}
+      />
+    );
+
+    // Bare input keeps the historical API when no compositional features are used.
+    if (!leadingIcon && !trailingIcon && !showClear && !hasMessage) {
+      return field;
+    }
+
+    return (
+      <div className={cn("w-full", containerClassName)}>
+        <div className="relative">
+          {leadingIcon ? (
+            <span
+              className={cn(
+                "pointer-events-none absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
+                LEAD_INSET[size],
+              )}
+              aria-hidden
+            >
+              <span className={cn("inline-flex items-center justify-center", ICON[size])}>
+                {leadingIcon}
+              </span>
+            </span>
+          ) : null}
+          {field}
+          {showClear ? (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={onClear}
+              className={cn(
+                "absolute inset-y-0 flex items-center text-[var(--input-placeholder)] transition-colors hover:text-[var(--input-fg)]",
+                TRAIL_INSET[size],
+              )}
+            >
+              <span className={cn("inline-flex items-center justify-center", ICON[size])}>
+                <X />
+              </span>
+            </button>
+          ) : trailingIcon ? (
+            <span
+              className={cn(
+                "pointer-events-none absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
+                TRAIL_INSET[size],
+              )}
+              aria-hidden
+            >
+              <span className={cn("inline-flex items-center justify-center", ICON[size])}>
+                {trailingIcon}
+              </span>
+            </span>
+          ) : null}
+        </div>
+        {hasMessage ? (
+          <p
+            id={messageId}
+            className={cn("mt-1.5 text-xs", error ? "text-error" : "text-muted")}
+          >
+            {helperText}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";

package/src/kbd.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "./utils";
+
+/** Inline keyboard hint chip. */
+export function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return (
+    <kbd
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-line bg-elevated px-1.5 font-mono text-[11px] font-medium text-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/label.tsx

@@ -0,0 +1,19 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium text-fg leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";

package/src/radio-group.tsx

@@ -0,0 +1,134 @@
+import {
+  createContext,
+  useContext,
+  useId,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { Badge } from "./badge";
+import { cn } from "./utils";
+
+interface RadioGroupContextValue {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export interface RadioGroupProps
+  extends Omit<HTMLAttributes<HTMLFieldSetElement>, "onChange"> {
+  /** Accessible group name; also the shared `name` for the native radios. */
+  label: string;
+  /** Selected value (controlled). */
+  value?: string;
+  /** Called with the newly selected value. */
+  onChange?: (value: string) => void;
+  /** Disables every option in the group. */
+  disabled?: boolean;
+  /** Shared `name` for the native inputs; generated when omitted. */
+  name?: string;
+}
+
+/**
+ * Vertical group of `RadioCard` options. Built on native `<input type="radio">`
+ * inside a `<fieldset>`, so arrow-key navigation, labels and forms work without
+ * a dependency. Controlled via `value` / `onChange`.
+ */
+export function RadioGroup({
+  label,
+  value,
+  onChange,
+  disabled = false,
+  name,
+  className,
+  children,
+  ...props
+}: RadioGroupProps) {
+  const generated = useId();
+  const groupName = name ?? generated;
+
+  return (
+    <RadioGroupContext.Provider value={{ name: groupName, value, onChange, disabled }}>
+      <fieldset className={cn("flex flex-col gap-6", className)} {...props}>
+        <legend className="sr-only">{label}</legend>
+        {children}
+      </fieldset>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioCardProps {
+  /** Value reported when this option is selected. */
+  value: string;
+  /** Primary label. */
+  title: ReactNode;
+  /** Supporting copy shown under the title. */
+  description?: ReactNode;
+  /** Optional pill rendered next to the title (e.g. "Easiest"). */
+  badge?: ReactNode;
+  /** Disables just this option. */
+  disabled?: boolean;
+  className?: string;
+}
+
+/** A single selectable option: radio indicator, title, optional badge + copy. */
+export function RadioCard({
+  value,
+  title,
+  description,
+  badge,
+  disabled = false,
+  className,
+}: RadioCardProps) {
+  const ctx = useContext(RadioGroupContext);
+  const describedById = useId();
+  if (!ctx) {
+    throw new Error("RadioCard must be rendered inside a RadioGroup");
+  }
+
+  const isDisabled = disabled || ctx.disabled;
+  const isChecked = ctx.value === value;
+
+  return (
+    <label
+      className={cn(
+        "group relative flex items-start gap-3",
+        isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
+      )}
+    >
+      <input
+        type="radio"
+        name={ctx.name}
+        value={value}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={() => ctx.onChange?.(value)}
+        aria-describedby={description ? describedById : undefined}
+        className="peer sr-only"
+      />
+      <span
+        aria-hidden
+        className={cn(
+          "mt-0.5 grid size-4.5 shrink-0 place-items-center rounded-full border-2 border-transparent bg-line-strong transition-colors",
+          "peer-checked:border-[5px] peer-checked:border-primary peer-checked:bg-primary-fg",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-focus/40 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-canvas",
+        )}
+      />
+      <span className="min-w-0 flex-1">
+        <span className="flex flex-wrap items-center gap-2">
+          <span className="text-base font-semibold text-fg">{title}</span>
+          {badge ? <Badge variant="primary">{badge}</Badge> : null}
+        </span>
+        {description ? (
+          <span id={describedById} className="mt-1 block text-sm text-muted">
+            {description}
+          </span>
+        ) : null}
+      </span>
+    </label>
+  );
+}