@clickhouse/click-ui 0.2.0-test.0 → 0.2.1-rc.8

package/dist/esm/components/NumberField/index.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId } from 'react';
-import { InputWrapper, NumberInputElement } from '../InputWrapper/index.js';
+import { forwardRef, useRef, useId } from 'react';
+import { mergeRefs } from '../../utils/mergeRefs.js';
+import { InputWrapper, InputStartContent, NumberInputElement, InputEndContent } from '../InputWrapper/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
 const NumberField = forwardRef(({
@@ -13,15 +14,27 @@ const NumberField = forwardRef(({
   orientation,
   dir,
   hideControls,
+  startContent,
+  endContent,
   ...props
 }, ref) => {
+  const inputRef = useRef(null);
   const defaultId = useId();
   const onChange = (e) => {
     onChangeProp(e.target.value, e);
   };
+  const handleStartContentClick = () => {
+    inputRef.current?.focus();
+  };
+  const hasStartContent = Boolean(startContent);
+  const hasEndContent = Boolean(loading || endContent);
   return /* @__PURE__ */ jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error, orientation, dir, children: [
-    /* @__PURE__ */ jsx(NumberInputElement, { ref, type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, ...props }),
-    loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    startContent && /* @__PURE__ */ jsx(InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+    /* @__PURE__ */ jsx(NumberInputElement, { ref: mergeRefs([inputRef, ref]), type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ...props }),
+    hasEndContent && /* @__PURE__ */ jsxs(InputEndContent, { children: [
+      endContent ? endContent : null,
+      loading && /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" })
+    ] })
   ] });
 });
 

package/dist/esm/components/NumberField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { ChangeEvent, InputHTMLAttributes, forwardRef, useId } from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  InputWrapper,\n  NumberInputElement,\n  WrapperProps,\n} from '@/components/InputWrapper';\nexport interface NumberFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {\n  /** The input type - always number for NumberField */\n  type?: 'number';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Whether to hide the increment/decrement controls */\n  hideControls?: boolean;\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      loading,\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      hideControls,\n      ...props\n    },\n    ref\n  ) => {\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        <NumberInputElement\n          ref={ref}\n          type=\"number\"\n          id={id ?? defaultId}\n          disabled={disabled}\n          onChange={onChange}\n          $hideControls={hideControls}\n          {...props}\n        />\n        {loading && (\n          <Icon\n            name=\"loading-animated\"\n            size=\"sm\"\n          />\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["NumberField","forwardRef","disabled","label","error","id","loading","onChange","onChangeProp","orientation","dir","hideControls","props","ref","defaultId","useId","e","target","value","Icon"],"mappings":";;;;;AAyBO,MAAMA,WAAAA,GAAcC,WACzB,CACE;AAAA,EACEC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,MAAMR,QAAAA,GAAWA,CAACS,CAAAA,KAAqC;AACrDR,IAAAA,YAAAA,CAAaQ,CAAAA,CAAEC,MAAAA,CAAOC,KAAAA,EAAOF,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,gBACC,QAAA,EACA,EAAA,EAAIX,MAAMS,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAEA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAA,EAAA,EACC,GAAA,EACA,IAAA,EAAK,QAAA,EACL,EAAA,EAAIT,EAAAA,IAAMS,SAAAA,EACV,QAAA,EACA,QAAA,EACA,aAAA,EAAeH,YAAAA,EACf,GAAIC,KAAAA,EAAM,CAAA;AAAA,IAEXN,2BACC,GAAA,CAACa,QAAA,EAAA,EACC,IAAA,EAAK,kBAAA,EACL,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  NumberInputElement,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\nexport interface NumberFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {\n  /** The input type - always number for NumberField */\n  type?: 'number';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Whether to hide the increment/decrement controls */\n  hideControls?: boolean;\n  /** Additional content to the left of the control */\n  startContent?: ReactNode;\n  /** Additional content to the right of the control */\n  endContent?: ReactNode;\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      loading,\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      hideControls,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n    const hasEndContent = Boolean(loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n        <NumberInputElement\n          ref={mergeRefs([inputRef, ref])}\n          type=\"number\"\n          id={id ?? defaultId}\n          disabled={disabled}\n          onChange={onChange}\n          $hideControls={hideControls}\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["NumberField","forwardRef","disabled","label","error","id","loading","onChange","onChangeProp","orientation","dir","hideControls","startContent","endContent","props","ref","inputRef","useRef","defaultId","useId","e","target","value","handleStartContentClick","current","focus","hasStartContent","Boolean","hasEndContent","mergeRefs","Icon"],"mappings":";;;;;;AAuCO,MAAMA,WAAAA,GAAcC,WACzB,CACE;AAAA,EACEC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,QAAAA,GAAWC,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,MAAMZ,QAAAA,GAAWA,CAACa,CAAAA,KAAqC;AACrDZ,IAAAA,YAAAA,CAAaY,CAAAA,CAAEC,MAAAA,CAAOC,KAAAA,EAAOF,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAMG,0BAAmEA,MAAM;AAC7EP,IAAAA,QAAAA,CAASQ,SAASC,KAAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAMC,eAAAA,GAAkBC,QAAQf,YAAY,CAAA;AAC5C,EAAA,MAAMgB,aAAAA,GAAgBD,OAAAA,CAAQrB,OAAAA,IAAWO,UAAU,CAAA;AAEnD,EAAA,uBACE,IAAA,CAAC,gBACC,QAAA,EACA,EAAA,EAAIR,MAAMa,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAECN,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,oBACC,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAASW,uBAAAA,EACzBX,QAAAA,EAAAA,YAAAA,EACH,CAAA;AAAA,oBAEF,GAAA,CAAC,sBACC,GAAA,EAAKiB,SAAAA,CAAU,CAACb,QAAAA,EAAUD,GAAG,CAAC,CAAA,EAC9B,IAAA,EAAK,QAAA,EACL,IAAIV,EAAAA,IAAMa,SAAAA,EACV,QAAA,EACA,QAAA,EACA,aAAA,EAAeP,YAAAA,EACf,kBAAkBe,eAAAA,EAClB,cAAA,EAAgBE,aAAAA,EAChB,GAAId,KAAAA,EAAM,CAAA;AAAA,IAEXc,aAAAA,yBACE,eAAA,EAAA,EACEf,QAAAA,EAAAA;AAAAA,MAAAA,UAAAA,GAAaA,UAAAA,GAAa,IAAA;AAAA,MAC1BP,2BACC,GAAA,CAACwB,QAAA,EAAA,EACC,IAAA,EAAK,kBAAA,EACL,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}

package/dist/esm/lib/cva.js

@@ -0,0 +1,7 @@
+export { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+
+const cn = (...inputs) => clsx(inputs);
+
+export { cn };
+//# sourceMappingURL=cva.js.map

package/dist/esm/lib/cva.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cva.js","sources":["../../../src/lib/cva.ts"],"sourcesContent":["export { cva, type VariantProps } from 'class-variance-authority';\nimport { clsx, type ClassValue } from 'clsx';\n\nexport const cn = (...inputs: ClassValue[]) => clsx(inputs);\n"],"names":["cn","inputs","clsx"],"mappings":";;;AAGO,MAAMA,EAAAA,GAAKA,CAAAA,GAAIC,MAAAA,KAAyBC,IAAAA,CAAKD,MAAM;;;;"}

package/dist/esm/providers/ThemeProvider.js

@@ -1,8 +1,12 @@
+import "../theme/styles/tokens-light.css";
+import "../theme/styles/tokens-dark.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ThemeProvider as ThemeProvider$1, createGlobalStyle } from 'styled-components';
 import { THEMES, themes } from '../theme/theme.core.js';
 import { isValidThemeName } from '../theme/theme.utils.js';
 
+
+
 const GlobalStyle = createGlobalStyle(["body{color:", ";background-color:", "}"], (props) => props.theme.click.global.color.text.default, (props) => props.theme.click.global.color.background.default);
 const ThemeProvider = ({
   theme: name,

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import {\n  ThemeProvider as StyledThemeProvider,\n  createGlobalStyle,\n} from 'styled-components';\nimport { THEMES } from '@/theme/theme.core';\nimport type { ThemeName } from '@/theme/theme.types';\nimport { themes } from '@/theme/theme.core';\nimport { isValidThemeName } from '@/theme/theme.utils';\n\nconst GlobalStyle = createGlobalStyle`\n  body{\n    color: ${props => props.theme.click.global.color.text.default};\n    background-color: ${props => props.theme.click.global.color.background.default}\n  }\n`;\n\nexport const ThemeProvider = ({\n  theme: name,\n  children,\n}: {\n  theme: ThemeName;\n  children: React.ReactNode;\n}) => {\n  const hasValidTheme = isValidThemeName(name);\n  const resolvedTheme = !hasValidTheme ? THEMES.Light : name;\n  return (\n    <StyledThemeProvider theme={themes[resolvedTheme]}>\n      <GlobalStyle />\n      {children}\n    </StyledThemeProvider>\n  );\n};\n"],"names":["GlobalStyle","createGlobalStyle","props","theme","click","global","color","text","default","background","ThemeProvider","name","children","hasValidTheme","isValidThemeName","resolvedTheme","THEMES","Light","StyledThemeProvider","themes"],"mappings":";;;;;AASA,MAAMA,WAAAA,GAAcC,kBAAiB,CAAA,aAAA,EAAA,sBAAA,GAAA,CAAA,EAExBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,OAAOC,KAAAA,CAAMC,IAAAA,CAAKC,SAClCN,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMG,UAAAA,CAAWD,OAAO,CAAA;AAI3E,MAAME,gBAAgBA,CAAC;AAAA,EAC5BP,KAAAA,EAAOQ,IAAAA;AAAAA,EACPC;AAIF,CAAA,KAAM;AACJ,EAAA,MAAMC,aAAAA,GAAgBC,iBAAiBH,IAAI,CAAA;AAC3C,EAAA,MAAMI,aAAAA,GAAgB,CAACF,aAAAA,GAAgBG,MAAAA,CAAOC,KAAAA,GAAQN,IAAAA;AACtD,EAAA,uBACE,IAAA,CAACO,eAAA,EAAA,EAAoB,KAAA,EAAOC,MAAAA,CAAOJ,aAAa,CAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAW,CAAA;AAAA,IACXH;AAAAA,GAAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import {\n  ThemeProvider as StyledThemeProvider,\n  createGlobalStyle,\n} from 'styled-components';\nimport { THEMES } from '@/theme/theme.core';\nimport type { ThemeName } from '@/theme/theme.types';\nimport { themes } from '@/theme/theme.core';\nimport { isValidThemeName } from '@/theme/theme.utils';\n\nimport '@/theme/styles/tokens-light.css';\nimport '@/theme/styles/tokens-dark.css';\n\nconst GlobalStyle = createGlobalStyle`\n  body{\n    color: ${props => props.theme.click.global.color.text.default};\n    background-color: ${props => props.theme.click.global.color.background.default}\n  }\n`;\n\nexport const ThemeProvider = ({\n  theme: name,\n  children,\n}: {\n  theme: ThemeName;\n  children: React.ReactNode;\n}) => {\n  const hasValidTheme = isValidThemeName(name);\n  const resolvedTheme = !hasValidTheme ? THEMES.Light : name;\n  return (\n    <StyledThemeProvider theme={themes[resolvedTheme]}>\n      <GlobalStyle />\n      {children}\n    </StyledThemeProvider>\n  );\n};\n"],"names":["GlobalStyle","createGlobalStyle","props","theme","click","global","color","text","default","background","ThemeProvider","name","children","hasValidTheme","isValidThemeName","resolvedTheme","THEMES","Light","StyledThemeProvider","themes"],"mappings":";;;;;;;AAYA,MAAMA,WAAAA,GAAcC,kBAAiB,CAAA,aAAA,EAAA,sBAAA,GAAA,CAAA,EAExBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,OAAOC,KAAAA,CAAMC,IAAAA,CAAKC,SAClCN,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMG,UAAAA,CAAWD,OAAO,CAAA;AAI3E,MAAME,gBAAgBA,CAAC;AAAA,EAC5BP,KAAAA,EAAOQ,IAAAA;AAAAA,EACPC;AAIF,CAAA,KAAM;AACJ,EAAA,MAAMC,aAAAA,GAAgBC,iBAAiBH,IAAI,CAAA;AAC3C,EAAA,MAAMI,aAAAA,GAAgB,CAACF,aAAAA,GAAgBG,MAAAA,CAAOC,KAAAA,GAAQN,IAAAA;AACtD,EAAA,uBACE,IAAA,CAACO,eAAA,EAAA,EAAoB,KAAA,EAAOC,MAAAA,CAAOJ,aAAa,CAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAW,CAAA;AAAA,IACXH;AAAAA,GAAAA,EACH,CAAA;AAEJ;;;;"}