@clickhouse/click-ui 0.0.123 → 0.0.125

package/dist/click-ui.es.js

@@ -32164,8 +32164,23 @@ const InputElement = styled.input.withConfig({
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-const TextAreaElement = styled.textarea.withConfig({
+const NumberInputElement = styled(InputElement).withConfig({
   componentId: "sc-1pvd2nj-2"
+})(["", ""], ({
+  $hideControls
+}) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+const TextAreaElement = styled.textarea.withConfig({
+  componentId: "sc-1pvd2nj-3"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
@@ -32176,10 +32191,10 @@ const TextAreaElement = styled.textarea.withConfig({
     }
   `);
 styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-3"
+  componentId: "sc-1pvd2nj-4"
 })(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-4"
+  componentId: "sc-1pvd2nj-5"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
   theme: theme2,
   $show
@@ -32188,7 +32203,7 @@ const IconButton = styled.button.withConfig({
       visibility: ${$show ? "visible" : "hidden"};
   `);
 styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-5"
+  componentId: "sc-1pvd2nj-6"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -32208,6 +32223,7 @@ const NumberField = forwardRef(({
   onChange: onChangeProp,
   orientation,
   dir,
+  hideControls,
   ...props
 }, ref) => {
   const defaultId = useId();
@@ -32215,7 +32231,7 @@ const NumberField = forwardRef(({
     onChangeProp(e.target.value, e);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, ...props }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(NumberInputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, ...props }),
     loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })
   ] });
 });
@@ -32366,7 +32382,7 @@ const Pagination = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, onBlur: onPageNumberBlur }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
       !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         formatNumber(totalPages)
@@ -36918,6 +36934,9 @@ const NavContext = createContext({
   open: false,
   onOpenChange: () => null
 });
+const CollapsibleContainer = styled.div.withConfig({
+  componentId: "sc-guwmyz-0"
+})(["width:100%;"]);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -36940,10 +36959,10 @@ const Collapsible = ({
     open: openProp ?? open2,
     onOpenChange
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { isResponsive: false, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NavContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NavContext.Provider, { value, children }) });
 };
 const CollapsipleHeaderContainer = styled.div.withConfig({
-  componentId: "sc-guwmyz-0"
+  componentId: "sc-guwmyz-1"
 })(["margin-left:", ";user-select:none;"], ({
   theme: theme2,
   $indicatorDir
@@ -36976,7 +36995,7 @@ const CollapsipleHeader = forwardRef(({
 CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
 const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
-  componentId: "sc-guwmyz-1"
+  componentId: "sc-guwmyz-2"
 })(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
 const CollapsipleTrigger = ({
   onClick: onClickProp,
@@ -37007,7 +37026,7 @@ const CollapsipleTrigger = ({
 CollapsipleTrigger.displayName = "CollapsibleTrigger";
 Collapsible.Trigger = CollapsipleTrigger;
 const CollapsibleContentWrapper = styled.div.withConfig({
-  componentId: "sc-guwmyz-2"
+  componentId: "sc-guwmyz-3"
 })(["", ""], ({
   theme: theme2,
   $indicatorDir

package/dist/click-ui.umd.js

@@ -32181,8 +32181,23 @@ var __publicField = (obj, key, value) => {
       color: ${theme2.click.field.color.placeholder.default};
     }
   `);
-  const TextAreaElement = styled.textarea.withConfig({
+  const NumberInputElement = styled(InputElement).withConfig({
     componentId: "sc-1pvd2nj-2"
+  })(["", ""], ({
+    $hideControls
+  }) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+  const TextAreaElement = styled.textarea.withConfig({
+    componentId: "sc-1pvd2nj-3"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
@@ -32193,10 +32208,10 @@ var __publicField = (obj, key, value) => {
     }
   `);
   styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-3"
+    componentId: "sc-1pvd2nj-4"
   })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = styled.button.withConfig({
-    componentId: "sc-1pvd2nj-4"
+    componentId: "sc-1pvd2nj-5"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
     theme: theme2,
     $show
@@ -32205,7 +32220,7 @@ var __publicField = (obj, key, value) => {
       visibility: ${$show ? "visible" : "hidden"};
   `);
   styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-5"
+    componentId: "sc-1pvd2nj-6"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -32225,6 +32240,7 @@ var __publicField = (obj, key, value) => {
     onChange: onChangeProp,
     orientation,
     dir,
+    hideControls,
     ...props
   }, ref) => {
     const defaultId = React.useId();
@@ -32232,7 +32248,7 @@ var __publicField = (obj, key, value) => {
       onChangeProp(e.target.value, e);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, ...props }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(NumberInputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, ...props }),
       loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })
     ] });
   });
@@ -32383,7 +32399,7 @@ var __publicField = (obj, key, value) => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: currentPage === 1, onClick: onPrevClick, "data-testid": "prev-btn" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, onBlur: onPageNumberBlur }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur }) }),
         !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
           "of ",
           formatNumber(totalPages)
@@ -36935,6 +36951,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     open: false,
     onOpenChange: () => null
   });
+  const CollapsibleContainer = styled.div.withConfig({
+    componentId: "sc-guwmyz-0"
+  })(["width:100%;"]);
   const Collapsible = ({
     open: openProp,
     onOpenChange: onOpenChangeProp,
@@ -36957,10 +36976,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       open: openProp ?? open2,
       onOpenChange
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { isResponsive: false, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NavContext.Provider, { value, children }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NavContext.Provider, { value, children }) });
   };
   const CollapsipleHeaderContainer = styled.div.withConfig({
-    componentId: "sc-guwmyz-0"
+    componentId: "sc-guwmyz-1"
   })(["margin-left:", ";user-select:none;"], ({
     theme: theme2,
     $indicatorDir
@@ -36993,7 +37012,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   CollapsipleHeader.displayName = "CollapsibleHeader";
   Collapsible.Header = CollapsipleHeader;
   const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
-    componentId: "sc-guwmyz-1"
+    componentId: "sc-guwmyz-2"
   })(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
   const CollapsipleTrigger = ({
     onClick: onClickProp,
@@ -37024,7 +37043,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   CollapsipleTrigger.displayName = "CollapsibleTrigger";
   Collapsible.Trigger = CollapsipleTrigger;
   const CollapsibleContentWrapper = styled.div.withConfig({
-    componentId: "sc-guwmyz-2"
+    componentId: "sc-guwmyz-3"
   })(["", ""], ({
     theme: theme2,
     $indicatorDir

package/dist/components/Collapsible/Collapsible.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { HorizontalDirection, IconName, ContainerProps } from '../../components';
-export interface CollapsibleProps extends ContainerProps {
+import { HorizontalDirection, IconName } from '../../components';
+export interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     onOpenChange?: (value: boolean) => void;
 }

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

@@ -11,6 +11,9 @@ export interface WrapperProps {
 }
 export declare const InputWrapper: ({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const NumberInputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    $hideControls?: boolean | undefined;
+}, never>;
 export declare const TextAreaElement: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {}, never>;
 export declare const TextAreaWrapper: import("styled-components").StyledComponent<({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {

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

@@ -6,5 +6,6 @@ export interface NumberFieldProps extends Omit<WrapperProps, "id" | "children">,
     onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
     orientation?: "vertical" | "horizontal";
     dir?: "start" | "end";
+    hideControls?: boolean;
 }
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/package.json

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