@de-kit/st-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,74 @@
-# Temporary Holding Version
+# @de-kit/st-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React-компоненты splittest. Стили — SCSS-модули, токены скопированы из `splittest-frontend/src/app/styles`. Tailwind нет.
+
+## Подключение
+
+В CRA (sass уже стоит):
+
+```tsx
+import '@de-kit/st-ui/global.scss';
+import {
+  Button,
+  Input,
+  TextArea,
+  CheckboxInput,
+  RadioInput,
+  Spinner,
+} from '@de-kit/st-ui';
+```
+
+`global.scss` — база приложения (body, заголовки, таблицы, `.wrapper`). В чужой странице его не подключать. Шрифт Inter библиотека не везёт, его по-прежнему грузит фронтенд.
+
+Свои экраны могут брать те же переменные:
+
+```scss
+@import '@de-kit/st-ui/vars.scss';
+@import '@de-kit/st-ui/mixins.scss';
+```
+
+Компонентный css собирает sass-loader приложения: js импортирует `*.module.scss`, классы хешируются на стороне хоста.
+
+## Кнопка
+
+Пропсы как в `shared/components/button`, без `react-router`.
+
+```tsx
+<Button onClick={save}>Сохранить</Button>
+<Button outline>Отмена</Button>
+<Button transparent disabled>Скрыть</Button>
+<Button href="/prices">Тарифы</Button>
+<Button fullWidth>Дальше</Button>
+```
+
+| Prop                                                       | По умолчанию |                                            |
+| ---------------------------------------------------------- | ------------ | ------------------------------------------ |
+| `transparent` / `outline` / `empty` / `link` / `nopadding` | `false`      | варианты из `index.module.scss` приложения |
+| `withIcon`                                                 | `true`       | как в приложении: левый паддинг под иконку |
+| `fullWidth`                                                | `false`      | `width: 100%`                              |
+| `href`                                                     | —            | рендер `<a>`, не `<Link>`                  |
+
+`link` — это `font-weight: 400`, не тип элемента.
+
+## Остальные
+
+```tsx
+<Input recommended />
+<Input error />
+<TextArea maxLength={200} />
+<TextArea maxLength={200} hideCounter />
+<CheckboxInput title="18-24" />
+<RadioInput name="age" title="18–24" />
+<Spinner position="top" />
+```
+
+`hideCounter` заменяет опечатку `noMaxMoty`. `CheckboxInput` сам ставит `id`, если его не передали. Дефис в `title` чекбокса по-прежнему меняется на тире.
+
+## Разработка
+
+```bash
+pnpm install
+pnpm dev       # Storybook, :6006
+pnpm test
+pnpm build     # dist: js + d.ts + scss рядом с модулями
+```

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,22 @@
+// \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/components/button/button.cjs

@@ -0,0 +1,49 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let src_components_button_button_module_scss = require("./button.module.scss");
+src_components_button_button_module_scss = require_runtime.__toESM(src_components_button_button_module_scss, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/button/button.tsx
+const styleKeys = [
+	"outline",
+	"withIcon",
+	"fullWidth",
+	"link",
+	"className"
+];
+const getClassName = ({ withIcon = true, outline, className, fullWidth = false, link = false, disabled }) => require_cn.cn(src_components_button_button_module_scss.default.button, className, require_cn.when(outline, src_components_button_button_module_scss.default.outline), require_cn.when(withIcon, src_components_button_button_module_scss.default.withIcon), require_cn.when(fullWidth, src_components_button_button_module_scss.default.fullWidth), require_cn.when(link, src_components_button_button_module_scss.default.link), require_cn.when(disabled, src_components_button_button_module_scss.default.disabled));
+const omitStyleProps = (props) => {
+	const next = {};
+	const skipped = new Set(styleKeys);
+	for (const [key, value] of Object.entries(props)) if (!skipped.has(key)) next[key] = value;
+	return next;
+};
+const Button = (0, react.forwardRef)(function Button(props, ref) {
+	const className = getClassName(props);
+	const { children, href, ...domProps } = omitStyleProps(props);
+	if (typeof href === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		ref,
+		href,
+		className,
+		...domProps,
+		children
+	});
+	const { type = "button", disabled, onClick, ...buttonProps } = domProps;
+	const handleClick = (event) => {
+		if (disabled) return;
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		className,
+		type,
+		disabled,
+		onClick: handleClick,
+		...buttonProps,
+		children
+	});
+});
+exports.Button = Button;
+
+//# sourceMappingURL=button.cjs.map

package/dist/components/button/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.cjs","names":["cn","styles","when","forwardRef"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './button.module.scss';\n\ninterface ButtonStyleProps {\n  outline?: boolean;\n  /** В приложении по умолчанию true: левый паддинг под иконку. */\n  withIcon?: boolean;\n  fullWidth?: boolean;\n  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */\n  link?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = [\n  'outline',\n  'withIcon',\n  'fullWidth',\n  'link',\n  'className',\n] as const;\n\nconst getClassName = ({\n  withIcon = true,\n  outline,\n  className,\n  fullWidth = false,\n  link = false,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    styles.button,\n    className,\n    when(outline, styles.outline),\n    when(withIcon, styles.withIcon),\n    when(fullWidth, styles.fullWidth),\n    when(link, styles.link),\n    when(disabled, styles.disabled),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonComponentProps\n>(function Button(props, ref) {\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n\n  if (typeof href === 'string') {\n    return (\n      <a\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={href}\n        className={className}\n        {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) return;\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled}\n      onClick={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;AAqCA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,EACpB,WAAW,MACX,SACA,WACA,YAAY,OACZ,OAAO,OACP,eAEAA,WAAAA,GACEC,yCAAAA,QAAO,QACP,WACAC,WAAAA,KAAK,SAASD,yCAAAA,QAAO,OAAO,GAC5BC,WAAAA,KAAK,UAAUD,yCAAAA,QAAO,QAAQ,GAC9BC,WAAAA,KAAK,WAAWD,yCAAAA,QAAO,SAAS,GAChCC,WAAAA,KAAK,MAAMD,yCAAAA,QAAO,IAAI,GACtBC,WAAAA,KAAK,UAAUD,yCAAAA,QAAO,QAAQ,CAChC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,UAAA,GAASE,MAAAA,WAAAA,CAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/button/button.d.cts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+interface ButtonStyleProps {
+  outline?: boolean;
+  /** В приложении по умолчанию true: левый паддинг под иконку. */
+  withIcon?: boolean;
+  fullWidth?: boolean;
+  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */
+  link?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {
+  href?: undefined;
+}
+export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, ButtonStyleProps {
+  href: string;
+}
+export type ButtonComponentProps = ButtonProps | ButtonLinkProps;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonComponentProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=button.d.cts.map

package/dist/components/button/button.d.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+interface ButtonStyleProps {
+  outline?: boolean;
+  /** В приложении по умолчанию true: левый паддинг под иконку. */
+  withIcon?: boolean;
+  fullWidth?: boolean;
+  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */
+  link?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {
+  href?: undefined;
+}
+export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, ButtonStyleProps {
+  href: string;
+}
+export type ButtonComponentProps = ButtonProps | ButtonLinkProps;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonComponentProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.js

@@ -0,0 +1,47 @@
+import { cn, when } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import styles from "./button.module.scss";
+import { jsx } from "react/jsx-runtime";
+// src/components/button/button.tsx
+const styleKeys = [
+	"outline",
+	"withIcon",
+	"fullWidth",
+	"link",
+	"className"
+];
+const getClassName = ({ withIcon = true, outline, className, fullWidth = false, link = false, disabled }) => cn(styles.button, className, when(outline, styles.outline), when(withIcon, styles.withIcon), when(fullWidth, styles.fullWidth), when(link, styles.link), when(disabled, styles.disabled));
+const omitStyleProps = (props) => {
+	const next = {};
+	const skipped = new Set(styleKeys);
+	for (const [key, value] of Object.entries(props)) if (!skipped.has(key)) next[key] = value;
+	return next;
+};
+const Button = forwardRef(function Button(props, ref) {
+	const className = getClassName(props);
+	const { children, href, ...domProps } = omitStyleProps(props);
+	if (typeof href === "string") return /* @__PURE__ */ jsx("a", {
+		ref,
+		href,
+		className,
+		...domProps,
+		children
+	});
+	const { type = "button", disabled, onClick, ...buttonProps } = domProps;
+	const handleClick = (event) => {
+		if (disabled) return;
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		className,
+		type,
+		disabled,
+		onClick: handleClick,
+		...buttonProps,
+		children
+	});
+});
+export { Button };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './button.module.scss';\n\ninterface ButtonStyleProps {\n  outline?: boolean;\n  /** В приложении по умолчанию true: левый паддинг под иконку. */\n  withIcon?: boolean;\n  fullWidth?: boolean;\n  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */\n  link?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = [\n  'outline',\n  'withIcon',\n  'fullWidth',\n  'link',\n  'className',\n] as const;\n\nconst getClassName = ({\n  withIcon = true,\n  outline,\n  className,\n  fullWidth = false,\n  link = false,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    styles.button,\n    className,\n    when(outline, styles.outline),\n    when(withIcon, styles.withIcon),\n    when(fullWidth, styles.fullWidth),\n    when(link, styles.link),\n    when(disabled, styles.disabled),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonComponentProps\n>(function Button(props, ref) {\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n\n  if (typeof href === 'string') {\n    return (\n      <a\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={href}\n        className={className}\n        {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) return;\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled}\n      onClick={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </button>\n  );\n});\n"],"mappings":";;;;;AAqCA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,EACpB,WAAW,MACX,SACA,WACA,YAAY,OACZ,OAAO,OACP,eAEA,GACE,OAAO,QACP,WACA,KAAK,SAAS,OAAO,OAAO,GAC5B,KAAK,UAAU,OAAO,QAAQ,GAC9B,KAAK,WAAW,OAAO,SAAS,GAChC,KAAK,MAAM,OAAO,IAAI,GACtB,KAAK,UAAU,OAAO,QAAQ,CAChC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,SAAS,WAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,oBAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/button/button.module.scss

@@ -0,0 +1,95 @@
+@import '../../styles/vars.scss';
+
+.button {
+  box-sizing: border-box;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  padding: 10px 18px;
+  border-radius: 30px;
+  font-size: 14px;
+  line-height: 20px;
+  background-color: $colorBlack;
+  color: $colorWhite;
+  fill: $colorWhite;
+  font-weight: bold;
+  font-family: $mainFontName;
+  border: 2px solid $colorBlack;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: none;
+  gap: 5px;
+  text-decoration: none;
+
+  &.active,
+  &.disabled,
+  &:active,
+  &:disabled {
+    background-color: $colorGray;
+    color: $colorGrayIcon;
+    fill: $colorGrayIcon;
+    border-color: $colorGray;
+  }
+
+  &.disabled,
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.outline {
+  background-color: transparent;
+  color: $colorBlack;
+  fill: $colorBlack;
+  max-height: 40px;
+  border: 2px solid $colorBlack;
+
+  &:disabled {
+    background-color: transparent;
+    border: 2px solid $colorBlack;
+  }
+}
+
+.fullWidth {
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+}
+
+.withIcon {
+  padding: 8px 18px 8px 14px;
+  gap: 5px;
+  text-align: left;
+
+  .icon {
+    flex-shrink: 0;
+  }
+}
+
+.link {
+  border: none;
+  background-color: transparent;
+  color: $colorBlack;
+  fill: $colorBlack;
+  border-radius: 0;
+  padding: 0;
+
+  &:active,
+  &:disabled {
+    background-color: transparent;
+    color: rgba(0, 0, 0, 0.5);
+    fill: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.disabled {
+  background-color: $colorGray;
+  color: $colorGrayIcon;
+  fill: $colorGrayIcon;
+  border-color: $colorGray;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}

package/dist/components/button/index.d.cts

@@ -0,0 +1,2 @@
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./button.cjs";
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps };

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./button.js";
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps };

package/dist/components/checkbox/checkbox.cjs

@@ -0,0 +1,29 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_checkbox_checkbox_module_scss = require("./checkbox.module.scss");
+src_components_checkbox_checkbox_module_scss = require_runtime.__toESM(src_components_checkbox_checkbox_module_scss, 1);
+// src/components/checkbox/checkbox.tsx
+const CheckboxInput = (0, react.forwardRef)(function CheckboxInput({ className, id, title, hide, disabled, withCursor = true, ...props }, ref) {
+	const autoId = (0, react.useId)();
+	const inputId = id ?? autoId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_cn.cn(src_components_checkbox_checkbox_module_scss.default.checkbox, className, require_cn.when(hide, src_components_checkbox_checkbox_module_scss.default.hide)),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			type: "checkbox",
+			id: inputId,
+			disabled,
+			className: require_cn.cn(src_components_checkbox_checkbox_module_scss.default.input, require_cn.when(!withCursor, src_components_checkbox_checkbox_module_scss.default.noEvents)),
+			...props
+		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: src_components_checkbox_checkbox_module_scss.default.label,
+			htmlFor: inputId,
+			children: title.replaceAll("-", "–")
+		}) : null]
+	});
+});
+exports.CheckboxInput = CheckboxInput;
+
+//# sourceMappingURL=checkbox.cjs.map

package/dist/components/checkbox/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","names":["forwardRef","useId","cn","styles","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './checkbox.module.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  hide?: boolean;\n  withCursor?: boolean;\n}\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { className, id, title, hide, disabled, withCursor = true, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn(styles.checkbox, className, when(hide, styles.hide))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(styles.input, when(!withCursor, styles.noEvents))}\n          {...props}\n        />\n        {title ? (\n          <label className={styles.label} htmlFor={inputId}>\n            {title.replaceAll('-', '–')}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAWA,MAAa,iBAAA,GAAgBA,MAAAA,WAAAA,CAC3B,SAAS,cACP,EAAE,WAAW,IAAI,OAAO,MAAM,UAAU,aAAa,MAAM,GAAG,SAC9D,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAGC,6CAAAA,QAAO,UAAU,WAAWC,WAAAA,KAAK,MAAMD,6CAAAA,QAAO,IAAI,CAAC;EAAtE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAWD,WAAAA,GAAGC,6CAAAA,QAAO,OAAOC,WAAAA,KAAK,CAAC,YAAYD,6CAAAA,QAAO,QAAQ,CAAC;GAC9D,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAWA,6CAAAA,QAAO;GAAO,SAAS;GACtC,UAAA,MAAM,WAAW,KAAK,GAAG;EACrB,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.d.cts

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from "react";
+export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  title?: string;
+  hide?: boolean;
+  withCursor?: boolean;
+}
+export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from "react";
+export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  title?: string;
+  hide?: boolean;
+  withCursor?: boolean;
+}
+export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,27 @@
+import { cn, when } from "../../lib/cn.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./checkbox.module.scss";
+// src/components/checkbox/checkbox.tsx
+const CheckboxInput = forwardRef(function CheckboxInput({ className, id, title, hide, disabled, withCursor = true, ...props }, ref) {
+	const autoId = useId();
+	const inputId = id ?? autoId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(styles.checkbox, className, when(hide, styles.hide)),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: "checkbox",
+			id: inputId,
+			disabled,
+			className: cn(styles.input, when(!withCursor, styles.noEvents)),
+			...props
+		}), title ? /* @__PURE__ */ jsx("label", {
+			className: styles.label,
+			htmlFor: inputId,
+			children: title.replaceAll("-", "–")
+		}) : null]
+	});
+});
+export { CheckboxInput };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './checkbox.module.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  hide?: boolean;\n  withCursor?: boolean;\n}\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { className, id, title, hide, disabled, withCursor = true, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn(styles.checkbox, className, when(hide, styles.hide))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(styles.input, when(!withCursor, styles.noEvents))}\n          {...props}\n        />\n        {title ? (\n          <label className={styles.label} htmlFor={inputId}>\n            {title.replaceAll('-', '–')}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAWA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,WAAW,IAAI,OAAO,MAAM,UAAU,aAAa,MAAM,GAAG,SAC9D,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,UAAU,WAAW,KAAK,MAAM,OAAO,IAAI,CAAC;EAAtE,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAW,GAAG,OAAO,OAAO,KAAK,CAAC,YAAY,OAAO,QAAQ,CAAC;GAC9D,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAW,OAAO;GAAO,SAAS;GACtC,UAAA,MAAM,WAAW,KAAK,GAAG;EACrB,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.module.scss

@@ -0,0 +1,110 @@
+@import '../../styles/vars.scss';
+
+@function get-check-icon($color: 'fff') {
+  @return url("data:image/svg+xml,%3Csvg fill='%23#{$color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20px' height='20px'%3E%3Cpath d='M15.71,6.29c-0.39-0.39-1.02-0.39-1.41,0c-0.31,0.31-3.76,3.76-5.29,5.29c-0.81-0.81-2.01-2.01-2.29-2.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,2.61,2.61,3,3c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,5.61-5.61,6-6C16.1,7.32,16.1,6.68,15.71,6.29z'/%3E%3C/svg%3E");
+}
+
+.checkbox {
+  display: flex;
+  align-items: flex-start;
+}
+
+.hide {
+  display: none;
+}
+
+.label {
+  font-size: 14px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding-left: 5px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.input {
+  --active: #000;
+  --active-inner: #fff;
+  --border: #e5e5e5;
+  --border-hover: #000;
+  --background: #fff;
+  --disabled: #e5e5e5;
+  --disabled-inner: #e5e5e5;
+  box-sizing: border-box;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  flex-shrink: 0;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  border-radius: 5px;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.2s;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    transition: opacity var(--d-o, 0.2s);
+    opacity: var(--o, 0);
+    background-position: center;
+    background-image: get-check-icon();
+  }
+
+  &:required:not(:hover):not(:checked):not(:disabled) {
+    border: 1px solid $colorRed;
+  }
+
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --o: 1;
+  }
+
+  &:hover:not(:checked):not(:disabled) {
+    border-width: 2px;
+    --bc: var(--active);
+  }
+
+  &:focus {
+    border-color: var(--border-hover);
+    border-width: 2px;
+  }
+
+  &:disabled {
+    --b: var(--disabled);
+    border: 1px solid var(--disabled);
+    cursor: not-allowed;
+    opacity: 1;
+
+    &:checked {
+      --b: var(--disabled-inner);
+
+      &::after {
+        background-image: get-check-icon('727272');
+      }
+    }
+
+    & + .label {
+      color: $colorGrayTwo;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.noEvents {
+  pointer-events: none;
+}

package/dist/components/checkbox/index.d.cts

@@ -0,0 +1,2 @@
+import { CheckboxInput, CheckboxInputProps } from "./checkbox.cjs";
+export { CheckboxInput, type CheckboxInputProps };

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxInput, CheckboxInputProps } from "./checkbox.js";
+export { CheckboxInput, type CheckboxInputProps };

package/dist/components/input/index.d.cts

@@ -0,0 +1,2 @@
+import { Input, InputProps } from "./input.cjs";
+export { Input, type InputProps };

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+import { Input, InputProps } from "./input.js";
+export { Input, type InputProps };

package/dist/components/input/input.cjs

@@ -0,0 +1,20 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_components_input_input_module_scss = require("./input.module.scss");
+src_components_input_input_module_scss = require_runtime.__toESM(src_components_input_input_module_scss, 1);
+// src/components/input/input.tsx
+const Input = (0, react.forwardRef)(function Input({ type = "text", recommended, error, className, disabled, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		type,
+		disabled,
+		"aria-invalid": error || void 0,
+		className: require_cn.cn(src_components_input_input_module_scss.default.input, className, require_cn.when(recommended, src_components_input_input_module_scss.default["input--recommended"]), require_cn.when(error, src_components_input_input_module_scss.default["input--error"])),
+		...props
+	});
+});
+exports.Input = Input;
+
+//# sourceMappingURL=input.cjs.map

package/dist/components/input/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs","names":["forwardRef","cn","styles","when"],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './input.module.scss';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  recommended?: boolean;\n  error?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { type = 'text', recommended, error, className, disabled, ...props },\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      aria-invalid={error || undefined}\n      className={cn(\n        styles.input,\n        className,\n        when(recommended, styles['input--recommended']),\n        when(error, styles['input--error']),\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAUA,MAAa,SAAA,GAAQA,MAAAA,WAAAA,CAAyC,SAAS,MACrE,EAAE,OAAO,QAAQ,aAAa,OAAO,WAAW,UAAU,GAAG,SAC7D,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACO;EACC;EACI;EACV,gBAAc,SAAS,KAAA;EACvB,WAAWC,WAAAA,GACTC,uCAAAA,QAAO,OACP,WACAC,WAAAA,KAAK,aAAaD,uCAAAA,QAAO,qBAAqB,GAC9CC,WAAAA,KAAK,OAAOD,uCAAAA,QAAO,eAAe,CACpC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/input/input.d.cts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  recommended?: boolean;
+  error?: boolean;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input.d.cts.map

package/dist/components/input/input.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  recommended?: boolean;
+  error?: boolean;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -0,0 +1,18 @@
+import { cn, when } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./input.module.scss";
+// src/components/input/input.tsx
+const Input = forwardRef(function Input({ type = "text", recommended, error, className, disabled, ...props }, ref) {
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type,
+		disabled,
+		"aria-invalid": error || void 0,
+		className: cn(styles.input, className, when(recommended, styles["input--recommended"]), when(error, styles["input--error"])),
+		...props
+	});
+});
+export { Input };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './input.module.scss';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  recommended?: boolean;\n  error?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { type = 'text', recommended, error, className, disabled, ...props },\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      aria-invalid={error || undefined}\n      className={cn(\n        styles.input,\n        className,\n        when(recommended, styles['input--recommended']),\n        when(error, styles['input--error']),\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,OAAO,QAAQ,aAAa,OAAO,WAAW,UAAU,GAAG,SAC7D,KACA;CACA,OACE,oBAAC,SAAD;EACO;EACC;EACI;EACV,gBAAc,SAAS,KAAA;EACvB,WAAW,GACT,OAAO,OACP,WACA,KAAK,aAAa,OAAO,qBAAqB,GAC9C,KAAK,OAAO,OAAO,eAAe,CACpC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}