@jinaan/uikit 0.1.2 → 0.1.4

package/package.json

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

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-focus disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/data-table.tsx

@@ -145,9 +145,6 @@ interface DataTableProps<T> {
 const HEADER_CELL =
   "h-[var(--table-header-h)] whitespace-nowrap px-[var(--table-pad-x)] text-left align-middle text-[0.8125rem] font-medium";
 
-const TOOLBAR_BUTTON =
-  "rounded-[6px] bg-surface text-fg shadow-xs ring-1 ring-line hover:bg-elevated hover:text-fg active:bg-elevated";
-
 function initials(name: string): string {
   return name
     .split(/\s+/)
@@ -356,7 +353,6 @@ export function DataTable<T>({
         <div className="flex flex-wrap items-center gap-2">
           {search && (
             <Input
-              size="sm"
               type="search"
               aria-label={search.placeholder ?? "Search"}
               placeholder={search.placeholder ?? "Search..."}
@@ -373,10 +369,9 @@ export function DataTable<T>({
             <DropdownMenuTrigger asChild>
               <Button
                 variant="secondary"
-                size="sm"
+                size="md"
                 leadingIcon={<ColumnsIcon />}
                 trailingIcon={<CaretDown />}
-                className={TOOLBAR_BUTTON}
               >
                 Columns
               </Button>
@@ -419,10 +414,9 @@ export function DataTable<T>({
               <DropdownMenuTrigger asChild>
                 <Button
                   variant="secondary"
-                  size="sm"
+                  size="md"
                   iconOnly
                   aria-label="Add filter"
-                  className={TOOLBAR_BUTTON}
                 >
                   <FunnelSimple />
                 </Button>
@@ -443,70 +437,74 @@ export function DataTable<T>({
               </DropdownMenuContent>
             </DropdownMenu>
           ) : null}
-          {toolbarEnd ? (
-            <div className="flex-0 sm:ml-auto [&_button]:h-8 [&_button]:rounded-[6px]">
-              {toolbarEnd}
-            </div>
-          ) : null}
+          {toolbarEnd ? <div className="flex-0 sm:ml-auto">{toolbarEnd}</div> : null}
         </div>
       )}
 
       {activeFilters.length > 0 ? (
         <div className="flex flex-wrap items-center gap-2">
-          {activeFilters.map((filter) => (
-            <DropdownMenu key={filter.id}>
-              <DropdownMenuTrigger asChild>
+          {activeFilters.map((filter) => {
+            const clear = () => {
+              filter.onChange([]);
+              setActiveFilterIds((prev) => prev.filter((id) => id !== filter.id));
+            };
+
+            return (
+              <div key={filter.id} className="inline-flex items-center">
                 <Button
-                  variant="outline"
-                  size="sm"
-                  className="rounded-[6px] bg-surface shadow-xs"
+                  variant="secondary"
+                  size="md"
+                  iconOnly
+                  aria-label={`Remove ${filter.label} filter`}
+                  className="rounded-r-none"
+                  onClick={clear}
                 >
-                  <FunnelSimple />
-                  <span className="font-medium">{filter.label}</span>
-                  <span className="h-4 w-px bg-line" aria-hidden />
-                  <span className="text-muted">
-                    {filter.value.length > 0
-                      ? `${filter.value.length} selected`
-                      : "Enter value"}
-                  </span>
-                  <CaretDown className="text-muted" />
+                  <X />
                 </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="w-56">
-                <DropdownMenuLabel className="text-[13px]">
-                  Filter by {filter.label}
-                </DropdownMenuLabel>
-                {filter.options.map((option) => {
-                  const checked = filter.value.includes(option.value);
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={option.value}
-                      checked={checked}
-                      onCheckedChange={() =>
-                        filter.onChange(
-                          checked
-                            ? filter.value.filter((value) => value !== option.value)
-                            : [...filter.value, option.value],
-                        )
-                      }
-                      onSelect={(e) => e.preventDefault()}
-                    >
-                      {option.label}
-                    </DropdownMenuCheckboxItem>
-                  );
-                })}
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onSelect={() => {
-                    filter.onChange([]);
-                    setActiveFilterIds((prev) => prev.filter((id) => id !== filter.id));
-                  }}
-                >
-                  Clear filter
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ))}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="secondary" size="md" className="rounded-l-none pl-2">
+                      <FunnelSimple />
+                      <span className="font-medium">{filter.label}</span>
+                      <span className="h-4 w-px bg-line" aria-hidden />
+                      <span className="text-muted">
+                        {filter.value.length > 0
+                          ? `${filter.value.length} selected`
+                          : "Enter value"}
+                      </span>
+                      <CaretDown className="text-muted" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="w-56">
+                    <DropdownMenuLabel className="text-[13px]">
+                      Filter by {filter.label}
+                    </DropdownMenuLabel>
+                    {filter.options.map((option) => {
+                      const checked = filter.value.includes(option.value);
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={option.value}
+                          checked={checked}
+                          onCheckedChange={() =>
+                            filter.onChange(
+                              checked
+                                ? filter.value.filter((value) => value !== option.value)
+                                : [...filter.value, option.value],
+                            )
+                          }
+                          onSelect={(e) => e.preventDefault()}
+                        >
+                          {option.label}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onSelect={clear}>Clear filter</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            );
+          })}
           <button
             type="button"
             onClick={() => {
@@ -529,7 +527,7 @@ export function DataTable<T>({
             {(bulkActions ?? []).map((a) => (
               <Button
                 key={a.label}
-                size="sm"
+                size="md"
                 variant={a.variant ?? "outline"}
                 disabled={a.disabled}
                 onClick={() => void a.onRun(selectedRows)}
@@ -567,7 +565,7 @@ export function DataTable<T>({
             <thead>
               <tr>
                 {selectable && (
-                  <th className="h-[var(--table-header-h)] w-11 px-4 align-middle">
+                  <th className="h-(--table-header-h) w-11 px-4 align-middle">
                     <Checkbox
                       aria-label="Select all rows"
                       checked={allSelected ? true : someSelected ? "indeterminate" : false}
@@ -611,7 +609,7 @@ export function DataTable<T>({
                   </th>
                 ))}
                 {rowActions && (
-                  <th className="h-[var(--table-header-h)] w-44 px-4 align-middle">
+                  <th className="h-(--table-header-h) w-44 px-4 align-middle">
                     <span className="sr-only">Actions</span>
                   </th>
                 )}
@@ -627,8 +625,8 @@ export function DataTable<T>({
                 ))}
               </div>
             ) : error ? (
-              <div className="flex min-h-[22rem] flex-col items-center justify-center gap-4 px-6 py-16 text-center">
-                <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-error [&_svg]:size-8">
+              <div className="flex min-h-88 flex-col items-center justify-center gap-4 px-6 py-16 text-center">
+                <div className="flex size-(--table-empty-icon) items-center justify-center rounded-2xl border border-table-empty-icon-border bg-table-empty-icon text-error [&_svg]:size-8">
                   <WarningCircle weight="duotone" />
                 </div>
                 <div className="space-y-2">
@@ -718,7 +716,7 @@ export function DataTable<T>({
           </span>
           <div className="flex items-center gap-2">
             <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
-              <SelectTrigger aria-label="Rows per page" className="h-8 w-[110px]">
+              <SelectTrigger aria-label="Rows per page" className="w-27.5">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -731,7 +729,7 @@ export function DataTable<T>({
             </Select>
             <Button
               variant="outline"
-              size="sm"
+              size="md"
               disabled={page <= 0}
               onClick={() => setPage((p) => Math.max(0, p - 1))}
             >
@@ -739,7 +737,7 @@ export function DataTable<T>({
             </Button>
             <Button
               variant="outline"
-              size="sm"
+              size="md"
               disabled={page >= pageCount - 1}
               onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
             >

package/src/dropdown-menu.tsx

@@ -22,7 +22,7 @@ export const DropdownMenuContent = forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-surface p-1 shadow-md",
+        "z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-[var(--button-secondary-bg)] 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",
@@ -45,7 +45,7 @@ export const DropdownMenuItem = forwardRef<
     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",
+      "focus:bg-[var(--menu-highlight)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "[&_svg]:size-4 [&_svg]:text-muted",
       inset && "pl-8",
       className,
@@ -62,15 +62,15 @@ export const DropdownMenuCheckboxItem = forwardRef<
   <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",
+      "group 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-[var(--menu-highlight)]",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-4 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-3.5" />
+    <span className="absolute left-2 flex size-4 shrink-0 items-center justify-center rounded border border-line-strong bg-transparent transition-colors group-data-[state=checked]:border-primary">
+      <DropdownMenuPrimitive.ItemIndicator 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)]">
+        <Check className="size-3" weight="bold" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

package/src/input.tsx

@@ -110,17 +110,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             : undefined
         }
         className={cn(
-          "flex w-full rounded-[var(--control-radius)] border bg-[var(--input-bg)] text-[var(--input-fg)] transition-colors",
+          "flex w-full rounded-(--control-radius) border bg-(--input-bg) text-(--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",
+          "placeholder:text-(--input-placeholder)",
+          "hover:border-(--input-border-hover)",
+          "focus-visible:outline-none focus-visible:border-(--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)]",
+          !error && "border-(--input-border)",
           disabled &&
-            "cursor-not-allowed bg-[var(--input-bg-disabled)] opacity-60 hover:border-[var(--input-border)]",
+            "cursor-not-allowed bg-(--input-bg-disabled) opacity-60 hover:border-(--input-border)",
           readOnly && "cursor-default focus-visible:ring-0",
           className,
         )}
@@ -141,7 +141,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {leadingIcon ? (
             <span
               className={cn(
-                "pointer-events-none absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
+                "pointer-events-none absolute inset-y-0 flex items-center text-(--input-placeholder)",
                 LEAD_INSET[size],
               )}
               aria-hidden
@@ -158,7 +158,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               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)]",
+                "absolute inset-y-0 flex items-center text-(--input-placeholder) transition-colors hover:text-(--input-fg)",
                 TRAIL_INSET[size],
               )}
             >
@@ -169,7 +169,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           ) : trailingIcon ? (
             <span
               className={cn(
-                "pointer-events-none absolute inset-y-0 flex items-center text-[var(--input-placeholder)]",
+                "pointer-events-none absolute inset-y-0 flex items-center text-(--input-placeholder)",
                 TRAIL_INSET[size],
               )}
               aria-hidden

package/styles.css

@@ -11,8 +11,16 @@
  * Values mirror the Clerk "Ceramic" system captured in docs/design-reference.md.
  */
 :root {
-  --canvas: #fafafb;
-  --surface: #ffffff;
+  /* Clerk shell: white page, gray-50 chrome/cards. */
+  --page: #ffffff;
+  --canvas: #ffffff;
+  --surface: #fafafb;
+  --chrome: #fafafb;
+  --chrome-border: #ececee;
+  --tab: #5f5f6f;
+  --tab-active: #131316;
+  --tab-underline: #131316;
+  --subnav-active: #ececee;
   --elevated: #f6f6f7;
   --fg: #131316;
   --fg-muted: #5f5f6f;
@@ -41,7 +49,7 @@
 
   /* Data tables: header band is the darkest layer, the body panel sits above it
      and the page is lighter than the header. */
-  --table-container-bg: #f1f1f3;
+  --table-container-bg: #e9e9ec;
   --table-panel-bg: #ffffff;
   --table-panel-border: #e3e3e7;
   --table-header-text: #5f5f6f;
@@ -105,6 +113,7 @@
   --button-surface-hover: #f1f1f3;
   --button-surface-active: #e9e9ec;
   --button-ghost-hover: var(--button-surface-hover);
+  --menu-highlight: color-mix(in oklab, var(--button-secondary-bg) 85%, black);
   --button-destructive-bg: var(--error);
   --button-destructive-fg: #ffffff;
   /* Destructive keeps its red identity; hover/pressed are red-shifted. */
@@ -128,6 +137,9 @@
     0 1px 2px rgb(19 19 22 / 0.06),
     0 10px 28px -14px rgb(19 19 22 / 0.2);
 
+  /* Settings danger-zone shell (Clerk red-tinted surface). */
+  --settings-danger-bg: #fff5f4;
+
   /* Third-party brand marks (identity providers). */
   --brand-google-blue: #4285f4;
   --brand-google-green: #34a853;
@@ -140,8 +152,16 @@
 }
 
 .dark {
-  --canvas: #131316;
-  --surface: #1b1b1f;
+  /* Clerk shell: page gray-1400, chrome/cards gray-1500. */
+  --page: #19191c;
+  --canvas: #1b1b1f;
+  --surface: #111113;
+  --chrome: #121213;
+  --chrome-border: #232328;
+  --tab: #adadb7;
+  --tab-active: #fcfcfc;
+  --tab-underline: #fcfcfc;
+  --subnav-active: #2b2b34;
   --elevated: #232328;
   --fg: #fcfcfc;
   --fg-muted: #adadb7;
@@ -221,11 +241,20 @@
   --dialog-panel-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.04),
     0 12px 32px -16px rgb(0 0 0 / 0.6);
+
+  --settings-danger-bg: #240b0a;
 }
 
 @theme inline {
+  --color-page: var(--page);
   --color-canvas: var(--canvas);
   --color-surface: var(--surface);
+  --color-chrome: var(--chrome);
+  --color-chrome-border: var(--chrome-border);
+  --color-tab: var(--tab);
+  --color-tab-active: var(--tab-active);
+  --color-tab-underline: var(--tab-underline);
+  --color-subnav-active: var(--subnav-active);
   --color-elevated: var(--elevated);
   --color-fg: var(--fg);
   --color-muted: var(--fg-muted);