@jinaan/uikit 0.1.6 → 0.1.8

package/dist/item-count.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+/** Count matching elements anywhere in a static React children tree. */
+export declare function countDescendants(children: ReactNode, types: readonly unknown[]): number;
+//# sourceMappingURL=item-count.d.ts.map

package/dist/item-count.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-count.d.ts","sourceRoot":"","sources":["../src/item-count.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,wEAAwE;AACxE,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,SAAS,OAAO,EAAE,GACxB,MAAM,CAcR"}

package/dist/segmented.d.ts

@@ -13,7 +13,7 @@ interface SegmentedProps<T extends string> {
     "aria-label"?: string;
 }
 /**
- * Single-choice control for a small set of options, styled after the Clerk
+ * Single-choice control for a small set of options, styled after the Jinaan
  * dashboard: a recessed track with an elevated selected pill. Implemented as a
  * `radiogroup` of native radios, so arrow-key roving and forms work natively.
  */

package/dist/select.d.ts

@@ -1,8 +1,9 @@
 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>>;
+/** Select root; disabled when there are no items to choose from. */
+export declare function Select({ children, disabled, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>): import("react").JSX.Element;
 export interface SelectTriggerProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
     /** `field` fills a form; `inline` mimics the compact app dropdown. */
     variant?: "field" | "inline";

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;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"}
+{"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;AAKf,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,oEAAoE;AACpE,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,+BAQvD;AAED,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,kHAwBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}

package/package.json

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

package/src/agent-prompt.tsx

@@ -14,7 +14,7 @@ interface AgentPromptProps {
 }
 
 /**
- * The "Add Clerk auth to my app" prompt pill: a dark tag overlapping a
+ * The "Add Jinaan auth to my app" prompt pill: a dark tag overlapping a
  * rounded command field with a copy button.
  */
 export function AgentPrompt({

package/src/data-table.tsx

@@ -153,7 +153,7 @@ function initials(name: string): string {
     .join("");
 }
 
-/** Clerk-style identity cell: avatar + primary name + secondary line. */
+/** Jinaan-style identity cell: avatar + primary name + secondary line. */
 export function DataTableIdentity({
   name,
   secondary,

package/src/dropdown-menu.tsx

@@ -1,15 +1,52 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "@phosphor-icons/react";
 import {
+  createContext,
   forwardRef,
+  useContext,
   type ComponentPropsWithoutRef,
   type ElementRef,
 } from "react";
 
+import { countDescendants } from "./item-count";
 import { cn } from "./utils";
 
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuEmptyContext = createContext(false);
+
+/** Menu root; disables its trigger when there are no items. */
+export function DropdownMenu({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) {
+  const empty =
+    countDescendants(children, [
+      DropdownMenuItem,
+      DropdownMenuCheckboxItem,
+    ]) === 0;
+
+  return (
+    <DropdownMenuEmptyContext.Provider value={empty}>
+      <DropdownMenuPrimitive.Root {...props}>{children}</DropdownMenuPrimitive.Root>
+    </DropdownMenuEmptyContext.Provider>
+  );
+}
+
+export const DropdownMenuTrigger = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ disabled, ...props }, ref) => {
+  const empty = useContext(DropdownMenuEmptyContext);
+
+  return (
+    <DropdownMenuPrimitive.Trigger
+      ref={ref}
+      disabled={disabled || empty}
+      {...props}
+    />
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
 export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 

package/src/item-count.ts

@@ -0,0 +1,21 @@
+import { Children, isValidElement, type ReactNode } from "react";
+
+/** Count matching elements anywhere in a static React children tree. */
+export function countDescendants(
+  children: ReactNode,
+  types: readonly unknown[],
+): number {
+  let count = 0;
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (types.some((type) => type === child.type)) {
+      count += 1;
+      return;
+    }
+    const nested = (child.props as { children?: ReactNode }).children;
+    if (nested) count += countDescendants(nested, types);
+  });
+
+  return count;
+}

package/src/segmented.tsx

@@ -18,7 +18,7 @@ interface SegmentedProps<T extends string> {
 }
 
 /**
- * Single-choice control for a small set of options, styled after the Clerk
+ * Single-choice control for a small set of options, styled after the Jinaan
  * dashboard: a recessed track with an elevated selected pill. Implemented as a
  * `radiogroup` of native radios, so arrow-key roving and forms work natively.
  */

package/src/select.tsx

@@ -6,12 +6,27 @@ import {
   type ElementRef,
 } from "react";
 
+import { countDescendants } from "./item-count";
 import { cn } from "./utils";
 
-export const Select = SelectPrimitive.Root;
 export const SelectGroup = SelectPrimitive.Group;
 export const SelectValue = SelectPrimitive.Value;
 
+/** Select root; disabled when there are no items to choose from. */
+export function Select({
+  children,
+  disabled,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) {
+  const empty = countDescendants(children, [SelectItem]) === 0;
+
+  return (
+    <SelectPrimitive.Root disabled={disabled || empty} {...props}>
+      {children}
+    </SelectPrimitive.Root>
+  );
+}
+
 export interface SelectTriggerProps extends ComponentPropsWithoutRef<
   typeof SelectPrimitive.Trigger
 > {
@@ -28,11 +43,12 @@ export const SelectTrigger = forwardRef<
     className={cn(
       "flex items-center justify-between gap-2 text-sm text-fg",
       "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
       "[&>span]:truncate",
       variant === "field" &&
-        "h-9 w-full rounded-md border border-line bg-surface px-3 focus:border-primary focus:ring-2 focus:ring-focus/30",
+        "h-(--control-h-md) w-full rounded-md border border-line bg-surface px-3 focus:border-primary focus:ring-2 focus:ring-focus/30",
       variant === "inline" &&
-        "btn-fill btn-inner-border btn-interactive h-8 w-auto rounded-(--control-radius) border-0 bg-(--button-secondary-bg) px-(--control-pad-x-sm) font-medium text-fg hover:bg-(--button-surface-hover) active:bg-(--button-surface-active) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
+        "btn-fill btn-inner-border btn-interactive h-(--control-h-md) w-auto rounded-(--control-radius) border-0 bg-(--button-secondary-bg) px-(--control-pad-x-sm) font-medium text-fg hover:bg-(--button-surface-hover) active:bg-(--button-surface-active) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
       className,
     )}
     {...props}

package/styles.css

@@ -8,10 +8,10 @@
 /*
  * Semantic design tokens. Components must reference these (via the Tailwind
  * utilities below) rather than raw palette values, so both themes stay correct.
- * Values mirror the Clerk "Ceramic" system captured in docs/design-reference.md.
+ * Values mirror the Jinaan "Ceramic" system captured in docs/design-reference.md.
  */
 :root {
-  /* Clerk shell: white page, gray-50 chrome/cards. */
+  /* Jinaan shell: white page, gray-50 chrome/cards. */
   --page: #ffffff;
   --canvas: #ffffff;
   --surface: #fafafb;
@@ -121,7 +121,7 @@
   /* Destructive keeps its red identity; hover/pressed are red-shifted. */
   --button-destructive-hover: color-mix(in oklab, var(--error) 88%, black);
   --button-destructive-active: color-mix(in oklab, var(--error) 78%, black);
-  /* Filled buttons: flat surface + inset gloss + soft drop (Clerk). */
+  /* Filled buttons: flat surface + inset gloss + soft drop (Jinaan). */
   --button-inner: rgb(255 255 255 / 0.45);
   /* Primary and destructive read their own, stronger top gloss. */
   --button-primary-inner: rgb(255 255 255 / 0.5);
@@ -140,7 +140,7 @@
     0 10px 28px -14px rgb(19 19 22 / 0.2);
   --dialog-noise-opacity: 0.04;
 
-  /* Settings danger-zone shell (Clerk red-tinted surface). */
+  /* Settings danger-zone shell (Jinaan red-tinted surface). */
   --settings-danger-bg: #fff5f4;
 
   /* Third-party brand marks (identity providers). */
@@ -155,7 +155,7 @@
 }
 
 .dark {
-  /* Clerk shell: page gray-1400, chrome/cards gray-1500. */
+  /* Jinaan shell: page gray-1400, chrome/cards gray-1500. */
   --page: #19191c;
   --canvas: #1b1b1f;
   --surface: #111113;
@@ -205,7 +205,7 @@
   --table-row-selected: #2b2b34;
   --table-accent: var(--primary);
 
-  /* Control system overrides (dark) — surfaces match the Clerk dashboard. */
+  /* Control system overrides (dark) — surfaces match the Jinaan dashboard. */
   --input-bg: #30303a;
   --input-fg: #f4f4f5;
   --input-placeholder: #777783;
@@ -324,7 +324,7 @@
 @layer components {
   /*
    * Filled control surface: a soft blurred drop plus a 1px inset top gloss
-   * (matches the Clerk dashboard buttons). The Tailwind focus ring replaces
+   * (matches the Jinaan dashboard buttons). The Tailwind focus ring replaces
    * this shadow while focused.
    */
   .btn-fill {