gladvn 0.2.14

package/src/components/micro/dropdown-menu.tsx

@@ -0,0 +1,305 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+export type DropdownMenuVariant = "destructive";
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+DropdownMenu.displayName = "DropdownMenu";
+
+const DropdownMenuPortal = MenuPrimitive.Portal;
+DropdownMenuPortal.displayName = "DropdownMenuPortal";
+
+const DropdownMenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  MenuPrimitive.Trigger.Props
+>(({ ...props }, ref) => (
+  <MenuPrimitive.Trigger
+    ref={ref}
+    data-slot="dropdown-menu-trigger"
+    {...props}
+  />
+));
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.Popup>,
+  MenuPrimitive.Popup.Props &
+    Pick<
+      MenuPrimitive.Positioner.Props,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    >
+>(
+  (
+    {
+      align = "start",
+      alignOffset = 0,
+      side = "bottom",
+      sideOffset = 4,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <>
+        <MenuPrimitive.Positioner
+          className="isolate z-50 outline-none"
+          align={align}
+          alignOffset={alignOffset}
+          side={side}
+          sideOffset={sideOffset}
+        >
+          <MenuPrimitive.Popup
+            ref={ref}
+            data-slot="dropdown-menu-content"
+            className={cn(
+              "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+              className,
+            )}
+            {...props}
+          />
+        </MenuPrimitive.Positioner>
+      </>
+    );
+  },
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+const DropdownMenuGroup = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.Group>,
+  MenuPrimitive.Group.Props
+>(({ ...props }, ref) => (
+  <MenuPrimitive.Group ref={ref} data-slot="dropdown-menu-group" {...props} />
+));
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.GroupLabel>,
+  MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenuPrimitive.GroupLabel
+    ref={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    className={cn(
+      "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.Item>,
+  MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: DropdownMenuVariant;
+  }
+>(({ className, inset, variant, ...props }, ref) => (
+  <MenuPrimitive.Item
+    ref={ref}
+    data-slot="dropdown-menu-item"
+    data-inset={inset}
+    data-variant={variant}
+    className={cn(
+      "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:*:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:text-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+DropdownMenuSub.displayName = "DropdownMenuSub";
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,
+  MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenuPrimitive.SubmenuTrigger
+    ref={ref}
+    data-slot="dropdown-menu-sub-trigger"
+    data-inset={inset}
+    className={cn(
+      "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto" />
+  </MenuPrimitive.SubmenuTrigger>
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuContent>
+>(
+  (
+    {
+      align = "start",
+      alignOffset = -3,
+      side = "right",
+      sideOffset = 0,
+      className,
+      ...props
+    },
+    ref,
+  ) => (
+    <DropdownMenuContent
+      ref={ref}
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  ),
+);
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,
+  MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+  }
+>(({ className, children, checked, inset, ...props }, ref) => (
+  <MenuPrimitive.CheckboxItem
+    ref={ref}
+    data-slot="dropdown-menu-checkbox-item"
+    data-inset={inset}
+    className={cn(
+      "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span
+      className="pointer-events-none absolute right-2 flex items-center justify-center"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+    >
+      <MenuPrimitive.CheckboxItemIndicator>
+        <CheckIcon />
+      </MenuPrimitive.CheckboxItemIndicator>
+    </span>
+    {children}
+  </MenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+const DropdownMenuRadioGroup = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.RadioGroup>,
+  MenuPrimitive.RadioGroup.Props
+>(({ ...props }, ref) => (
+  <MenuPrimitive.RadioGroup
+    ref={ref}
+    data-slot="dropdown-menu-radio-group"
+    {...props}
+  />
+));
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.RadioItem>,
+  MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+  }
+>(({ className, children, inset, ...props }, ref) => (
+  <MenuPrimitive.RadioItem
+    ref={ref}
+    data-slot="dropdown-menu-radio-item"
+    data-inset={inset}
+    className={cn(
+      "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    <span
+      className="pointer-events-none absolute right-2 flex items-center justify-center"
+      data-slot="dropdown-menu-radio-item-indicator"
+    >
+      <MenuPrimitive.RadioItemIndicator>
+        <CircleIcon className="size-2 fill-current" />
+      </MenuPrimitive.RadioItemIndicator>
+    </span>
+    {children}
+  </MenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof MenuPrimitive.Separator>,
+  MenuPrimitive.Separator.Props
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Separator
+    ref={ref}
+    data-slot="dropdown-menu-separator"
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+const DropdownMenuShortcut = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="dropdown-menu-shortcut"
+    className={cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/components/micro/empty.tsx

@@ -0,0 +1,144 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * @description A placeholder state component for empty data.
+ * @requires EmptyHeader, EmptyTitle, EmptyDescription, EmptyMedia, EmptyContent, EmptyAction
+ * @example
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyTitle>No data</EmptyTitle>
+ *   </EmptyHeader>
+ * </Empty>
+ */
+const Empty = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="empty"
+    className={cn(
+      "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+      className,
+    )}
+    {...props}
+  />
+));
+Empty.displayName = "Empty";
+
+const EmptyHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="empty-header"
+    className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+    {...props}
+  />
+));
+EmptyHeader.displayName = "EmptyHeader";
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center *:pointer-events-none *:shrink-0",
+  {
+    variants: {
+      variant: {
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground **:[svg:not([class*='size-'])]:size-4",
+      },
+    },
+  },
+);
+
+const EmptyMedia = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> &
+    VariantProps<typeof emptyMediaVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="empty-icon"
+    data-variant={variant}
+    className={cn(emptyMediaVariants({ variant, className }))}
+    {...props}
+  />
+));
+EmptyMedia.displayName = "EmptyMedia";
+
+const EmptyTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<"h3">
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    data-slot="empty-title"
+    className={cn("font-heading text-sm font-medium tracking-tight", className)}
+    {...props}
+  />
+));
+EmptyTitle.displayName = "EmptyTitle";
+
+const EmptyDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="empty-description"
+    className={cn(
+      "text-sm/relaxed text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-primary",
+      className,
+    )}
+    {...props}
+  />
+));
+EmptyDescription.displayName = "EmptyDescription";
+
+const EmptyContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="empty-content"
+    className={cn(
+      "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+      className,
+    )}
+    {...props}
+  />
+));
+EmptyContent.displayName = "EmptyContent";
+
+const EmptyAction = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="empty-action"
+    className={cn("flex flex-col items-center gap-2", className)}
+    {...props}
+  />
+));
+EmptyAction.displayName = "EmptyAction";
+
+export {
+  Empty,
+  EmptyAction,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+};