@chekinapp/ui 0.0.114 → 0.0.115

package/dist/index.d.cts

@@ -2967,6 +2967,7 @@ type ControlProps<T, V extends SelectValue$1, L extends ReactNode> = {
     clearLabel?: string;
     hideIndicator?: boolean;
     autoFocus?: boolean;
+    leftIcon?: ReactNode;
     components: SelectComponents<T, V, L>;
 };
 type MenuListProps<T, V extends SelectValue$1, L extends ReactNode> = {
@@ -3070,6 +3071,7 @@ type BaseSelectProps<T, V extends SelectValue$1, L extends ReactNode> = {
     searchPosition?: 'trigger' | 'dropdown';
     menuHeader?: React$1.ReactNode;
     onMenuScrollToBottom?: (event: React$1.UIEvent<HTMLDivElement>) => void;
+    leftIcon?: React$1.ReactNode;
 };
 type SingleSelectProps<T, V extends SelectValue$1, L extends ReactNode> = BaseSelectProps<T, V, L> & {
     isMulti?: false;

package/dist/index.d.ts

@@ -2967,6 +2967,7 @@ type ControlProps<T, V extends SelectValue$1, L extends ReactNode> = {
     clearLabel?: string;
     hideIndicator?: boolean;
     autoFocus?: boolean;
+    leftIcon?: ReactNode;
     components: SelectComponents<T, V, L>;
 };
 type MenuListProps<T, V extends SelectValue$1, L extends ReactNode> = {
@@ -3070,6 +3071,7 @@ type BaseSelectProps<T, V extends SelectValue$1, L extends ReactNode> = {
     searchPosition?: 'trigger' | 'dropdown';
     menuHeader?: React$1.ReactNode;
     onMenuScrollToBottom?: (event: React$1.UIEvent<HTMLDivElement>) => void;
+    leftIcon?: React$1.ReactNode;
 };
 type SingleSelectProps<T, V extends SelectValue$1, L extends ReactNode> = BaseSelectProps<T, V, L> & {
     isMulti?: false;

package/dist/index.js

@@ -12830,6 +12830,7 @@ function SelectTrigger({
   invalid,
   placeholder,
   valueLabel,
+  leftIcon,
   onClick,
   onKeyDown,
   onBlur
@@ -12853,12 +12854,14 @@ function SelectTrigger({
       onKeyDown,
       onBlur,
       className: cn(
-        "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+        "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+        leftIcon ? "pl-10" : "pl-4",
         isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "!cursor-progress"
       ),
       children: [
+        leftIcon && /* @__PURE__ */ jsx149("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
         /* @__PURE__ */ jsx149("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149(
           ChevronDown2,
@@ -12908,6 +12911,7 @@ function ComboboxTrigger({
   onClear,
   clearLabel,
   leadingContent,
+  leftIcon,
   containerClassName,
   inputClassName,
   hideIndicator,
@@ -12938,11 +12942,13 @@ function ComboboxTrigger({
         containerClassName
       ),
       children: [
+        leftIcon && /* @__PURE__ */ jsx150("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx150("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsxs97(
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-1 items-center gap-2 py-[10px] pl-4",
+              "flex min-w-0 flex-1 items-center gap-2 py-[10px]",
+              leftIcon ? "pl-10" : "pl-4",
               isMulti && "flex-wrap"
             ),
             children: [
@@ -13504,6 +13510,7 @@ function DefaultControl(props) {
     clearLabel,
     hideIndicator,
     autoFocus,
+    leftIcon,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13541,6 +13548,7 @@ function DefaultControl(props) {
       clearLabel,
       hideIndicator,
       autoFocus,
+      leftIcon,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ jsx152(
         Chip,
         {
@@ -13571,7 +13579,8 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
-    onContainerClick
+    onContainerClick,
+    leftIcon
   } = props;
   return /* @__PURE__ */ jsx153(
     SelectTrigger,
@@ -13589,6 +13598,7 @@ function StaticControl(props) {
       invalid,
       placeholder,
       valueLabel,
+      leftIcon,
       onClick: onContainerClick,
       onKeyDown: () => void 0
     }
@@ -13740,7 +13750,8 @@ function SelectInternal(props, ref) {
     onInputChange,
     searchPosition = "trigger",
     menuHeader,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    leftIcon
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -13862,6 +13873,7 @@ function SelectInternal(props, ref) {
             clearLabel: isMulti ? t("clear_all") : t("clear"),
             hideIndicator,
             autoFocus,
+            leftIcon,
             components
           }
         ),
@@ -13880,7 +13892,8 @@ function SelectInternal(props, ref) {
             legend: resolvedLabel,
             label: resolvedLabel,
             tooltip,
-            onClick: state.handleContainerClick
+            onClick: state.handleContainerClick,
+            labelClassName: leftIcon ? "pl-[28px]" : void 0
           }
         ),
         /* @__PURE__ */ jsxs99(
@@ -14635,7 +14648,8 @@ function createCountTrigger(opts) {
       disabled,
       placeholder,
       selectedOptions,
-      onContainerClick
+      onContainerClick,
+      leftIcon
     } = props;
     const count = selectedOptions.length;
     const total = totalCount ?? count;
@@ -14657,12 +14671,14 @@ function createCountTrigger(opts) {
         disabled: isBlocked,
         onClick: onContainerClick,
         className: cn(
-          "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+          "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+          leftIcon ? "pl-10" : "pl-4",
           isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
           disabled && !loading && "cursor-not-allowed opacity-50",
           loading && "!cursor-progress"
         ),
         children: [
+          leftIcon && /* @__PURE__ */ jsx166("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx166("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ jsx166("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ jsx166("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx166(
             ChevronDown3,