@jinaan/uikit 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Reusable React and Tailwind UI components for Jinaan projects.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "styles.css",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "audit:theme": "node scripts/audit-theme.mjs",
+    "build": "pnpm typecheck && vite build && tsc -p tsconfig.build.json",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.5",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  }
+}

package/src/agent-prompt.tsx

@@ -0,0 +1,60 @@
+import { Check, Copy, Robot, Terminal } from "@phosphor-icons/react";
+import { useState, type ReactNode } from "react";
+
+import { Button } from "./button";
+import { cn } from "./utils";
+
+interface AgentPromptProps {
+  /** Command or prompt text; copy copies this verbatim. */
+  command: string;
+  /** Overlapping dark tag above the pill. */
+  tag?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The "Add Clerk auth to my app" prompt pill: a dark tag overlapping a
+ * rounded command field with a copy button.
+ */
+export function AgentPrompt({
+  command,
+  tag = "Build with agents",
+  icon,
+  className,
+}: AgentPromptProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  return (
+    <div className={cn("relative inline-flex max-w-full", className)}>
+      <span className="absolute -top-2.5 left-4 z-10 inline-flex items-center gap-1.5 rounded-md bg-fg px-2 py-1 text-[11px] font-medium text-canvas shadow-sm">
+        {icon ?? <Robot className="size-3.5" weight="fill" />}
+        {tag}
+      </span>
+      <div className="flex w-full items-center gap-2 rounded-xl border border-line bg-surface py-2 pl-3 pr-2 shadow-sm">
+        <Terminal className="size-4 shrink-0 text-subtle" aria-hidden />
+        <span className="truncate font-mono text-sm text-fg">{command}</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          iconOnly
+          aria-label="Copy prompt"
+          className="ml-auto"
+          onClick={copy}
+        >
+          {copied ? <Check className="text-success" weight="bold" /> : <Copy />}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/avatar.tsx

@@ -0,0 +1,46 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const Avatar = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex size-8 shrink-0 overflow-hidden rounded-full border border-line",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = "Avatar";
+
+export const AvatarImage = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square size-full object-cover", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = "AvatarImage";
+
+export const AvatarFallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex size-full items-center justify-center bg-elevated text-xs font-medium text-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = "AvatarFallback";

package/src/badge.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        neutral: "border-line bg-elevated text-muted",
+        outline: "border-line bg-transparent text-muted",
+        success: "border-success/30 bg-success/10 text-success",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        error: "border-error/30 bg-error/10 text-error",
+        info: "border-info/30 bg-info/10 text-info",
+        primary: "border-primary/30 bg-primary/10 text-primary",
+      },
+    },
+    defaultVariants: { variant: "neutral" },
+  },
+);
+
+const dotVariants = cva("size-1.5 shrink-0 rounded-full", {
+  variants: {
+    variant: {
+      neutral: "bg-subtle",
+      outline: "bg-subtle",
+      success: "bg-success",
+      warning: "bg-warning",
+      error: "bg-error",
+      info: "bg-info",
+      primary: "bg-primary",
+    },
+  },
+  defaultVariants: { variant: "neutral" },
+});
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  dot?: boolean;
+}
+
+export function Badge({ className, variant, dot = false, children, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props}>
+      {dot ? <span className={cn(dotVariants({ variant }))} aria-hidden /> : null}
+      {children}
+    </span>
+  );
+}
+
+export { badgeVariants };

package/src/button.tsx

@@ -0,0 +1,126 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+import { Spinner } from "./spinner";
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+  "relative inline-flex select-none items-center justify-center gap-[var(--control-gap)] whitespace-nowrap rounded-[var(--control-radius)] border border-transparent font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-[120ms] active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/40 focus-visible:ring-offset-1 focus-visible:ring-offset-canvas disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "btn-fill btn-inner-border border-0 [--button-inner:var(--button-primary-inner)] bg-[var(--button-primary-bg)] text-[var(--button-primary-fg)] hover:bg-[var(--button-primary-hover)] active:bg-[var(--button-primary-active)]",
+        secondary:
+          "btn-fill btn-inner-border btn-interactive border-0 bg-[var(--button-secondary-bg)] text-fg hover:bg-[var(--button-surface-hover)] active:bg-[var(--button-surface-active)]",
+        outline:
+          "btn-interactive border-[var(--button-outline-border)] bg-transparent text-fg hover:border-fg/12 hover:bg-[var(--button-surface-hover)] active:border-fg/12 active:bg-[var(--button-surface-active)] dark:hover:border-[var(--button-outline-border)] dark:active:border-[var(--button-outline-border)]",
+        ghost:
+          "btn-inner-border btn-interactive border-0 text-muted hover:bg-[var(--button-surface-hover)] hover:text-fg active:bg-[var(--button-surface-active)]",
+        destructive:
+          "btn-fill btn-inner-border border-0 [--button-inner:var(--button-destructive-inner)] bg-[var(--button-destructive-bg)] text-[var(--button-destructive-fg)] hover:bg-[var(--button-destructive-hover)] active:bg-[var(--button-destructive-active)]",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        xs: "h-[var(--control-h-xs)] [--control-gap:var(--control-gap-xs)] px-[var(--control-pad-x-xs)] text-xs [&_svg]:size-[var(--control-icon-xs)]",
+        sm: "h-[var(--control-h-sm)] px-[var(--control-pad-x-sm)] text-sm [&_svg]:size-[var(--control-icon-sm)]",
+        md: "h-[var(--control-h-md)] px-[var(--control-pad-x-md)] text-sm [&_svg]:size-[var(--control-icon-md)]",
+        lg: "h-[var(--control-h-lg)] px-[var(--control-pad-x-lg)] text-sm [&_svg]:size-[var(--control-icon-lg)]",
+        xl: "rounded-[var(--control-radius-xl)] h-[var(--control-h-xl)] px-[var(--control-pad-x-xl)] text-base [&_svg]:size-[var(--control-icon-xl)]",
+        icon: "h-[var(--control-h-md)] w-[var(--control-h-md)] p-0 [&_svg]:size-[var(--control-icon-md)]",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+
+/** Icon metrics per size, applied to icon wrappers so both stay aligned. */
+const iconSize: Record<string, string> = {
+  xs: "[&_svg]:size-[var(--control-icon-xs)]",
+  sm: "[&_svg]:size-[var(--control-icon-sm)]",
+  md: "[&_svg]:size-[var(--control-icon-md)]",
+  lg: "[&_svg]:size-[var(--control-icon-lg)]",
+  xl: "[&_svg]:size-[var(--control-icon-xl)]",
+  icon: "[&_svg]:size-[var(--control-icon-md)]",
+};
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  /** Optional icon rendered before the label. */
+  leadingIcon?: ReactNode;
+  /** Optional icon rendered after the label (e.g. a chevron). */
+  trailingIcon?: ReactNode;
+  /** Square, content-free button. Provide `aria-label`. */
+  iconOnly?: boolean;
+  /** Show a spinner and block interaction while an action runs. */
+  loading?: boolean;
+  /** Stretch to the container width. */
+  fullWidth?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size = "md",
+      asChild = false,
+      leadingIcon,
+      trailingIcon,
+      iconOnly = false,
+      loading = false,
+      fullWidth = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const icon = iconSize[size ?? "md"];
+
+    return (
+      <Comp
+        ref={ref}
+        aria-busy={loading || undefined}
+        disabled={asChild ? undefined : disabled || loading}
+        className={cn(
+          buttonVariants({ variant, size }),
+          iconOnly && "aspect-square px-0",
+          fullWidth && "w-full",
+          className,
+        )}
+        {...props}
+      >
+        {asChild ? (
+          children
+        ) : (
+          <>
+            {loading ? (
+              <Spinner className={cn("text-current", icon)} aria-hidden />
+            ) : leadingIcon ? (
+              <span className={cn("inline-flex shrink-0", icon)} aria-hidden>
+                {leadingIcon}
+              </span>
+            ) : null}
+            {children}
+            {!loading && trailingIcon ? (
+              <span className={cn("inline-flex shrink-0", icon)} aria-hidden>
+                {trailingIcon}
+              </span>
+            ) : null}
+          </>
+        )}
+      </Comp>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { buttonVariants };

package/src/callout.tsx

@@ -0,0 +1,74 @@
+import {
+  CheckCircle,
+  Info,
+  Warning,
+  XCircle,
+} from "@phosphor-icons/react";
+import type { Icon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type CalloutVariant = "info" | "success" | "warning" | "error";
+
+const variants: Record<
+  CalloutVariant,
+  { Icon: Icon; className: string; iconClassName: string }
+> = {
+  info: {
+    Icon: Info,
+    className: "border-info/30 bg-info/10",
+    iconClassName: "text-info",
+  },
+  success: {
+    Icon: CheckCircle,
+    className: "border-success/30 bg-success/10",
+    iconClassName: "text-success",
+  },
+  warning: {
+    Icon: Warning,
+    className: "border-warning/30 bg-warning/10",
+    iconClassName: "text-warning",
+  },
+  error: {
+    Icon: XCircle,
+    className: "border-error/30 bg-error/10",
+    iconClassName: "text-error",
+  },
+};
+
+interface CalloutProps {
+  variant?: CalloutVariant;
+  title?: ReactNode;
+  children?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function Callout({
+  variant = "info",
+  title,
+  children,
+  icon,
+  className,
+}: CalloutProps) {
+  const { Icon: DefaultIcon, className: tone, iconClassName } = variants[variant];
+  return (
+    <div
+      role={variant === "error" ? "alert" : undefined}
+      className={cn(
+        "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm",
+        tone,
+        className,
+      )}
+    >
+      <span className={cn("mt-0.5 shrink-0 [&_svg]:size-4", iconClassName)}>
+        {icon ?? <DefaultIcon weight="fill" />}
+      </span>
+      <div className="min-w-0 space-y-0.5">
+        {title ? <p className="font-medium text-fg">{title}</p> : null}
+        {children ? <div className="text-muted">{children}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/card.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "./utils";
+
+export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-card border border-line bg-surface shadow-xs",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col gap-1 border-b border-line px-5 py-4", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn("text-sm font-semibold text-fg", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("px-5 py-4", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-3 border-t border-line px-5 py-3", className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";

package/src/checkbox.tsx

@@ -0,0 +1,32 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "@phosphor-icons/react";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "./utils";
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer size-4 shrink-0 rounded border border-line-strong bg-surface transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/40",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg",
+      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-fg",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      {props.checked === "indeterminate" ? (
+        <Minus className="size-3" weight="bold" />
+      ) : (
+        <Check className="size-3" weight="bold" />
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = "Checkbox";

package/src/choice-dialog.tsx

@@ -0,0 +1,110 @@
+import { useState, type ReactNode } from "react";
+
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+import { RadioCard, RadioGroup } from "./radio-group";
+
+export interface ChoiceOption {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface ChoiceDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Optional element that opens the dialog. */
+  trigger?: ReactNode;
+  /** Dialog heading. */
+  title: string;
+  /** Selectable options, rendered as radio cards. */
+  options: ChoiceOption[];
+  /** Initially selected value (uncontrolled). */
+  defaultValue?: string;
+  /** Selected value (controlled). */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** Footer labels. */
+  cancelLabel?: string;
+  confirmLabel?: string;
+  /** Called with the selected value when the confirm button is pressed. */
+  onConfirm?: (value: string) => void;
+}
+
+/**
+ * Dialog for picking one option from a small set, styled as the
+ * "Create production instance" reference: divided header, radio cards, and a
+ * footer with an equal-width secondary Cancel plus primary Continue.
+ */
+export function ChoiceDialog({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  options,
+  defaultValue,
+  value,
+  onValueChange,
+  cancelLabel = "Cancel",
+  confirmLabel = "Continue",
+  onConfirm,
+}: ChoiceDialogProps) {
+  const [internal, setInternal] = useState(defaultValue ?? options[0]?.value ?? "");
+  const selected = value ?? internal;
+
+  const select = (next: string) => {
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent
+        aria-describedby={undefined}
+        className="max-w-[29.4rem] [&>button]:hidden"
+      >
+        <DialogPanel>
+          <DialogHeader>
+            <DialogTitle className="text-xl">{title}</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <RadioGroup label={title} value={selected} onChange={select}>
+              {options.map((option) => (
+                <RadioCard
+                  key={option.value}
+                  value={option.value}
+                  title={option.title}
+                  description={option.description}
+                  badge={option.badge}
+                />
+              ))}
+            </RadioGroup>
+          </DialogBody>
+        </DialogPanel>
+        <DialogFooter className="gap-3 pt-2.5">
+          <Button
+            variant="secondary"
+            className="flex-1"
+            onClick={() => onOpenChange?.(false)}
+          >
+            {cancelLabel}
+          </Button>
+          <Button className="flex-1" onClick={() => onConfirm?.(selected)}>
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}