@jinaan/uikit 0.1.3 → 0.1.5

package/dist/select.d.ts

@@ -1,8 +1,13 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type ComponentPropsWithoutRef } from "react";
 export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SelectTriggerProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    /** `field` fills a form; `inline` mimics the compact app dropdown. */
+    variant?: "field" | "inline";
+}
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAM1D,eAAO,MAAM,MAAM,iDAAuB,CAAC;AAC3C,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,kMAmBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LAuBxB,CAAC;AAGH,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,OAAO,CAAC;AAIf,eAAO,MAAM,MAAM,iDAAuB,CAAC;AAC3C,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,kHAuBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}

package/dist/table-surface.d.ts

@@ -9,6 +9,10 @@ export interface TableSurfaceAction {
     disabled?: boolean;
 }
 interface TableSurfaceProps {
+    /** Title above the header row. */
+    title?: ReactNode;
+    /** Supporting text under the title. */
+    description?: ReactNode;
     /** Header row content (a single row of column cells). */
     header?: ReactNode;
     /** Panel content: the body table, or an empty / loading / error state. */
@@ -33,6 +37,6 @@ interface TableSurfaceProps {
  * Colors come from the `--table-*` tokens and can be adjusted per surface with
  * `tone` plus `headerClassName` / `panelClassName`.
  */
-export declare function TableSurface({ header, children, action, tone, className, headerClassName, panelClassName, minHeight, }: TableSurfaceProps): import("react").JSX.Element;
+export declare function TableSurface({ title, description, header, children, action, tone, className, headerClassName, panelClassName, minHeight, }: TableSurfaceProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=table-surface.d.ts.map

package/dist/table-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-surface.d.ts","sourceRoot":"","sources":["../src/table-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACxC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,+BA8CnB"}
+{"version":3,"file":"table-surface.d.ts","sourceRoot":"","sources":["../src/table-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBAAiB;IACzB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;IACxC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,+BA8DnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/agent-prompt.tsx

@@ -41,7 +41,7 @@ export function AgentPrompt({
         {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">
+      <div className="mt-2 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

package/src/button.tsx

@@ -6,7 +6,7 @@ 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",
+  "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-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/card.tsx

@@ -1,61 +1,104 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 
+import { TableSurface } from "./table-surface";
 import { cn } from "./utils";
 
+function splitCardChildren(children: ReactNode): {
+  header: ReactNode;
+  body: ReactNode;
+} {
+  const nodes = Children.toArray(children);
+  const headers = nodes.filter(
+    (child) => isValidElement(child) && child.type === CardHeader,
+  );
+  return {
+    header: headers.length > 0 ? <>{headers}</> : undefined,
+    body: nodes.filter((child) => !headers.includes(child)),
+  };
+}
+
 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}
-    />
-  ),
+  ({ className, children, ...props }, ref) => {
+    const { header, body } = splitCardChildren(children);
+    return (
+      <div ref={ref} {...props}>
+        <TableSurface className={cn("shadow-xs", className)} header={header}>
+          {body}
+        </TableSurface>
+      </div>
+    );
+  },
 );
 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}
-    />
-  ),
-);
+export const CardHeader = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex flex-col gap-1 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} />
-  ),
-);
+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} />
+  <p
+    ref={ref}
+    className={cn(
+      "mt-1 border-t border-card-divider pt-2 text-sm text-muted",
+      "first:mt-0 first:border-t-0 first:pt-0",
+      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} />
-  ),
-);
+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}
-    />
-  ),
-);
+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

@@ -11,16 +11,16 @@ export const Checkbox = forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded border border-line-strong bg-surface transition-colors",
+      "peer size-4 shrink-0 rounded border border-line-strong bg-transparent 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",
+      "data-[state=checked]:border-primary",
+      "data-[state=indeterminate]:border-primary",
       className,
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+    <CheckboxPrimitive.Indicator className="btn-fill btn-inner-border flex size-full items-center justify-center rounded-[3px] border-0 bg-[var(--button-primary-bg)] text-[var(--button-primary-fg)] [--button-inner:var(--button-primary-inner)]">
       {props.checked === "indeterminate" ? (
         <Minus className="size-3" weight="bold" />
       ) : (

package/src/code-block.tsx

@@ -1,8 +1,7 @@
 import { Check, Copy } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 
-import { Button } from "./button";
-import { cn } from "./utils";
+import { TableSurface } from "./table-surface";
 
 interface CodeBlockProps {
   code: string;
@@ -26,28 +25,30 @@ export function CodeBlock({ code, label, className }: CodeBlockProps) {
   };
 
   return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-lg border border-line bg-canvas",
-        className,
-      )}
+    <TableSurface
+      className={className}
+      header={
+        <div className="flex h-(--table-header-h) items-center px-(--table-pad-x) pr-28">
+          <span className="truncate text-[13px] font-medium text-table-header">
+            {label}
+          </span>
+        </div>
+      }
+      action={{
+        label: copied ? "Copied" : "Copy",
+        icon: copied ? (
+          <Check className="text-success" weight="bold" />
+        ) : (
+          <Copy />
+        ),
+        variant: "ghost",
+        onClick: copy,
+      }}
+      panelClassName="min-w-0"
     >
-      <div className="flex items-center justify-between gap-2 border-b border-line px-3 py-2">
-        <span className="truncate text-xs font-medium text-subtle">{label}</span>
-        <Button
-          variant="ghost"
-          size="sm"
-          leadingIcon={
-            copied ? <Check className="text-success" weight="bold" /> : <Copy />
-          }
-          onClick={copy}
-        >
-          {copied ? "Copied" : "Copy"}
-        </Button>
-      </div>
       <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-fg">
         <code>{code}</code>
       </pre>
-    </div>
+    </TableSurface>
   );
 }

package/src/dialog-motion.ts

@@ -0,0 +1,38 @@
+export interface DialogOriginRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface DialogFlight {
+  dx: number;
+  dy: number;
+  sx: number;
+  sy: number;
+}
+
+function usable(rect: DialogOriginRect): boolean {
+  return rect.width > 0 && rect.height > 0;
+}
+
+function clampScale(value: number): number {
+  return Math.min(1, Math.max(0.1, value));
+}
+
+/**
+ * Computes the transform that places a centered dialog over its caller.
+ * `dx`/`dy` are viewport deltas; `sx`/`sy` scale the dialog down to the caller.
+ */
+export function computeDialogFlight(
+  origin: DialogOriginRect,
+  target: DialogOriginRect,
+): DialogFlight | null {
+  if (!usable(origin) || !usable(target)) return null;
+  return {
+    dx: origin.left + origin.width / 2 - (target.left + target.width / 2),
+    dy: origin.top + origin.height / 2 - (target.top + target.height / 2),
+    sx: clampScale(origin.width / target.width),
+    sy: clampScale(origin.height / target.height),
+  };
+}