@sikka/hawa 0.36.2-next → 0.37.1-next

package/dist/{chunk-T33FXOHA.mjs → chunk-QYWOI3DO.mjs}

@@ -1,14 +1,14 @@
 "use client";
 import {
   useMeasureDirty
-} from "./chunk-OPYDG34F.mjs";
+} from "./chunk-ZBUBNKF6.mjs";
 import {
   Button,
   Chip,
   Label,
   Skeleton,
   cn
-} from "./chunk-NNPNQK6F.mjs";
+} from "./chunk-RNFJAEEU.mjs";
 
 // elements/alert/Alert.tsx
 import React, { useRef, useState, useEffect } from "react";
@@ -389,6 +389,10 @@ var Select = ({
       children
     );
   };
+  let phoneCodeStyles = "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px]";
+  let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
+  let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
+  let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
@@ -410,26 +414,22 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded ",
-              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
-              "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
+              selectContainerStyles,
+              props.phoneCode && phoneCodeStyles,
               props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
+            placeholder: () => selectPlaceholderStyles,
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
+              selectIndicatorContainerStyles,
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
-          components: props.hideIndicator ? {
-            Option,
-            Menu,
-            IndicatorsContainer: () => null
-          } : {
+          autoFocus: false,
+          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
             Option,
             Menu,
             // Control: (e) => (
@@ -451,10 +451,7 @@ var Select = ({
             MultiValueContainer: (e) => /* @__PURE__ */ React3.createElement(
               "div",
               {
-                className: cn(
-                  // e.className,
-                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
-                ),
+                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
                 ...e
               }
             )
@@ -2874,17 +2871,100 @@ Textarea.displayName = "Textarea";
 // elements/scrollArea/ScrollArea.tsx
 import * as React11 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-var ScrollArea = React11.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("hawa-relative hawa-overflow-hidden", className),
-    ...props
-  },
-  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
-  /* @__PURE__ */ React11.createElement(ScrollBar, { orientation }),
-  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
-));
+var ScrollArea = React11.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React11.useRef(null);
+  const isDragging = React11.useRef(false);
+  const startPos = React11.useRef({ x: 0, y: 0 });
+  const scrollPos = React11.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React11.useState(false);
+  const [showRightFade, setShowRightFade] = React11.useState(false);
+  const checkOverflow = () => {
+    if (scrollAreaRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    if (scrollAreaRef.current) {
+      scrollPos.current = {
+        top: scrollAreaRef.current.scrollTop,
+        left: scrollAreaRef.current.scrollLeft
+      };
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.current || !scrollAreaRef.current)
+      return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (orientation === "vertical") {
+      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
+    } else {
+      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
+      checkOverflow();
+    }
+  };
+  const onMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  React11.useEffect(() => {
+    checkOverflow();
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
+      window.addEventListener("resize", checkOverflow);
+    }
+    return () => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
+      }
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ React11.createElement(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("hawa-relative hawa-overflow-hidden", className),
+      ...props
+    },
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          showLeftFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          showRightFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React11.createElement(
+      ScrollAreaPrimitive.Viewport,
+      {
+        ref: scrollAreaRef,
+        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
+        onMouseDown
+      },
+      children
+    ),
+    /* @__PURE__ */ React11.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+  );
+});
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -2976,9 +3056,9 @@ var tabsListVariant = tv({
   base: "",
   variants: {
     variant: {
-      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
     },
     orientation: { horizontal: "", vertical: "" }
   },
@@ -3046,18 +3126,49 @@ var Tabs = React13.forwardRef(({ className, orientation, variant = "default", ..
 ));
 var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
   const { orientation, variant } = React13.useContext(TabsContext);
-  return /* @__PURE__ */ React13.createElement(
-    TabsPrimitive.List,
-    {
-      ref,
-      className: cn(
-        tabsListVariant({ variant, orientation }),
-        orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
-        className
-      ),
-      ...props
-    }
+  const [size, setSize] = React13.useState(
+    typeof window !== "undefined" && window.innerWidth || 1200
   );
+  React13.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const resize = () => {
+        setSize(window.innerWidth);
+      };
+      resize();
+      window.addEventListener("resize", resize);
+      return () => {
+        window.removeEventListener("resize", resize);
+      };
+    }
+  }, []);
+  if ((props.scrollable || size < 768) && orientation === "horizontal") {
+    return /* @__PURE__ */ React13.createElement(ScrollArea, { orientation: "horizontal" }, /* @__PURE__ */ React13.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          "hawa-flex-row hawa-flex-nowrap",
+          className
+        ),
+        ...props
+      }
+    ));
+  } else {
+    return /* @__PURE__ */ React13.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+          "hawa-flex-wrap",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 });
 var TabsTrigger = React13.forwardRef(({ className, chipProps, ...props }, ref) => {
   const { orientation, variant } = React13.useContext(TabsContext);

package/dist/{chunk-NNPNQK6F.mjs → chunk-RNFJAEEU.mjs}

@@ -832,17 +832,19 @@ var Card = React7.forwardRef(
     );
   }
 );
-var CardHeader = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
-  "div",
-  {
-    ref,
-    className: cn(
-      "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
-      className
-    ),
-    ...props
-  }
-));
+var CardHeader = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
+        className
+      ),
+      ...props
+    }
+  ), props.actions && /* @__PURE__ */ React7.createElement("div", { className: "hawa-p-6" }, props.actions))
+);
 var CardTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   "h3",
   {

package/dist/{chunk-OPYDG34F.mjs → chunk-ZBUBNKF6.mjs}

@@ -395,6 +395,94 @@ var useMeasureDirty = (ref) => {
   return rect;
 };
 
+// hooks/useShortcuts.ts
+import { useEffect as useEffect13 } from "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) {
+  useEffect13(() => {
+    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]);
+}
+
 export {
   useIsomorphicEffect,
   reducer,
@@ -407,5 +495,9 @@ export {
   useFocusWithin,
   useMediaQuery,
   useTabs,
-  useMeasureDirty
+  useMeasureDirty,
+  parseHotkey,
+  getHotkeyMatcher,
+  getHotkeyHandler,
+  useShortcuts
 };

package/dist/{chunk-CJ57JBYA.mjs → chunk-ZTUWU652.mjs}

@@ -1,22 +1,105 @@
 "use client";
 import {
   cn
-} from "./chunk-YP2CCKZG.mjs";
+} from "./chunk-PXGL7ZXQ.mjs";
 
 // elements/scrollArea/ScrollArea.tsx
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("hawa-relative hawa-overflow-hidden", className),
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Viewport, { className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]" }, children),
-  /* @__PURE__ */ React.createElement(ScrollBar, { orientation }),
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
-));
+var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React.useRef(null);
+  const isDragging = React.useRef(false);
+  const startPos = React.useRef({ x: 0, y: 0 });
+  const scrollPos = React.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React.useState(false);
+  const [showRightFade, setShowRightFade] = React.useState(false);
+  const checkOverflow = () => {
+    if (scrollAreaRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    if (scrollAreaRef.current) {
+      scrollPos.current = {
+        top: scrollAreaRef.current.scrollTop,
+        left: scrollAreaRef.current.scrollLeft
+      };
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.current || !scrollAreaRef.current)
+      return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (orientation === "vertical") {
+      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
+    } else {
+      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
+      checkOverflow();
+    }
+  };
+  const onMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  React.useEffect(() => {
+    checkOverflow();
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
+      window.addEventListener("resize", checkOverflow);
+    }
+    return () => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
+      }
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      className: cn("hawa-relative hawa-overflow-hidden", className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          showLeftFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          showRightFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      ScrollAreaPrimitive.Viewport,
+      {
+        ref: scrollAreaRef,
+        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
+        onMouseDown
+      },
+      children
+    ),
+    /* @__PURE__ */ React.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
+  );
+});
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,

package/dist/combobox/index.d.mts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { CommandInputProps } from '../command/index.mjs';
+import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-e_Ob_SnB.mjs';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 
-type DirectionType = "rtl" | "ltr";
-type PositionType = "top" | "bottom" | "right" | "left";
-
 type LabelProps = {
     hint?: React.ReactNode;
     hintSide?: PositionType;

package/dist/combobox/index.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { CommandInputProps } from '../command/index.js';
+import { P as PositionType, D as DirectionType, C as CommandInputProps } from '../index-e_Ob_SnB.js';
 import '@radix-ui/react-dialog';
 import 'cmdk';
 
-type DirectionType = "rtl" | "ltr";
-type PositionType = "top" | "bottom" | "right" | "left";
-
 type LabelProps = {
     hint?: React.ReactNode;
     hintSide?: PositionType;

package/dist/combobox/index.js

@@ -48,6 +48,7 @@ function cn(...inputs) {
 
 // elements/command/Command.tsx
 var React2 = __toESM(require("react"));
+var import_react_dialog = require("@radix-ui/react-dialog");
 var import_cmdk = require("cmdk");
 
 // elements/dialog/Dialog.tsx
@@ -449,7 +450,7 @@ 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