@ngrok/mantle 0.79.3 → 0.81.0

package/dist/command.d.ts

@@ -1,8 +1,41 @@
-import { t as Root } from "./primitive-C64-m48O.js";
-import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
+import { a as Root } from "./dialog-BM4wPCft.js";
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { Command as Command$1, useCommandState } from "cmdk";
 //#region src/components/command/command.d.ts
-type CommandRootProps = ComponentPropsWithoutRef<typeof Command$1>;
+type CommandRootProps = ComponentProps<typeof Command$1>;
+/**
+ * The root component for the Command. It provides the context for all other command sub-components.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandroot
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandRoot: ({ className, ...props }: CommandRootProps) => import("react").JSX.Element;
 /**
  * The props for the CommandDialog.Content component.
  *
@@ -81,10 +114,240 @@ type CommandDialogContentProps = {
  * </Command.DialogRoot>
  * ```
  */
-declare const CommandDialogContent: {
-  ({ children, className, description, filter, shouldFilter, showCloseButton, title }: CommandDialogContentProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const CommandDialogContent: ({ children, className, description, filter, shouldFilter, showCloseButton, title }: CommandDialogContentProps) => import("react").JSX.Element;
+/**
+ * The input component for the Command. It provides the input for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandinput
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandInput: ({ className, ref, ...props }: ComponentPropsWithoutRef<typeof Command$1.Input> & {
+  ref?: Ref<HTMLDivElement>;
+}) => import("react").JSX.Element;
+/**
+ * The list component for the Command. It provides the list for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandlist
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandList: ({ className, ...props }: ComponentProps<typeof Command$1.List>) => import("react").JSX.Element;
+/**
+ * The empty component for the Command. It provides the empty state for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandempty
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandEmpty: ({ className, ...props }: ComponentProps<typeof Command$1.Empty>) => import("react").JSX.Element;
+/**
+ * The group component for the Command. It provides the group for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandgroup
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandGroup: ({ className, ...props }: ComponentProps<typeof Command$1.Group>) => import("react").JSX.Element;
+/**
+ * The separator component for the Command. It provides the separator for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandseparator
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandSeparator: ({ className, ...props }: ComponentProps<typeof Command$1.Separator>) => import("react").JSX.Element;
+/**
+ * The item component for the Command. It provides the item for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commanditem
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandItem: ({ className, ...props }: ComponentProps<typeof Command$1.Item>) => import("react").JSX.Element;
+/**
+ * The shortcut component for the Command. It provides the shortcut for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/command#commandshortcut
+ *
+ * @example
+ * ```tsx
+ * <Command.DialogRoot open={open} onOpenChange={setOpen}>
+ *   <Command.DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">Open Command Palette</Button>
+ *   </Command.DialogTrigger>
+ *   <Command.DialogContent>
+ *     <Command.Input placeholder="Type a command or search..." />
+ *     <Command.List>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *       <Command.Group heading="Suggestions">
+ *         <Command.Item>
+ *           <span>Calendar</span>
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group heading="Settings">
+ *         <Command.Item>
+ *           <span>Profile</span>
+ *           <Command.Shortcut>⌘,</Command.Shortcut>
+ *         </Command.Item>
+ *       </Command.Group>
+ *     </Command.List>
+ *   </Command.DialogContent>
+ * </Command.DialogRoot>
+ * ```
+ */
+declare const CommandShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
 /**
  * The command component for the Command. It provides the command for the command palette.
  *
@@ -165,23 +428,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof CommandRoot;
   /**
    * The root stateful component for the Command dialog. Manages open/closed state.
    *
@@ -215,7 +462,7 @@ declare const Command: {
    * </Command.DialogTrigger>
    * ```
    */
-  readonly DialogTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly DialogTrigger: (props: ComponentProps<import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>>) => import("react").JSX.Element;
   /**
    * The visible content of the Command dialog. Renders inside the dialog portal.
    *
@@ -264,14 +511,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Input: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: React.Ref<HTMLInputElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
-    value?: string;
-    onValueChange?: (search: string) => void;
-  } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Input: typeof CommandInput;
   /**
    * The list component for the Command component.
    *
@@ -304,15 +544,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly List: import("react").ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly List: typeof CommandList;
   /**
    * The empty component for the Command component.
    *
@@ -345,13 +577,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Empty: import("react").ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Empty: typeof CommandEmpty;
   /**
    * The group component for the Command component.
    *
@@ -384,17 +610,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Group: import("react").ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Group: typeof CommandGroup;
   /**
    * The item component for the Command component.
    *
@@ -427,19 +643,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof CommandItem;
   /**
    * The shortcut component for the Command component.
    *
@@ -472,7 +676,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Shortcut: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly Shortcut: typeof CommandShortcut;
   /**
    * The separator component for the Command component.
    *
@@ -505,13 +709,7 @@ declare const Command: {
    * </Command.DialogRoot>
    * ```
    */
-  readonly Separator: import("react").ForwardRefExoticComponent<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Separator: typeof CommandSeparator;
 };
 //#endregion
 //#region src/components/command/meta-key.d.ts

package/dist/command.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{n as t}from"./separator-kBnnv3Cw.js";import{t as n}from"./dialog-vxLIvB8M.js";import{t as r}from"./kbd-K8iaZ-Ti.js";import{forwardRef as i,useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{MagnifyingGlassIcon as l}from"@phosphor-icons/react/MagnifyingGlass";import{Command as u,useCommandState as d}from"cmdk";const f=i(({className:t,...n},r)=>s(u,{ref:r,"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}));f.displayName=`Command`;const p=({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:o,showCloseButton:l=!0,title:u=`Command Palette`})=>c(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[c(n.Header,{className:`sr-only absolute`,children:[s(n.Title,{children:u}),s(n.Description,{children:i})]}),s(f,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:o,children:t}),l&&s(`div`,{className:`absolute top-1.5 right-1.5`,children:s(n.CloseIconButton,{})})]});p.displayName=`CommandDialogContent`;const m=i(({className:t,...n},r)=>c(`div`,{ref:r,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[s(l,{className:`size-5 shrink-0 opacity-50`}),s(u.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...n})]}));m.displayName=`CommandInput`;const h=i(({className:t,...n},r)=>s(u.List,{ref:r,"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}));h.displayName=`CommandList`;const g=i(({className:t,...n},r)=>s(u.Empty,{ref:r,"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}));g.displayName=`CommandEmpty`;const _=i(({className:t,...n},r)=>s(u.Group,{ref:r,"data-slot":`command-group`,className:e(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,t),...n}));_.displayName=`CommandGroup`;const v=i(({className:n,...r},i)=>s(u.Separator,{ref:i,"data-slot":`command-separator`,asChild:!0,...r,children:s(t,{className:e(`-mx-1 my-1 w-auto`,n)})}));v.displayName=`CommandSeparator`;const y=i(({className:t,...n},r)=>s(u.Item,{ref:r,"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,t),...n}));y.displayName=`CommandItem`;const b=i(({className:t,...n},r)=>s(`span`,{ref:r,"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}));b.displayName=`CommandShortcut`;const x={Root:f,DialogRoot:n.Root,DialogTrigger:n.Trigger,DialogContent:p,Input:m,List:h,Empty:g,Group:_,Item:y,Shortcut:b,Separator:v};function S({className:t,...n}){let[i,l]=o(`⌃`);a(()=>{l(w())},[]);let u=i===`⌘`?`Command`:`Control`;return c(r,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(i===`⌃`&&`font-medium`,t),children:[s(`span`,{className:`sr-only`,children:u}),i]})}function C(e){return`userAgentData`in e}function w(){if(typeof navigator>`u`)return`⌃`;let e=``;return C(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{x as Command,S as MetaKey,d as useCommandState};
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t}from"./separator-bpE_kooz.js";import{t as n}from"./dialog-DWZWd5Jt.js";import{t as r}from"./kbd-K8iaZ-Ti.js";import{useEffect as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{MagnifyingGlassIcon as c}from"@phosphor-icons/react/MagnifyingGlass";import{Command as l,useCommandState as u}from"cmdk";const d=({className:t,...n})=>o(l,{"data-slot":`command`,className:e(`bg-popover flex h-full w-full flex-col overflow-hidden rounded-md`,t),...n}),f={Root:d,DialogRoot:n.Root,DialogTrigger:n.Trigger,DialogContent:({children:t,className:r,description:i=`Search for a command to run...`,filter:a,shouldFilter:c,showCloseButton:l=!0,title:u=`Command Palette`})=>s(n.Content,{className:e(`overflow-hidden p-0 relative`,r),children:[s(n.Header,{className:`sr-only absolute`,children:[o(n.Title,{children:u}),o(n.Description,{children:i})]}),o(d,{className:`**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-input]]:h-12 **:data-[slot=command-group]:px-2 **:data-[slot=command-list]:pb-1`,filter:a,shouldFilter:c,children:t}),l&&o(`div`,{className:`absolute top-1.5 right-1.5`,children:o(n.CloseIconButton,{})})]}),Input:({className:t,ref:n,...r})=>s(`div`,{ref:n,"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b border-popover px-3`,children:[o(c,{className:`size-5 shrink-0 opacity-50`}),o(l.Input,{"data-slot":`command-input`,className:e(`placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,t),...r})]}),List:({className:t,...n})=>o(l.List,{"data-slot":`command-list`,className:e(`max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar`,t),...n}),Empty:({className:t,...n})=>o(l.Empty,{"data-slot":`command-empty`,className:e(`py-6 text-center text-sm`,t),...n}),Group:({className:t,...n})=>o(l.Group,{"data-slot":`command-group`,className:e(`[&>[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&>[cmdk-group-heading]]:px-2 [&>[cmdk-group-heading]]:py-1.5 [&>[cmdk-group-heading]]:text-xs [&>[cmdk-group-heading]]:font-medium`,t),...n}),Item:({className:t,...n})=>o(l.Item,{"data-slot":`command-item`,className:e(`data-[selected=true]:bg-active-menu-item [:where(&_svg)]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [:where(&_svg)]:size-5`,t),...n}),Shortcut:({className:t,...n})=>o(`span`,{"data-slot":`command-shortcut`,className:e(`text-muted ml-auto text-xs tracking-widest`,t),...n}),Separator:({className:n,...r})=>o(l.Separator,{"data-slot":`command-separator`,asChild:!0,...r,children:o(t,{className:e(`-mx-1 my-1 w-auto`,n)})})};function p({className:t,...n}){let[c,l]=a(`⌃`);i(()=>{l(h())},[]);let u=c===`⌘`?`Command`:`Control`;return s(r,{...n,suppressHydrationWarning:!0,"data-slot":`meta-key`,className:e(c===`⌃`&&`font-medium`,t),children:[o(`span`,{className:`sr-only`,children:u}),c]})}function m(e){return`userAgentData`in e}function h(){if(typeof navigator>`u`)return`⌃`;let e=``;return m(navigator)&&(e=navigator.userAgentData.platform??``),e||=navigator.platform||navigator.userAgent||``,/mac|iphone|ipad|ipod/i.test(e)?`⌘`:`⌃`}export{f as Command,p as MetaKey,u as useCommandState};

package/dist/compose-refs-BdBMM9ga.js

@@ -0,0 +1 @@
+import{useCallback as e,useRef as t}from"react";function n(e,t){if(typeof e==`function`)return e(t);e!=null&&(e.current=t)}function r(...e){return t=>{let r=!1,i=e.map(e=>{let i=n(e,t);return typeof i==`function`&&(r=!0),i});if(r)return()=>{for(let t=0;t<i.length;t++){let r=i[t];typeof r==`function`?r():n(e[t],null)}}}}function i(...n){let i=t(n);return i.current=n,e(e=>r(...i.current)(e),[])}export{i as n,r as t};

package/dist/data-table.d.ts

@@ -1,8 +1,8 @@
-import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
-import { n as ButtonAppearance, t as Button } from "./button-DcXOWUYo.js";
-import { n as IconButtonAppearance, t as IconButton } from "./icon-button-BvQvT790.js";
+import { t as ButtonIntent } from "./button-DdSKSj1c.js";
+import { n as ButtonAppearance, t as Button } from "./button-DARFK2KJ.js";
+import { r as IconButtonAppearance, t as IconButton } from "./button-C7vAl6lS.js";
 import { s as SortingMode } from "./direction-BjU0bPST.js";
-import { t as Table$1 } from "./table-CwFHXC-G.js";
+import { t as Table$1 } from "./table-Bo0vNxIJ.js";
 import { ComponentProps, ReactNode } from "react";
 import { HeaderContext, Row, Table } from "@tanstack/react-table";
 export * from "@tanstack/react-table";
@@ -158,6 +158,28 @@ type DataTableHeaderProps = ComponentProps<typeof Table$1.Header>;
  * ```
  */
 declare function Header({ children, className, ...props }: DataTableHeaderProps): import("react").JSX.Element;
+/**
+ * The `<tbody>` container for rows of data. Typically wraps a map of
+ * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is no data.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatablebody
+ *
+ * @example
+ * ```tsx
+ * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ * const rows = table.getRowModel().rows;
+ *
+ * <DataTable.Root table={table}>
+ *   <DataTable.Head />
+ *   <DataTable.Body>
+ *     {rows.length > 0
+ *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+ *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
+ *   </DataTable.Body>
+ * </DataTable.Root>
+ * ```
+ */
+declare const Body: (props: ComponentProps<typeof Table$1.Body>) => import("react").JSX.Element;
 type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
 /**
  * The `<thead>` container that renders column headers automatically from
@@ -926,7 +948,7 @@ declare const DataTable: {
    * });
    * ```
    */
-  readonly Cell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("react").RefAttributes<HTMLTableDataCellElement>>;
+  readonly Cell: ({ children, className, ref, ...props }: ComponentProps<"td">) => import("react").JSX.Element;
   /**
    * The `<tbody>` container for rows of data. Typically wraps a map of
    * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is
@@ -943,7 +965,7 @@ declare const DataTable: {
    * </DataTable.Body>
    * ```
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+  readonly Body: typeof Body;
   /**
    * An empty-state row that spans every column. Render this as the `else`
    * branch when `rows.length === 0` to keep the table's frame intact instead

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-button-DV2-GZHf.js";import{t as n}from"./button-ClC60Nzg.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./sort-BPX2Fk9t.js";import{t as a}from"./table-CPH2md2-.js";import{Fragment as o,createContext as s,forwardRef as c,useContext as l,useMemo as u}from"react";import d from"tiny-invariant";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{flexRender as h}from"@tanstack/react-table";import{MinusIcon as g}from"@phosphor-icons/react/Minus";import{PlusIcon as _}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const v=[`unsorted`,`asc`,`desc`],y=[`unsorted`,`desc`,`asc`];function b(e,t){return x(t===`alphanumeric`?v:y,e)??`unsorted`}function x(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const S=s(null);function C(){let e=l(S);return d(e,`useDataTableContext should only be used within a DataTable child component`),e}function w({children:e,table:t,...n}){let r=u(()=>({table:t}),[t]);return p(S.Provider,{value:r,children:p(a.Root,{"data-slot":`data-table`,...n,children:p(a.Element,{children:e})})})}function T({appearance:t=`ghost`,children:i,className:a,column:o,disableSorting:s=!1,iconPlacement:c=`end`,intent:l=`neutral`,sortingMode:u,sortIcon:d,onClick:f,...h}){let g=o.getIsSorted(),_=!s&&o.getCanSort(),v=_&&typeof g==`string`?g:`unsorted`,y=d?.(v)??p(V,{mode:u,direction:v});return m(n,{appearance:t,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,t===`ghost`&&l===`neutral`&&`text-muted`,a),"data-sort-direction":v,"data-table-header-action":!0,icon:y,iconPlacement:c,onClick:e=>{f?.(e),!e.defaultPrevented&&(!_||s||u===void 0||H(o,u))},intent:l,type:`button`,...h,children:[_&&v!==`unsorted`&&m(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,u===`alphanumeric`?v===`asc`?`ascending`:`descending`:r(v),` `,`order`]}),i]})}function E({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const D=c((e,t)=>p(a.Body,{ref:t,"data-slot":`data-table-body`,...e}));D.displayName=`DataTableBody`;function O(e){let{table:t}=C();return p(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>p(a.Row,{children:e.headers.map(e=>p(o,{children:e.isPlaceholder?p(a.Header,{},e.id):h(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k({className:t,renderExpanded:n,row:r,...i}){let s=p(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>p(o,{children:h(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:m(f,{children:[s,r.getIsExpanded()&&p(z,{row:r,children:n(r)})]})}function A({children:e,...t}){let{table:n}=C(),r=n.getAllColumns().length;return p(a.Row,{"data-slot":`data-table-empty-row`,...t,children:p(a.Cell,{colSpan:r,children:e})})}function j(){return p(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function M({children:t,className:n,...r}){return m(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[p(j,{}),t]})}function N({children:t,className:n,...r}){let{table:i}=C(),o=i.getRowModel().rows.length>0;return m(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&p(j,{}),t]})}function P(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function F({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??p(`span`,{className:`sr-only`,children:`Row details`})})}const I=p(_,{weight:`bold`,className:`size-3.5`}),L=p(g,{weight:`bold`,className:`size-3.5`});function R({appearance:n=`ghost`,className:r,collapseIcon:i=L,expandIcon:a=I,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let f=l.getIsExpanded(),m=l.getToggleExpandedHandler();return p(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":f,"aria-controls":f?P(l):void 0,icon:f?i:a,label:`${f?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function z({children:t,className:n,colSpan:r,row:i,...o}){return p(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:p(a.Cell,{id:P(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}w.displayName=`DataTable`,M.displayName=`DataTableActionCell`,N.displayName=`DataTableActionHeader`,D.displayName=`DataTableBody`,A.displayName=`DataTableEmptyRow`,F.displayName=`DataTableExpandHeader`,z.displayName=`DataTableExpandedRow`,O.displayName=`DataTableHead`,E.displayName=`DataTableHeader`,T.displayName=`DataTableHeaderSortButton`,k.displayName=`DataTableRow`,R.displayName=`DataTableRowExpandButton`;const B={Root:w,ActionCell:M,ActionHeader:N,Cell:a.Cell,Body:D,EmptyRow:A,Head:O,Header:E,HeaderSortButton:T,Row:k,ExpandHeader:F,RowExpandButton:R,ExpandedRow:z};function V({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?p(`svg`,{"aria-hidden":!0,...n}):p(i,{mode:t,direction:e,...n})}function H(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(b(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{B as DataTable,P as expandedRowId};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./button-BAno7KIU.js";import{t as n}from"./button-DjpEKt2X.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./icons-B_DDQcVD.js";import{t as a}from"./table-CGxJwtbL.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({appearance:t=`ghost`,children:i,className:a,column:o,disableSorting:s=!1,iconPlacement:c=`end`,intent:l=`neutral`,sortingMode:u,sortIcon:d,onClick:m,...h}){let g=o.getIsSorted(),_=!s&&o.getCanSort(),v=_&&typeof g==`string`?g:`unsorted`,y=d?.(v)??f(B,{mode:u,direction:v});return p(n,{appearance:t,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,t===`ghost`&&l===`neutral`&&`text-muted`,a),"data-sort-direction":v,"data-table-header-action":!0,icon:y,iconPlacement:c,onClick:e=>{m?.(e),!e.defaultPrevented&&(!_||s||u===void 0||V(o,u))},intent:l,type:`button`,...h,children:[_&&v!==`unsorted`&&p(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,u===`alphanumeric`?v===`asc`?`ascending`:`descending`:r(v),` `,`order`]}),i]})}function T({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const E=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function D(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function O({className:t,renderExpanded:n,row:r,...i}){let s=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:p(d,{children:[s,r.getIsExpanded()&&f(R,{row:r,children:n(r)})]})}function k({children:e,...t}){let{table:n}=S(),r=n.getAllColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function A(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function j({children:t,className:n,...r}){return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[f(A,{}),t]})}function M({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&f(A,{}),t]})}function N(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function P({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const F=f(g,{weight:`bold`,className:`size-3.5`}),I=f(h,{weight:`bold`,className:`size-3.5`});function L({appearance:n=`ghost`,className:r,collapseIcon:i=I,expandIcon:a=F,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?N(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function R({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:N(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const z={Root:C,ActionCell:j,ActionHeader:M,Cell:a.Cell,Body:E,EmptyRow:k,Head:D,Header:T,HeaderSortButton:w,Row:O,ExpandHeader:P,RowExpandButton:L,ExpandedRow:R};function B({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(i,{mode:t,direction:e,...n})}function V(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{z as DataTable,N as expandedRowId};