@sikka/hawa 0.26.21 → 0.26.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +2 -18
  2. package/dist/blocks/auth/index.mjs +5 -4
  3. package/dist/blocks/feedback/index.js +114 -118
  4. package/dist/blocks/feedback/index.mjs +6 -5
  5. package/dist/blocks/index.js +28 -30
  6. package/dist/blocks/index.mjs +2 -2
  7. package/dist/blocks/misc/index.js +28 -30
  8. package/dist/blocks/misc/index.mjs +20 -17
  9. package/dist/blocks/pricing/index.mjs +4 -4
  10. package/dist/{chunk-OTGCLEKC.mjs → chunk-2R7F2GL7.mjs} +20 -0
  11. package/dist/{chunk-POIP5U4M.mjs → chunk-4EGKGSGY.mjs} +1 -1
  12. package/dist/{chunk-APZM24KK.mjs → chunk-5YXZXYLH.mjs} +15 -18
  13. package/dist/{chunk-WPSUV4AD.mjs → chunk-F3DQJHTG.mjs} +29 -31
  14. package/dist/{chunk-VQQ6MUX5.mjs → chunk-FQ6WVEHW.mjs} +1 -1
  15. package/dist/{chunk-U3TZWNDZ.mjs → chunk-GVJYACGA.mjs} +1 -1
  16. package/dist/{chunk-Z5SL5QTQ.mjs → chunk-MQUAGP7K.mjs} +20 -0
  17. package/dist/{chunk-OAXF3RCQ.mjs → chunk-NMS5LCSQ.mjs} +1 -1
  18. package/dist/{chunk-4IOG44R3.mjs → chunk-OY66MBXP.mjs} +1 -1
  19. package/dist/{chunk-FDKCMEMD.mjs → chunk-R4HAAT6R.mjs} +1 -1
  20. package/dist/chunk-WUHNPHD5.mjs +0 -0
  21. package/dist/codeBlock/index.mjs +1 -1
  22. package/dist/colorPicker/index.d.mts +4 -0
  23. package/dist/colorPicker/index.d.ts +4 -0
  24. package/dist/colorPicker/index.js +80 -23
  25. package/dist/colorPicker/index.mjs +54 -15
  26. package/dist/dataTable/index.d.mts +2 -1
  27. package/dist/dataTable/index.d.ts +2 -1
  28. package/dist/dataTable/index.js +1 -1
  29. package/dist/dataTable/index.mjs +1 -1
  30. package/dist/elements/index.d.mts +7 -1
  31. package/dist/elements/index.d.ts +7 -1
  32. package/dist/elements/index.js +62 -34
  33. package/dist/elements/index.mjs +19 -7
  34. package/dist/index.css +11 -3
  35. package/dist/index.d.mts +7 -1
  36. package/dist/index.d.ts +7 -1
  37. package/dist/index.js +62 -34
  38. package/dist/index.mjs +62 -34
  39. package/dist/layout/index.mjs +2 -2
  40. package/dist/switch/index.d.mts +1 -1
  41. package/dist/switch/index.d.ts +1 -1
  42. package/dist/tabs/index.d.mts +2 -2
  43. package/dist/tabs/index.d.ts +2 -2
  44. package/dist/tabs/index.js +15 -13
  45. package/dist/tabs/index.mjs +15 -13
  46. package/dist/textarea/index.d.mts +1 -0
  47. package/dist/textarea/index.d.ts +1 -0
  48. package/dist/textarea/index.js +59 -36
  49. package/dist/textarea/index.mjs +59 -36
  50. package/package.json +1 -1
  51. package/dist/commonTypes-cyhMPvmz.d.mts +0 -4
  52. package/dist/commonTypes-cyhMPvmz.d.ts +0 -4
  53. /package/dist/{chunk-AREFDTXK.mjs → chunk-D36MPDGE.mjs} +0 -0
@@ -28,7 +28,7 @@ import {
28
28
  TabsTrigger,
29
29
  Textarea,
30
30
  UncheckMark
31
- } from "../chunk-WPSUV4AD.mjs";
31
+ } from "../chunk-F3DQJHTG.mjs";
32
32
  import {
33
33
  Sheet,
34
34
  SheetClose,
@@ -40,7 +40,7 @@ import {
40
40
  SheetPortal,
41
41
  SheetTitle,
42
42
  SheetTrigger
43
- } from "../chunk-VQQ6MUX5.mjs";
43
+ } from "../chunk-FQ6WVEHW.mjs";
44
44
  import {
45
45
  Button,
46
46
  Card,
@@ -72,8 +72,9 @@ import {
72
72
  Skeleton,
73
73
  Tooltip,
74
74
  buttonVariants,
75
+ calculateLuminance,
75
76
  cn
76
- } from "../chunk-Z5SL5QTQ.mjs";
77
+ } from "../chunk-MQUAGP7K.mjs";
77
78
 
78
79
  // elements/accordion/Accordion.tsx
79
80
  import * as React3 from "react";
@@ -1060,7 +1061,7 @@ var DataTable = ({
1060
1061
  /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React10.createElement(
1061
1062
  "div",
1062
1063
  {
1063
- className: "text-sm text-muted-foreground",
1064
+ className: "text-muted-foreground text-sm",
1064
1065
  dir: props.direction
1065
1066
  },
1066
1067
  /* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -2068,6 +2069,9 @@ var ColorPicker = ({
2068
2069
  colorPickerProps,
2069
2070
  textInputProps,
2070
2071
  labelProps,
2072
+ forceHideHelperText,
2073
+ isLoading,
2074
+ preview = false,
2071
2075
  ...props
2072
2076
  }) => {
2073
2077
  const [selectedColor, setSelectedColor] = useState8(props.color);
@@ -2088,7 +2092,7 @@ var ColorPicker = ({
2088
2092
  props.handleChange(e);
2089
2093
  }
2090
2094
  };
2091
- return /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React20.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React20.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React20.createElement(
2095
+ return /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React20.createElement(Label, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ React20.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ React20.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React20.createElement(
2092
2096
  "div",
2093
2097
  {
2094
2098
  style: { height: 40, backgroundColor: selectedColor },
@@ -2097,6 +2101,7 @@ var ColorPicker = ({
2097
2101
  /* @__PURE__ */ React20.createElement(
2098
2102
  "input",
2099
2103
  {
2104
+ disabled: preview,
2100
2105
  type: "color",
2101
2106
  value: selectedColor,
2102
2107
  onChange: (e) => {
@@ -2115,16 +2120,23 @@ var ColorPicker = ({
2115
2120
  ), /* @__PURE__ */ React20.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React20.createElement(
2116
2121
  "input",
2117
2122
  {
2123
+ disabled: preview,
2118
2124
  maxLength: 7,
2119
2125
  type: "text",
2120
2126
  onInput: handleTextInputChange,
2121
2127
  value: selectedColor,
2122
2128
  className: cn(
2123
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
2129
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
2130
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
2131
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
2124
2132
  ),
2133
+ style: {
2134
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
2135
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
2136
+ },
2125
2137
  ...textInputProps
2126
2138
  }
2127
- ))), /* @__PURE__ */ React20.createElement(
2139
+ ))), !forceHideHelperText && /* @__PURE__ */ React20.createElement(
2128
2140
  "p",
2129
2141
  {
2130
2142
  className: cn(
package/dist/index.css CHANGED
@@ -1015,9 +1015,6 @@ input[type="number"]::-webkit-inner-spin-button,
1015
1015
  .hawa-bottom-\[62px\] {
1016
1016
  bottom: 62px;
1017
1017
  }
1018
- .hawa-bottom-\[80px\] {
1019
- bottom: 80px;
1020
- }
1021
1018
  .hawa-end-0 {
1022
1019
  inset-inline-end: 0px;
1023
1020
  }
@@ -1981,9 +1978,16 @@ input[type="number"]::-webkit-inner-spin-button,
1981
1978
  .hawa-border-2 {
1982
1979
  border-width: 2px;
1983
1980
  }
1981
+ .hawa-border-x-0 {
1982
+ border-left-width: 0px;
1983
+ border-right-width: 0px;
1984
+ }
1984
1985
  .hawa-border-b {
1985
1986
  border-bottom-width: 1px;
1986
1987
  }
1988
+ .hawa-border-b-0 {
1989
+ border-bottom-width: 0px;
1990
+ }
1987
1991
  .hawa-border-b-2 {
1988
1992
  border-bottom-width: 2px;
1989
1993
  }
@@ -2033,6 +2037,10 @@ input[type="number"]::-webkit-inner-spin-button,
2033
2037
  .hawa-border-transparent {
2034
2038
  border-color: transparent;
2035
2039
  }
2040
+ .hawa-border-x-transparent {
2041
+ border-left-color: transparent;
2042
+ border-right-color: transparent;
2043
+ }
2036
2044
  .hawa-border-l-transparent {
2037
2045
  border-left-color: transparent;
2038
2046
  }
package/dist/index.d.mts CHANGED
@@ -9,6 +9,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
9
9
  import { DialogProps } from '@radix-ui/react-dialog';
10
10
  import { VariantProps } from 'class-variance-authority';
11
11
  import { RowData, ColumnDef } from '@tanstack/react-table';
12
+ export { ColumnDef } from '@tanstack/react-table';
12
13
  import * as TabsPrimitive from '@radix-ui/react-tabs';
13
14
  import * as PopoverPrimitive from '@radix-ui/react-popover';
14
15
  import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -540,6 +541,7 @@ declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & R
540
541
 
541
542
  interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
542
543
  helperText?: string;
544
+ isLoading?: boolean;
543
545
  /** The label of the input field */
544
546
  label?: any;
545
547
  labelProps?: LabelProps;
@@ -595,7 +597,7 @@ type SortButtonProps = {
595
597
  declare const SortButton: React__default.FC<SortButtonProps>;
596
598
 
597
599
  declare const Tabs: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
598
- orientation?: OrientationType | undefined;
600
+ orientation?: "vertical" | "horizontal" | undefined;
599
601
  } & React$1.RefAttributes<HTMLDivElement>>;
600
602
  declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
601
603
  declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -823,8 +825,12 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
823
825
  type ColorPickerTypes = {
824
826
  label?: string;
825
827
  id?: string;
828
+ isLoading?: boolean;
826
829
  labelProps?: LabelProps;
827
830
  helperText?: string;
831
+ forceHideHelperText?: boolean;
832
+ /** Boolean to enable/disable editing the input field and using it as a text field */
833
+ preview?: boolean;
828
834
  /** The hex code for the color */
829
835
  color?: any;
830
836
  /** Fires everytime the color changes */
package/dist/index.d.ts CHANGED
@@ -9,6 +9,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
9
9
  import { DialogProps } from '@radix-ui/react-dialog';
10
10
  import { VariantProps } from 'class-variance-authority';
11
11
  import { RowData, ColumnDef } from '@tanstack/react-table';
12
+ export { ColumnDef } from '@tanstack/react-table';
12
13
  import * as TabsPrimitive from '@radix-ui/react-tabs';
13
14
  import * as PopoverPrimitive from '@radix-ui/react-popover';
14
15
  import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -540,6 +541,7 @@ declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & R
540
541
 
541
542
  interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
542
543
  helperText?: string;
544
+ isLoading?: boolean;
543
545
  /** The label of the input field */
544
546
  label?: any;
545
547
  labelProps?: LabelProps;
@@ -595,7 +597,7 @@ type SortButtonProps = {
595
597
  declare const SortButton: React__default.FC<SortButtonProps>;
596
598
 
597
599
  declare const Tabs: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
598
- orientation?: OrientationType | undefined;
600
+ orientation?: "vertical" | "horizontal" | undefined;
599
601
  } & React$1.RefAttributes<HTMLDivElement>>;
600
602
  declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
601
603
  declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -823,8 +825,12 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
823
825
  type ColorPickerTypes = {
824
826
  label?: string;
825
827
  id?: string;
828
+ isLoading?: boolean;
826
829
  labelProps?: LabelProps;
827
830
  helperText?: string;
831
+ forceHideHelperText?: boolean;
832
+ /** Boolean to enable/disable editing the input field and using it as a text field */
833
+ preview?: boolean;
828
834
  /** The hex code for the color */
829
835
  color?: any;
830
836
  /** Fires everytime the color changes */
package/dist/index.js CHANGED
@@ -248,6 +248,25 @@ var import_tailwind_merge = require("tailwind-merge");
248
248
  function cn(...inputs) {
249
249
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
250
250
  }
251
+ var parseColor = (color) => {
252
+ if (color.startsWith("#")) {
253
+ let r = parseInt(color.slice(1, 3), 16);
254
+ let g = parseInt(color.slice(3, 5), 16);
255
+ let b = parseInt(color.slice(5, 7), 16);
256
+ return [r, g, b];
257
+ } else if (color.startsWith("rgb")) {
258
+ return color.match(/\d+/g).map(Number);
259
+ }
260
+ return [255, 255, 255];
261
+ };
262
+ var calculateLuminance = (color) => {
263
+ var _a;
264
+ const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
265
+ c /= 255;
266
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
267
+ });
268
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
269
+ };
251
270
 
252
271
  // elements/card/Card.tsx
253
272
  var Card = React.forwardRef(
@@ -2706,7 +2725,7 @@ var DataTable = ({
2706
2725
  /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React22.createElement(
2707
2726
  "div",
2708
2727
  {
2709
- className: "text-sm text-muted-foreground",
2728
+ className: "text-muted-foreground text-sm",
2710
2729
  dir: props.direction
2711
2730
  },
2712
2731
  /* @__PURE__ */ React22.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -3492,6 +3511,7 @@ var Textarea = React28.forwardRef(
3492
3511
  forceHideHelperText,
3493
3512
  textareaProps,
3494
3513
  countPosition = "bottom",
3514
+ isLoading,
3495
3515
  ...props
3496
3516
  }, ref) => {
3497
3517
  return /* @__PURE__ */ React28.createElement(
@@ -3503,12 +3523,20 @@ var Textarea = React28.forwardRef(
3503
3523
  className
3504
3524
  )
3505
3525
  },
3506
- props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
3507
- /* @__PURE__ */ React28.createElement(
3526
+ /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React28.createElement(
3527
+ "div",
3528
+ {
3529
+ className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
3530
+ },
3531
+ (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3532
+ "/",
3533
+ textareaProps == null ? void 0 : textareaProps.maxLength
3534
+ )),
3535
+ isLoading ? /* @__PURE__ */ React28.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React28.createElement(
3508
3536
  "textarea",
3509
3537
  {
3510
3538
  className: cn(
3511
- "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",
3539
+ "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",
3512
3540
  classNames == null ? void 0 : classNames.textarea
3513
3541
  ),
3514
3542
  ref,
@@ -3524,20 +3552,7 @@ var Textarea = React28.forwardRef(
3524
3552
  )
3525
3553
  },
3526
3554
  props.helperText
3527
- ), showCount && /* @__PURE__ */ React28.createElement(
3528
- "div",
3529
- {
3530
- className: cn(
3531
- "hawa-text-start hawa-text-xs hawa-transition-all",
3532
- {
3533
- "hawa-absolute hawa-bottom-[80px] hawa-end-0 hawa-translate-y-1/2": countPosition === "top"
3534
- }
3535
- )
3536
- },
3537
- (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3538
- "/",
3539
- textareaProps == null ? void 0 : textareaProps.maxLength
3540
- ))
3555
+ ), showCount && countPosition === "bottom" && /* @__PURE__ */ React28.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))
3541
3556
  );
3542
3557
  }
3543
3558
  );
@@ -3803,19 +3818,21 @@ var SortButton = (props) => {
3803
3818
  var React31 = __toESM(require("react"));
3804
3819
  var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
3805
3820
  var TabsContext = React31.createContext({ orientation: "vertical" });
3806
- var Tabs = React31.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React31.createElement(
3807
- TabsPrimitive.Root,
3808
- {
3809
- ref,
3810
- className: cn(
3811
- "hawa-flex hawa-gap-2",
3812
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3813
- className
3814
- ),
3815
- ...props
3816
- },
3817
- /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3818
- ));
3821
+ var Tabs = React31.forwardRef(
3822
+ ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
3823
+ TabsPrimitive.Root,
3824
+ {
3825
+ ref,
3826
+ className: cn(
3827
+ "hawa-flex hawa-gap-2",
3828
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3829
+ className
3830
+ ),
3831
+ ...props
3832
+ },
3833
+ /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3834
+ )
3835
+ );
3819
3836
  Tabs.displayName = TabsPrimitive.Root.displayName;
3820
3837
  var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
3821
3838
  const { orientation } = React31.useContext(TabsContext);
@@ -6288,6 +6305,9 @@ var ColorPicker = ({
6288
6305
  colorPickerProps,
6289
6306
  textInputProps,
6290
6307
  labelProps,
6308
+ forceHideHelperText,
6309
+ isLoading,
6310
+ preview = false,
6291
6311
  ...props
6292
6312
  }) => {
6293
6313
  const [selectedColor, setSelectedColor] = (0, import_react21.useState)(props.color);
@@ -6308,7 +6328,7 @@ var ColorPicker = ({
6308
6328
  props.handleChange(e);
6309
6329
  }
6310
6330
  };
6311
- return /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react21.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react21.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react21.default.createElement(
6331
+ return /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react21.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react21.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react21.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react21.default.createElement(
6312
6332
  "div",
6313
6333
  {
6314
6334
  style: { height: 40, backgroundColor: selectedColor },
@@ -6317,6 +6337,7 @@ var ColorPicker = ({
6317
6337
  /* @__PURE__ */ import_react21.default.createElement(
6318
6338
  "input",
6319
6339
  {
6340
+ disabled: preview,
6320
6341
  type: "color",
6321
6342
  value: selectedColor,
6322
6343
  onChange: (e) => {
@@ -6335,16 +6356,23 @@ var ColorPicker = ({
6335
6356
  ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react21.default.createElement(
6336
6357
  "input",
6337
6358
  {
6359
+ disabled: preview,
6338
6360
  maxLength: 7,
6339
6361
  type: "text",
6340
6362
  onInput: handleTextInputChange,
6341
6363
  value: selectedColor,
6342
6364
  className: cn(
6343
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
6365
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
6366
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
6367
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
6344
6368
  ),
6369
+ style: {
6370
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
6371
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
6372
+ },
6345
6373
  ...textInputProps
6346
6374
  }
6347
- ))), /* @__PURE__ */ import_react21.default.createElement(
6375
+ ))), !forceHideHelperText && /* @__PURE__ */ import_react21.default.createElement(
6348
6376
  "p",
6349
6377
  {
6350
6378
  className: cn(
package/dist/index.mjs CHANGED
@@ -7,6 +7,25 @@ import { twMerge } from "tailwind-merge";
7
7
  function cn(...inputs) {
8
8
  return twMerge(clsx(inputs));
9
9
  }
10
+ var parseColor = (color) => {
11
+ if (color.startsWith("#")) {
12
+ let r = parseInt(color.slice(1, 3), 16);
13
+ let g = parseInt(color.slice(3, 5), 16);
14
+ let b = parseInt(color.slice(5, 7), 16);
15
+ return [r, g, b];
16
+ } else if (color.startsWith("rgb")) {
17
+ return color.match(/\d+/g).map(Number);
18
+ }
19
+ return [255, 255, 255];
20
+ };
21
+ var calculateLuminance = (color) => {
22
+ var _a;
23
+ const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
24
+ c /= 255;
25
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
26
+ });
27
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
28
+ };
10
29
 
11
30
  // elements/card/Card.tsx
12
31
  var Card = React.forwardRef(
@@ -2473,7 +2492,7 @@ var DataTable = ({
2473
2492
  /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React22.createElement(
2474
2493
  "div",
2475
2494
  {
2476
- className: "text-sm text-muted-foreground",
2495
+ className: "text-muted-foreground text-sm",
2477
2496
  dir: props.direction
2478
2497
  },
2479
2498
  /* @__PURE__ */ React22.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -3259,6 +3278,7 @@ var Textarea = React28.forwardRef(
3259
3278
  forceHideHelperText,
3260
3279
  textareaProps,
3261
3280
  countPosition = "bottom",
3281
+ isLoading,
3262
3282
  ...props
3263
3283
  }, ref) => {
3264
3284
  return /* @__PURE__ */ React28.createElement(
@@ -3270,12 +3290,20 @@ var Textarea = React28.forwardRef(
3270
3290
  className
3271
3291
  )
3272
3292
  },
3273
- props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
3274
- /* @__PURE__ */ React28.createElement(
3293
+ /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React28.createElement(
3294
+ "div",
3295
+ {
3296
+ className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
3297
+ },
3298
+ (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3299
+ "/",
3300
+ textareaProps == null ? void 0 : textareaProps.maxLength
3301
+ )),
3302
+ isLoading ? /* @__PURE__ */ React28.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React28.createElement(
3275
3303
  "textarea",
3276
3304
  {
3277
3305
  className: cn(
3278
- "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",
3306
+ "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",
3279
3307
  classNames == null ? void 0 : classNames.textarea
3280
3308
  ),
3281
3309
  ref,
@@ -3291,20 +3319,7 @@ var Textarea = React28.forwardRef(
3291
3319
  )
3292
3320
  },
3293
3321
  props.helperText
3294
- ), showCount && /* @__PURE__ */ React28.createElement(
3295
- "div",
3296
- {
3297
- className: cn(
3298
- "hawa-text-start hawa-text-xs hawa-transition-all",
3299
- {
3300
- "hawa-absolute hawa-bottom-[80px] hawa-end-0 hawa-translate-y-1/2": countPosition === "top"
3301
- }
3302
- )
3303
- },
3304
- (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3305
- "/",
3306
- textareaProps == null ? void 0 : textareaProps.maxLength
3307
- ))
3322
+ ), showCount && countPosition === "bottom" && /* @__PURE__ */ React28.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))
3308
3323
  );
3309
3324
  }
3310
3325
  );
@@ -3570,19 +3585,21 @@ var SortButton = (props) => {
3570
3585
  import * as React31 from "react";
3571
3586
  import * as TabsPrimitive from "@radix-ui/react-tabs";
3572
3587
  var TabsContext = React31.createContext({ orientation: "vertical" });
3573
- var Tabs = React31.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React31.createElement(
3574
- TabsPrimitive.Root,
3575
- {
3576
- ref,
3577
- className: cn(
3578
- "hawa-flex hawa-gap-2",
3579
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3580
- className
3581
- ),
3582
- ...props
3583
- },
3584
- /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3585
- ));
3588
+ var Tabs = React31.forwardRef(
3589
+ ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
3590
+ TabsPrimitive.Root,
3591
+ {
3592
+ ref,
3593
+ className: cn(
3594
+ "hawa-flex hawa-gap-2",
3595
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3596
+ className
3597
+ ),
3598
+ ...props
3599
+ },
3600
+ /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3601
+ )
3602
+ );
3586
3603
  Tabs.displayName = TabsPrimitive.Root.displayName;
3587
3604
  var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
3588
3605
  const { orientation } = React31.useContext(TabsContext);
@@ -6058,6 +6075,9 @@ var ColorPicker = ({
6058
6075
  colorPickerProps,
6059
6076
  textInputProps,
6060
6077
  labelProps,
6078
+ forceHideHelperText,
6079
+ isLoading,
6080
+ preview = false,
6061
6081
  ...props
6062
6082
  }) => {
6063
6083
  const [selectedColor, setSelectedColor] = useState12(props.color);
@@ -6078,7 +6098,7 @@ var ColorPicker = ({
6078
6098
  props.handleChange(e);
6079
6099
  }
6080
6100
  };
6081
- return /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React43.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React43.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React43.createElement(
6101
+ return /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React43.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ React43.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ React43.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React43.createElement(
6082
6102
  "div",
6083
6103
  {
6084
6104
  style: { height: 40, backgroundColor: selectedColor },
@@ -6087,6 +6107,7 @@ var ColorPicker = ({
6087
6107
  /* @__PURE__ */ React43.createElement(
6088
6108
  "input",
6089
6109
  {
6110
+ disabled: preview,
6090
6111
  type: "color",
6091
6112
  value: selectedColor,
6092
6113
  onChange: (e) => {
@@ -6105,16 +6126,23 @@ var ColorPicker = ({
6105
6126
  ), /* @__PURE__ */ React43.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React43.createElement(
6106
6127
  "input",
6107
6128
  {
6129
+ disabled: preview,
6108
6130
  maxLength: 7,
6109
6131
  type: "text",
6110
6132
  onInput: handleTextInputChange,
6111
6133
  value: selectedColor,
6112
6134
  className: cn(
6113
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
6135
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
6136
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
6137
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
6114
6138
  ),
6139
+ style: {
6140
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
6141
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
6142
+ },
6115
6143
  ...textInputProps
6116
6144
  }
6117
- ))), /* @__PURE__ */ React43.createElement(
6145
+ ))), !forceHideHelperText && /* @__PURE__ */ React43.createElement(
6118
6146
  "p",
6119
6147
  {
6120
6148
  className: cn(
@@ -5,7 +5,7 @@ import {
5
5
  Sheet,
6
6
  SheetContent,
7
7
  SheetTrigger
8
- } from "../chunk-VQQ6MUX5.mjs";
8
+ } from "../chunk-FQ6WVEHW.mjs";
9
9
  import {
10
10
  Button,
11
11
  Card,
@@ -17,7 +17,7 @@ import {
17
17
  Skeleton,
18
18
  Tooltip,
19
19
  cn
20
- } from "../chunk-Z5SL5QTQ.mjs";
20
+ } from "../chunk-MQUAGP7K.mjs";
21
21
 
22
22
  // layout/stats/Stats.tsx
23
23
  import React from "react";
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as SwitchPrimitives from '@radix-ui/react-switch';
3
- import { R as RadiusType } from '../commonTypes-cyhMPvmz.mjs';
3
+ import { R as RadiusType } from '../commonTypes-PBumfOBg.mjs';
4
4
 
5
5
  interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
6
6
  size?: "default" | "sm" | "lg";
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as SwitchPrimitives from '@radix-ui/react-switch';
3
- import { R as RadiusType } from '../commonTypes-cyhMPvmz.js';
3
+ import { R as RadiusType } from '../commonTypes-PBumfOBg.js';
4
4
 
5
5
  interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
6
6
  size?: "default" | "sm" | "lg";
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
3
  import * as TabsPrimitive from '@radix-ui/react-tabs';
4
- import { R as RadiusType, O as OrientationType } from '../commonTypes-cyhMPvmz.mjs';
4
+ import { R as RadiusType } from '../commonTypes-PBumfOBg.mjs';
5
5
 
6
6
  type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
7
7
  type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
@@ -21,7 +21,7 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
21
21
  };
22
22
 
23
23
  declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
24
- orientation?: OrientationType | undefined;
24
+ orientation?: "vertical" | "horizontal" | undefined;
25
25
  } & React.RefAttributes<HTMLDivElement>>;
26
26
  declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
27
27
  declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
3
  import * as TabsPrimitive from '@radix-ui/react-tabs';
4
- import { R as RadiusType, O as OrientationType } from '../commonTypes-cyhMPvmz.js';
4
+ import { R as RadiusType } from '../commonTypes-PBumfOBg.js';
5
5
 
6
6
  type ChipColors = "green" | "blue" | "red" | "yellow" | "orange" | "purple" | "cyan" | "hyper" | "oceanic";
7
7
  type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
@@ -21,7 +21,7 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
21
21
  };
22
22
 
23
23
  declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
24
- orientation?: OrientationType | undefined;
24
+ orientation?: "vertical" | "horizontal" | undefined;
25
25
  } & React.RefAttributes<HTMLDivElement>>;
26
26
  declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
27
27
  declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {