@sikka/hawa 0.36.2-next → 0.37.0-next

package/dist/elements/index.mjs

@@ -22,10 +22,10 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-T33FXOHA.mjs";
+} from "../chunk-PO5OW6SQ.mjs";
 import {
   useClipboard
-} from "../chunk-OPYDG34F.mjs";
+} from "../chunk-ZBUBNKF6.mjs";
 import {
   Sheet,
   SheetClose,
@@ -1386,6 +1386,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 // elements/command/Command.tsx
 import * as React12 from "react";
+import { Dialog as Dialog2 } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 var Command = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
   CommandPrimitive,
@@ -1399,7 +1400,7 @@ var Command = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(Dialog, { ...props }, /* @__PURE__ */ React12.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React12.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
+  return /* @__PURE__ */ React12.createElement(Dialog2, { ...props }, /* @__PURE__ */ React12.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React12.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
 };
 var CommandInput = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
   "div",
@@ -1494,13 +1495,47 @@ var CommandShortcut = ({
     "span",
     {
       className: cn(
-        "hawa-ml-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground",
+        "hawa-ms-auto hawa-text-xs hawa-tracking-widest hawa-text-muted-foreground",
         className
       ),
       ...props
     }
   );
 };
+var FullCommand = ({ items, direction = "ltr", texts }) => {
+  return /* @__PURE__ */ React12.createElement(
+    Command,
+    {
+      dir: direction,
+      className: "hawa-rounded-lg hawa-border hawa-shadow-md !hawa-h-full"
+    },
+    /* @__PURE__ */ React12.createElement(
+      CommandInput,
+      {
+        placeholder: (texts == null ? void 0 : texts.searchPlaceholder) || "Type a command or search..."
+      }
+    ),
+    /* @__PURE__ */ React12.createElement(CommandList, null, /* @__PURE__ */ React12.createElement(CommandEmpty, null, (texts == null ? void 0 : texts.emptyText) || "No results found."), items.map((item, index) => {
+      var _a;
+      if (item.type === "group") {
+        return /* @__PURE__ */ React12.createElement(CommandGroup, { heading: item.heading, key: index }, (_a = item.items) == null ? void 0 : _a.map((subItem, subIndex) => /* @__PURE__ */ React12.createElement(CommandItem, { key: subIndex, onSelect: subItem.action }, /* @__PURE__ */ React12.createElement(subItem.icon, { className: "hawa-icon hawa-me-2" }), /* @__PURE__ */ React12.createElement("span", null, subItem.text), subItem.shortcut && /* @__PURE__ */ React12.createElement(CommandShortcut, null, subItem.shortcut))));
+      } else if (item.type === "separator") {
+        return /* @__PURE__ */ React12.createElement(CommandSeparator, { key: index });
+      }
+      return null;
+    }))
+  );
+};
+var AppCommand = ({ commandProps, dialogProps }) => {
+  return /* @__PURE__ */ React12.createElement(Dialog2, { ...dialogProps }, /* @__PURE__ */ React12.createElement(
+    DialogContent,
+    {
+      hideCloseButton: true,
+      className: "hawa-overflow-hidden !hawa-p-0 hawa-shadow-lg !hawa-min-h-[50%]"
+    },
+    /* @__PURE__ */ React12.createElement(FullCommand, { ...commandProps })
+  ));
+};
 CommandShortcut.displayName = "CommandShortcut";
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
@@ -3402,6 +3437,7 @@ export {
   AccordionRoot,
   AccordionTrigger,
   Alert,
+  AppCommand,
   AppStores,
   Avatar,
   BackToTop,
@@ -3465,6 +3501,7 @@ export {
   DropdownMenuTrigger,
   FileDropzone,
   FileUploader,
+  FullCommand,
   Input,
   InterfaceSettings,
   Label,

package/dist/hooks/index.d.mts

@@ -109,4 +109,28 @@ declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
 
 declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React$1.MutableRefObject<T | undefined>;
 
-export { type ContentRect, type UseFocusWithinOptions, type UseMediaQueryOptions, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    mod: boolean;
+    shift: boolean;
+};
+type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+declare function parseHotkey(hotkey: string): Hotkey;
+declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+interface HotkeyItemOptions {
+    preventDefault?: boolean;
+}
+declare function getHotkeyHandler(hotkeys: HotkeyItem[]): (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
+type HotkeyItem = [
+    string,
+    (event: KeyboardEvent) => void,
+    HotkeyItemOptions?
+];
+declare function useShortcuts(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
+
+export { type ContentRect, type Hotkey, type HotkeyItem, type HotkeyItemOptions, type KeyboardModifiers, type UseFocusWithinOptions, type UseMediaQueryOptions, getHotkeyHandler, getHotkeyMatcher, parseHotkey, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useShortcuts, useTabs, useToast, useWindowSize };

package/dist/hooks/index.d.ts

@@ -109,4 +109,28 @@ declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
 
 declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React$1.MutableRefObject<T | undefined>;
 
-export { type ContentRect, type UseFocusWithinOptions, type UseMediaQueryOptions, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    mod: boolean;
+    shift: boolean;
+};
+type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+declare function parseHotkey(hotkey: string): Hotkey;
+declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+interface HotkeyItemOptions {
+    preventDefault?: boolean;
+}
+declare function getHotkeyHandler(hotkeys: HotkeyItem[]): (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
+type HotkeyItem = [
+    string,
+    (event: KeyboardEvent) => void,
+    HotkeyItemOptions?
+];
+declare function useShortcuts(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
+
+export { type ContentRect, type Hotkey, type HotkeyItem, type HotkeyItemOptions, type KeyboardModifiers, type UseFocusWithinOptions, type UseMediaQueryOptions, getHotkeyHandler, getHotkeyMatcher, parseHotkey, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useShortcuts, useTabs, useToast, useWindowSize };

package/dist/hooks/index.js

@@ -31,6 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // hooks/index.ts
 var hooks_exports = {};
 __export(hooks_exports, {
+  getHotkeyHandler: () => getHotkeyHandler,
+  getHotkeyMatcher: () => getHotkeyMatcher,
+  parseHotkey: () => parseHotkey,
   reducer: () => reducer,
   toast: () => toast,
   useBreakpoint: () => useBreakpoint,
@@ -42,6 +45,7 @@ __export(hooks_exports, {
   useMeasureDirty: () => useMeasureDirty,
   useMediaQuery: () => useMediaQuery,
   useMultiStepDialog: () => useMultiStepDialog,
+  useShortcuts: () => useShortcuts,
   useTabs: () => useTabs,
   useToast: () => useToast,
   useWindowSize: () => useWindowSize
@@ -491,8 +495,99 @@ function useClickOutside(handler, events, nodes) {
   }, [ref, handler, nodes]);
   return ref;
 }
+
+// hooks/useShortcuts.ts
+var import_react17 = require("react");
+function parseHotkey(hotkey) {
+  const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
+  const modifiers = {
+    alt: keys.includes("alt"),
+    ctrl: keys.includes("ctrl"),
+    meta: keys.includes("meta"),
+    mod: keys.includes("mod"),
+    shift: keys.includes("shift")
+  };
+  const reservedKeys = ["alt", "ctrl", "meta", "shift", "mod"];
+  const freeKey = keys.find((key) => !reservedKeys.includes(key));
+  return {
+    ...modifiers,
+    key: freeKey
+  };
+}
+function isExactHotkey(hotkey, event) {
+  const { alt, ctrl, meta, mod, shift, key } = hotkey;
+  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;
+  if (alt !== altKey) {
+    return false;
+  }
+  if (mod) {
+    if (!ctrlKey && !metaKey) {
+      return false;
+    }
+  } else {
+    if (ctrl !== ctrlKey) {
+      return false;
+    }
+    if (meta !== metaKey) {
+      return false;
+    }
+  }
+  if (shift !== shiftKey) {
+    return false;
+  }
+  if (key && (pressedKey.toLowerCase() === key.toLowerCase() || event.code.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+function getHotkeyMatcher(hotkey) {
+  return (event) => isExactHotkey(parseHotkey(hotkey), event);
+}
+function getHotkeyHandler(hotkeys) {
+  return (event) => {
+    const _event = "nativeEvent" in event ? event.nativeEvent : event;
+    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
+      if (getHotkeyMatcher(hotkey)(_event)) {
+        if (options.preventDefault) {
+          event.preventDefault();
+        }
+        handler(_event);
+      }
+    });
+  };
+}
+function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
+  if (event.target instanceof HTMLElement) {
+    if (triggerOnContentEditable) {
+      return !tagsToIgnore.includes(event.target.tagName);
+    }
+    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
+  }
+  return true;
+}
+function useShortcuts(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
+  (0, import_react17.useEffect)(() => {
+    const keydownListener = (event) => {
+      hotkeys.forEach(
+        ([hotkey, handler, options = { preventDefault: true }]) => {
+          if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+            if (options.preventDefault) {
+              event.preventDefault();
+            }
+            handler(event);
+          }
+        }
+      );
+    };
+    document.documentElement.addEventListener("keydown", keydownListener);
+    return () => document.documentElement.removeEventListener("keydown", keydownListener);
+  }, [hotkeys]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getHotkeyHandler,
+  getHotkeyMatcher,
+  parseHotkey,
   reducer,
   toast,
   useBreakpoint,
@@ -504,6 +599,7 @@ function useClickOutside(handler, events, nodes) {
   useMeasureDirty,
   useMediaQuery,
   useMultiStepDialog,
+  useShortcuts,
   useTabs,
   useToast,
   useWindowSize

package/dist/hooks/index.mjs

@@ -1,5 +1,8 @@
 "use client";
 import {
+  getHotkeyHandler,
+  getHotkeyMatcher,
+  parseHotkey,
   reducer,
   toast,
   useClipboard,
@@ -9,15 +12,19 @@ import {
   useMeasureDirty,
   useMediaQuery,
   useMultiStepDialog,
+  useShortcuts,
   useTabs,
   useToast,
   useWindowSize
-} from "../chunk-OPYDG34F.mjs";
+} from "../chunk-ZBUBNKF6.mjs";
 import {
   useBreakpoint,
   useClickOutside
 } from "../chunk-SYGWSBJL.mjs";
 export {
+  getHotkeyHandler,
+  getHotkeyMatcher,
+  parseHotkey,
   reducer,
   toast,
   useBreakpoint,
@@ -29,6 +36,7 @@ export {
   useMeasureDirty,
   useMediaQuery,
   useMultiStepDialog,
+  useShortcuts,
   useTabs,
   useToast,
   useWindowSize

package/dist/index-CoPyqTu8.d.mts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as Command$1 } from 'cmdk';
+
+type DirectionType = "rtl" | "ltr";
+type PositionType = "top" | "bottom" | "right" | "left";
+
+interface CommandProps extends React.ComponentPropsWithoutRef<typeof Command$1> {
+}
+interface CommandDialogProps extends DialogProps {
+}
+interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof Command$1.Input> {
+}
+interface CommandListProps extends React.ComponentPropsWithoutRef<typeof Command$1.List> {
+}
+interface CommandEmptyProps extends React.ComponentPropsWithoutRef<typeof Command$1.Empty> {
+}
+interface CommandGroupProps extends React.ComponentPropsWithoutRef<typeof Command$1.Group> {
+}
+interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<typeof Command$1.Separator> {
+}
+interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof Command$1.Item> {
+}
+interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => React.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps): React.JSX.Element;
+    displayName: string;
+};
+type FullCommandItem = {
+    type: "group" | "separator";
+    heading?: string;
+    items?: {
+        icon: React.ElementType;
+        text: string;
+        action: () => void;
+        shortcut?: string;
+    }[];
+};
+type FullCommandProps = {
+    items: FullCommandItem[];
+    direction?: DirectionType;
+    texts?: {
+        searchPlaceholder?: string;
+        emptyText?: string;
+    };
+};
+declare const FullCommand: ({ items, direction, texts }: FullCommandProps) => React.JSX.Element;
+type AppCommandProps = {
+    commandProps: FullCommandProps;
+    dialogProps: DialogProps;
+};
+declare const AppCommand: ({ commandProps, dialogProps }: AppCommandProps) => React.JSX.Element;
+
+export { AppCommand as A, type CommandInputProps as C, type DirectionType as D, FullCommand as F, type PositionType as P, Command as a, CommandDialog as b, CommandInput as c, CommandList as d, CommandEmpty as e, CommandGroup as f, CommandItem as g, CommandShortcut as h, CommandSeparator as i };

package/dist/index-CoPyqTu8.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as Command$1 } from 'cmdk';
+
+type DirectionType = "rtl" | "ltr";
+type PositionType = "top" | "bottom" | "right" | "left";
+
+interface CommandProps extends React.ComponentPropsWithoutRef<typeof Command$1> {
+}
+interface CommandDialogProps extends DialogProps {
+}
+interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof Command$1.Input> {
+}
+interface CommandListProps extends React.ComponentPropsWithoutRef<typeof Command$1.List> {
+}
+interface CommandEmptyProps extends React.ComponentPropsWithoutRef<typeof Command$1.Empty> {
+}
+interface CommandGroupProps extends React.ComponentPropsWithoutRef<typeof Command$1.Group> {
+}
+interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<typeof Command$1.Separator> {
+}
+interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof Command$1.Item> {
+}
+interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => React.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps): React.JSX.Element;
+    displayName: string;
+};
+type FullCommandItem = {
+    type: "group" | "separator";
+    heading?: string;
+    items?: {
+        icon: React.ElementType;
+        text: string;
+        action: () => void;
+        shortcut?: string;
+    }[];
+};
+type FullCommandProps = {
+    items: FullCommandItem[];
+    direction?: DirectionType;
+    texts?: {
+        searchPlaceholder?: string;
+        emptyText?: string;
+    };
+};
+declare const FullCommand: ({ items, direction, texts }: FullCommandProps) => React.JSX.Element;
+type AppCommandProps = {
+    commandProps: FullCommandProps;
+    dialogProps: DialogProps;
+};
+declare const AppCommand: ({ commandProps, dialogProps }: AppCommandProps) => React.JSX.Element;
+
+export { AppCommand as A, type CommandInputProps as C, type DirectionType as D, FullCommand as F, type PositionType as P, Command as a, CommandDialog as b, CommandInput as c, CommandList as d, CommandEmpty as e, CommandGroup as f, CommandItem as g, CommandShortcut as h, CommandSeparator as i };

package/dist/index.css

@@ -1353,6 +1353,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .\!hawa-h-8 {
   height: 2rem !important;
 }
+.\!hawa-h-full {
+  height: 100% !important;
+}
 .hawa-h-0 {
   height: 0px;
 }
@@ -1526,6 +1529,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-max-h-screen {
   max-height: 100vh;
 }
+.\!hawa-min-h-\[50\%\] {
+  min-height: 50% !important;
+}
 .hawa-min-h-20 {
   min-height: 5rem;
 }
@@ -1659,6 +1665,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-w-\[47px\] {
   width: 47px;
 }
+.hawa-w-\[50px\] {
+  width: 50px;
+}
 .hawa-w-\[72px\] {
   width: 72px;
 }
@@ -1931,6 +1940,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-flex-wrap {
   flex-wrap: wrap;
 }
+.hawa-flex-nowrap {
+  flex-wrap: nowrap;
+}
 .hawa-items-start {
   align-items: flex-start;
 }
@@ -2332,12 +2344,12 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--error) / var(--tw-bg-opacity));
 }
+.hawa-bg-foreground\/20 {
+  background-color: hsl(var(--foreground) / 0.2);
+}
 .hawa-bg-foreground\/5 {
   background-color: hsl(var(--foreground) / 0.05);
 }
-.hawa-bg-foreground\/80 {
-  background-color: hsl(var(--foreground) / 0.8);
-}
 .hawa-bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -3113,6 +3125,11 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-drop-shadow: drop-shadow(0 0 #0000);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.hawa-backdrop-blur-\[2px\] {
+  --tw-backdrop-blur: blur(2px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .hawa-backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

package/dist/index.d.mts

@@ -579,6 +579,30 @@ declare const CommandShortcut: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps): React$1.JSX.Element;
     displayName: string;
 };
+type FullCommandItem = {
+    type: "group" | "separator";
+    heading?: string;
+    items?: {
+        icon: React$1.ElementType;
+        text: string;
+        action: () => void;
+        shortcut?: string;
+    }[];
+};
+type FullCommandProps = {
+    items: FullCommandItem[];
+    direction?: DirectionType;
+    texts?: {
+        searchPlaceholder?: string;
+        emptyText?: string;
+    };
+};
+declare const FullCommand: ({ items, direction, texts }: FullCommandProps) => React$1.JSX.Element;
+type AppCommandProps = {
+    commandProps: FullCommandProps;
+    dialogProps: DialogProps;
+};
+declare const AppCommand: ({ commandProps, dialogProps }: AppCommandProps) => React$1.JSX.Element;
 
 type ComboboxTypes<T> = {
     labelKey?: keyof T | any;
@@ -672,7 +696,9 @@ type TabsVariants = "default" | "underlined" | "underlined_tabs";
 declare const Tabs: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     variant?: TabsVariants | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    scrollable?: boolean | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
     chipProps?: ChipTypes | undefined;
     className?: string | undefined;
@@ -2157,4 +2183,28 @@ declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
 
 declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React$1.MutableRefObject<T | undefined>;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, AuthButtons, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, type BreadcrumbItemProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, ContactForm, type ContentRect, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem$1 as NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, type PhoneInputProps, PhoneMockup, PinInput, Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, type TextFieldTypes, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToasterToastProps, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, navigationMenuTriggerStyle, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    mod: boolean;
+    shift: boolean;
+};
+type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+declare function parseHotkey(hotkey: string): Hotkey;
+declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+interface HotkeyItemOptions {
+    preventDefault?: boolean;
+}
+declare function getHotkeyHandler(hotkeys: HotkeyItem[]): (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
+type HotkeyItem = [
+    string,
+    (event: KeyboardEvent) => void,
+    HotkeyItemOptions?
+];
+declare function useShortcuts(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppCommand, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, AuthButtons, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, type BreadcrumbItemProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, ContactForm, type ContentRect, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, FullCommand, HorizontalPricing, type Hotkey, type HotkeyItem, type HotkeyItemOptions, Input, InterfaceSettings, ItemCard, type KeyboardModifiers, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem$1 as NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, type PhoneInputProps, PhoneMockup, PinInput, Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, type TextFieldTypes, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToasterToastProps, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, getHotkeyHandler, getHotkeyMatcher, navigationMenuTriggerStyle, parseHotkey, reducer, toast, useBreakpoint, useClickOutside, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useShortcuts, useTabs, useToast, useWindowSize };