orbital-ds 0.1.1 → 0.2.0

package/dist/ui/combobox.js

@@ -0,0 +1,281 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "./input-group";
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
+const Combobox = ComboboxPrimitive.Root;
+function ComboboxValue({ ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Trigger,
+    {
+      "data-slot": "combobox-trigger",
+      className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+      ]
+    }
+  );
+}
+function ComboboxClear({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Clear,
+    {
+      "data-slot": "combobox-clear",
+      render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }),
+      className: cn(className),
+      ...props,
+      children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+    }
+  );
+}
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(InputGroup, { className: cn("w-auto", className), children: [
+    /* @__PURE__ */ jsx(
+      ComboboxPrimitive.Input,
+      {
+        render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
+      showTrigger && /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          size: "icon-xs",
+          variant: "ghost",
+          render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+          "data-slot": "input-group-button",
+          className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+          disabled
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })
+    ] }),
+    children
+  ] });
+}
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      anchor,
+      className: "isolate z-(--ds-z-overlay)",
+      children: /* @__PURE__ */ jsx(
+        ComboboxPrimitive.Popup,
+        {
+          "data-slot": "combobox-content",
+          "data-chips": !!anchor,
+          className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 ComboboxList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.List,
+    {
+      "data-slot": "combobox-list",
+      className: cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Item,
+    {
+      "data-slot": "combobox-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground 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: [
+        children,
+        /* @__PURE__ */ jsx(
+          ComboboxPrimitive.ItemIndicator,
+          {
+            render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ComboboxGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Group,
+    {
+      "data-slot": "combobox-group",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function ComboboxLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.GroupLabel,
+    {
+      "data-slot": "combobox-label",
+      className: cn("px-3.5 py-2.5 text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxCollection({ ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Empty,
+    {
+      "data-slot": "combobox-empty",
+      className: cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Separator,
+    {
+      "data-slot": "combobox-separator",
+      className: cn("-mx-1 my-1 h-px bg-border/50", className),
+      ...props
+    }
+  );
+}
+function ComboboxChips({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Chips,
+    {
+      "data-slot": "combobox-chips",
+      className: cn(
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-control border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:border-ring focus-within:ring-(length:--ds-ring-width) focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-(length:--ds-ring-width) has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxPrimitive.Chip,
+    {
+      "data-slot": "combobox-chip",
+      className: cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-control bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showRemove && /* @__PURE__ */ jsx(
+          ComboboxPrimitive.ChipRemove,
+          {
+            render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs" }),
+            className: "-ml-1 opacity-50 hover:opacity-100",
+            "data-slot": "combobox-chip-remove",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ComboboxChipsInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxPrimitive.Input,
+    {
+      "data-slot": "combobox-chip-input",
+      className: cn("min-w-16 flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+function useComboboxAnchor() {
+  return React.useRef(null);
+}
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor
+};

package/dist/ui/command.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Command as Command$1 } from 'cmdk';
+import { Dialog } from './dialog.js';
+import '@base-ui/react/dialog';
+
+declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command$1.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command$1.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof Command$1.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command$1.Separator>): React.JSX.Element;
+declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof Command$1.Item>): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/ui/command.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "./dialog";
+import {
+  InputGroup,
+  InputGroupAddon
+} from "./input-group";
+import { SearchIcon, CheckIcon } from "lucide-react";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive,
+    {
+      "data-slot": "command",
+      className: cn(
+        "flex size-full flex-col overflow-hidden rounded-control bg-popover p-1 text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-control! p-0",
+          className
+        ),
+        showCloseButton,
+        children
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ jsxs(InputGroup, { className: "h-9 bg-input/30", children: [
+    /* @__PURE__ */ jsx(
+      CommandPrimitive.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })
+  ] }) });
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Empty,
+    {
+      "data-slot": "command-empty",
+      className: cn("py-6 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("my-1 h-px bg-border/50", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandPrimitive.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
+      ]
+    }
+  );
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+
+declare function ContextMenu({ ...props }: ContextMenu$1.Root.Props): React.JSX.Element;
+declare function ContextMenuPortal({ ...props }: ContextMenu$1.Portal.Props): React.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenu$1.Trigger.Props): React.JSX.Element;
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenu$1.Popup.Props & Pick<ContextMenu$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function ContextMenuGroup({ ...props }: ContextMenu$1.Group.Props): React.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenu$1.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenu$1.Item.Props & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function ContextMenuSub({ ...props }: ContextMenu$1.SubmenuRoot.Props): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenu$1.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenu$1.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: ContextMenu$1.RadioGroup.Props): React.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenu$1.RadioItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenu$1.Separator.Props): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };