@sikka/hawa 0.8.3-next → 0.8.4-next

package/dist/index.css

@@ -1506,6 +1506,10 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-gap-6 {
   gap: 1.5rem;
 }
+.hawa-gap-x-10 {
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+}
 .hawa-gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -1676,6 +1680,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-l-0 {
   border-left-width: 0px;
 }
+.hawa-border-r {
+  border-right-width: 1px;
+}
 .hawa-border-t {
   border-top-width: 1px;
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, RefObject, PropsWithRef } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -102,6 +102,7 @@ declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttribute
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const CardContent: React$1.ForwardRefExoticComponent<{
     headless?: boolean | undefined;
+    noPadding?: boolean | undefined;
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -334,6 +335,11 @@ type ColorPickerTypes = {
     color?: any;
     /** Fires everytime the color changes */
     handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    colorPickerClassNames?: string;
+    colorTextClassNames?: string;
+    colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
+    textInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    containerProps?: InputHTMLAttributes<HTMLDivElement>;
 };
 declare const ColorPicker: FC<ColorPickerTypes>;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { FC, ReactNode, ChangeEvent, RefObject, PropsWithRef } from 'react';
+import React__default, { FC, ReactNode, ChangeEvent, InputHTMLAttributes, RefObject, PropsWithRef } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -102,6 +102,7 @@ declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttribute
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const CardContent: React$1.ForwardRefExoticComponent<{
     headless?: boolean | undefined;
+    noPadding?: boolean | undefined;
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -334,6 +335,11 @@ type ColorPickerTypes = {
     color?: any;
     /** Fires everytime the color changes */
     handleChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    colorPickerClassNames?: string;
+    colorTextClassNames?: string;
+    colorPickerProps?: InputHTMLAttributes<HTMLInputElement>;
+    textInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    containerProps?: InputHTMLAttributes<HTMLDivElement>;
 };
 declare const ColorPicker: FC<ColorPickerTypes>;
 

package/dist/index.js

@@ -1028,13 +1028,14 @@ var CardDescription = React5.forwardRef(function(_param, ref) /* @__PURE__ */ {
 });
 CardDescription.displayName = "CardDescription";
 var CardContent = React5.forwardRef(function(_param, ref) /* @__PURE__ */ {
-    var headless = _param.headless, className = _param.className, props = _object_without_properties(_param, [
+    var headless = _param.headless, noPadding = _param.noPadding, className = _param.className, props = _object_without_properties(_param, [
         "headless",
+        "noPadding",
         "className"
     ]);
     return React5.createElement("div", _object_spread({
         ref: ref,
-        className: cn("hawa-p-6", headless ? "hawa-pt-6" : "hawa-pt-0", className)
+        className: cn(noPadding ? "hawa-p-0" : "hawa-p-6", headless ? "hawa-pt-6" : "hawa-pt-0", className)
     }, props));
 });
 CardContent.displayName = "CardContent";
@@ -2336,16 +2337,21 @@ var DropdownMenu = function(param) {
 };
 // components/elements/ColorPicker.tsx
 var import_react14 = __toESM(require("react"));
-var ColorPicker = function(props) {
+var ColorPicker = function(_param) {
+    var containerProps = _param.containerProps, colorPickerProps = _param.colorPickerProps, textInputProps = _param.textInputProps, props = _object_without_properties(_param, [
+        "containerProps",
+        "colorPickerProps",
+        "textInputProps"
+    ]);
     var _ref = _sliced_to_array((0, import_react14.useState)(props.color), 2), selectedColor = _ref[0], setSelectedColor = _ref[1];
     return /* @__PURE__ */ import_react14.default.createElement("div", {
-        className: "hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0"
+        className: cn("hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className)
     }, /* @__PURE__ */ import_react14.default.createElement("div", {
         style: {
             backgroundColor: selectedColor
         },
-        className: "hawa-rounded-bl-lg hawa-rounded-tl-lg"
-    }, /* @__PURE__ */ import_react14.default.createElement("input", {
+        className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border-r"
+    }, /* @__PURE__ */ import_react14.default.createElement("input", _object_spread({
         type: "color",
         value: selectedColor,
         onChange: function(e) {
@@ -2354,8 +2360,8 @@ var ColorPicker = function(props) {
                 props.handleChange(e);
             }
         },
-        className: "hawa-opacity-0"
-    })), /* @__PURE__ */ import_react14.default.createElement("input", {
+        className: cn("hawa-opacity-0", props.colorPickerClassNames)
+    }, colorPickerProps))), /* @__PURE__ */ import_react14.default.createElement("input", _object_spread({
         type: "text",
         onChange: function(e) {
             setSelectedColor(e.target.value);
@@ -2364,8 +2370,8 @@ var ColorPicker = function(props) {
             }
         },
         value: selectedColor,
-        className: "hawa-w-24 hawa-bg-background  hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2"
-    }));
+        className: cn("hawa-w-24 hawa-bg-background  hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2", props.colorTextClassNames)
+    }, textInputProps)));
 };
 // components/elements/PinInput.tsx
 var import_react15 = __toESM(require("react"));

package/dist/index.mjs

@@ -319,12 +319,12 @@ var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 CardDescription.displayName = "CardDescription";
 var CardContent = React5.forwardRef(
-  ({ headless, className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
+  ({ headless, noPadding, className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref,
       className: cn(
-        "hawa-p-6",
+        noPadding ? "hawa-p-0" : "hawa-p-6",
         headless ? "hawa-pt-6" : "hawa-pt-0",
         className
       ),
@@ -1880,19 +1880,29 @@ var DropdownMenu = ({
 };
 
 // components/elements/ColorPicker.tsx
-import React25, { useState as useState9 } from "react";
-var ColorPicker = (props) => {
+import React25, {
+  useState as useState9
+} from "react";
+var ColorPicker = ({
+  containerProps,
+  colorPickerProps,
+  textInputProps,
+  ...props
+}) => {
   const [selectedColor, setSelectedColor] = useState9(props.color);
   return /* @__PURE__ */ React25.createElement(
     "div",
     {
-      className: `hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0`
+      className: cn(
+        `hawa-flex hawa-w-fit hawa-flex-row hawa-rounded hawa-border hawa-p-0`,
+        containerProps?.className
+      )
     },
     /* @__PURE__ */ React25.createElement(
       "div",
       {
         style: { backgroundColor: selectedColor },
-        className: "hawa-rounded-bl-lg hawa-rounded-tl-lg"
+        className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border-r"
       },
       /* @__PURE__ */ React25.createElement(
         "input",
@@ -1905,7 +1915,8 @@ var ColorPicker = (props) => {
               props.handleChange(e);
             }
           },
-          className: "hawa-opacity-0"
+          className: cn("hawa-opacity-0", props.colorPickerClassNames),
+          ...colorPickerProps
         }
       )
     ),
@@ -1920,7 +1931,11 @@ var ColorPicker = (props) => {
           }
         },
         value: selectedColor,
-        className: "hawa-w-24 hawa-bg-background  hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2"
+        className: cn(
+          "hawa-w-24 hawa-bg-background  hawa-rounded-br-lg hawa-rounded-tr-lg hawa-pl-2 hawa-pr-2",
+          props.colorTextClassNames
+        ),
+        ...textInputProps
       }
     )
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.8.3-next",
+  "version": "0.8.4-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {