@clickhouse/click-ui 0.0.205 → 0.0.207

package/dist/click-ui.bundled.es.js

@@ -17000,7 +17000,6 @@ const Wrapper$3 = pt.div.withConfig({
       resize: ${$resize};
       overflow: auto;
     `}
-    padding: 0 ${theme2.click.field.space.x};
     ${$error ? `
       font: ${theme2.click.field.typography.fieldText.error};
       border: 1px solid ${theme2.click.field.color.stroke.error};
@@ -17084,9 +17083,13 @@ const InputWrapper = ({
 const InputElement = pt.input.withConfig({
   componentId: "sc-1pvd2nj-2"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-  theme: theme2
+  theme: theme2,
+  $hasStartContent,
+  $hasEndContent
 }) => `
     padding: ${theme2.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme2.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme2.click.field.space.x};
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
@@ -17116,26 +17119,21 @@ const TextAreaElement = pt.textarea.withConfig({
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
-    padding: ${theme2.click.field.space.y} 0;
+    padding: ${theme2.click.field.space.y} ${theme2.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-pt(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-5"
-})(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = pt.button.withConfig({
-  componentId: "sc-1pvd2nj-6"
+  componentId: "sc-1pvd2nj-5"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-  theme: theme2,
-  $show
+  theme: theme2
 }) => `
       padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `);
 pt.svg.withConfig({
-  componentId: "sc-1pvd2nj-7"
+  componentId: "sc-1pvd2nj-6"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -17146,6 +17144,29 @@ pt.svg.withConfig({
       padding-right: ${theme2.click.field.space.x};
     }
   `);
+const InputStartContent = pt.div.withConfig({
+  componentId: "sc-1pvd2nj-7"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-left: ${theme2.click.field.space.x};
+    cursor: text;
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+const InputEndContent = pt.div.withConfig({
+  componentId: "sc-1pvd2nj-8"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-right: ${theme2.click.field.space.x};
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
 const locale = "en-US";
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
@@ -17171,8 +17192,8 @@ const DatePickerInput = ({
   const defaultId = useId();
   const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
   return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
   ] });
 };
 const weekdayFormatter = new Intl.DateTimeFormat(locale, {
@@ -35092,9 +35113,10 @@ const PasswordField = forwardRef(({
   const onChange = (e) => {
     onChangeProp(e.target.value, e);
   };
+  const hasEndContent = value.length > 0;
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, $show: value.length > 0, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) })
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsx(InputEndContent, { children: /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
   ] });
 });
 const CustomSelect = pt.div.withConfig({
@@ -35253,7 +35275,7 @@ const ProgressContainer = pt.div.withConfig({
   $progress,
   $type
 }) => `
-    background: ${$completed ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
+    background: ${$completed && $type === "default" ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;
     gap: ${theme2.click.field.space.gap};
@@ -35610,38 +35632,16 @@ const RadioGroupIndicator = pt($f99a8c78507165f7$export$adb584737d712b70).withCo
     }
   `);
 const SearchField = forwardRef(({
-  disabled,
-  label,
-  error: error2,
-  id,
-  loading,
-  clear = true,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
   isFilter = false,
+  clear = true,
   ...props
 }, ref) => {
-  const inputRef = useRef(null);
-  const defaultId = useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const clearInput = () => {
-    onChangeProp("");
-  };
-  return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }),
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type: "text", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", "data-testid": "search-close", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
-  ] });
+  return /* @__PURE__ */ jsx(TextField, { startContent: /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
 });
 const useUpdateEffect = (effect, deps) => {
   const isFirstMount = useRef(true);
   useEffect(() => {
-    if (isFirstMount) {
+    if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
     }
@@ -41067,6 +41067,8 @@ const TextField = forwardRef(({
   onChange: onChangeProp,
   orientation,
   dir,
+  startContent,
+  endContent,
   ...props
 }, ref) => {
   const inputRef = useRef(null);
@@ -41077,10 +41079,21 @@ const TextField = forwardRef(({
   const clearInput = () => {
     onChangeProp("");
   };
+  const handleStartContentClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const hasStartContent = Boolean(startContent);
+  const hasClear = clear && value.length > 0;
+  const hasEndContent = Boolean(hasClear || loading || endContent);
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
+      endContent ? endContent : null,
+      hasClear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
+      loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    ] })
   ] });
 });
 const $ea1ef594cf570d83$export$439d29a4e110a164 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {

package/dist/click-ui.bundled.umd.js

@@ -17016,7 +17016,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       resize: ${$resize};
       overflow: auto;
     `}
-    padding: 0 ${theme2.click.field.space.x};
     ${$error ? `
       font: ${theme2.click.field.typography.fieldText.error};
       border: 1px solid ${theme2.click.field.color.stroke.error};
@@ -17100,9 +17099,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const InputElement = pt.input.withConfig({
     componentId: "sc-1pvd2nj-2"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-    theme: theme2
+    theme: theme2,
+    $hasStartContent,
+    $hasEndContent
   }) => `
     padding: ${theme2.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme2.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme2.click.field.space.x};
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
@@ -17132,26 +17135,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
-    padding: ${theme2.click.field.space.y} 0;
+    padding: ${theme2.click.field.space.y} ${theme2.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-  pt(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-5"
-  })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = pt.button.withConfig({
-    componentId: "sc-1pvd2nj-6"
+    componentId: "sc-1pvd2nj-5"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-    theme: theme2,
-    $show
+    theme: theme2
   }) => `
       padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `);
   pt.svg.withConfig({
-    componentId: "sc-1pvd2nj-7"
+    componentId: "sc-1pvd2nj-6"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -17162,6 +17160,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       padding-right: ${theme2.click.field.space.x};
     }
   `);
+  const InputStartContent = pt.div.withConfig({
+    componentId: "sc-1pvd2nj-7"
+  })(["", ""], ({
+    theme: theme2
+  }) => `
+    padding-left: ${theme2.click.field.space.x};
+    cursor: text;
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+  const InputEndContent = pt.div.withConfig({
+    componentId: "sc-1pvd2nj-8"
+  })(["", ""], ({
+    theme: theme2
+  }) => `
+    padding-right: ${theme2.click.field.space.x};
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
   const locale = "en-US";
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
@@ -17187,8 +17208,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const defaultId = React.useId();
     const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
     return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+      /* @__PURE__ */ jsxRuntime.jsx(InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
     ] });
   };
   const weekdayFormatter = new Intl.DateTimeFormat(locale, {
@@ -35108,9 +35129,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const onChange = (e) => {
       onChangeProp(e.target.value, e);
     };
+    const hasEndContent = value.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: togglePasswordViewer, $show: value.length > 0, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
+      hasEndContent && /* @__PURE__ */ jsxRuntime.jsx(InputEndContent, { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
     ] });
   });
   const CustomSelect = pt.div.withConfig({
@@ -35269,7 +35291,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     $progress,
     $type
   }) => `
-    background: ${$completed ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
+    background: ${$completed && $type === "default" ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;
     gap: ${theme2.click.field.space.gap};
@@ -35626,38 +35648,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const SearchField = React.forwardRef(({
-    disabled,
-    label,
-    error: error2,
-    id,
-    loading,
-    clear = true,
-    value = "",
-    onChange: onChangeProp,
-    orientation,
-    dir,
     isFilter = false,
+    clear = true,
     ...props
   }, ref) => {
-    const inputRef = React.useRef(null);
-    const defaultId = React.useId();
-    const onChange = (e) => {
-      onChangeProp(e.target.value, e);
-    };
-    const clearInput = () => {
-      onChangeProp("");
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type: "text", id: id ?? defaultId, disabled, value, onChange, ...props }),
-      clear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", "data-testid": "search-close", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextField, { startContent: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
   });
   const useUpdateEffect = (effect, deps) => {
     const isFirstMount = React.useRef(true);
     React.useEffect(() => {
-      if (isFirstMount) {
+      if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
       }
@@ -41083,6 +41083,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     onChange: onChangeProp,
     orientation,
     dir,
+    startContent,
+    endContent,
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
@@ -41093,10 +41095,21 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const clearInput = () => {
       onChangeProp("");
     };
+    const handleStartContentClick = () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const hasStartContent = Boolean(startContent);
+    const hasClear = clear && value.length > 0;
+    const hasEndContent = Boolean(hasClear || loading || endContent);
     return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-      clear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
+      startContent && /* @__PURE__ */ jsxRuntime.jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
+      hasEndContent && /* @__PURE__ */ jsxRuntime.jsxs(InputEndContent, { children: [
+        endContent ? endContent : null,
+        hasClear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
+      ] })
     ] });
   });
   const $ea1ef594cf570d83$export$439d29a4e110a164 = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {

package/dist/click-ui.es.js

@@ -15832,7 +15832,6 @@ const Wrapper$3 = styled.div.withConfig({
       resize: ${$resize};
       overflow: auto;
     `}
-    padding: 0 ${theme2.click.field.space.x};
     ${$error ? `
       font: ${theme2.click.field.typography.fieldText.error};
       border: 1px solid ${theme2.click.field.color.stroke.error};
@@ -15916,9 +15915,13 @@ const InputWrapper = ({
 const InputElement = styled.input.withConfig({
   componentId: "sc-1pvd2nj-2"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-  theme: theme2
+  theme: theme2,
+  $hasStartContent,
+  $hasEndContent
 }) => `
     padding: ${theme2.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme2.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme2.click.field.space.x};
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
@@ -15948,26 +15951,21 @@ const TextAreaElement = styled.textarea.withConfig({
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
-    padding: ${theme2.click.field.space.y} 0;
+    padding: ${theme2.click.field.space.y} ${theme2.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-5"
-})(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-6"
+  componentId: "sc-1pvd2nj-5"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-  theme: theme2,
-  $show
+  theme: theme2
 }) => `
       padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `);
 styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-7"
+  componentId: "sc-1pvd2nj-6"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -15978,6 +15976,29 @@ styled.svg.withConfig({
       padding-right: ${theme2.click.field.space.x};
     }
   `);
+const InputStartContent = styled.div.withConfig({
+  componentId: "sc-1pvd2nj-7"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-left: ${theme2.click.field.space.x};
+    cursor: text;
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+const InputEndContent = styled.div.withConfig({
+  componentId: "sc-1pvd2nj-8"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    padding-right: ${theme2.click.field.space.x};
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
 const locale = "en-US";
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
@@ -16003,8 +16024,8 @@ const DatePickerInput = ({
   const defaultId = useId();
   const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
   return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
   ] });
 };
 const weekdayFormatter = new Intl.DateTimeFormat(locale, {
@@ -33924,9 +33945,10 @@ const PasswordField = forwardRef(({
   const onChange = (e) => {
     onChangeProp(e.target.value, e);
   };
+  const hasEndContent = value.length > 0;
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, $show: value.length > 0, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) })
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsx(InputEndContent, { children: /* @__PURE__ */ jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
   ] });
 });
 const CustomSelect = styled.div.withConfig({
@@ -34085,7 +34107,7 @@ const ProgressContainer = styled.div.withConfig({
   $progress,
   $type
 }) => `
-    background: ${$completed ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
+    background: ${$completed && $type === "default" ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;
     gap: ${theme2.click.field.space.gap};
@@ -34442,38 +34464,16 @@ const RadioGroupIndicator = styled($f99a8c78507165f7$export$adb584737d712b70).wi
     }
   `);
 const SearchField = forwardRef(({
-  disabled,
-  label,
-  error: error2,
-  id,
-  loading,
-  clear = true,
-  value = "",
-  onChange: onChangeProp,
-  orientation,
-  dir,
   isFilter = false,
+  clear = true,
   ...props
 }, ref) => {
-  const inputRef = useRef(null);
-  const defaultId = useId();
-  const onChange = (e) => {
-    onChangeProp(e.target.value, e);
-  };
-  const clearInput = () => {
-    onChangeProp("");
-  };
-  return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }),
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type: "text", id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", "data-testid": "search-close", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
-  ] });
+  return /* @__PURE__ */ jsx(TextField, { startContent: /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
 });
 const useUpdateEffect = (effect, deps) => {
   const isFirstMount = useRef(true);
   useEffect(() => {
-    if (isFirstMount) {
+    if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
     }
@@ -39899,6 +39899,8 @@ const TextField = forwardRef(({
   onChange: onChangeProp,
   orientation,
   dir,
+  startContent,
+  endContent,
   ...props
 }, ref) => {
   const inputRef = useRef(null);
@@ -39909,10 +39911,21 @@ const TextField = forwardRef(({
   const clearInput = () => {
     onChangeProp("");
   };
+  const handleStartContentClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const hasStartContent = Boolean(startContent);
+  const hasClear = clear && value.length > 0;
+  const hasEndContent = Boolean(hasClear || loading || endContent);
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-    clear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
+    hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
+      endContent ? endContent : null,
+      hasClear && /* @__PURE__ */ jsx(IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "sm" }) }),
+      loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    ] })
   ] });
 });
 const $ea1ef594cf570d83$export$439d29a4e110a164 = /* @__PURE__ */ forwardRef((props, forwardedRef) => {

package/dist/click-ui.umd.js

@@ -15847,7 +15847,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       resize: ${$resize};
       overflow: auto;
     `}
-    padding: 0 ${theme2.click.field.space.x};
     ${$error ? `
       font: ${theme2.click.field.typography.fieldText.error};
       border: 1px solid ${theme2.click.field.color.stroke.error};
@@ -15931,9 +15930,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const InputElement = styled.styled.input.withConfig({
     componentId: "sc-1pvd2nj-2"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-    theme: theme2
+    theme: theme2,
+    $hasStartContent,
+    $hasEndContent
   }) => `
     padding: ${theme2.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme2.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme2.click.field.space.x};
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
@@ -15963,26 +15966,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
-    padding: ${theme2.click.field.space.y} 0;
+    padding: ${theme2.click.field.space.y} ${theme2.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-  styled.styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-5"
-  })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = styled.styled.button.withConfig({
-    componentId: "sc-1pvd2nj-6"
+    componentId: "sc-1pvd2nj-5"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-    theme: theme2,
-    $show
+    theme: theme2
   }) => `
       padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `);
   styled.styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-7"
+    componentId: "sc-1pvd2nj-6"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -15993,6 +15991,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       padding-right: ${theme2.click.field.space.x};
     }
   `);
+  const InputStartContent = styled.styled.div.withConfig({
+    componentId: "sc-1pvd2nj-7"
+  })(["", ""], ({
+    theme: theme2
+  }) => `
+    padding-left: ${theme2.click.field.space.x};
+    cursor: text;
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
+  const InputEndContent = styled.styled.div.withConfig({
+    componentId: "sc-1pvd2nj-8"
+  })(["", ""], ({
+    theme: theme2
+  }) => `
+    padding-right: ${theme2.click.field.space.x};
+    gap: ${theme2.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `);
   const locale = "en-US";
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
@@ -16018,8 +16039,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const defaultId = React.useId();
     const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
     return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+      /* @__PURE__ */ jsxRuntime.jsx(InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
     ] });
   };
   const weekdayFormatter = new Intl.DateTimeFormat(locale, {
@@ -33939,9 +33960,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const onChange = (e) => {
       onChangeProp(e.target.value, e);
     };
+    const hasEndContent = value.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: togglePasswordViewer, $show: value.length > 0, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: false, $hasEndContent: hasEndContent, ref, type: viewPassword ? "text" : "password", id: id ?? defaultId, disabled, value, onChange, ...props }),
+      hasEndContent && /* @__PURE__ */ jsxRuntime.jsx(InputEndContent, { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: togglePasswordViewer, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: viewPassword ? "eye-closed" : "eye", size: "md" }) }) })
     ] });
   });
   const CustomSelect = styled.styled.div.withConfig({
@@ -34100,7 +34122,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     $progress,
     $type
   }) => `
-    background: ${$completed ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
+    background: ${$completed && $type === "default" ? theme2.click.field.color.background.default : `linear-gradient(to right, ${theme2.global.color.accent.default} 0%, ${theme2.global.color.accent.default} ${$progress}%, ${theme2.click.field.color.background.default} ${$progress}%,  ${theme2.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;
     gap: ${theme2.click.field.space.gap};
@@ -34457,38 +34479,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const SearchField = React.forwardRef(({
-    disabled,
-    label,
-    error: error2,
-    id,
-    loading,
-    clear = true,
-    value = "",
-    onChange: onChangeProp,
-    orientation,
-    dir,
     isFilter = false,
+    clear = true,
     ...props
   }, ref) => {
-    const inputRef = React.useRef(null);
-    const defaultId = React.useId();
-    const onChange = (e) => {
-      onChangeProp(e.target.value, e);
-    };
-    const clearInput = () => {
-      onChangeProp("");
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type: "text", id: id ?? defaultId, disabled, value, onChange, ...props }),
-      clear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", "data-testid": "search-close", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextField, { startContent: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
   });
   const useUpdateEffect = (effect, deps) => {
     const isFirstMount = React.useRef(true);
     React.useEffect(() => {
-      if (isFirstMount) {
+      if (isFirstMount.current) {
         isFirstMount.current = false;
         return;
       }
@@ -39914,6 +39914,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     onChange: onChangeProp,
     orientation,
     dir,
+    startContent,
+    endContent,
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
@@ -39924,10 +39926,21 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const clearInput = () => {
       onChangeProp("");
     };
+    const handleStartContentClick = () => {
+      var _a;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const hasStartContent = Boolean(startContent);
+    const hasClear = clear && value.length > 0;
+    const hasEndContent = Boolean(hasClear || loading || endContent);
     return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
-      clear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
+      startContent && /* @__PURE__ */ jsxRuntime.jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
+      hasEndContent && /* @__PURE__ */ jsxRuntime.jsxs(InputEndContent, { children: [
+        endContent ? endContent : null,
+        hasClear && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick: clearInput, "aria-label": "clear input", "data-testid": "textfield-clear", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: "sm" }) }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
+      ] })
     ] });
   });
   const $ea1ef594cf570d83$export$439d29a4e110a164 = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {

package/dist/components/Icon/types.d.ts

@@ -6,7 +6,7 @@ import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type IconState = "default" | "success" | "warning" | "danger" | "info";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "chart-area", "chart-bar-horizontal", "chart-donut", "chart-heatmap", "chart-scatter", "chart-stacked-horizontal", "chart-stacked-vertical", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "globe", "hexagon", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "light-bulb-on", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "moon", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "square", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upgrade", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "chart-area", "chart-bar-horizontal", "chart-donut", "chart-heatmap", "chart-scatter", "chart-stacked-horizontal", "chart-stacked-vertical", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "globe", "hexagon", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "light-bulb-on", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "mcp", "moon", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "square", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upgrade", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/Input/InputWrapper.d.ts

@@ -13,15 +13,20 @@ export interface WrapperProps {
     resize?: "none" | "vertical" | "horizontal" | "both";
 }
 export declare const InputWrapper: ({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
-export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
+export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $hasStartContent?: boolean;
+    $hasEndContent?: boolean;
+}>> & string;
+export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$hasStartContent" | "$hasEndContent"> & {
+    $hasStartContent?: boolean;
+    $hasEndContent?: boolean;
+}, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLInputElement> | null | undefined;
 }, {
     $hideControls?: boolean;
 }>> & string;
 export declare const TextAreaElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
-export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $show?: boolean;
-}>> & string;
+export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
+export declare const InputStartContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputEndContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Input/SearchField.d.ts

@@ -1,13 +1,6 @@
-import { ChangeEvent, InputHTMLAttributes } from 'react';
-import { WrapperProps } from './InputWrapper';
+import { TextFieldProps } from './TextField';
 
-export interface SearchFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "string" | "onChange" | "dir"> {
-    loading?: boolean;
-    value?: string;
-    clear?: boolean;
-    onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
-    orientation?: "vertical" | "horizontal";
-    dir?: "start" | "end";
+export interface SearchFieldProps extends Omit<TextFieldProps, "type" | "startContent" | "endContent"> {
     isFilter?: boolean;
 }
 export declare const SearchField: import('react').ForwardRefExoticComponent<SearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/TextField.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, InputHTMLAttributes } from 'react';
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { WrapperProps } from './InputWrapper';
 
 export interface TextFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "onChange" | "dir"> {
@@ -10,5 +10,13 @@ export interface TextFieldProps extends Omit<WrapperProps, "id" | "children">, O
     onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
     orientation?: "vertical" | "horizontal";
     dir?: "start" | "end";
+    /**
+     * Additional content to the left of the control
+     */
+    startContent?: ReactNode;
+    /**
+     * Additional content to the right of the control
+     */
+    endContent?: ReactNode;
 }
 export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/utils/test-utils.d.ts

@@ -1,4 +1,59 @@
 import { ThemeName } from '../theme';
 
-declare const renderCUI: (children: React.ReactNode, theme?: ThemeName) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+declare const renderCUI: (children: React.ReactNode, theme?: ThemeName) => {
+    rerender: (rerenderChildren: React.ReactNode) => void;
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug: (baseElement?: import('react-dom/client').Container | (Element | Document) | Array<import('react-dom/client').Container | (Element | Document)>, maxLength?: number, options?: import('pretty-format').OptionsReceived) => void;
+    unmount: () => void;
+    asFragment: () => DocumentFragment;
+    getByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByLabelText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement;
+    getAllByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    queryByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    findByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByPlaceholderText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement;
+    getAllByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    queryByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    findByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByAltText: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement;
+    getAllByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    queryByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    findByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTitle: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement;
+    getAllByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    queryByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    findByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByDisplayValue: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined) => HTMLElement;
+    getAllByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined) => HTMLElement[];
+    queryByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined) => HTMLElement | null;
+    queryAllByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined) => HTMLElement[];
+    findByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByRole: (role: import('@testing-library/react').ByRoleMatcher, options?: import('@testing-library/react').ByRoleOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement;
+    getAllByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    queryByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined) => HTMLElement[];
+    findByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTestId: (id: import('@testing-library/react').Matcher, options?: import('@testing-library/react').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/react').waitForOptions | undefined) => Promise<HTMLElement[]>;
+};
 export { renderCUI };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.205",
+  "version": "0.0.207",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",