@sikka/hawa 0.26.21 → 0.26.23

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 (71) hide show
  1. package/README.md +2 -18
  2. package/dist/alert/index.d.mts +1 -0
  3. package/dist/alert/index.d.ts +1 -0
  4. package/dist/blocks/auth/index.mjs +5 -4
  5. package/dist/blocks/feedback/index.js +114 -118
  6. package/dist/blocks/feedback/index.mjs +6 -5
  7. package/dist/blocks/index.js +28 -30
  8. package/dist/blocks/index.mjs +3 -2
  9. package/dist/blocks/misc/index.js +28 -30
  10. package/dist/blocks/misc/index.mjs +20 -17
  11. package/dist/blocks/pricing/index.mjs +4 -4
  12. package/dist/carousel/index.d.mts +2 -0
  13. package/dist/carousel/index.d.ts +2 -0
  14. package/dist/carousel/index.js +31 -16
  15. package/dist/carousel/index.mjs +30 -15
  16. package/dist/checkbox/index.d.mts +1 -1
  17. package/dist/checkbox/index.d.ts +1 -1
  18. package/dist/chip/index.d.mts +1 -1
  19. package/dist/chip/index.d.ts +1 -1
  20. package/dist/{chunk-OTGCLEKC.mjs → chunk-2R7F2GL7.mjs} +20 -0
  21. package/dist/{chunk-POIP5U4M.mjs → chunk-4EGKGSGY.mjs} +1 -1
  22. package/dist/{chunk-APZM24KK.mjs → chunk-5YXZXYLH.mjs} +15 -18
  23. package/dist/{chunk-WPSUV4AD.mjs → chunk-F3DQJHTG.mjs} +29 -31
  24. package/dist/{chunk-VQQ6MUX5.mjs → chunk-FQ6WVEHW.mjs} +1 -1
  25. package/dist/{chunk-U3TZWNDZ.mjs → chunk-GVJYACGA.mjs} +1 -1
  26. package/dist/{chunk-Z5SL5QTQ.mjs → chunk-MQUAGP7K.mjs} +20 -0
  27. package/dist/{chunk-OAXF3RCQ.mjs → chunk-NMS5LCSQ.mjs} +1 -1
  28. package/dist/{chunk-4IOG44R3.mjs → chunk-OY66MBXP.mjs} +1 -1
  29. package/dist/{chunk-FDKCMEMD.mjs → chunk-R4HAAT6R.mjs} +1 -1
  30. package/dist/chunk-WUHNPHD5.mjs +0 -0
  31. package/dist/chunk-ZFXKCRJC.mjs +11 -0
  32. package/dist/codeBlock/index.d.mts +2 -1
  33. package/dist/codeBlock/index.d.ts +2 -1
  34. package/dist/codeBlock/index.js +21 -17
  35. package/dist/codeBlock/index.mjs +21 -12
  36. package/dist/collapsible/index.mjs +2 -0
  37. package/dist/colorPicker/index.d.mts +4 -0
  38. package/dist/colorPicker/index.d.ts +4 -0
  39. package/dist/colorPicker/index.js +80 -23
  40. package/dist/colorPicker/index.mjs +55 -15
  41. package/dist/commonTypes-2k6FnHw5.d.mts +4 -0
  42. package/dist/commonTypes-2k6FnHw5.d.ts +4 -0
  43. package/dist/dataTable/index.d.mts +2 -1
  44. package/dist/dataTable/index.d.ts +2 -1
  45. package/dist/dataTable/index.js +1 -1
  46. package/dist/dataTable/index.mjs +1 -1
  47. package/dist/elements/index.d.mts +11 -2
  48. package/dist/elements/index.d.ts +11 -2
  49. package/dist/elements/index.js +104 -59
  50. package/dist/elements/index.mjs +69 -33
  51. package/dist/hooks/index.mjs +1 -0
  52. package/dist/index.css +377 -202
  53. package/dist/index.d.mts +11 -2
  54. package/dist/index.d.ts +11 -2
  55. package/dist/index.js +104 -59
  56. package/dist/index.mjs +117 -60
  57. package/dist/layout/index.mjs +3 -2
  58. package/dist/switch/index.d.mts +1 -1
  59. package/dist/switch/index.d.ts +1 -1
  60. package/dist/tabs/index.d.mts +2 -2
  61. package/dist/tabs/index.d.ts +2 -2
  62. package/dist/tabs/index.js +15 -13
  63. package/dist/tabs/index.mjs +15 -13
  64. package/dist/textarea/index.d.mts +1 -0
  65. package/dist/textarea/index.d.ts +1 -0
  66. package/dist/textarea/index.js +59 -36
  67. package/dist/textarea/index.mjs +59 -36
  68. package/package.json +11 -10
  69. package/dist/commonTypes-cyhMPvmz.d.mts +0 -4
  70. package/dist/commonTypes-cyhMPvmz.d.ts +0 -4
  71. /package/dist/{chunk-AREFDTXK.mjs → chunk-D36MPDGE.mjs} +0 -0
@@ -182,6 +182,25 @@ var import_tailwind_merge = require("tailwind-merge");
182
182
  function cn(...inputs) {
183
183
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
184
184
  }
185
+ var parseColor = (color) => {
186
+ if (color.startsWith("#")) {
187
+ let r = parseInt(color.slice(1, 3), 16);
188
+ let g = parseInt(color.slice(3, 5), 16);
189
+ let b = parseInt(color.slice(5, 7), 16);
190
+ return [r, g, b];
191
+ } else if (color.startsWith("rgb")) {
192
+ return color.match(/\d+/g).map(Number);
193
+ }
194
+ return [255, 255, 255];
195
+ };
196
+ var calculateLuminance = (color) => {
197
+ var _a;
198
+ const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
199
+ c /= 255;
200
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
201
+ });
202
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
203
+ };
185
204
 
186
205
  // elements/card/Card.tsx
187
206
  var Card = React.forwardRef(
@@ -2640,7 +2659,7 @@ var DataTable = ({
2640
2659
  /* @__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(
2641
2660
  "div",
2642
2661
  {
2643
- className: "text-sm text-muted-foreground",
2662
+ className: "text-muted-foreground text-sm",
2644
2663
  dir: props.direction
2645
2664
  },
2646
2665
  /* @__PURE__ */ React22.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -3426,6 +3445,7 @@ var Textarea = React28.forwardRef(
3426
3445
  forceHideHelperText,
3427
3446
  textareaProps,
3428
3447
  countPosition = "bottom",
3448
+ isLoading,
3429
3449
  ...props
3430
3450
  }, ref) => {
3431
3451
  return /* @__PURE__ */ React28.createElement(
@@ -3437,12 +3457,20 @@ var Textarea = React28.forwardRef(
3437
3457
  className
3438
3458
  )
3439
3459
  },
3440
- props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
3441
- /* @__PURE__ */ React28.createElement(
3460
+ /* @__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(
3461
+ "div",
3462
+ {
3463
+ className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
3464
+ },
3465
+ (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3466
+ "/",
3467
+ textareaProps == null ? void 0 : textareaProps.maxLength
3468
+ )),
3469
+ isLoading ? /* @__PURE__ */ React28.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React28.createElement(
3442
3470
  "textarea",
3443
3471
  {
3444
3472
  className: cn(
3445
- "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",
3473
+ "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",
3446
3474
  classNames == null ? void 0 : classNames.textarea
3447
3475
  ),
3448
3476
  ref,
@@ -3458,20 +3486,7 @@ var Textarea = React28.forwardRef(
3458
3486
  )
3459
3487
  },
3460
3488
  props.helperText
3461
- ), showCount && /* @__PURE__ */ React28.createElement(
3462
- "div",
3463
- {
3464
- className: cn(
3465
- "hawa-text-start hawa-text-xs hawa-transition-all",
3466
- {
3467
- "hawa-absolute hawa-bottom-[80px] hawa-end-0 hawa-translate-y-1/2": countPosition === "top"
3468
- }
3469
- )
3470
- },
3471
- (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3472
- "/",
3473
- textareaProps == null ? void 0 : textareaProps.maxLength
3474
- ))
3489
+ ), 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))
3475
3490
  );
3476
3491
  }
3477
3492
  );
@@ -3737,19 +3752,21 @@ var SortButton = (props) => {
3737
3752
  var React31 = __toESM(require("react"));
3738
3753
  var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
3739
3754
  var TabsContext = React31.createContext({ orientation: "vertical" });
3740
- var Tabs = React31.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React31.createElement(
3741
- TabsPrimitive.Root,
3742
- {
3743
- ref,
3744
- className: cn(
3745
- "hawa-flex hawa-gap-2",
3746
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3747
- className
3748
- ),
3749
- ...props
3750
- },
3751
- /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3752
- ));
3755
+ var Tabs = React31.forwardRef(
3756
+ ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
3757
+ TabsPrimitive.Root,
3758
+ {
3759
+ ref,
3760
+ className: cn(
3761
+ "hawa-flex hawa-gap-2",
3762
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3763
+ className
3764
+ ),
3765
+ ...props
3766
+ },
3767
+ /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3768
+ )
3769
+ );
3753
3770
  Tabs.displayName = TabsPrimitive.Root.displayName;
3754
3771
  var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
3755
3772
  const { orientation } = React31.useContext(TabsContext);
@@ -6222,6 +6239,9 @@ var ColorPicker = ({
6222
6239
  colorPickerProps,
6223
6240
  textInputProps,
6224
6241
  labelProps,
6242
+ forceHideHelperText,
6243
+ isLoading,
6244
+ preview = false,
6225
6245
  ...props
6226
6246
  }) => {
6227
6247
  const [selectedColor, setSelectedColor] = (0, import_react21.useState)(props.color);
@@ -6242,7 +6262,7 @@ var ColorPicker = ({
6242
6262
  props.handleChange(e);
6243
6263
  }
6244
6264
  };
6245
- 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(
6265
+ 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(
6246
6266
  "div",
6247
6267
  {
6248
6268
  style: { height: 40, backgroundColor: selectedColor },
@@ -6251,6 +6271,7 @@ var ColorPicker = ({
6251
6271
  /* @__PURE__ */ import_react21.default.createElement(
6252
6272
  "input",
6253
6273
  {
6274
+ disabled: preview,
6254
6275
  type: "color",
6255
6276
  value: selectedColor,
6256
6277
  onChange: (e) => {
@@ -6269,16 +6290,23 @@ var ColorPicker = ({
6269
6290
  ), /* @__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(
6270
6291
  "input",
6271
6292
  {
6293
+ disabled: preview,
6272
6294
  maxLength: 7,
6273
6295
  type: "text",
6274
6296
  onInput: handleTextInputChange,
6275
6297
  value: selectedColor,
6276
6298
  className: cn(
6277
- "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"
6299
+ "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",
6300
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
6301
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
6278
6302
  ),
6303
+ style: {
6304
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
6305
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
6306
+ },
6279
6307
  ...textInputProps
6280
6308
  }
6281
- ))), /* @__PURE__ */ import_react21.default.createElement(
6309
+ ))), !forceHideHelperText && /* @__PURE__ */ import_react21.default.createElement(
6282
6310
  "p",
6283
6311
  {
6284
6312
  className: cn(
@@ -6910,6 +6938,8 @@ function useClipboard({ timeout = 2e3 } = {}) {
6910
6938
  }
6911
6939
 
6912
6940
  // elements/codeBlock/CodeBlock.tsx
6941
+ (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
6942
+ require("prismjs/components/prism-bash");
6913
6943
  var CodeBlock = ({
6914
6944
  tabs,
6915
6945
  code,
@@ -6922,8 +6952,7 @@ var CodeBlock = ({
6922
6952
  }) => {
6923
6953
  const clipboard = useClipboard();
6924
6954
  const [selectedTab, setSelectedTab] = (0, import_react30.useState)(0);
6925
- const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
6926
- const theme = isDarkMode ? import_prism_react_renderer.themes.vsDark : import_prism_react_renderer.themes.vsLight;
6955
+ const theme = import_prism_react_renderer.themes.oceanicNext;
6927
6956
  let widthStyles = {
6928
6957
  full: "hawa-w-full",
6929
6958
  md: "hawa-w-full hawa-max-w-md",
@@ -6943,15 +6972,15 @@ var CodeBlock = ({
6943
6972
  "div",
6944
6973
  {
6945
6974
  className: cn(
6946
- "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",
6947
- fileName && tabs ? "hawa-bg-gray-300 dark:hawa-bg-muted/50" : "hawa-bg-gray-200"
6975
+ "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",
6976
+ fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
6948
6977
  )
6949
6978
  },
6950
6979
  /* @__PURE__ */ import_react30.default.createElement(
6951
6980
  "div",
6952
6981
  {
6953
6982
  className: cn(
6954
- "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]"
6983
+ "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]"
6955
6984
  )
6956
6985
  },
6957
6986
  fileName
@@ -6961,7 +6990,8 @@ var CodeBlock = ({
6961
6990
  "div",
6962
6991
  {
6963
6992
  className: cn(
6964
- "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",
6993
+ // hawa-bg-gray-300 dark:hawa-bg-red-600
6994
+ "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",
6965
6995
  tabs && fileName && "hawa-rounded-t-none"
6966
6996
  )
6967
6997
  },
@@ -6978,7 +7008,7 @@ var CodeBlock = ({
6978
7008
  {
6979
7009
  onClick: () => setSelectedTab(i),
6980
7010
  className: cn(
6981
- "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"
7011
+ "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"
6982
7012
  )
6983
7013
  },
6984
7014
  tab.title
@@ -6989,7 +7019,7 @@ var CodeBlock = ({
6989
7019
  "div",
6990
7020
  {
6991
7021
  className: cn(
6992
- "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 ",
7022
+ "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 ",
6993
7023
  tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
6994
7024
  )
6995
7025
  },
@@ -7018,12 +7048,12 @@ var CodeBlock = ({
7018
7048
  size: "icon",
7019
7049
  onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
7020
7050
  variant: "outline",
7021
- className: "hawa-text-foreground hawa-opacity-50 sm:hawa-opacity-100"
7051
+ className: "hawa-text-gray-200 hawa-opacity-50 "
7022
7052
  },
7023
7053
  /* @__PURE__ */ import_react30.default.createElement(
7024
7054
  "svg",
7025
7055
  {
7026
- "aria-label": "Copy Icon",
7056
+ "aria-label": "Copy",
7027
7057
  stroke: "currentColor",
7028
7058
  fill: "none",
7029
7059
  strokeWidth: "2",
@@ -7050,11 +7080,13 @@ var Carousel = ({
7050
7080
  showArrows,
7051
7081
  options,
7052
7082
  autoplay,
7083
+ direction = "ltr",
7053
7084
  autoplayInterval = 3e3,
7054
7085
  ...props
7055
7086
  }) => {
7056
7087
  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({
7057
7088
  ...options,
7089
+ direction,
7058
7090
  loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
7059
7091
  });
7060
7092
  const [selectedIndex, setSelectedIndex] = (0, import_react31.useState)(0);
@@ -7093,6 +7125,7 @@ var Carousel = ({
7093
7125
  ))))), /* @__PURE__ */ import_react31.default.createElement(
7094
7126
  Dots,
7095
7127
  {
7128
+ direction,
7096
7129
  itemsLength: length,
7097
7130
  selectedIndex,
7098
7131
  onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
@@ -7107,22 +7140,34 @@ var Carousel = ({
7107
7140
  }
7108
7141
  ));
7109
7142
  };
7110
- var Dots = ({ onDotClick, itemsLength, selectedIndex }) => {
7143
+ var Dots = ({
7144
+ onDotClick,
7145
+ itemsLength,
7146
+ selectedIndex,
7147
+ direction
7148
+ }) => {
7111
7149
  const arr = new Array(itemsLength).fill(0);
7112
- return /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1" }, arr.map((_, index) => {
7113
- const selected = index === selectedIndex;
7114
- return /* @__PURE__ */ import_react31.default.createElement(
7115
- "div",
7116
- {
7117
- key: index,
7118
- onClick: () => onDotClick(index),
7119
- className: cn(
7120
- "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
7121
- !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
7122
- )
7123
- }
7124
- );
7125
- }));
7150
+ return /* @__PURE__ */ import_react31.default.createElement(
7151
+ "div",
7152
+ {
7153
+ dir: direction,
7154
+ className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
7155
+ },
7156
+ arr.map((_, index) => {
7157
+ const selected = index === selectedIndex;
7158
+ return /* @__PURE__ */ import_react31.default.createElement(
7159
+ "div",
7160
+ {
7161
+ key: index,
7162
+ onClick: () => onDotClick(index),
7163
+ className: cn(
7164
+ "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
7165
+ !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
7166
+ )
7167
+ }
7168
+ );
7169
+ })
7170
+ );
7126
7171
  };
7127
7172
  var CarouselControls = (props) => {
7128
7173
  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react31.default.createElement(
@@ -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,12 @@ 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";
78
+ import {
79
+ __require
80
+ } from "../chunk-ZFXKCRJC.mjs";
77
81
 
78
82
  // elements/accordion/Accordion.tsx
79
83
  import * as React3 from "react";
@@ -1060,7 +1064,7 @@ var DataTable = ({
1060
1064
  /* @__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
1065
  "div",
1062
1066
  {
1063
- className: "text-sm text-muted-foreground",
1067
+ className: "text-muted-foreground text-sm",
1064
1068
  dir: props.direction
1065
1069
  },
1066
1070
  /* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -2068,6 +2072,9 @@ var ColorPicker = ({
2068
2072
  colorPickerProps,
2069
2073
  textInputProps,
2070
2074
  labelProps,
2075
+ forceHideHelperText,
2076
+ isLoading,
2077
+ preview = false,
2071
2078
  ...props
2072
2079
  }) => {
2073
2080
  const [selectedColor, setSelectedColor] = useState8(props.color);
@@ -2088,7 +2095,7 @@ var ColorPicker = ({
2088
2095
  props.handleChange(e);
2089
2096
  }
2090
2097
  };
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(
2098
+ 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
2099
  "div",
2093
2100
  {
2094
2101
  style: { height: 40, backgroundColor: selectedColor },
@@ -2097,6 +2104,7 @@ var ColorPicker = ({
2097
2104
  /* @__PURE__ */ React20.createElement(
2098
2105
  "input",
2099
2106
  {
2107
+ disabled: preview,
2100
2108
  type: "color",
2101
2109
  value: selectedColor,
2102
2110
  onChange: (e) => {
@@ -2115,16 +2123,23 @@ var ColorPicker = ({
2115
2123
  ), /* @__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
2124
  "input",
2117
2125
  {
2126
+ disabled: preview,
2118
2127
  maxLength: 7,
2119
2128
  type: "text",
2120
2129
  onInput: handleTextInputChange,
2121
2130
  value: selectedColor,
2122
2131
  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"
2132
+ "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",
2133
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
2134
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
2124
2135
  ),
2136
+ style: {
2137
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
2138
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
2139
+ },
2125
2140
  ...textInputProps
2126
2141
  }
2127
- ))), /* @__PURE__ */ React20.createElement(
2142
+ ))), !forceHideHelperText && /* @__PURE__ */ React20.createElement(
2128
2143
  "p",
2129
2144
  {
2130
2145
  className: cn(
@@ -2626,7 +2641,13 @@ var ScrollIndicator = ({
2626
2641
 
2627
2642
  // elements/codeBlock/CodeBlock.tsx
2628
2643
  import React27, { useState as useState11 } from "react";
2629
- import { Highlight, themes } from "prism-react-renderer";
2644
+ import {
2645
+ Highlight,
2646
+ themes,
2647
+ Prism
2648
+ } from "prism-react-renderer";
2649
+ (typeof global !== "undefined" ? global : window).Prism = Prism;
2650
+ __require("prismjs/components/prism-bash");
2630
2651
  var CodeBlock = ({
2631
2652
  tabs,
2632
2653
  code,
@@ -2639,8 +2660,7 @@ var CodeBlock = ({
2639
2660
  }) => {
2640
2661
  const clipboard = useClipboard();
2641
2662
  const [selectedTab, setSelectedTab] = useState11(0);
2642
- const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
2643
- const theme = isDarkMode ? themes.vsDark : themes.vsLight;
2663
+ const theme = themes.oceanicNext;
2644
2664
  let widthStyles = {
2645
2665
  full: "hawa-w-full",
2646
2666
  md: "hawa-w-full hawa-max-w-md",
@@ -2660,15 +2680,15 @@ var CodeBlock = ({
2660
2680
  "div",
2661
2681
  {
2662
2682
  className: cn(
2663
- "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",
2664
- fileName && tabs ? "hawa-bg-gray-300 dark:hawa-bg-muted/50" : "hawa-bg-gray-200"
2683
+ "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",
2684
+ fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
2665
2685
  )
2666
2686
  },
2667
2687
  /* @__PURE__ */ React27.createElement(
2668
2688
  "div",
2669
2689
  {
2670
2690
  className: cn(
2671
- "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]"
2691
+ "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]"
2672
2692
  )
2673
2693
  },
2674
2694
  fileName
@@ -2678,7 +2698,8 @@ var CodeBlock = ({
2678
2698
  "div",
2679
2699
  {
2680
2700
  className: cn(
2681
- "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",
2701
+ // hawa-bg-gray-300 dark:hawa-bg-red-600
2702
+ "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",
2682
2703
  tabs && fileName && "hawa-rounded-t-none"
2683
2704
  )
2684
2705
  },
@@ -2695,7 +2716,7 @@ var CodeBlock = ({
2695
2716
  {
2696
2717
  onClick: () => setSelectedTab(i),
2697
2718
  className: cn(
2698
- "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"
2719
+ "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"
2699
2720
  )
2700
2721
  },
2701
2722
  tab.title
@@ -2706,7 +2727,7 @@ var CodeBlock = ({
2706
2727
  "div",
2707
2728
  {
2708
2729
  className: cn(
2709
- "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 ",
2730
+ "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 ",
2710
2731
  tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
2711
2732
  )
2712
2733
  },
@@ -2735,12 +2756,12 @@ var CodeBlock = ({
2735
2756
  size: "icon",
2736
2757
  onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
2737
2758
  variant: "outline",
2738
- className: "hawa-text-foreground hawa-opacity-50 sm:hawa-opacity-100"
2759
+ className: "hawa-text-gray-200 hawa-opacity-50 "
2739
2760
  },
2740
2761
  /* @__PURE__ */ React27.createElement(
2741
2762
  "svg",
2742
2763
  {
2743
- "aria-label": "Copy Icon",
2764
+ "aria-label": "Copy",
2744
2765
  stroke: "currentColor",
2745
2766
  fill: "none",
2746
2767
  strokeWidth: "2",
@@ -2767,11 +2788,13 @@ var Carousel = ({
2767
2788
  showArrows,
2768
2789
  options,
2769
2790
  autoplay,
2791
+ direction = "ltr",
2770
2792
  autoplayInterval = 3e3,
2771
2793
  ...props
2772
2794
  }) => {
2773
2795
  const [emblaRef, emblaApi] = useEmblaCarousel({
2774
2796
  ...options,
2797
+ direction,
2775
2798
  loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
2776
2799
  });
2777
2800
  const [selectedIndex, setSelectedIndex] = useState12(0);
@@ -2810,6 +2833,7 @@ var Carousel = ({
2810
2833
  ))))), /* @__PURE__ */ React28.createElement(
2811
2834
  Dots,
2812
2835
  {
2836
+ direction,
2813
2837
  itemsLength: length,
2814
2838
  selectedIndex,
2815
2839
  onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
@@ -2824,22 +2848,34 @@ var Carousel = ({
2824
2848
  }
2825
2849
  ));
2826
2850
  };
2827
- var Dots = ({ onDotClick, itemsLength, selectedIndex }) => {
2851
+ var Dots = ({
2852
+ onDotClick,
2853
+ itemsLength,
2854
+ selectedIndex,
2855
+ direction
2856
+ }) => {
2828
2857
  const arr = new Array(itemsLength).fill(0);
2829
- return /* @__PURE__ */ React28.createElement("div", { className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1" }, arr.map((_, index) => {
2830
- const selected = index === selectedIndex;
2831
- return /* @__PURE__ */ React28.createElement(
2832
- "div",
2833
- {
2834
- key: index,
2835
- onClick: () => onDotClick(index),
2836
- className: cn(
2837
- "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
2838
- !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
2839
- )
2840
- }
2841
- );
2842
- }));
2858
+ return /* @__PURE__ */ React28.createElement(
2859
+ "div",
2860
+ {
2861
+ dir: direction,
2862
+ className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
2863
+ },
2864
+ arr.map((_, index) => {
2865
+ const selected = index === selectedIndex;
2866
+ return /* @__PURE__ */ React28.createElement(
2867
+ "div",
2868
+ {
2869
+ key: index,
2870
+ onClick: () => onDotClick(index),
2871
+ className: cn(
2872
+ "hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
2873
+ !selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
2874
+ )
2875
+ }
2876
+ );
2877
+ })
2878
+ );
2843
2879
  };
2844
2880
  var CarouselControls = (props) => {
2845
2881
  return /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ React28.createElement(
@@ -7,6 +7,7 @@ import {
7
7
  useClipboard,
8
8
  useToast
9
9
  } from "../chunk-3GBITBPL.mjs";
10
+ import "../chunk-ZFXKCRJC.mjs";
10
11
 
11
12
  // hooks/useIsomorphicEffect.ts
12
13
  import { useEffect, useLayoutEffect } from "react";