@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/overlays/drawer/drawer.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
 import { useUiStrings } from "../../i18n/index.js";
+import { X } from "../../icons/index.js";
+import * as DialogPrimitive from "../../primitives/dialog/dialog.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   PreviousFocusProvider,
@@ -16,11 +17,7 @@ import {
  * Wraps `DialogPrimitive.Root` so focus is restored on close even when the
  * drawer is opened in a controlled way, without its own `DrawerTrigger`.
  */
-export function Drawer({
-  open,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {
+export function Drawer({ open, children, ...props }: DialogPrimitive.DialogRootProps) {
   const focusRef = useCapturePreviousFocus(open);
   return (
     <DialogPrimitive.Root open={open} {...props}>
@@ -31,10 +28,24 @@ export function Drawer({
 
 export const DrawerTrigger = DialogPrimitive.Trigger;
 export const DrawerClose = DialogPrimitive.Close;
-export const DrawerTitle = DialogPrimitive.Title;
+export function DrawerTitle({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title className={cn("m-0", className)} {...props} />;
+}
+export function DrawerDescription({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>) {
+  return <DialogPrimitive.Description className={cn("m-0 text-ink-2", className)} {...props} />;
+}
+
+export type DrawerContentPart = "root" | "overlay" | "close";
 
-export interface DrawerContentProps
-  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+export interface DrawerContentProps extends DialogPrimitive.DialogContentProps {
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the content and is merged last. */
+  classNames?: ClassNames<DrawerContentPart>;
   /** Same semantics as `DialogContentProps.blocking`. */
   blocking?: boolean;
   /** Accessible label of the close button. */
@@ -44,6 +55,7 @@ export interface DrawerContentProps
 /** Right-anchored side panel for secondary flows. */
 export function DrawerContent({
   className,
+  classNames,
   blocking = false,
   closeLabel,
   children,
@@ -57,10 +69,11 @@ export function DrawerContent({
   const strings = useUiStrings();
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fixed inset-0 z-70 bg-scrim" />
+      <DialogPrimitive.Overlay className={cn("fixed inset-0 z-70 bg-scrim", classNames?.overlay)} />
       <DialogPrimitive.Content
         className={cn(
-          "@container/drawer fixed inset-y-0 right-0 z-70 flex h-full w-[min(430px,100%)] max-w-full flex-col overflow-y-auto surface-overlay shadow-overlay",
+          "@container/drawer fixed inset-y-0 right-0 z-70 flex h-full w-[min(430px,100%)] max-w-full flex-col overflow-y-auto outline-none surface-overlay shadow-overlay",
+          classNames?.root,
           className,
         )}
         onEscapeKeyDown={(event) => {
@@ -85,7 +98,10 @@ export function DrawerContent({
         {!blocking && (
           <DialogPrimitive.Close
             aria-label={closeLabel ?? strings.close}
-            className="absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5"
+            className={cn(
+              "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5",
+              classNames?.close,
+            )}
           >
             <X aria-hidden="true" className="size-4" />
           </DialogPrimitive.Close>

package/src/overlays/drawer/index.ts

@@ -2,7 +2,9 @@ export {
   Drawer,
   DrawerClose,
   DrawerContent,
+  type DrawerContentPart,
   type DrawerContentProps,
+  DrawerDescription,
   DrawerTitle,
   DrawerTrigger,
 } from "./drawer.js";

package/src/overlays/dropdown-menu/dropdown-menu.tsx

@@ -1,45 +1,55 @@
 "use client";
 
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import type { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Check, ChevronRight } from "../../icons/index.js";
+import * as MenuPrimitive from "../../primitives/menu/menu.js";
 import { cn } from "../../utils/cn.js";
 
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenu = MenuPrimitive.Root;
+export const DropdownMenuTrigger = MenuPrimitive.Trigger;
+export const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;
+export const DropdownMenuGroup = MenuPrimitive.Group;
+export const DropdownMenuSub = MenuPrimitive.Sub;
+export const DropdownMenuArrow = MenuPrimitive.Arrow;
 
-export interface DropdownMenuContentProps
-  extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}
+const surface =
+  "z-85 min-w-[min(14.375rem,var(--ui-popper-available-width))] max-h-(--ui-popper-available-height) max-w-(--ui-popper-available-width) overflow-y-auto rounded-popover surface-overlay p-1.5 shadow-overlay";
+
+const itemBase =
+  "flex w-full cursor-pointer items-center gap-2 rounded-event px-2.5 py-1.75 text-body text-ink outline-none data-highlighted:bg-surface-2";
+
+export interface DropdownMenuContentProps extends MenuPrimitive.MenuContentProps {
+  /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
+  container?: HTMLElement | null;
+}
 
 export function DropdownMenuContent({
   className,
   sideOffset = 6,
   collisionPadding = 8,
+  container,
   ...props
 }: DropdownMenuContentProps) {
   return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
+    <MenuPrimitive.Portal container={container}>
+      <MenuPrimitive.Content
         sideOffset={sideOffset}
         collisionPadding={collisionPadding}
-        className={cn(
-          "z-85 min-w-[min(14.375rem,var(--radix-dropdown-menu-content-available-width))] max-h-(--radix-dropdown-menu-content-available-height) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-popover surface-overlay p-1.5 shadow-overlay",
-          className,
-        )}
+        className={cn(surface, className)}
         {...props}
       />
-    </DropdownMenuPrimitive.Portal>
+    </MenuPrimitive.Portal>
   );
 }
 
-export interface DropdownMenuItemProps
-  extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {}
+export interface DropdownMenuItemProps extends MenuPrimitive.MenuItemProps {}
 
 export function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps) {
   return (
-    <DropdownMenuPrimitive.Item
+    <MenuPrimitive.Item
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2 rounded-event px-2.5 py-1.75 text-body text-ink outline-none data-highlighted:bg-surface-2 data-disabled:pointer-events-none data-disabled:opacity-50",
+        itemBase,
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
         className,
       )}
       {...props}
@@ -47,15 +57,41 @@ export function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps)
   );
 }
 
-export interface DropdownMenuRadioItemProps
-  extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {}
+export interface DropdownMenuCheckboxItemProps extends MenuPrimitive.MenuCheckboxItemProps {}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      className={cn(
+        itemBase,
+        "relative ps-8 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute inset-s-2 flex size-4 items-center justify-center">
+        <MenuPrimitive.ItemIndicator>
+          <Check aria-hidden="true" className="size-4" />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+export interface DropdownMenuRadioItemProps extends MenuPrimitive.MenuRadioItemProps {}
 
-/** Radix sets `role="menuitemradio"` and `aria-checked`: use it for single-value filters. */
+/** Exposes `role="menuitemradio"` and `aria-checked`: use it for single-value filters. */
 export function DropdownMenuRadioItem({ className, ...props }: DropdownMenuRadioItemProps) {
   return (
-    <DropdownMenuPrimitive.RadioItem
+    <MenuPrimitive.RadioItem
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2 rounded-event px-2.5 py-1.75 text-body text-ink outline-none data-highlighted:bg-surface-2 data-[state=checked]:font-bold data-[state=checked]:text-accent-ink",
+        itemBase,
+        "data-[state=checked]:font-bold data-[state=checked]:text-accent-ink",
         className,
       )}
       {...props}
@@ -65,18 +101,61 @@ export function DropdownMenuRadioItem({ className, ...props }: DropdownMenuRadio
 
 export function DropdownMenuLabel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn("px-2.5 pt-1.5 pb-1 text-overline text-ink-3", className)} {...props} />
+    <MenuPrimitive.Label
+      className={cn("px-2.5 pt-1.5 pb-1 text-overline text-ink-3", className)}
+      {...props}
+    />
   );
 }
 
-export interface DropdownMenuSeparatorProps
-  extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}
+export interface DropdownMenuSeparatorProps extends ComponentPropsWithoutRef<"div"> {}
 
 export function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) {
   return (
-    <DropdownMenuPrimitive.Separator
-      className={cn("my-1.25 border-t-divider", className)}
+    <MenuPrimitive.Separator className={cn("my-1.25 border-t-divider", className)} {...props} />
+  );
+}
+
+export interface DropdownMenuSubTriggerProps extends MenuPrimitive.MenuSubTriggerProps {}
+
+/** Item that opens a nested menu; the chevron is added after the children. */
+export function DropdownMenuSubTrigger({
+  className,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubTrigger
+      className={cn(
+        itemBase,
+        "data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:bg-surface-2",
+        className,
+      )}
       {...props}
-    />
+    >
+      {children}
+      <ChevronRight aria-hidden="true" className="ms-auto size-4 rtl:rotate-180" />
+    </MenuPrimitive.SubTrigger>
+  );
+}
+
+export interface DropdownMenuSubContentProps extends MenuPrimitive.MenuSubContentProps {
+  container?: HTMLElement | null;
+}
+
+export function DropdownMenuSubContent({
+  className,
+  collisionPadding = 8,
+  container,
+  ...props
+}: DropdownMenuSubContentProps) {
+  return (
+    <MenuPrimitive.Portal container={container}>
+      <MenuPrimitive.SubContent
+        collisionPadding={collisionPadding}
+        className={cn(surface, className)}
+        {...props}
+      />
+    </MenuPrimitive.Portal>
   );
 }

package/src/overlays/dropdown-menu/index.ts

@@ -1,7 +1,11 @@
 export {
   DropdownMenu,
+  DropdownMenuArrow,
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemProps,
   DropdownMenuContent,
   type DropdownMenuContentProps,
+  DropdownMenuGroup,
   DropdownMenuItem,
   type DropdownMenuItemProps,
   DropdownMenuLabel,
@@ -10,5 +14,10 @@ export {
   type DropdownMenuRadioItemProps,
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentProps,
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
   DropdownMenuTrigger,
 } from "./dropdown-menu.js";

package/src/overlays/hover-card/hover-card.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Slot } from "@radix-ui/react-slot";
 import {
   type ComponentPropsWithoutRef,
   createContext,
@@ -16,7 +14,9 @@ import {
   useRef,
   useState,
 } from "react";
+import * as PopoverPrimitive from "../../primitives/popover/popover.js";
 import { cn } from "../../utils/cn.js";
+import { Slot } from "../../utils/slot.js";
 
 interface HoverCardContextValue {
   contentId: string;
@@ -138,7 +138,7 @@ export function HoverCardTrigger({
 }
 
 export interface HoverCardContentProps
-  extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, "onOpenAutoFocus"> {
+  extends Omit<PopoverPrimitive.PopoverContentProps, "onOpenAutoFocus"> {
   /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
   container?: HTMLElement | null;
 }
@@ -176,7 +176,7 @@ export function HoverCardContent({
           card.schedule(false, card.closeDelay);
         }}
         className={cn(
-          "z-85 w-72 max-w-(--radix-popover-content-available-width) rounded-popover border-card surface-overlay bg-surface-overlay p-card text-body text-ink shadow-overlay",
+          "z-85 w-72 max-w-(--ui-popper-available-width) rounded-popover border-card surface-overlay bg-surface-overlay p-card text-body text-ink shadow-overlay",
           className,
         )}
         {...props}

package/src/overlays/popover/index.ts

@@ -1,6 +1,7 @@
 export {
   Popover,
   PopoverAnchor,
+  PopoverArrow,
   PopoverClose,
   PopoverContent,
   type PopoverContentProps,

package/src/overlays/popover/popover.tsx

@@ -1,31 +1,34 @@
 "use client";
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import type { ComponentPropsWithoutRef } from "react";
+import * as PopoverPrimitive from "../../primitives/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 
 export const Popover = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverClose = PopoverPrimitive.Close;
 export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverArrow = PopoverPrimitive.Arrow;
 
-export interface PopoverContentProps
-  extends ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {}
+export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
+  /** Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. */
+  container?: HTMLElement | null;
+}
 
-/** Positioned contextual panel; viewport collision is handled by Radix (Floating UI). */
+/** Positioned contextual panel; flips and shifts to stay inside the viewport. */
 export function PopoverContent({
   className,
   sideOffset = 6,
   collisionPadding = 8,
+  container,
   ...props
 }: PopoverContentProps) {
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={container}>
       <PopoverPrimitive.Content
         sideOffset={sideOffset}
         collisionPadding={collisionPadding}
         className={cn(
-          "z-85 min-w-[min(14.375rem,var(--radix-popover-content-available-width))] max-h-(--radix-popover-content-available-height) max-w-(--radix-popover-content-available-width) overflow-y-auto rounded-popover surface-overlay p-1.5 text-ink shadow-overlay",
+          "z-85 min-w-[min(14.375rem,var(--ui-popper-available-width))] max-h-(--ui-popper-available-height) max-w-(--ui-popper-available-width) overflow-y-auto rounded-popover surface-overlay p-1.5 text-ink shadow-overlay",
           className,
         )}
         {...props}

package/src/overlays/toaster/index.ts

@@ -1 +1,9 @@
-export { Toaster, type ToasterProps, toast } from "./toaster.js";
+export {
+  type ToastAction,
+  Toaster,
+  type ToasterPart,
+  type ToasterPosition,
+  type ToasterProps,
+  type ToastOptions,
+  toast,
+} from "./toaster.js";

package/src/overlays/toaster/toast-store.ts

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+
+export type ToastTone = "default" | "success" | "error";
+
+export interface ToastAction {
+  label: ReactNode;
+  onClick: (event: { preventDefault: () => void }) => void;
+}
+
+export interface ToastOptions {
+  /** Reuse an id to update a toast in place instead of stacking a new one. */
+  id?: string | number;
+  description?: ReactNode;
+  /** Milliseconds before auto dismiss; `Infinity` keeps it until dismissed. Defaults to the Toaster `duration`. */
+  duration?: number;
+  action?: ToastAction;
+  /** Runs once when the toast is dismissed, by timer, action, swipe, Escape or `toast.dismiss`. */
+  onDismiss?: (id: string | number) => void;
+}
+
+export interface ToastRecord extends Omit<ToastOptions, "id"> {
+  id: string | number;
+  message: ReactNode;
+  tone: ToastTone;
+  state: "open" | "closed";
+  /** Bumped on every update so timers restart. */
+  revision: number;
+}
+
+const EMPTY: readonly ToastRecord[] = [];
+let toasts: readonly ToastRecord[] = EMPTY;
+let counter = 0;
+const listeners = new Set<() => void>();
+
+function commit(next: readonly ToastRecord[]) {
+  toasts = next;
+  for (const listener of [...listeners]) listener();
+}
+
+export function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getSnapshot(): readonly ToastRecord[] {
+  return toasts;
+}
+
+export function getServerSnapshot(): readonly ToastRecord[] {
+  return EMPTY;
+}
+
+/** Adds a toast, or updates and reopens the one sharing `options.id`. Returns its id. */
+export function publish(
+  message: ReactNode,
+  tone: ToastTone,
+  options: ToastOptions = {},
+): string | number {
+  const id = options.id ?? `toast-${++counter}`;
+  const existing = toasts.find((t) => t.id === id);
+  const record: ToastRecord = {
+    ...options,
+    id,
+    message,
+    tone,
+    state: "open",
+    revision: (existing?.revision ?? 0) + 1,
+  };
+  commit(existing ? toasts.map((t) => (t.id === id ? record : t)) : [...toasts, record]);
+  return id;
+}
+
+/** Starts the exit of one toast, or of every open toast without an id. Idempotent. */
+export function dismiss(id?: string | number) {
+  const closing = toasts.filter((t) => t.state === "open" && (id === undefined || t.id === id));
+  if (closing.length === 0) return;
+  commit(toasts.map((t) => (closing.includes(t) ? { ...t, state: "closed" as const } : t)));
+  for (const t of closing) t.onDismiss?.(t.id);
+}
+
+/** Drops a toast from the store once its exit finished. */
+export function remove(id: string | number) {
+  if (!toasts.some((t) => t.id === id)) return;
+  commit(toasts.filter((t) => t.id !== id));
+}
+
+/** Open toasts that fit on screen: the newest `limit`. Older ones wait their turn. */
+export function selectVisible(list: readonly ToastRecord[], limit: number): ToastRecord[] {
+  const open = list.filter((t) => t.state === "open");
+  const shown = new Set(open.slice(Math.max(0, open.length - limit)));
+  return list.filter((t) => t.state === "closed" || shown.has(t));
+}
+
+/** Test hook: empties the store without notifying callbacks. */
+export function reset() {
+  counter = 0;
+  commit(EMPTY);
+}

package/src/overlays/toaster/toast.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { dismiss, publish, type ToastOptions } from "./toast-store.js";
+
+export type { ToastAction, ToastOptions } from "./toast-store.js";
+
+type ToastId = string | number;
+
+function toast(message: ReactNode, options?: ToastOptions): ToastId {
+  return publish(message, "default", options);
+}
+
+toast.success = (message: ReactNode, options?: ToastOptions): ToastId =>
+  publish(message, "success", options);
+toast.error = (message: ReactNode, options?: ToastOptions): ToastId =>
+  publish(message, "error", options);
+toast.dismiss = (id?: ToastId): void => dismiss(id);
+
+export { toast };