@jinaan/uikit 0.1.7 → 0.1.9

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/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.7",
+  "version": "0.1.9",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/callout.tsx

@@ -58,6 +58,7 @@ export function Callout({
       role={variant === "error" ? "alert" : undefined}
       className={cn(
         "flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm",
+        "animate-in fade-in-0 slide-in-from-top-1 duration-200 motion-reduce:animate-none",
         tone,
         className,
       )}

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;
 
@@ -22,7 +59,7 @@ export const DropdownMenuContent = forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "menu-surface btn-inner-border z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-[var(--button-secondary-bg)] p-1",
+        "menu-surface btn-inner-border z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
         "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",
@@ -47,7 +84,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-[var(--menu-highlight)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-(--menu-highlight) data-disabled:pointer-events-none data-disabled:opacity-50",
       "[&_svg]:size-4 [&_svg]:text-muted",
       inset && "pl-8",
       className,
@@ -64,14 +101,14 @@ export const DropdownMenuCheckboxItem = forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "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)]",
+      "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-(--menu-highlight)",
       className,
     )}
     checked={checked}
     {...props}
   >
     <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)]">
+      <DropdownMenuPrimitive.ItemIndicator className="btn-fill btn-inner-border flex size-full items-center justify-center rounded-[3px] border-0 bg-(--button-primary-bg) text-(--button-primary-fg) [--button-inner:var(--button-primary-inner)]">
         <Check className="size-3" weight="bold" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>

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/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,6 +43,7 @@ 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-(--control-h-md) w-full rounded-md border border-line bg-surface px-3 focus:border-primary focus:ring-2 focus:ring-focus/30",