@sikka/hawa 0.31.4-next → 0.31.6-next

package/dist/elements/index.d.mts

@@ -13,8 +13,8 @@ import { DialogProps } from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 import { RowData, ColumnDef } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
-import { L as LabelProps } from '../Radio-9MkZay6D.mjs';
-export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-9MkZay6D.mjs';
+import { L as LabelProps } from '../Radio-L369ID7b.mjs';
+export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-L369ID7b.mjs';
 import { Command as Command$1 } from 'cmdk';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -434,6 +434,7 @@ type ComboboxTypes<T> = {
     isRequired?: boolean;
     onChange?: (e: any) => void;
     renderOption?: (item: T) => React.ReactNode;
+    renderSelected?: (item: T) => React.ReactNode;
 };
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxTypes<any> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/elements/index.d.ts

@@ -13,8 +13,8 @@ import { DialogProps } from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 import { RowData, ColumnDef } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
-import { L as LabelProps } from '../Radio-bhKmANMf.js';
-export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-bhKmANMf.js';
+import { L as LabelProps } from '../Radio-3B8RZYJA.js';
+export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-3B8RZYJA.js';
 import { Command as Command$1 } from 'cmdk';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -434,6 +434,7 @@ type ComboboxTypes<T> = {
     isRequired?: boolean;
     onChange?: (e: any) => void;
     renderOption?: (item: T) => React.ReactNode;
+    renderSelected?: (item: T) => React.ReactNode;
 };
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxTypes<any> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/elements/index.js

@@ -3643,6 +3643,7 @@ var Combobox = React27.forwardRef(
     inputProps,
     data,
     renderOption,
+    renderSelected,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -3657,6 +3658,9 @@ var Combobox = React27.forwardRef(
         setOpen(open2);
       }
     };
+    const selectedItem = data.find(
+      (item) => getProperty(item, valueKey) === value
+    );
     return /* @__PURE__ */ React27.createElement(
       "div",
       {
@@ -3686,10 +3690,7 @@ var Combobox = React27.forwardRef(
             props.preview ? "hawa-cursor-default hawa-rounded-none hawa-border-transparent hawa-px-0" : "hawa-bg-background hawa-px-3 "
           )
         },
-        value ? getProperty(
-          data.find((item) => item[valueKey] === value) || {},
-          labelKey
-        ) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
+        selectedItem ? renderSelected ? renderSelected(selectedItem) : getProperty(selectedItem, labelKey) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
         /* @__PURE__ */ React27.createElement(
           "svg",
           {
@@ -4496,22 +4497,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          components: props.hideIndicator ? {
+            Option,
+            Menu,
+            IndicatorsContainer: () => null
+          } : {
+            Option,
+            Menu,
+            // Control: (e) => (
+            //   <div
+            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
+            //     {...e}
+            //   />
+            // ),
+            ValueContainer: (e) => /* @__PURE__ */ import_react29.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react29.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,

package/dist/elements/index.mjs

@@ -27,7 +27,7 @@ import {
   TabsTrigger,
   Textarea,
   UncheckMark
-} from "../chunk-6HRJIMXY.mjs";
+} from "../chunk-NPD4FUIM.mjs";
 import {
   useClipboard
 } from "../chunk-R2SKHHDK.mjs";
@@ -1479,6 +1479,7 @@ var Combobox = React13.forwardRef(
     inputProps,
     data,
     renderOption,
+    renderSelected,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -1493,6 +1494,9 @@ var Combobox = React13.forwardRef(
         setOpen(open2);
       }
     };
+    const selectedItem = data.find(
+      (item) => getProperty(item, valueKey) === value
+    );
     return /* @__PURE__ */ React13.createElement(
       "div",
       {
@@ -1522,10 +1526,7 @@ var Combobox = React13.forwardRef(
             props.preview ? "hawa-cursor-default hawa-rounded-none hawa-border-transparent hawa-px-0" : "hawa-bg-background hawa-px-3 "
           )
         },
-        value ? getProperty(
-          data.find((item) => item[valueKey] === value) || {},
-          labelKey
-        ) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
+        selectedItem ? renderSelected ? renderSelected(selectedItem) : getProperty(selectedItem, labelKey) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
         /* @__PURE__ */ React13.createElement(
           "svg",
           {

package/dist/index.css

@@ -1021,6 +1021,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bottom-4 {
   bottom: 1rem;
 }
+.hawa-bottom-\[50\%\] {
+  bottom: 50%;
+}
 .hawa-bottom-\[62px\] {
   bottom: 62px;
 }
@@ -2682,6 +2685,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pr-2 {
   padding-right: 0.5rem;
 }
+.hawa-ps-0 {
+  padding-inline-start: 0px;
+}
 .hawa-ps-9 {
   padding-inline-start: 2.25rem;
 }

package/dist/index.d.mts

@@ -597,6 +597,7 @@ type ComboboxTypes<T> = {
     isRequired?: boolean;
     onChange?: (e: any) => void;
     renderOption?: (item: T) => React$1.ReactNode;
+    renderSelected?: (item: T) => React$1.ReactNode;
 };
 declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -772,7 +773,7 @@ type SelectTypes = {
     isSearchable?: boolean;
     controlClassNames?: string;
     containerClassNames?: string;
-    onChange?: any;
+    onChange: any;
     helperText?: string;
     onInputChange?: any;
     native?: any;

package/dist/index.d.ts

@@ -597,6 +597,7 @@ type ComboboxTypes<T> = {
     isRequired?: boolean;
     onChange?: (e: any) => void;
     renderOption?: (item: T) => React$1.ReactNode;
+    renderSelected?: (item: T) => React$1.ReactNode;
 };
 declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -772,7 +773,7 @@ type SelectTypes = {
     isSearchable?: boolean;
     controlClassNames?: string;
     containerClassNames?: string;
-    onChange?: any;
+    onChange: any;
     helperText?: string;
     onInputChange?: any;
     native?: any;

package/dist/index.js

@@ -3711,6 +3711,7 @@ var Combobox = React27.forwardRef(
     inputProps,
     data,
     renderOption,
+    renderSelected,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -3725,6 +3726,9 @@ var Combobox = React27.forwardRef(
         setOpen(open2);
       }
     };
+    const selectedItem = data.find(
+      (item) => getProperty(item, valueKey) === value
+    );
     return /* @__PURE__ */ React27.createElement(
       "div",
       {
@@ -3754,10 +3758,7 @@ var Combobox = React27.forwardRef(
             props.preview ? "hawa-cursor-default hawa-rounded-none hawa-border-transparent hawa-px-0" : "hawa-bg-background hawa-px-3 "
           )
         },
-        value ? getProperty(
-          data.find((item) => item[valueKey] === value) || {},
-          labelKey
-        ) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
+        selectedItem ? renderSelected ? renderSelected(selectedItem) : getProperty(selectedItem, labelKey) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
         /* @__PURE__ */ React27.createElement(
           "svg",
           {
@@ -4874,22 +4875,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu: Menu2, IndicatorsContainer: () => null } : { Option, Menu: Menu2 },
+          components: props.hideIndicator ? {
+            Option,
+            Menu: Menu2,
+            IndicatorsContainer: () => null
+          } : {
+            Option,
+            Menu: Menu2,
+            // Control: (e) => (
+            //   <div
+            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
+            //     {...e}
+            //   />
+            // ),
+            ValueContainer: (e) => /* @__PURE__ */ import_react29.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react29.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,

package/dist/index.mjs

@@ -3481,6 +3481,7 @@ var Combobox = React27.forwardRef(
     inputProps,
     data,
     renderOption,
+    renderSelected,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -3495,6 +3496,9 @@ var Combobox = React27.forwardRef(
         setOpen(open2);
       }
     };
+    const selectedItem = data.find(
+      (item) => getProperty(item, valueKey) === value
+    );
     return /* @__PURE__ */ React27.createElement(
       "div",
       {
@@ -3524,10 +3528,7 @@ var Combobox = React27.forwardRef(
             props.preview ? "hawa-cursor-default hawa-rounded-none hawa-border-transparent hawa-px-0" : "hawa-bg-background hawa-px-3 "
           )
         },
-        value ? getProperty(
-          data.find((item) => item[valueKey] === value) || {},
-          labelKey
-        ) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
+        selectedItem ? renderSelected ? renderSelected(selectedItem) : getProperty(selectedItem, labelKey) : ((_a = props.texts) == null ? void 0 : _a.placeholder) || ". . .",
         /* @__PURE__ */ React27.createElement(
           "svg",
           {
@@ -4644,22 +4645,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu: Menu2, IndicatorsContainer: () => null } : { Option, Menu: Menu2 },
+          components: props.hideIndicator ? {
+            Option,
+            Menu: Menu2,
+            IndicatorsContainer: () => null
+          } : {
+            Option,
+            Menu: Menu2,
+            // Control: (e) => (
+            //   <div
+            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
+            //     {...e}
+            //   />
+            // ),
+            ValueContainer: (e) => /* @__PURE__ */ React41.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ React41.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,

package/dist/phoneInput/index.js

@@ -1975,22 +1975,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          components: props.hideIndicator ? {
+            Option,
+            Menu,
+            IndicatorsContainer: () => null
+          } : {
+            Option,
+            Menu,
+            // Control: (e) => (
+            //   <div
+            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
+            //     {...e}
+            //   />
+            // ),
+            ValueContainer: (e) => /* @__PURE__ */ import_react3.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react3.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,