@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

package/dist/esm/components/InputWrapper/InputWrapper.css

@@ -0,0 +1,221 @@
+/* Design tokens use camelCase segments (e.g. fieldText). */
+/* stylelint-disable custom-property-pattern */
+/* The original styled-components used vendor-prefixed autofill/appearance
+   overrides and native resize; `:autofill` overrides require `-webkit-box-shadow`
+   specifically, so these are preserved verbatim for byte-for-byte parity. */
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+/* The disabled-state rules intentionally come last to win the cascade, matching
+   the styled-components source order; this trips no-descending-specificity. */
+/* stylelint-disable no-descending-specificity */
+.wrapper__WHwoB {
+  display: flex;
+  width: inherit;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: var(--click-field-color-background-default);
+  color: var(--click-field-color-text-default);
+  font: var(--click-field-typography-fieldText-default);
+}
+
+.wrapper__WHwoB span:first-of-type {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrapper__WHwoB *:autofill,
+.wrapper__WHwoB *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-default) inset;
+  caret-color: var(--click-field-color-text-default);
+  -webkit-text-fill-color: var(--click-field-color-text-default);
+}
+
+.wrapper__WHwoB:hover {
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background: var(--click-field-color-background-hover);
+  color: var(--click-field-color-text-hover);
+}
+
+.wrapper__WHwoB:hover *:autofill,
+.wrapper__WHwoB:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-hover) inset;
+  caret-color: var(--click-field-color-text-hover);
+  -webkit-text-fill-color: var(--click-field-color-text-hover);
+}
+
+.wrapper_resize_vertical__43Ah9,
+.wrapper_resize_horizontal__Cgy4t,
+.wrapper_resize_both__WKn55 {
+  overflow: auto;
+}
+
+.wrapper_resize_vertical__43Ah9 {
+  resize: vertical;
+}
+
+.wrapper_resize_horizontal__Cgy4t {
+  resize: horizontal;
+}
+
+.wrapper_resize_both__WKn55 {
+  resize: both;
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] {
+  border: 1px solid var(--click-field-color-stroke-active);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-active);
+  font: var(--click-field-typography-fieldText-active);
+}
+
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:-webkit-autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:autofill,
+.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-active) inset;
+  caret-color: var(--click-field-color-text-active);
+  -webkit-text-fill-color: var(--click-field-color-text-active);
+}
+
+.wrapper_error__SB99e {
+  border: 1px solid var(--click-field-color-stroke-error);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-error);
+  font: var(--click-field-typography-fieldText-error);
+}
+
+.wrapper_error__SB99e *:autofill,
+.wrapper_error__SB99e *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover {
+  border: 1px solid var(--click-field-color-stroke-error);
+  color: var(--click-field-color-text-error);
+}
+
+.wrapper_error__SB99e:hover *:autofill,
+.wrapper_error__SB99e:hover *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
+  caret-color: var(--click-field-color-text-error);
+  -webkit-text-fill-color: var(--click-field-color-text-error);
+}
+
+.wrapper__WHwoB:disabled,
+.wrapper__WHwoB.disabled__vXh63 {
+  border: 1px solid var(--click-field-color-stroke-disabled);
+  background: var(--click-field-color-background-disabled);
+  color: var(--click-field-color-text-disabled);
+  font: var(--click-field-typography-fieldText-disabled);
+}
+
+.wrapper__WHwoB:disabled *:autofill,
+.wrapper__WHwoB:disabled *:-webkit-autofill,
+.wrapper__WHwoB.disabled__vXh63 *:autofill,
+.wrapper__WHwoB.disabled__vXh63 *:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-disabled) inset;
+  caret-color: var(--click-field-color-text-disabled);
+  -webkit-text-fill-color: var(--click-field-color-text-disabled);
+}
+
+.input__0fhe3 {
+  width: 100%;
+  padding: var(--click-field-space-y) 0;
+  padding-right: var(--click-field-space-x);
+  padding-left: var(--click-field-space-x);
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.input_has-start-content__JXy30 {
+  padding-left: 0;
+}
+
+.input_has-end-content__i10tl {
+  padding-right: 0;
+}
+
+.input__0fhe3::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.input__0fhe3:disabled::placeholder,
+.input__0fhe3.disabled__vXh63::placeholder {
+  color: var(--click-field-color-placeholder-disabled);
+}
+
+.number-input_hide-controls__sbWrG::-webkit-outer-spin-button,
+.number-input_hide-controls__sbWrG::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.number-input_hide-controls__sbWrG {
+  -moz-appearance: textfield;
+}
+
+.textarea__y-Il1 {
+  width: 100%;
+  padding: var(--click-field-space-y) var(--click-field-space-x);
+  align-self: stretch;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  resize: none;
+}
+
+.textarea__y-Il1::placeholder {
+  color: var(--click-field-color-placeholder-default);
+}
+
+.icon-button__b4bWG {
+  padding: var(--click-field-space-y) 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  outline: none;
+}
+
+.icon-button__b4bWG:not(:disabled) {
+  cursor: pointer;
+}
+
+.icon-wrapper__wvaLj:first-of-type {
+  padding-left: var(--click-field-space-gap);
+}
+
+.icon-wrapper__wvaLj:last-of-type {
+  padding-right: var(--click-field-space-x);
+}
+
+.start-content__2ejJV {
+  display: flex;
+  padding-left: var(--click-field-space-x);
+  align-items: center;
+  align-self: stretch;
+  gap: var(--click-field-space-gap);
+  cursor: text;
+}
+
+.end-content__xNk8- {
+  display: flex;
+  padding-right: var(--click-field-space-x);
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--click-field-space-gap);
+  white-space: nowrap;
+}

package/dist/esm/components/InputWrapper/InputWrapper.module.css.js

@@ -0,0 +1,27 @@
+const wrapper = "wrapper__WHwoB";
+const wrapper_resize_vertical = "wrapper_resize_vertical__43Ah9";
+const wrapper_resize_horizontal = "wrapper_resize_horizontal__Cgy4t";
+const wrapper_resize_both = "wrapper_resize_both__WKn55";
+const wrapper_error = "wrapper_error__SB99e";
+const disabled = "disabled__vXh63";
+const input = "input__0fhe3";
+const textarea = "textarea__y-Il1";
+const styles = {
+	wrapper: wrapper,
+	wrapper_resize_vertical: wrapper_resize_vertical,
+	wrapper_resize_horizontal: wrapper_resize_horizontal,
+	wrapper_resize_both: wrapper_resize_both,
+	wrapper_error: wrapper_error,
+	disabled: disabled,
+	input: input,
+	"input_has-start-content": "input_has-start-content__JXy30",
+	"input_has-end-content": "input_has-end-content__i10tl",
+	"number-input_hide-controls": "number-input_hide-controls__sbWrG",
+	textarea: textarea,
+	"icon-button": "icon-button__b4bWG",
+	"start-content": "start-content__2ejJV",
+	"end-content": "end-content__xNk8-"
+};
+
+export { styles as default, disabled, input, textarea, wrapper, wrapper_error, wrapper_resize_both, wrapper_resize_horizontal, wrapper_resize_vertical };
+//# sourceMappingURL=InputWrapper.module.css.js.map

package/dist/esm/components/InputWrapper/InputWrapper.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputWrapper.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,107 +1,32 @@
+import "./InputWrapper.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import { forwardRef } from 'react';
+import styles from './InputWrapper.module.css.js';
 import { FormRoot } from '../FormContainer/FormRoot.js';
 import { FormElementContainer } from '../FormContainer/FormElementContainer.js';
 import { Error } from '../FormContainer/Error.js';
 import { Label } from '../Label/index.js';
+import { cva } from 'class-variance-authority';
 
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-1aco97m-0"
-})(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
-  theme,
-  $error,
-  $resize
-}) => `
-    gap: ${theme.click.field.space.gap};
-    border-radius: ${theme.click.field.radii.all};
-    font: ${theme.click.field.typography.fieldText.default};
-    color: ${theme.click.field.color.text.default};
-    border: 1px solid ${theme.click.field.color.stroke.default};
-    background: ${theme.click.field.color.background.default};
-
-    *:autofill,
-    *:-webkit-autofill  {
-      -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.default} inset;
-      -webkit-text-fill-color: ${theme.click.field.color.text.default};
-      caret-color: ${theme.click.field.color.text.default};
-    }
-
-    &:hover {
-      border: 1px solid ${theme.click.field.color.stroke.hover};
-      background: ${theme.click.field.color.background.hover};
-      color: ${theme.click.field.color.text.hover};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.hover} inset;
-        -webkit-text-fill-color: ${theme.click.field.color.text.hover};
-        caret-color: ${theme.click.field.color.text.hover};
-      }
-    }
-    ${$resize === "none" ? "" : `
-      resize: ${$resize};
-      overflow: auto;
-    `}
-    ${$error ? `
-      font: ${theme.click.field.typography.fieldText.error};
-      border: 1px solid ${theme.click.field.color.stroke.error};
-      background: ${theme.click.field.color.background.active};
-      color: ${theme.click.field.color.text.error};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;
-        -webkit-text-fill-color: ${theme.click.field.color.text.error};
-        caret-color: ${theme.click.field.color.text.error};
-      }
-
-      &:hover {
-        border: 1px solid ${theme.click.field.color.stroke.error};
-        color: ${theme.click.field.color.text.error};
-        *:autofill,
-        *:-webkit-autofill {
-          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;
-          -webkit-text-fill-color: ${theme.click.field.color.text.error};
-          caret-color: ${theme.click.field.color.text.error};
-        }
-      }
-    ` : `
-    &:focus-within,
-    &[data-state="open"] {
-      font: ${theme.click.field.typography.fieldText.active};
-      border: 1px solid ${theme.click.field.color.stroke.active};
-      background: ${theme.click.field.color.background.active};
-      color: ${theme.click.field.color.text.active};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;
-        -webkit-text-fill-color: ${theme.click.field.color.text.active};
-        caret-color: ${theme.click.field.color.text.active};
-      }
-    }
-    `};
-    &:disabled, &.disabled {
-      font: ${theme.click.field.typography.fieldText.disabled};
-      border: 1px solid ${theme.click.field.color.stroke.disabled};
-      background: ${theme.click.field.color.background.disabled};
-      color: ${theme.click.field.color.text.disabled};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.disabled} inset;
-        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};
-        caret-color: ${theme.click.field.color.text.disabled};
-      }
+const wrapperVariants = cva(styles.wrapper, {
+  variants: {
+    error: {
+      true: styles.wrapper_error,
+      false: ""
+    },
+    resize: {
+      none: "",
+      vertical: styles.wrapper_resize_vertical,
+      horizontal: styles.wrapper_resize_horizontal,
+      both: styles.wrapper_resize_both
     }
-  `);
-const StyledLabel = styled(Label).withConfig({
-  componentId: "sc-1aco97m-1"
-})(["", ""], ({
-  $labelColor
-}) => `
-    ${$labelColor ? `color: ${$labelColor};` : ""}
-  `);
+  },
+  defaultVariants: {
+    error: false,
+    resize: "none"
+  }
+});
 const InputWrapper = ({
   className,
   id,
@@ -116,99 +41,73 @@ const InputWrapper = ({
 }) => {
   return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
     /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsx(Wrapper, { $error: !!error, $resize: resize, "data-resize": resize, className: disabled ? `disabled ${className}` : className, children }),
+      /* @__PURE__ */ jsx("div", { "data-resize": resize, className: cn(wrapperVariants({
+        error: !!error,
+        resize
+      }), disabled && styles.disabled, className), children }),
       !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
     ] }),
-    label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: id, disabled, error: !!error, $labelColor: labelColor, children: label })
+    label && /* @__PURE__ */ jsx(Label, { htmlFor: id, disabled, error: !!error, style: labelColor ? {
+      color: labelColor
+    } : void 0, children: label })
   ] });
 };
-const InputElement = styled.input.withConfig({
-  componentId: "sc-1aco97m-2"
-})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-  theme,
-  $hasStartContent,
-  $hasEndContent
-}) => `
-    padding: ${theme.click.field.space.y} 0;
-    padding-left: ${$hasStartContent ? "0" : theme.click.field.space.x};
-    padding-right: ${$hasEndContent ? "0" : theme.click.field.space.x};
-    &::placeholder {
-      color: ${theme.click.field.color.placeholder.default};
-    }
-
-    &:disabled, &.disabled {
-      &::placeholder {
-      color: ${theme.click.field.color.placeholder.disabled};
-    }
-  `);
-const NumberInputElement = styled(InputElement).withConfig({
-  componentId: "sc-1aco97m-3"
-})(["", ""], ({
-  $hideControls
-}) => `
-    ${$hideControls ? `
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
+const inputVariants = cva(styles.input, {
+  variants: {
+    hasStartContent: {
+      true: styles["input_has-start-content"],
+      false: ""
+    },
+    hasEndContent: {
+      true: styles["input_has-end-content"],
+      false: ""
     }
-
-    -moz-appearance: textfield;
-    ` : ""}
-  `);
-const TextAreaElement = styled.textarea.withConfig({
-  componentId: "sc-1aco97m-4"
-})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
-  theme
-}) => `
-    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};
-    align-self: stretch;
-    &::placeholder {
-      color: ${theme.click.field.color.placeholder.default};
-    }
-  `);
-const IconButton = styled.button.withConfig({
-  componentId: "sc-1aco97m-5"
-})(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-  theme
-}) => `
-      padding: ${theme.click.field.space.y} 0;
-  `);
-styled.svg.withConfig({
-  componentId: "sc-1aco97m-6"
-})(["", ""], ({
-  theme
-}) => `
-    &:first-of-type {
-      padding-left: ${theme.click.field.space.gap};
-    }
-    &:last-of-type {
-      padding-right: ${theme.click.field.space.x};
-    }
-  `);
-const InputStartContent = styled.div.withConfig({
-  componentId: "sc-1aco97m-7"
-})(["", ""], ({
-  theme
-}) => `
-    padding-left: ${theme.click.field.space.x};
-    cursor: text;
-    gap: ${theme.click.field.space.gap};
-    display: flex;
-    align-self: stretch;
-    align-items: center;
-  `);
-const InputEndContent = styled.div.withConfig({
-  componentId: "sc-1aco97m-8"
-})(["white-space:nowrap;flex-shrink:0;", ""], ({
-  theme
-}) => `
-    padding-right: ${theme.click.field.space.x};
-    gap: ${theme.click.field.space.gap};
-    display: flex;
-    align-self: stretch;
-    align-items: center;
-  `);
+  },
+  defaultVariants: {
+    hasStartContent: false,
+    hasEndContent: false
+  }
+});
+const _InputElement = ({
+  as,
+  $hasStartContent,
+  $hasEndContent,
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "input";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(inputVariants({
+    hasStartContent: !!$hasStartContent,
+    hasEndContent: !!$hasEndContent
+  }), className) });
+};
+const InputElement = forwardRef(_InputElement);
+const NumberInputElement = forwardRef(({
+  $hideControls,
+  $hasStartContent,
+  $hasEndContent,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("input", { ref, ...props, className: cn(inputVariants({
+  hasStartContent: !!$hasStartContent,
+  hasEndContent: !!$hasEndContent
+}), $hideControls && styles["number-input_hide-controls"], className) }));
+const TextAreaElement = forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("textarea", { ref, ...props, className: cn(styles.textarea, className) }));
+const IconButton = forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx("button", { ref, type: "button", ...props, className: cn(styles["icon-button"], className) }));
+const InputStartContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(styles["start-content"], className) });
+const InputEndContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(styles["end-content"], className) });
 
 export { IconButton, InputElement, InputEndContent, InputStartContent, InputWrapper, NumberInputElement, TextAreaElement };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\n\nconst Wrapper = styled.div<{\n  $error: boolean;\n  $resize: 'none' | 'vertical' | 'horizontal' | 'both';\n}>`\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  align-items: center;\n\n  span:first-of-type {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  ${({ theme, $error, $resize }) => `\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.click.field.typography.fieldText.default};\n    color: ${theme.click.field.color.text.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    background: ${theme.click.field.color.background.default};\n\n    *:autofill,\n    *:-webkit-autofill  {\n      -webkit-box-shadow: 0 0 0px 50vh ${\n        theme.click.field.color.background.default\n      } inset;\n      -webkit-text-fill-color: ${theme.click.field.color.text.default};\n      caret-color: ${theme.click.field.color.text.default};\n    }\n\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${theme.click.field.color.background.hover};\n      color: ${theme.click.field.color.text.hover};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.hover\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.hover};\n        caret-color: ${theme.click.field.color.text.hover};\n      }\n    }\n    ${\n      $resize === 'none'\n        ? ''\n        : `\n      resize: ${$resize};\n      overflow: auto;\n    `\n    }\n    ${\n      $error\n        ? `\n      font: ${theme.click.field.typography.fieldText.error};\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.error};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.error};\n        caret-color: ${theme.click.field.color.text.error};\n      }\n\n      &:hover {\n        border: 1px solid ${theme.click.field.color.stroke.error};\n        color: ${theme.click.field.color.text.error};\n        *:autofill,\n        *:-webkit-autofill {\n          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n          -webkit-text-fill-color: ${theme.click.field.color.text.error};\n          caret-color: ${theme.click.field.color.text.error};\n        }\n      }\n    `\n        : `\n    &:focus-within,\n    &[data-state=\"open\"] {\n      font: ${theme.click.field.typography.fieldText.active};\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.active};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.active};\n        caret-color: ${theme.click.field.color.text.active};\n      }\n    }\n    `\n    };\n    &:disabled, &.disabled {\n      font: ${theme.click.field.typography.fieldText.disabled};\n      border: 1px solid ${theme.click.field.color.stroke.disabled};\n      background: ${theme.click.field.color.background.disabled};\n      color: ${theme.click.field.color.text.disabled};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.disabled\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};\n        caret-color: ${theme.click.field.color.text.disabled};\n      }\n    }\n  `}\n`;\n\nconst StyledLabel = styled(Label)<{ $labelColor?: string }>`\n  ${({ $labelColor }) => `\n    ${$labelColor ? `color: ${$labelColor};` : ''}\n  `}\n`;\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <Wrapper\n          $error={!!error}\n          $resize={resize}\n          data-resize={resize}\n          className={disabled ? `disabled ${className}` : className}\n        >\n          {children}\n        </Wrapper>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <StyledLabel\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          $labelColor={labelColor}\n        >\n          {label}\n        </StyledLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nexport const InputElement = styled.input<{\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n}>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  ${({ theme, $hasStartContent, $hasEndContent }) => `\n    padding: ${theme.click.field.space.y} 0;\n    padding-left: ${$hasStartContent ? '0' : theme.click.field.space.x};\n    padding-right: ${$hasEndContent ? '0' : theme.click.field.space.x};\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n\n    &:disabled, &.disabled {\n      &::placeholder {\n      color: ${theme.click.field.color.placeholder.disabled};\n    }\n  `}\n`;\n\nexport const NumberInputElement = styled(InputElement)<{ $hideControls?: boolean }>`\n  ${({ $hideControls }) => `\n    ${\n      $hideControls\n        ? `\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    -moz-appearance: textfield;\n    `\n        : ''\n    }\n  `}\n`;\n\nexport const TextAreaElement = styled.textarea`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  resize: none;\n  ${({ theme }) => `\n    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};\n    align-self: stretch;\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n  `}\n`;\n\nexport const IconButton = styled.button`\n  background: transparent;\n  color: inherit;\n  border: none;\n  padding: 0;\n  outline: none;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  ${({ theme }) => `\n      padding: ${theme.click.field.space.y} 0;\n  `}\n`;\n\nexport const IconWrapper = styled.svg`\n  ${({ theme }) => `\n    &:first-of-type {\n      padding-left: ${theme.click.field.space.gap};\n    }\n    &:last-of-type {\n      padding-right: ${theme.click.field.space.x};\n    }\n  `}\n`;\n\nexport const InputStartContent = styled.div`\n  ${({ theme }) => `\n    padding-left: ${theme.click.field.space.x};\n    cursor: text;\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n\nexport const InputEndContent = styled.div`\n  white-space: nowrap;\n  flex-shrink: 0;\n  ${({ theme }) => `\n    padding-right: ${theme.click.field.space.x};\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","$error","$resize","click","field","space","gap","radii","all","typography","fieldText","default","color","text","stroke","background","hover","error","active","disabled","StyledLabel","Label","$labelColor","InputWrapper","className","id","label","labelColor","children","orientation","dir","resize","InputElement","input","$hasStartContent","$hasEndContent","y","x","placeholder","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","button","svg","InputStartContent","InputEndContent"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { cn, cva } from '@/lib/cva';\nimport {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  SVGProps,\n  TextareaHTMLAttributes,\n  forwardRef,\n} from 'react';\nimport styles from './InputWrapper.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    error: {\n      true: styles.wrapper_error,\n      false: '',\n    },\n    resize: {\n      none: '',\n      vertical: styles.wrapper_resize_vertical,\n      horizontal: styles.wrapper_resize_horizontal,\n      both: styles.wrapper_resize_both,\n    },\n  },\n  defaultVariants: {\n    error: false,\n    resize: 'none',\n  },\n});\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <div\n          data-resize={resize}\n          className={cn(\n            wrapperVariants({ error: !!error, resize }),\n            disabled && styles.disabled,\n            className\n          )}\n        >\n          {children}\n        </div>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          style={labelColor ? { color: labelColor } : undefined}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\nconst inputVariants = cva(styles.input, {\n  variants: {\n    hasStartContent: {\n      true: styles['input_has-start-content'],\n      false: '',\n    },\n    hasEndContent: {\n      true: styles['input_has-end-content'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    hasStartContent: false,\n    hasEndContent: false,\n  },\n});\n\ninterface InputElementOwnProps {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  /** Render as a different element/component (mirrors styled-components `as`). */\n  as?: ElementType;\n}\n\nexport type InputElementProps<T extends ElementType = 'input'> = Omit<\n  ComponentProps<T>,\n  keyof InputElementOwnProps\n> &\n  InputElementOwnProps;\n\ntype InputElementPolymorphicComponent = <T extends ElementType = 'input'>(\n  props: InputElementProps<T>\n) => ReactNode;\n\nconst _InputElement = <T extends ElementType = 'input'>(\n  { as, $hasStartContent, $hasEndContent, className, ...props }: InputElementProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'input';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const InputElement: InputElementPolymorphicComponent = forwardRef(_InputElement);\n\nexport interface NumberInputElementProps extends InputHTMLAttributes<HTMLInputElement> {\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n  $hideControls?: boolean;\n}\n\nexport const NumberInputElement = forwardRef<HTMLInputElement, NumberInputElementProps>(\n  ({ $hideControls, $hasStartContent, $hasEndContent, className, ...props }, ref) => (\n    <input\n      ref={ref}\n      {...props}\n      className={cn(\n        inputVariants({\n          hasStartContent: !!$hasStartContent,\n          hasEndContent: !!$hasEndContent,\n        }),\n        $hideControls && styles['number-input_hide-controls'],\n        className\n      )}\n    />\n  )\n);\n\nexport const TextAreaElement = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    {...props}\n    className={cn(styles.textarea, className)}\n  />\n));\n\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    {...props}\n    className={cn(styles['icon-button'], className)}\n  />\n));\n\nexport const IconWrapper = ({ className, ...props }: SVGProps<SVGSVGElement>) => (\n  <svg\n    {...props}\n    className={cn(styles['icon-wrapper'], className)}\n  />\n);\n\nexport const InputStartContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['start-content'], className)}\n  />\n);\n\nexport const InputEndContent = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['end-content'], className)}\n  />\n);\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","error","true","wrapper_error","false","resize","none","vertical","wrapper_resize_vertical","horizontal","wrapper_resize_horizontal","both","wrapper_resize_both","defaultVariants","InputWrapper","className","id","label","labelColor","disabled","children","orientation","dir","cn","color","undefined","inputVariants","input","hasStartContent","hasEndContent","_InputElement","as","$hasStartContent","$hasEndContent","props","ref","Component","InputElement","forwardRef","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","InputStartContent","InputEndContent"],"mappings":"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"}

package/dist/esm/components/Popover/Popover.css

@@ -0,0 +1,12 @@
+.menu-panel__-IeVm {
+  display: block;
+  padding: var(--click-popover-space-y) var(--click-popover-space-x);
+  border: 1px solid var(--click-popover-color-panel-stroke-default);
+  border-radius: var(--click-popover-radii-all);
+  background-color: var(--click-popover-color-panel-background-default);
+  box-shadow: var(--click-popover-shadow-default);
+}
+
+.menu-panel_show-close__Qx3Mo {
+  padding-top: 1rem;
+}

package/dist/esm/components/Popover/Popover.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+	"menu-panel": "menu-panel__-IeVm",
+	"menu-panel_show-close": "menu-panel_show-close__Qx3Mo"
+};
+
+export { styles as default };
+//# sourceMappingURL=Popover.module.css.js.map

package/dist/esm/components/Popover/Popover.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}