@sikka/hawa 0.26.21 → 0.26.23

package/dist/{chunk-WPSUV4AD.mjs → chunk-F3DQJHTG.mjs}

@@ -4,7 +4,7 @@ import {
   Skeleton,
   Tooltip,
   cn
-} from "./chunk-Z5SL5QTQ.mjs";
+} from "./chunk-MQUAGP7K.mjs";
 
 // elements/alert/Alert.tsx
 import React, { useRef, useState, useEffect } from "react";
@@ -2652,6 +2652,7 @@ var Textarea = React10.forwardRef(
     forceHideHelperText,
     textareaProps,
     countPosition = "bottom",
+    isLoading,
     ...props
   }, ref) => {
     return /* @__PURE__ */ React10.createElement(
@@ -2663,12 +2664,20 @@ var Textarea = React10.forwardRef(
           className
         )
       },
-      props.label && /* @__PURE__ */ React10.createElement(Label, { ...labelProps }, props.label),
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React10.createElement(Label, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React10.createElement(
+        "div",
+        {
+          className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
+        },
+        (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
+        "/",
+        textareaProps == null ? void 0 : textareaProps.maxLength
+      )),
+      isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React10.createElement(
         "textarea",
         {
           className: cn(
-            "hawa-flex hawa-min-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
+            "hawa-flex hawa-min-h-[40px] hawa-h-[40px]  hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
             classNames == null ? void 0 : classNames.textarea
           ),
           ref,
@@ -2684,20 +2693,7 @@ var Textarea = React10.forwardRef(
           )
         },
         props.helperText
-      ), showCount && /* @__PURE__ */ React10.createElement(
-        "div",
-        {
-          className: cn(
-            "hawa-text-start hawa-text-xs hawa-transition-all",
-            {
-              "hawa-absolute hawa-bottom-[80px] hawa-end-0 hawa-translate-y-1/2": countPosition === "top"
-            }
-          )
-        },
-        (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
-        "/",
-        textareaProps == null ? void 0 : textareaProps.maxLength
-      ))
+      ), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
     );
   }
 );
@@ -2807,19 +2803,21 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 import * as React13 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 var TabsContext = React13.createContext({ orientation: "vertical" });
-var Tabs = React13.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React13.createElement(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "hawa-flex hawa-gap-2",
-      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React13.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
-));
+var Tabs = React13.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React13.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React13.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
+  )
+);
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = React13.useContext(TabsContext);

package/dist/{chunk-VQQ6MUX5.mjs → chunk-FQ6WVEHW.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-Z5SL5QTQ.mjs";
+} from "./chunk-MQUAGP7K.mjs";
 
 // elements/sheet/Sheet.tsx
 import * as React from "react";

package/dist/{chunk-U3TZWNDZ.mjs → chunk-GVJYACGA.mjs}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-AREFDTXK.mjs";
+} from "./chunk-D36MPDGE.mjs";
 
 // icons/Emojis.tsx
 import React from "react";

package/dist/{chunk-Z5SL5QTQ.mjs → chunk-MQUAGP7K.mjs}

@@ -7,6 +7,25 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var parseColor = (color) => {
+  if (color.startsWith("#")) {
+    let r = parseInt(color.slice(1, 3), 16);
+    let g = parseInt(color.slice(3, 5), 16);
+    let b = parseInt(color.slice(5, 7), 16);
+    return [r, g, b];
+  } else if (color.startsWith("rgb")) {
+    return color.match(/\d+/g).map(Number);
+  }
+  return [255, 255, 255];
+};
+var calculateLuminance = (color) => {
+  var _a;
+  const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
+    c /= 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
 
 // elements/loading/Loading.tsx
 var Loading = ({
@@ -1045,6 +1064,7 @@ var DropdownMenuRadio = (props) => {
 
 export {
   cn,
+  calculateLuminance,
   Loading,
   buttonVariants,
   Button,

package/dist/{chunk-OAXF3RCQ.mjs → chunk-NMS5LCSQ.mjs}

@@ -1,7 +1,7 @@
 import {
   Label,
   cn
-} from "./chunk-AREFDTXK.mjs";
+} from "./chunk-D36MPDGE.mjs";
 
 // elements/radio/Radio.tsx
 import React, { useState, useRef, useEffect } from "react";

package/dist/{chunk-4IOG44R3.mjs → chunk-OY66MBXP.mjs}

@@ -2,7 +2,7 @@ import {
   Label,
   Skeleton,
   cn
-} from "./chunk-AREFDTXK.mjs";
+} from "./chunk-D36MPDGE.mjs";
 
 // elements/select/Select.tsx
 import React from "react";

package/dist/{chunk-FDKCMEMD.mjs → chunk-R4HAAT6R.mjs}

@@ -2,7 +2,7 @@ import {
   Label,
   Skeleton,
   cn
-} from "./chunk-AREFDTXK.mjs";
+} from "./chunk-D36MPDGE.mjs";
 
 // elements/input/Input.tsx
 import React, { forwardRef } from "react";

package/dist/chunk-ZFXKCRJC.mjs

@@ -0,0 +1,11 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export {
+  __require
+};

package/dist/codeBlock/index.d.mts

@@ -1,8 +1,9 @@
 import { FC } from 'react';
+import { HighlightProps } from 'prism-react-renderer';
 
 type CodeBlockTypes = {
     /** Specifies the programming language for syntax highlighting.*/
-    language?: string;
+    language?: HighlightProps["language"];
     /** Defines the width of the code block.*/
     width?: "full" | "md" | "sm";
     /** Array of tabs each containing a title and code content.*/

package/dist/codeBlock/index.d.ts

@@ -1,8 +1,9 @@
 import { FC } from 'react';
+import { HighlightProps } from 'prism-react-renderer';
 
 type CodeBlockTypes = {
     /** Specifies the programming language for syntax highlighting.*/
-    language?: string;
+    language?: HighlightProps["language"];
     /** Defines the width of the code block.*/
     width?: "full" | "md" | "sm";
     /** Array of tabs each containing a title and code content.*/

package/dist/codeBlock/index.js

@@ -36,6 +36,15 @@ module.exports = __toCommonJS(codeBlock_exports);
 
 // elements/codeBlock/CodeBlock.tsx
 var import_react4 = __toESM(require("react"));
+
+// util/index.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// elements/codeBlock/CodeBlock.tsx
 var import_prism_react_renderer = require("prism-react-renderer");
 
 // hooks/useClipboard.ts
@@ -64,13 +73,6 @@ function useClipboard({ timeout = 2e3 } = {}) {
   return { copy, reset, error, copied };
 }
 
-// util/index.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
 // elements/button/Button.tsx
 var React2 = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -376,6 +378,8 @@ var Tooltip = ({
 };
 
 // elements/codeBlock/CodeBlock.tsx
+(typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
+require("prismjs/components/prism-bash");
 var CodeBlock = ({
   tabs,
   code,
@@ -388,8 +392,7 @@ var CodeBlock = ({
 }) => {
   const clipboard = useClipboard();
   const [selectedTab, setSelectedTab] = (0, import_react4.useState)(0);
-  const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
-  const theme = isDarkMode ? import_prism_react_renderer.themes.vsDark : import_prism_react_renderer.themes.vsLight;
+  const theme = import_prism_react_renderer.themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
     md: "hawa-w-full hawa-max-w-md",
@@ -409,15 +412,15 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground dark:hawa-bg-muted",
-          fileName && tabs ? "hawa-bg-gray-300 dark:hawa-bg-muted/50" : "hawa-bg-gray-200"
+          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
+          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
         )
       },
       /* @__PURE__ */ import_react4.default.createElement(
         "div",
         {
           className: cn(
-            "mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
+            "hawa-font-mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
           )
         },
         fileName
@@ -427,7 +430,8 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-bg-gray-200 hawa-p-2  hawa-pb-0 hawa-font-mono hawa-text-foreground dark:hawa-bg-muted",
+          // hawa-bg-gray-300 dark:hawa-bg-red-600
+          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
           tabs && fileName && "hawa-rounded-t-none"
         )
       },
@@ -444,7 +448,7 @@ var CodeBlock = ({
           {
             onClick: () => setSelectedTab(i),
             className: cn(
-              "hawa-mb-1 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]  hawa-transition-all hover:hawa-bg-muted-foreground/20"
+              "hawa-mb-0.5 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-0.5 hawa-text-center hawa-text-[0.7rem]  hawa-transition-all hover:hawa-bg-muted-foreground/20"
             )
           },
           tab.title
@@ -455,7 +459,7 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-foreground/5 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
+          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-700 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
           tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
         )
       },
@@ -484,12 +488,12 @@ var CodeBlock = ({
             size: "icon",
             onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
             variant: "outline",
-            className: "hawa-text-foreground hawa-opacity-50 sm:hawa-opacity-100"
+            className: "hawa-text-gray-200 hawa-opacity-50 "
           },
           /* @__PURE__ */ import_react4.default.createElement(
             "svg",
             {
-              "aria-label": "Copy Icon",
+              "aria-label": "Copy",
               stroke: "currentColor",
               fill: "none",
               strokeWidth: "2",

package/dist/codeBlock/index.mjs

@@ -1,11 +1,18 @@
 import {
   Tooltip,
   cn
-} from "../chunk-OTGCLEKC.mjs";
+} from "../chunk-2R7F2GL7.mjs";
+import {
+  __require
+} from "../chunk-ZFXKCRJC.mjs";
 
 // elements/codeBlock/CodeBlock.tsx
 import React3, { useState as useState2 } from "react";
-import { Highlight, themes } from "prism-react-renderer";
+import {
+  Highlight,
+  themes,
+  Prism
+} from "prism-react-renderer";
 
 // hooks/useClipboard.ts
 import { useState } from "react";
@@ -287,6 +294,8 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // elements/codeBlock/CodeBlock.tsx
+(typeof global !== "undefined" ? global : window).Prism = Prism;
+__require("prismjs/components/prism-bash");
 var CodeBlock = ({
   tabs,
   code,
@@ -299,8 +308,7 @@ var CodeBlock = ({
 }) => {
   const clipboard = useClipboard();
   const [selectedTab, setSelectedTab] = useState2(0);
-  const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
-  const theme = isDarkMode ? themes.vsDark : themes.vsLight;
+  const theme = themes.oceanicNext;
   let widthStyles = {
     full: "hawa-w-full",
     md: "hawa-w-full hawa-max-w-md",
@@ -320,15 +328,15 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground dark:hawa-bg-muted",
-          fileName && tabs ? "hawa-bg-gray-300 dark:hawa-bg-muted/50" : "hawa-bg-gray-200"
+          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
+          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
         )
       },
       /* @__PURE__ */ React3.createElement(
         "div",
         {
           className: cn(
-            "mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
+            "hawa-font-mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
           )
         },
         fileName
@@ -338,7 +346,8 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-bg-gray-200 hawa-p-2  hawa-pb-0 hawa-font-mono hawa-text-foreground dark:hawa-bg-muted",
+          // hawa-bg-gray-300 dark:hawa-bg-red-600
+          "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
           tabs && fileName && "hawa-rounded-t-none"
         )
       },
@@ -355,7 +364,7 @@ var CodeBlock = ({
           {
             onClick: () => setSelectedTab(i),
             className: cn(
-              "hawa-mb-1 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]  hawa-transition-all hover:hawa-bg-muted-foreground/20"
+              "hawa-mb-0.5 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-0.5 hawa-text-center hawa-text-[0.7rem]  hawa-transition-all hover:hawa-bg-muted-foreground/20"
             )
           },
           tab.title
@@ -366,7 +375,7 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-foreground/5 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
+          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-700 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
           tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
         )
       },
@@ -395,12 +404,12 @@ var CodeBlock = ({
             size: "icon",
             onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
             variant: "outline",
-            className: "hawa-text-foreground hawa-opacity-50 sm:hawa-opacity-100"
+            className: "hawa-text-gray-200 hawa-opacity-50 "
           },
           /* @__PURE__ */ React3.createElement(
             "svg",
             {
-              "aria-label": "Copy Icon",
+              "aria-label": "Copy",
               stroke: "currentColor",
               fill: "none",
               strokeWidth: "2",

package/dist/collapsible/index.mjs

@@ -1,3 +1,5 @@
+import "../chunk-ZFXKCRJC.mjs";
+
 // elements/collapsible/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 var Collapsible = CollapsiblePrimitive.Root;

package/dist/colorPicker/index.d.mts

@@ -13,8 +13,12 @@ type LabelProps = {
 type ColorPickerTypes = {
     label?: string;
     id?: string;
+    isLoading?: boolean;
     labelProps?: LabelProps;
     helperText?: string;
+    forceHideHelperText?: boolean;
+    /** Boolean to enable/disable editing the input field and using it as a text field   */
+    preview?: boolean;
     /** The hex code for the color */
     color?: any;
     /** Fires everytime the color changes */

package/dist/colorPicker/index.d.ts

@@ -13,8 +13,12 @@ type LabelProps = {
 type ColorPickerTypes = {
     label?: string;
     id?: string;
+    isLoading?: boolean;
     labelProps?: LabelProps;
     helperText?: string;
+    forceHideHelperText?: boolean;
+    /** Boolean to enable/disable editing the input field and using it as a text field   */
+    preview?: boolean;
     /** The hex code for the color */
     color?: any;
     /** Fires everytime the color changes */