@clickhouse/click-ui 0.0.161 → 0.0.162

package/dist/click-ui.es.js

@@ -32547,9 +32547,17 @@ const Wrapper$3 = styled.div.withConfig({
       }
     }
   `);
+const StyledLabel = styled(Label$1).withConfig({
+  componentId: "sc-1pvd2nj-1"
+})(["", ""], ({
+  $labelColor
+}) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
 const InputWrapper = ({
   id,
   label = "",
+  labelColor,
   error: error2,
   disabled,
   children,
@@ -32562,11 +32570,11 @@ const InputWrapper = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
       !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntimeExports.jsx(Error$1, { children: error2 })
     ] }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id, disabled, error: !!error2, children: label })
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
   ] });
 };
 const InputElement = styled.input.withConfig({
-  componentId: "sc-1pvd2nj-1"
+  componentId: "sc-1pvd2nj-2"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
   theme: theme2
 }) => `
@@ -32581,7 +32589,7 @@ const InputElement = styled.input.withConfig({
     }
   `);
 const NumberInputElement = styled(InputElement).withConfig({
-  componentId: "sc-1pvd2nj-2"
+  componentId: "sc-1pvd2nj-3"
 })(["", ""], ({
   $hideControls
 }) => `
@@ -32596,7 +32604,7 @@ const NumberInputElement = styled(InputElement).withConfig({
     ` : ""}
   `);
 const TextAreaElement = styled.textarea.withConfig({
-  componentId: "sc-1pvd2nj-3"
+  componentId: "sc-1pvd2nj-4"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
@@ -32607,10 +32615,10 @@ const TextAreaElement = styled.textarea.withConfig({
     }
   `);
 styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-4"
+  componentId: "sc-1pvd2nj-5"
 })(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-5"
+  componentId: "sc-1pvd2nj-6"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
   theme: theme2,
   $show
@@ -32619,7 +32627,7 @@ const IconButton = styled.button.withConfig({
       visibility: ${$show ? "visible" : "hidden"};
   `);
 styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-6"
+  componentId: "sc-1pvd2nj-7"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -38785,6 +38793,7 @@ const TextField = forwardRef(({
   type,
   disabled,
   label,
+  labelColor,
   error: error2,
   id,
   loading,
@@ -38802,7 +38811,7 @@ const TextField = forwardRef(({
   const clearInput = () => {
     onChangeProp("");
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
     clear && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", size: "sm" }) }),
     loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })

package/dist/click-ui.umd.js

@@ -32564,9 +32564,17 @@ var __publicField = (obj, key, value) => {
       }
     }
   `);
+  const StyledLabel = styled(Label$1).withConfig({
+    componentId: "sc-1pvd2nj-1"
+  })(["", ""], ({
+    $labelColor
+  }) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
   const InputWrapper = ({
     id,
     label = "",
+    labelColor,
     error: error2,
     disabled,
     children,
@@ -32579,11 +32587,11 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
         !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntimeExports.jsx(Error$1, { children: error2 })
       ] }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id, disabled, error: !!error2, children: label })
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
     ] });
   };
   const InputElement = styled.input.withConfig({
-    componentId: "sc-1pvd2nj-1"
+    componentId: "sc-1pvd2nj-2"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
     theme: theme2
   }) => `
@@ -32598,7 +32606,7 @@ var __publicField = (obj, key, value) => {
     }
   `);
   const NumberInputElement = styled(InputElement).withConfig({
-    componentId: "sc-1pvd2nj-2"
+    componentId: "sc-1pvd2nj-3"
   })(["", ""], ({
     $hideControls
   }) => `
@@ -32613,7 +32621,7 @@ var __publicField = (obj, key, value) => {
     ` : ""}
   `);
   const TextAreaElement = styled.textarea.withConfig({
-    componentId: "sc-1pvd2nj-3"
+    componentId: "sc-1pvd2nj-4"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
@@ -32624,10 +32632,10 @@ var __publicField = (obj, key, value) => {
     }
   `);
   styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-4"
+    componentId: "sc-1pvd2nj-5"
   })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = styled.button.withConfig({
-    componentId: "sc-1pvd2nj-5"
+    componentId: "sc-1pvd2nj-6"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
     theme: theme2,
     $show
@@ -32636,7 +32644,7 @@ var __publicField = (obj, key, value) => {
       visibility: ${$show ? "visible" : "hidden"};
   `);
   styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-6"
+    componentId: "sc-1pvd2nj-7"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -38802,6 +38810,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     type,
     disabled,
     label,
+    labelColor,
     error: error2,
     id,
     loading,
@@ -38819,7 +38828,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const clearInput = () => {
       onChangeProp("");
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
       clear && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", size: "sm" }) }),
       loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })

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

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export interface WrapperProps {
     id: string;
     label?: ReactNode;
+    labelColor?: string;
     error?: ReactNode;
     disabled?: boolean;
     children: ReactNode;
@@ -10,7 +11,7 @@ export interface WrapperProps {
     dir?: "start" | "end";
     resize?: "none" | "vertical" | "horizontal" | "both";
 }
-export declare const InputWrapper: ({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ 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"> & {
     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;
@@ -18,7 +19,7 @@ export declare const NumberInputElement: import('styled-components/dist/types').
     $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<({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ 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;

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

@@ -4,6 +4,7 @@ import { WrapperProps } from './InputWrapper';
 export interface TextFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "onChange" | "dir"> {
     type?: "text" | "email" | "tel" | "url";
     loading?: boolean;
+    labelColor?: string;
     value?: string;
     clear?: boolean;
     onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;

package/package.json

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