orbital-ds 0.1.1 → 0.3.0

package/dist/ui/context-menu.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import { cn } from "../lib/utils";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
+function ContextMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props });
+}
+function ContextMenuTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Trigger,
+    {
+      "data-slot": "context-menu-trigger",
+      className: cn("select-none", className),
+      ...props
+    }
+  );
+}
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Positioner,
+    {
+      className: "isolate z-(--ds-z-overlay) outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        ContextMenuPrimitive.Popup,
+        {
+          "data-slot": "context-menu-content",
+          className: cn("z-(--ds-z-overlay) max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) 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:fade-out-0 data-closed:zoom-out-95", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function ContextMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
+}
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.GroupLabel,
+    {
+      "data-slot": "context-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Item,
+    {
+      "data-slot": "context-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuSub({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props });
+}
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.SubmenuTrigger,
+    {
+      "data-slot": "context-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function ContextMenuSubContent({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuContent,
+    {
+      "data-slot": "context-menu-sub-content",
+      className: "shadow-overlay",
+      side: "right",
+      ...props
+    }
+  );
+}
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "context-menu-checkbox-item",
+      "data-inset": inset,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
+          CheckIcon,
+          {}
+        ) }) }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "context-menu-radio-group",
+      ...props
+    }
+  );
+}
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.RadioItem,
+    {
+      "data-slot": "context-menu-radio-item",
+      "data-inset": inset,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx(
+          CheckIcon,
+          {}
+        ) }) }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Separator,
+    {
+      "data-slot": "context-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border/50", className),
+      ...props
+    }
+  );
+}
+function ContextMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "context-menu-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};

package/dist/ui/dialog.js

@@ -24,7 +24,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 isolate z-(--z-overlay) bg-scrim duration-(--motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -44,7 +44,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-1/2 left-1/2 z-(--z-overlay) grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-overlay bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/5 duration-(--motion-fast) outline-none sm:max-w-md 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",
+          "fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-(--ds-overlay-gap) rounded-overlay bg-popover p-(--ds-overlay-p) text-sm text-popover-foreground ring-1 ring-foreground/5 duration-(--ds-motion-fast) outline-none sm:max-w-md 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
         ),
         ...props,

package/dist/ui/direction.d.ts

@@ -0,0 +1 @@
+export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';

package/dist/ui/direction.js

@@ -0,0 +1,8 @@
+import {
+  DirectionProvider,
+  useDirection
+} from "@base-ui/react/direction-provider";
+export {
+  DirectionProvider,
+  useDirection
+};

package/dist/ui/drawer.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+
+declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: Drawer$1.Root.Props & {
+    showSwipeHandle?: boolean;
+}): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: Drawer$1.Trigger.Props): React.JSX.Element;
+declare function DrawerPortal({ ...props }: Drawer$1.Portal.Props): React.JSX.Element;
+declare function DrawerClose({ ...props }: Drawer$1.Close.Props): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: Drawer$1.Backdrop.Props): React.JSX.Element;
+declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: Drawer$1.Popup.Props): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: Drawer$1.Title.Props): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: Drawer$1.Description.Props): React.JSX.Element;
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/ui/drawer.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "../lib/utils";
+const DrawerContext = React.createContext(null);
+function useDrawer() {
+  const context = React.useContext(DrawerContext);
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.");
+  }
+  return context;
+}
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
+  );
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    DrawerPrimitive.Root,
+    {
+      "data-slot": "drawer",
+      modal,
+      snapPoints,
+      swipeDirection,
+      ...props
+    }
+  ) });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Backdrop,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "fixed inset-0 z-(--ds-z-overlay) min-h-dvh bg-scrim opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-(--ds-motion-slow) ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerSwipeHandle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-swipe-handle",
+      "aria-hidden": "true",
+      className: cn(
+        "relative z-(--ds-z-raised) flex shrink-0 cursor-grab transition-opacity duration-(--ds-motion-base) group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] active:cursor-grabbing",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+  const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : void 0 }),
+    /* @__PURE__ */ jsx(
+      DrawerPrimitive.Viewport,
+      {
+        "data-slot": "drawer-viewport",
+        "data-modal": modal,
+        className: "pointer-events-none fixed inset-0 z-(--ds-z-overlay) select-none data-[modal=true]:pointer-events-auto",
+        children: /* @__PURE__ */ jsxs(
+          DrawerPrimitive.Popup,
+          {
+            "data-slot": "drawer-popup",
+            "data-swipe-axis": swipeAxis,
+            "data-snap-points": hasSnapPoints ? "" : void 0,
+            className: cn(
+              // Base.
+              "group/drawer-popup pointer-events-auto fixed z-(--ds-z-overlay) m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-control border border-popover bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-(--ds-motion-slow) ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border",
+              // Nested.
+              "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+              // Bleed.
+              "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+              // Sizing.
+              "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+              // Stack.
+              "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+              // Transitions.
+              "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+              // Axis: y.
+              "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+              // Axis: x.
+              "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+              // Direction: down.
+              "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+              // Direction: up.
+              "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+              // Direction: left.
+              "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+              // Direction: right.
+              "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+              className
+            ),
+            ...props,
+            children: [
+              showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}),
+              /* @__PURE__ */ jsx(
+                DrawerPrimitive.Content,
+                {
+                  "data-slot": "drawer-content",
+                  className: cn(
+                    "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-(--ds-motion-slow) ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+                  ),
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn(
+        "text-base font-medium text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-balance text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerSwipeHandle,
+  DrawerTitle,
+  DrawerTrigger
+};

package/dist/ui/dropdown-menu.d.ts

@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 declare function DropdownMenu({ ...props }: Menu.Root.Props): React.JSX.Element;
 declare function DropdownMenuPortal({ ...props }: Menu.Portal.Props): React.JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: Menu.Trigger.Props): React.JSX.Element;
-declare function DropdownMenuContent({ className, align, sideOffset, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "sideOffset">): React.JSX.Element;
+declare function DropdownMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: Menu.Group.Props): React.JSX.Element;
 declare function DropdownMenuItem({ className, inset, variant, ...props }: Menu.Item.Props & {
     inset?: boolean;

package/dist/ui/dropdown-menu.js

@@ -23,6 +23,8 @@ function DropdownMenuTrigger({
 function DropdownMenuContent({
   className,
   align = "start",
+  alignOffset = 0,
+  side = "bottom",
   sideOffset = 4,
   ...props
 }) {
@@ -31,13 +33,15 @@ function DropdownMenuContent({
     {
       sideOffset,
       align,
-      className: "z-(--z-overlay)",
+      alignOffset,
+      side,
+      className: "z-(--ds-z-overlay)",
       children: /* @__PURE__ */ jsx(
         DropdownMenuPrimitive.Popup,
         {
           "data-slot": "dropdown-menu-content",
           className: cn(
-            "max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--motion-fast) 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-closed:overflow-hidden dark:ring-foreground/10 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",
+            "max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-(--ds-menu-p) text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) 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-closed:overflow-hidden dark:ring-foreground/10 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
           ),
           ...props
@@ -62,7 +66,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       ),
       ...props
@@ -82,7 +86,7 @@ function DropdownMenuCheckboxItem({
       "data-slot": "dropdown-menu-checkbox-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-xl py-(--ds-menu-item-py) pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -124,7 +128,7 @@ function DropdownMenuRadioItem({
       "data-slot": "dropdown-menu-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-xl py-(--ds-menu-item-py) pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -153,7 +157,7 @@ function DropdownMenuLabel({
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
       className: cn(
-        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        "px-(--ds-menu-item-px) py-(--ds-menu-item-py).5 text-xs text-muted-foreground data-inset:pl-9.5",
         className
       ),
       ...props
@@ -212,7 +216,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-xl px-(--ds-menu-item-px) py-(--ds-menu-item-py) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -227,12 +231,12 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Positioner, { className: "z-(--z-overlay)", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Positioner, { className: "z-(--ds-z-overlay)", children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Popup,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "z-(--z-overlay) min-w-36 origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--motion-fast) 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",
+        "z-(--ds-z-overlay) min-w-36 origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover p-(--ds-menu-p) text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) 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
       ),
       ...props

package/dist/ui/empty.d.ts

@@ -0,0 +1,15 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React$1.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React$1.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };