@sikka/hawa 0.26.18-next → 0.26.20

package/dist/collapsible/index.js

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// components/elements/collapsible/index.ts
+// elements/collapsible/index.ts
 var collapsible_exports = {};
 __export(collapsible_exports, {
   Collapsible: () => Collapsible,
@@ -36,7 +36,7 @@ __export(collapsible_exports, {
 });
 module.exports = __toCommonJS(collapsible_exports);
 
-// components/elements/collapsible/Collapsible.tsx
+// elements/collapsible/Collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;

package/dist/collapsible/index.mjs

@@ -1,4 +1,4 @@
-// components/elements/collapsible/Collapsible.tsx
+// elements/collapsible/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;

package/dist/colorPicker/index.js

@@ -27,27 +27,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// components/elements/colorPicker/index.ts
+// elements/colorPicker/index.ts
 var colorPicker_exports = {};
 __export(colorPicker_exports, {
   ColorPicker: () => ColorPicker
 });
 module.exports = __toCommonJS(colorPicker_exports);
 
-// components/elements/colorPicker/ColorPicker.tsx
+// elements/colorPicker/ColorPicker.tsx
 var import_react2 = __toESM(require("react"));
 
-// components/util.ts
+// 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));
 }
 
-// components/elements/label/Label.tsx
+// elements/label/Label.tsx
 var React2 = __toESM(require("react"));
 
-// components/elements/tooltip/Tooltip.tsx
+// elements/tooltip/Tooltip.tsx
 var import_react = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
@@ -98,7 +98,7 @@ var Tooltip = ({
   );
 };
 
-// components/elements/label/Label.tsx
+// elements/label/Label.tsx
 var Label = React2.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React2.createElement(
   "label",
   {
@@ -140,7 +140,7 @@ var Label = React2.forwardRef(({ className, hint, hintSide, required, children,
 )));
 Label.displayName = "Label";
 
-// components/elements/colorPicker/ColorPicker.tsx
+// elements/colorPicker/ColorPicker.tsx
 var ColorPicker = ({
   containerProps,
   colorPickerProps,

package/dist/colorPicker/index.mjs

@@ -1,6 +1,130 @@
 import {
-  ColorPicker
-} from "../chunk-S36W2LDN.mjs";
+  Tooltip,
+  cn
+} from "../chunk-OTGCLEKC.mjs";
+
+// elements/colorPicker/ColorPicker.tsx
+import React2, {
+  useState,
+  useEffect
+} from "react";
+
+// elements/label/Label.tsx
+import * as React from "react";
+var Label = React.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
+  "label",
+  {
+    ref,
+    className: cn(
+      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
+      className
+    ),
+    ...props
+  },
+  children,
+  required && /* @__PURE__ */ React.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
+), hint && /* @__PURE__ */ React.createElement(
+  Tooltip,
+  {
+    content: hint,
+    side: hintSide,
+    triggerProps: {
+      tabIndex: -1,
+      onClick: (event) => event.preventDefault()
+    }
+  },
+  /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M12 17h.01" })
+  ))
+)));
+Label.displayName = "Label";
+
+// elements/colorPicker/ColorPicker.tsx
+var ColorPicker = ({
+  containerProps,
+  colorPickerProps,
+  textInputProps,
+  labelProps,
+  ...props
+}) => {
+  const [selectedColor, setSelectedColor] = useState(props.color);
+  useEffect(() => {
+    if (selectedColor && selectedColor[0] !== "#") {
+      setSelectedColor(`#${selectedColor}`);
+    }
+  }, [selectedColor]);
+  const handleTextInputChange = (e) => {
+    const inputElement = e.target;
+    let inputColor = inputElement.value;
+    if (inputColor[0] !== "#") {
+      inputColor = `#${inputColor}`;
+    }
+    const sanitizedInput = inputColor.replace(/[^a-fA-F0-9#]/g, "");
+    setSelectedColor(sanitizedInput);
+    if (props.handleChange) {
+      props.handleChange(e);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React2.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React2.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: { height: 40, backgroundColor: selectedColor },
+      className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
+    },
+    /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "color",
+        value: selectedColor,
+        onChange: (e) => {
+          setSelectedColor(e.target.value);
+          if (props.handleChange) {
+            props.handleChange(e);
+          }
+        },
+        className: cn(
+          "hawa-mt-0 hawa-h-[38px] hawa-opacity-0",
+          props.colorPickerClassNames
+        ),
+        ...colorPickerProps
+      }
+    )
+  ), /* @__PURE__ */ React2.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      maxLength: 7,
+      type: "text",
+      onInput: handleTextInputChange,
+      value: selectedColor,
+      className: cn(
+        "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"
+      ),
+      ...textInputProps
+    }
+  ))), /* @__PURE__ */ React2.createElement(
+    "p",
+    {
+      className: cn(
+        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
+      )
+    },
+    props.helperText
+  ));
+};
 export {
   ColorPicker
 };