@nextlyhq/ui 0.0.2-alpha.50 → 0.0.2-alpha.52

package/README.md

@@ -72,8 +72,9 @@ as a Tailwind v3 preset from `@nextlyhq/ui/tailwind-preset`.
 **Display:** `Badge`, `Card`, `Alert`, `Separator`, `Skeleton`, `Progress`
 **Toggles:** `Checkbox`, `RadioGroup`, `Switch`, `Collapsible`
 **Layout and disclosure:** `Accordion`, `Avatar`, `Tabs`, `Tooltip`, `Popover`
+**Resizable regions:** `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`
 **Overlays:** `Dialog`, `AlertDialog`, `Sheet`
-**Menus and command palette:** `DropdownMenu`, `Select`, `Command`
+**Menus and command palette:** `DropdownMenu`, `ContextMenu`, `Select`, `Command`
 **Feedback:** `Spinner`, `Toaster` (with `toast()` helper)
 **Tables:** `Table` primitives, `ResponsiveTable`, `TableSearch`, `TablePagination`, `TableSkeleton`, `TableEmpty`, `TableError`, `TableLoading`
 **Providers:** `PortalProvider`, `usePortalContainer`
@@ -118,7 +119,8 @@ Tailwind's internal `--tw-*` registrations, and the ancestor classes `dark:` and
 
 ### Overlays need a portal container
 
-AlertDialog, Command, Dialog, DropdownMenu, Popover, Select, Sheet and Tooltip render
+AlertDialog, Command, ContextMenu, Dialog, DropdownMenu, Popover, Select, Sheet and
+Tooltip render
 their overlay through a portal, which defaults to `document.body` — outside the wrapper,
 where the scoped rules and tokens do not reach. Triggers would look right and the menus
 they open would not. Point them back inside with `PortalProvider`:

package/dist/index.cjs

@@ -74,6 +74,20 @@ __export(index_exports, {
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
   CommandShortcut: () => CommandShortcut,
+  ContextMenu: () => ContextMenu,
+  ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuGroup: () => ContextMenuGroup,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuLabel: () => ContextMenuLabel,
+  ContextMenuRadioGroup: () => ContextMenuRadioGroup,
+  ContextMenuRadioItem: () => ContextMenuRadioItem,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuShortcut: () => ContextMenuShortcut,
+  ContextMenuSub: () => ContextMenuSub,
+  ContextMenuSubContent: () => ContextMenuSubContent,
+  ContextMenuSubTrigger: () => ContextMenuSubTrigger,
+  ContextMenuTrigger: () => ContextMenuTrigger,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -111,6 +125,9 @@ __export(index_exports, {
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
+  ResizableHandle: () => ResizableHandle,
+  ResizablePanel: () => ResizablePanel,
+  ResizablePanelGroup: () => ResizablePanelGroup,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -1167,10 +1184,12 @@ var DialogOverlay = (0, import_react14.forwardRef)(({ className, ...props }, ref
     ref,
     "data-slot": "dialog-overlay",
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1287,10 +1306,12 @@ var AlertDialogOverlay = (0, import_react15.forwardRef)(({ className, ...props }
   {
     ref,
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1712,10 +1733,12 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive2.Overlay,
   {
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -1830,10 +1853,12 @@ var CommandDialogOverlay = (0, import_react17.forwardRef)(({ className, ...props
   {
     ref,
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-[99] bg-black/80 backdrop-blur-sm",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-[99] bg-overlay backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "transition-opacity duration-200",
@@ -2278,6 +2303,192 @@ var TableSkeleton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "table-wrapper rounded-md  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
+
+// src/components/context-menu.tsx
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
+var import_lucide_react12 = require("lucide-react");
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var menuItemBase2 = "cursor-pointer transition-colors data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var menuSurface = "z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-[--radix-context-menu-content-transform-origin]";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var ContextMenuSubTrigger = React9.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase2,
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.ChevronRight, { className: "ml-auto" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React9.forwardRef(({ className, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(menuSurface, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React9.forwardRef(({ className, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(menuSurface, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase2,
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React9.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase2,
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase2,
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  "span",
+  {
+    className: cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/components/resizable.tsx
+var import_lucide_react13 = require("lucide-react");
+var ResizablePrimitive = __toESM(require("react-resizable-panels"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  ResizablePrimitive.Group,
+  {
+    className: cn("h-full w-full", className),
+    ...props
+  }
+);
+var ResizablePanel = ResizablePrimitive.Panel;
+var ResizableHandle = ({
+  withGrip,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  ResizablePrimitive.Separator,
+  {
+    className: cn(
+      // The drawn line is 1px; the element around it is wider and transparent, so the pointer
+      // target is comfortably larger than what it appears to grab (WCAG 2.5.8).
+      "relative flex items-center justify-center bg-border",
+      // Keyed off `aria-orientation`, which is what the separator actually carries, and read as
+      // the ARIA spec defines it: the attribute describes the SEPARATOR, not the group. A
+      // horizontal group puts its panels side by side, so its separator is a vertical line.
+      "aria-[orientation=vertical]:w-px aria-[orientation=horizontal]:h-px",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      // Reachable without precision pointing, without drawing a heavier divider: the hit area
+      // grows across the line, so a vertical line widens and a horizontal one deepens.
+      "after:absolute after:inset-0",
+      "aria-[orientation=vertical]:after:-inset-x-1 aria-[orientation=horizontal]:after:-inset-y-1",
+      className
+    ),
+    ...props,
+    children: [
+      withGrip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react13.GripVertical, { className: "h-2.5 w-2.5 text-muted-foreground" }) }) : null,
+      children
+    ]
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2323,6 +2534,20 @@ TableSkeleton.displayName = "TableSkeleton";
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   Dialog,
   DialogClose,
   DialogContent,
@@ -2360,6 +2585,9 @@ TableSkeleton.displayName = "TableSkeleton";
   Progress,
   RadioGroup,
   RadioGroupItem,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
   Select,
   SelectContent,
   SelectGroup,