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

package/dist/index.mjs

@@ -1004,10 +1004,12 @@ var DialogOverlay = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
     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
@@ -1126,10 +1128,12 @@ var AlertDialogOverlay = forwardRef18(({ className, ...props }, ref) => /* @__PU
   {
     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
@@ -1551,10 +1555,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
@@ -1669,10 +1675,12 @@ var CommandDialogOverlay = forwardRef22(({ className, ...props }, ref) => /* @__
   {
     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",
@@ -2123,6 +2131,192 @@ var TableSkeleton = ({
   return /* @__PURE__ */ jsx33("div", { className: "table-wrapper rounded-md  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
+
+// src/components/context-menu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check as Check4, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
+import * as React9 from "react";
+import { jsx as jsx34, jsxs as jsxs13 } from "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__ */ jsxs13(
+  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__ */ jsx34(ChevronRight2, { className: "ml-auto" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React9.forwardRef(({ className, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ jsx34(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx34(
+    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__ */ jsx34(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx34(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(menuSurface, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
+  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__ */ jsxs13(
+  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__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34(Check4, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+  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__ */ jsx34("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx34(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx34(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx34(
+  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__ */ jsx34(
+  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__ */ jsx34(
+  "span",
+  {
+    className: cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/components/resizable.tsx
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx35(
+  ResizablePrimitive.Group,
+  {
+    className: cn("h-full w-full", className),
+    ...props
+  }
+);
+var ResizablePanel = ResizablePrimitive.Panel;
+var ResizableHandle = ({
+  withGrip,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs14(
+  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__ */ jsx35("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border", children: /* @__PURE__ */ jsx35(GripVertical, { className: "h-2.5 w-2.5 text-muted-foreground" }) }) : null,
+      children
+    ]
+  }
+);
 export {
   Accordion,
   AccordionContent,
@@ -2167,6 +2361,20 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   Dialog,
   DialogClose,
   DialogContent,
@@ -2204,6 +2412,9 @@ export {
   Progress,
   RadioGroup,
   RadioGroupItem,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
   Select,
   SelectContent,
   SelectGroup,