@mastra/playground-ui 45.0.0 → 45.1.0-alpha.1

package/dist/components/Command.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.es.js","sources":["../../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('flex size-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  contentClassName?: string;\n  commandClassName?: string;\n  commandLabel?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n  children,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  contentClassName,\n  commandClassName,\n  commandLabel,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  // Custom filter that preserves DOM order by returning 1 for all matches\n  // This prevents cmdk from reordering items by match score\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    // All search terms must be found in the value\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  // Stop propagation to prevent keyboard events from reaching\n  // global document-level listeners (e.g., table keyboard nav)\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showOverlay={showOverlay}\n        overlayClassName={overlayClassName}\n        className={cn('overflow-hidden p-0', contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          label={commandLabel}\n          loop\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            '[&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:text-neutral3',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '[&_[data-slot=command-input-wrapper]_svg]:size-5',\n            '**:[[cmdk-input]]:h-12',\n            '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n            '[&_[cmdk-item]_svg]:size-5',\n            commandClassName,\n          )}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 size-4 shrink-0 text-neutral3', transitions.colors)} />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n          'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"text-neutral3 ml-2 flex shrink-0 items-center\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n    ref,\n  ) => {\n    const list = (\n      <CommandPrimitive.List\n        ref={ref}\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-x-hidden overflow-y-auto',\n          className,\n        )}\n        {...props}\n      />\n    );\n\n    if (!scrollArea) return list;\n\n    return (\n      <ScrollArea\n        className={cn('min-h-0', scrollAreaClassName)}\n        viewPortClassName={scrollAreaViewportClassName}\n        mask={scrollAreaMask}\n      >\n        {list}\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"text-ui-smd text-neutral3 py-6 text-center\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-neutral4',\n      '[&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3 **:[[cmdk-group-heading]]:uppercase',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4 select-none',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      transitions.colors,\n      'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":";;;;;;;;;AAUA,MAAM,OAAA,GAAU,MAAM,UAAA,CAGpB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAACA,SAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,8EAAA,EAAgF,SAAS,CAAA;AAAA,IACtG,GAAG;AAAA;AACN,CACD;AACD,OAAA,CAAQ,cAAcA,SAAA,CAAiB,WAAA;AAavC,MAAM,gBAAgB,CAAC;AAAA,EACrB,QAAA;AAAA,EACA,KAAA,GAAQ,iBAAA;AAAA,EACR,WAAA,GAAc,iCAAA;AAAA,EACd,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA0B;AAGxB,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,WAAA,CAAY,CAAC,OAAe,MAAA,KAAmB;AAClE,IAAA,MAAM,eAAA,GAAkB,MAAM,WAAA,EAAY;AAC1C,IAAA,MAAM,gBAAA,GAAmB,OAAO,WAAA,EAAY;AAC5C,IAAA,MAAM,cAAc,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AAGhE,IAAA,MAAM,UAAU,WAAA,CAAY,KAAA,CAAM,UAAQ,eAAA,CAAgB,QAAA,CAAS,IAAI,CAAC,CAAA;AACxE,IAAA,OAAO,UAAU,CAAA,GAAI,CAAA;AAAA,EACvB,CAAA,EAAG,EAAE,CAAA;AAIL,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,KAA2B;AAClE,IAAA,IAAI,CAAA,CAAE,QAAQ,QAAA,EAAU;AAExB,IAAA,CAAA,CAAE,eAAA,EAAgB;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EACV,QAAA,kBAAA,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,gBAAgB,CAAA;AAAA,MAErD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxC,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBACpD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,YAAA;AAAA,YACP,IAAA,EAAI,IAAA;AAAA,YACJ,MAAA;AAAA,YACA,SAAA,EAAW,aAAA;AAAA,YACX,SAAA,EAAW,EAAA;AAAA,cACT,6GAAA;AAAA,cACA,0EAAA;AAAA,cACA,kDAAA;AAAA,cACA,wBAAA;AAAA,cACA,6CAAA;AAAA,cACA,4BAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;AAOA,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,SAAA,EAAW,kBAAkB,GAAG,KAAA,IAAS,GAAA,qBACrD,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gDAAA,EAAkD,WAAA,CAAY,QAAQ,gBAAgB,CAAA;AAAA,MAEpG,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAO,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,WAAA,CAAY,MAAM,CAAA,EAAG,CAAA;AAAA,wBACjF,GAAA;AAAA,UAACA,SAAA,CAAiB,KAAA;AAAA,UAAjB;AAAA,YACC,GAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACT,iGAAA;AAAA,cACA,2EAAA;AAAA,cACA,4DAAA;AAAA,cACA,WAAA,CAAY,MAAA;AAAA,cACZ;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,QACC,6BACC,GAAA,CAAC,KAAA,EAAA,EAAI,aAAU,0BAAA,EAA2B,SAAA,EAAU,iDACjD,QAAA,EAAA,SAAA,EACH;AAAA;AAAA;AAAA;AAIR;AACA,YAAA,CAAa,WAAA,GAAcA,UAAiB,KAAA,CAAM,WAAA;AASlD,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EACxB,CACE,EAAE,SAAA,EAAW,UAAA,GAAa,KAAA,EAAO,mBAAA,EAAqB,2BAAA,EAA6B,cAAA,EAAgB,GAAG,KAAA,EAAM,EAC5G,GAAA,KACG;AACH,IAAA,MAAM,IAAA,mBACJ,GAAA;AAAA,MAACA,SAAA,CAAiB,IAAA;AAAA,MAAjB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,4DAAA;AAAA,UACA,aAAa,kBAAA,GAAqB,6DAAA;AAAA,UAClC;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAGF,IAAA,IAAI,CAAC,YAAY,OAAO,IAAA;AAExB,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,mBAAmB,CAAA;AAAA,QAC5C,iBAAA,EAAmB,2BAAA;AAAA,QACnB,IAAA,EAAM,cAAA;AAAA,QAEL,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AACA,WAAA,CAAY,WAAA,GAAcA,UAAiB,IAAA,CAAK,WAAA;AAEhD,MAAM,YAAA,GAAe,KAAA,CAAM,UAAA,CAGzB,CAAC,OAAO,GAAA,qBACR,GAAA,CAACA,SAAA,CAAiB,KAAA,EAAjB,EAAuB,GAAA,EAAU,SAAA,EAAU,4CAAA,EAA8C,GAAG,OAAO,CACrG;AACD,YAAA,CAAa,WAAA,GAAcA,UAAiB,KAAA,CAAM,WAAA;AAElD,MAAM,YAAA,GAAe,MAAM,UAAA,CAGzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAACA,SAAA,CAAiB,KAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,mCAAA;AAAA,MACA,8RAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,YAAA,CAAa,WAAA,GAAcA,UAAiB,KAAA,CAAM,WAAA;AAElD,MAAM,gBAAA,GAAmB,MAAM,UAAA,CAG7B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA,CAACA,UAAiB,SAAA,EAAjB,EAA2B,KAAU,SAAA,EAAW,EAAA,CAAG,yBAAyB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CACrG;AACD,gBAAA,CAAiB,WAAA,GAAcA,UAAiB,SAAA,CAAU,WAAA;AAE1D,MAAM,WAAA,GAAc,MAAM,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAACA,SAAA,CAAiB,IAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,8HAAA;AAAA,MACA,4DAAA;AAAA,MACA,WAAA,CAAY,MAAA;AAAA,MACZ,qEAAA;AAAA,MACA,0EAAA;AAAA,MACA,8HAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAcA,UAAiB,IAAA,CAAK,WAAA;AAEhD,MAAM,kBAAkB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,KAA6C;AAC1F,EAAA,uBAAO,GAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,gEAAgE,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACpH;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;"}
+{"version":3,"file":"Command.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/CommandPalette.cjs.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../CommandPalette.css');const jsxRuntime = require('react/jsx-runtime');
+const command = require('../command-qsEykgml.cjs');
+const kbd = require('../kbd-Br7kdwaB.cjs');
+const scrollArea = require('../scroll-area-Dv6QagXt.cjs');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+
+function CommandPaletteDialog({
+  children,
+  contentClassName,
+  commandClassName,
+  showOverlay = true,
+  overlayClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    command.CommandDialog,
+    {
+      showOverlay,
+      overlayClassName: utils_cn.cn("bg-surface1/40 backdrop-blur-none", overlayClassName),
+      contentClassName: utils_cn.cn(
+        "command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]",
+        contentClassName
+      ),
+      commandClassName: utils_cn.cn(
+        // Height lives in `.command-palette-shell` — see command-palette.css.
+        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none",
+        "[&_[data-slot=command-input-wrapper]]:h-14 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-4 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]",
+        "[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]",
+        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md",
+        "**:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-3 **:[[cmdk-group-heading]]:pb-2 **:[[cmdk-group]]:p-0",
+        "**:[[cmdk-item]]:px-3 **:[[cmdk-item]]:py-2.5",
+        commandClassName
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function CommandPaletteInput({ wrapperClassName, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    command.CommandInput,
+    {
+      wrapperClassName: utils_cn.cn("command-palette-surface command-palette-surface-input", wrapperClassName),
+      ...props
+    }
+  );
+}
+function CommandPaletteBody({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        "grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function CommandPaletteRail({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      className: utils_cn.cn(
+        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-3 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "-m-1 min-h-0 flex-1 p-1", viewPortClassName: "pr-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children }) })
+    }
+  );
+}
+function CommandPaletteScope({
+  icon,
+  label,
+  count,
+  active,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]",
+      "data-active": active,
+      "aria-pressed": active,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/70 text-neutral3 rounded-md border px-1.5 py-0.5 text-[10px] leading-none", children: count })
+      ]
+    }
+  );
+}
+function CommandPaletteResults({ children, footer, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "region",
+      className: "command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          command.CommandList,
+          {
+            scrollArea: true,
+            scrollAreaClassName: "min-h-0 flex-1 rounded-none",
+            scrollAreaViewportClassName: "command-palette-scroll-viewport",
+            className: "command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none",
+            children
+          }
+        ),
+        footer
+      ]
+    }
+  );
+}
+function CommandPaletteItem({
+  icon,
+  title,
+  subtitle,
+  path,
+  badge,
+  shortcut,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    command.CommandItem,
+    {
+      className: utils_cn.cn(
+        "group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1 data-[selected=true]:bg-surface4/80",
+        "transition-[background-color,border-color] duration-150 ease-out",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-smd leading-ui-sm text-neutral6 truncate font-medium", children: title }),
+            badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/60 text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium uppercase", children: badge })
+          ] }),
+          (subtitle || path) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2", children: [
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle }),
+            path && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/70 text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono text-[10px] leading-none", children: path })
+          ] })
+        ] }),
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { children: shortcut })
+      ]
+    }
+  );
+}
+function CommandPaletteFooter({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-4 pt-5 pb-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "sm", children: "↑" }),
+      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "sm", children: "↓" }),
+      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "sm", children: "↵" }),
+      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "sm", children: "Esc" })
+    ] })
+  ] });
+}
+
+exports.CommandPaletteBody = CommandPaletteBody;
+exports.CommandPaletteDialog = CommandPaletteDialog;
+exports.CommandPaletteFooter = CommandPaletteFooter;
+exports.CommandPaletteInput = CommandPaletteInput;
+exports.CommandPaletteItem = CommandPaletteItem;
+exports.CommandPaletteRail = CommandPaletteRail;
+exports.CommandPaletteResults = CommandPaletteResults;
+exports.CommandPaletteScope = CommandPaletteScope;
+//# sourceMappingURL=CommandPalette.cjs.js.map

package/dist/components/CommandPalette.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.cjs.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-surface1/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]]:h-14 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-4 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]',\n        '[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md',\n        '**:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-3 **:[[cmdk-group-heading]]:pb-2 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-3 **:[[cmdk-item]]:py-2.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn('command-palette-surface command-palette-surface-input', wrapperClassName)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1 rounded-2xl\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-3 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n      className=\"text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]\"\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border1 bg-surface4/70 text-neutral3 rounded-md border px-1.5 py-0.5 text-[10px] leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className=\"command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]\"\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1 data-[selected=true]:bg-surface4/80',\n        'transition-[background-color,border-color] duration-150 ease-out',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0\">\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-ui-smd leading-ui-sm text-neutral6 truncate font-medium\">{title}</span>\n          {badge && (\n            <span className=\"border-border1 bg-surface4/60 text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border1 bg-surface4/70 text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono text-[10px] leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-4 pt-5 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":["jsx","CommandDialog","cn","CommandInput","ScrollArea","jsxs","CommandList","CommandItem","CommandShortcut","Kbd"],"mappings":"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"}

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/CommandPalette/index'
+export {}

package/dist/components/CommandPalette.es.js

@@ -0,0 +1,169 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { a as CommandDialog, d as CommandInput, e as CommandItem, h as CommandShortcut, f as CommandList } from '../command-Duq1xsiS.js';
+import { K as Kbd } from '../kbd-DE0nj4DL.js';
+import { S as ScrollArea } from '../scroll-area-DZrEuKjC.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+
+import '../CommandPalette.css';function CommandPaletteDialog({
+  children,
+  contentClassName,
+  commandClassName,
+  showOverlay = true,
+  overlayClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandDialog,
+    {
+      showOverlay,
+      overlayClassName: cn("bg-surface1/40 backdrop-blur-none", overlayClassName),
+      contentClassName: cn(
+        "command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]",
+        contentClassName
+      ),
+      commandClassName: cn(
+        // Height lives in `.command-palette-shell` — see command-palette.css.
+        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none",
+        "[&_[data-slot=command-input-wrapper]]:h-14 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-4 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]",
+        "[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]",
+        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md",
+        "**:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-3 **:[[cmdk-group-heading]]:pb-2 **:[[cmdk-group]]:p-0",
+        "**:[[cmdk-item]]:px-3 **:[[cmdk-item]]:py-2.5",
+        commandClassName
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function CommandPaletteInput({ wrapperClassName, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CommandInput,
+    {
+      wrapperClassName: cn("command-palette-surface command-palette-surface-input", wrapperClassName),
+      ...props
+    }
+  );
+}
+function CommandPaletteBody({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 rounded-2xl", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function CommandPaletteRail({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: cn(
+        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-3 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollArea, { className: "-m-1 min-h-0 flex-1 p-1", viewPortClassName: "pr-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children }) })
+    }
+  );
+}
+function CommandPaletteScope({
+  icon,
+  label,
+  count,
+  active,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]",
+      "data-active": active,
+      "aria-pressed": active,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/70 text-neutral3 rounded-md border px-1.5 py-0.5 text-[10px] leading-none", children: count })
+      ]
+    }
+  );
+}
+function CommandPaletteResults({ children, footer, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      className: "command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          CommandList,
+          {
+            scrollArea: true,
+            scrollAreaClassName: "min-h-0 flex-1 rounded-none",
+            scrollAreaViewportClassName: "command-palette-scroll-viewport",
+            className: "command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none",
+            children
+          }
+        ),
+        footer
+      ]
+    }
+  );
+}
+function CommandPaletteItem({
+  icon,
+  title,
+  subtitle,
+  path,
+  badge,
+  shortcut,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      className: cn(
+        "group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1 data-[selected=true]:bg-surface4/80",
+        "transition-[background-color,border-color] duration-150 ease-out",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-ui-smd leading-ui-sm text-neutral6 truncate font-medium", children: title }),
+            badge && /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/60 text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium uppercase", children: badge })
+          ] }),
+          (subtitle || path) && /* @__PURE__ */ jsxs("span", { className: "text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2", children: [
+            subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
+            path && /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/70 text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono text-[10px] leading-none", children: path })
+          ] })
+        ] }),
+        shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: shortcut })
+      ]
+    }
+  );
+}
+function CommandPaletteFooter({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-4 pt-5 pb-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "↑" }),
+      /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "↓" }),
+      /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "↵" }),
+      /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "Esc" })
+    ] })
+  ] });
+}
+
+export { CommandPaletteBody, CommandPaletteDialog, CommandPaletteFooter, CommandPaletteInput, CommandPaletteItem, CommandPaletteRail, CommandPaletteResults, CommandPaletteScope };
+//# sourceMappingURL=CommandPalette.es.js.map

package/dist/components/CommandPalette.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.es.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-surface1/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]]:h-14 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-4 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]',\n        '[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md',\n        '**:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-3 **:[[cmdk-group-heading]]:pb-2 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-3 **:[[cmdk-item]]:py-2.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn('command-palette-surface command-palette-surface-input', wrapperClassName)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1 rounded-2xl\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-3 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n      className=\"text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]\"\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border1 bg-surface4/70 text-neutral3 rounded-md border px-1.5 py-0.5 text-[10px] leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className=\"command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]\"\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1 data-[selected=true]:bg-surface4/80',\n        'transition-[background-color,border-color] duration-150 ease-out',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0\">\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-ui-smd leading-ui-sm text-neutral6 truncate font-medium\">{title}</span>\n          {badge && (\n            <span className=\"border-border1 bg-surface4/60 text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] leading-none font-medium uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border1 bg-surface4/70 text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono text-[10px] leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-4 pt-5 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":[],"mappings":";;;;;;AAWA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,gBAAA,EAAkB,EAAA,CAAG,mCAAA,EAAqC,gBAAgB,CAAA;AAAA,MAC1E,gBAAA,EAAkB,EAAA;AAAA,QAChB,iLAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,gBAAA,EAAkB,EAAA;AAAA;AAAA,QAEhB,uHAAA;AAAA,QACA,6ZAAA;AAAA,QACA,ifAAA;AAAA,QACA,uDAAA;AAAA,QACA,oHAAA;AAAA,QACA,+CAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAIA,SAAS,mBAAA,CAAoB,EAAE,gBAAA,EAAkB,GAAG,OAAM,EAA6B;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB,EAAA,CAAG,uDAAA,EAAyD,gBAAgB,CAAA;AAAA,MAC7F,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,mBAAmB,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,OAAM,EAAmC;AAC7F,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAMA,SAAS,mBAAmB,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,OAAM,EAA4B;AACtF,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,2OAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,yBAAA,EAA0B,iBAAA,EAAkB,MAAA,EAChE,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA,EACjD;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,mBAAA,CAAoB;AAAA,EAC3B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MAEL,SAAA,EAAU,mZAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,cAAA,EAAc,MAAA;AAAA,MACd,OAAA,EAAS,QAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iEAAA,EAAmE,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACxF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACjD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sGAAA,EACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAQA,SAAS,sBAAsB,EAAE,QAAA,EAAU,MAAA,EAAQ,GAAG,OAAM,EAA+B;AACzF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAU,wOAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,UAAA,EAAU,IAAA;AAAA,YACV,mBAAA,EAAoB,6BAAA;AAAA,YACpB,2BAAA,EAA4B,iCAAA;AAAA,YAC5B,SAAA,EAAU,qFAAA;AAAA,YAET;AAAA;AAAA,SACH;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;AAWA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAC1B,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yJAAA;AAAA,QACA,kEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iNAAA,EACb,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EACd,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,iCAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8DAAA,EAAgE,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YACrF,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uIACb,QAAA,EAAA,KAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UAAA,CACE,QAAA,IAAY,IAAA,qBACZ,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,wEAAA,EACb,QAAA,EAAA;AAAA,YAAA,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,YACjD,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oIACb,QAAA,EAAA,IAAA,EACH;AAAA,WAAA,EAEJ;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,eAAA,EAAA,EAAiB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC1C;AAEJ;AAEA,SAAS,oBAAA,CAAqB,EAAE,KAAA,EAAM,EAAsB;AAC1D,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0JAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBAClC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAChB,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAChB,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAChB,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAK,IAAA,EAAK,QAAA,EAAA,KAAA,EAAG;AAAA,KAAA,EACpB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Kbd.cjs.js

@@ -2,30 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const primitives_transitions = require('../primitives/transitions.cjs.js');
-const utils_cn = require('../cn-vA5sWo9W.cjs');
+const kbd = require('../kbd-Br7kdwaB.cjs');
 
-const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
-  dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
-};
-const Kbd = ({ children, theme = "dark", className }) => {
-  const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "kbd",
-    {
-      className: utils_cn.cn(
-        "inline-flex min-w-6 items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-ui-sm",
-        primitives_transitions.transitions.transform,
-        "active:scale-95 active:shadow-none",
-        themeClass,
-        className
-      ),
-      children
-    }
-  );
-};
 
-exports.Kbd = Kbd;
+
+exports.Kbd = kbd.Kbd;
 //# sourceMappingURL=Kbd.cjs.js.map

package/dist/components/Kbd.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.cjs.js","sources":["../../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  theme?: 'light' | 'dark';\n  className?: string;\n};\n\nconst themeClasses: Record<NonNullable<KbdProps['theme']>, string> = {\n  light: 'bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]',\n  dark: 'bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]',\n};\n\nexport const Kbd = ({ children, theme = 'dark', className }: KbdProps) => {\n  const themeClass = themeClasses[theme];\n  return (\n    <kbd\n      className={cn(\n        'inline-flex min-w-6 items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-ui-sm',\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        themeClass,\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":["jsx","cn","transitions"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAA+D;AAAA,EACnE,KAAA,EAAO,4EAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,MAAM,CAAC,EAAE,UAAU,KAAA,GAAQ,MAAA,EAAQ,WAAU,KAAgB;AACxE,EAAA,MAAM,UAAA,GAAa,aAAa,KAAK,CAAA;AACrC,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,sGAAA;AAAA,QACAC,kCAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"Kbd.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Kbd.es.js

@@ -1,27 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { transitions } from '../primitives/transitions.es.js';
-import { c as cn } from '../cn-BakJzhuv.js';
-
-const themeClasses = {
-  light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
-  dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
-};
-const Kbd = ({ children, theme = "dark", className }) => {
-  const themeClass = themeClasses[theme];
-  return /* @__PURE__ */ jsx(
-    "kbd",
-    {
-      className: cn(
-        "inline-flex min-w-6 items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-ui-sm",
-        transitions.transform,
-        "active:scale-95 active:shadow-none",
-        themeClass,
-        className
-      ),
-      children
-    }
-  );
-};
-
-export { Kbd };
+export { K as Kbd } from '../kbd-DE0nj4DL.js';
 //# sourceMappingURL=Kbd.es.js.map

package/dist/components/Kbd.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.es.js","sources":["../../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  theme?: 'light' | 'dark';\n  className?: string;\n};\n\nconst themeClasses: Record<NonNullable<KbdProps['theme']>, string> = {\n  light: 'bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]',\n  dark: 'bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]',\n};\n\nexport const Kbd = ({ children, theme = 'dark', className }: KbdProps) => {\n  const themeClass = themeClasses[theme];\n  return (\n    <kbd\n      className={cn(\n        'inline-flex min-w-6 items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-ui-sm',\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        themeClass,\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,YAAA,GAA+D;AAAA,EACnE,KAAA,EAAO,4EAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEO,MAAM,MAAM,CAAC,EAAE,UAAU,KAAA,GAAQ,MAAA,EAAQ,WAAU,KAAgB;AACxE,EAAA,MAAM,UAAA,GAAa,aAAa,KAAK,CAAA;AACrC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,sGAAA;AAAA,QACA,WAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"Kbd.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}