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

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, не CSS-модули). Токены скопированы из `splittest-frontend/src/app/styles`. Tailwind нет.
+
+## Подключение
+
+В CRA и в Vite отдельный импорт CSS не нужен — `import './button.scss'` сидит внутри компонента:
+
+```tsx
+import {
+  Button,
+  Input,
+  TextArea,
+  CheckboxInput,
+  RadioInput,
+  Spinner,
+} from '@de-kit/st-ui';
+```
+
+`global.scss` — база приложения (body, заголовки, таблицы, `.wrapper`). В чужой странице его не подключать. Шрифт Inter библиотека не везёт, его по-прежнему грузит фронтенд.
+
+Токены подключаются один раз вместе с пакетом (`import './styles/vars.scss'` в `src/index.ts`). В своих scss это обычные `var()`, `@use` не нужен. `@use '@de-kit/st-ui/vars.scss'` — только если стили собираются без JS. Миксины отдельно:
+
+```scss
+@use '@de-kit/st-ui/mixins.scss' as mixins;
+```
+
+`var(--color-black)`, `var(--font-sans)`, `var(--radius-sm)`, `var(--breakpoint-md)`. Имена как у Tailwind, значения splittest.
+
+Компонентный scss собирает sass хоста. Класс в DOM буквальный: `button`, `input`, `checkbox`, `radio`, `textarea`, `spinner`. Корень и модификаторы одинарные (`.button`, `.button--outline`). Внутренние элементы — BEM: `checkbox__input`, `textarea__counter`.
+
+## Кнопка
+
+Пропсы как в `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/components/button/button.cjs

@@ -0,0 +1,47 @@
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+require("./button.scss");
+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("button", className, require_cn.when(outline, "button--outline"), require_cn.when(withIcon, "button--with-icon"), require_cn.when(fullWidth, "button--full-width"), require_cn.when(link, "button--link"), require_cn.when(disabled, "button--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","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 './button.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    'button',\n    className,\n    when(outline, 'button--outline'),\n    when(withIcon, 'button--with-icon'),\n    when(fullWidth, 'button--full-width'),\n    when(link, 'button--link'),\n    when(disabled, 'button--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,GACE,UACA,WACAC,WAAAA,KAAK,SAAS,iBAAiB,GAC/BA,WAAAA,KAAK,UAAU,mBAAmB,GAClCA,WAAAA,KAAK,WAAW,oBAAoB,GACpCA,WAAAA,KAAK,MAAM,cAAc,GACzBA,WAAAA,KAAK,UAAU,kBAAkB,CACnC;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,GAASC,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 "./button.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("button", className, when(outline, "button--outline"), when(withIcon, "button--with-icon"), when(fullWidth, "button--full-width"), when(link, "button--link"), when(disabled, "button--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 './button.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    'button',\n    className,\n    when(outline, 'button--outline'),\n    when(withIcon, 'button--with-icon'),\n    when(fullWidth, 'button--full-width'),\n    when(link, 'button--link'),\n    when(disabled, 'button--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,UACA,WACA,KAAK,SAAS,iBAAiB,GAC/B,KAAK,UAAU,mBAAmB,GAClC,KAAK,WAAW,oBAAoB,GACpC,KAAK,MAAM,cAAc,GACzB,KAAK,UAAU,kBAAkB,CACnC;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.scss

@@ -0,0 +1,93 @@
+.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: var(--color-black);
+  color: var(--color-white);
+  fill: var(--color-white);
+  font-weight: bold;
+  font-family: var(--font-sans);
+  border: 2px solid var(--color-black);
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: none;
+  gap: 5px;
+  text-decoration: none;
+
+  &:active {
+    background-color: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    fill: var(--color-neutral-500);
+    border-color: var(--color-neutral-200);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    fill: var(--color-neutral-500);
+    border-color: var(--color-neutral-200);
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &--outline {
+    background-color: transparent;
+    color: var(--color-black);
+    fill: var(--color-black);
+    max-height: 40px;
+    border: 2px solid var(--color-black);
+
+    &:disabled {
+      background-color: transparent;
+      border: 2px solid var(--color-black);
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+    text-align: center;
+    justify-content: center;
+  }
+
+  &--with-icon {
+    padding: 8px 18px 8px 14px;
+    gap: 5px;
+    text-align: left;
+
+    .icon {
+      flex-shrink: 0;
+    }
+  }
+
+  &--link {
+    border: none;
+    background-color: transparent;
+    color: var(--color-black);
+    fill: var(--color-black);
+    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: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    fill: var(--color-neutral-500);
+    border-color: var(--color-neutral-200);
+    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,27 @@
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./checkbox.scss");
+// 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("checkbox", className, require_cn.when(hide, "checkbox--hide")),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			type: "checkbox",
+			id: inputId,
+			disabled,
+			className: require_cn.cn("checkbox__input", require_cn.when(!withCursor, "checkbox__input--no-events")),
+			...props
+		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: "checkbox__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","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './checkbox.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('checkbox', className, when(hide, 'checkbox--hide'))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(\n            'checkbox__input',\n            when(!withCursor, 'checkbox__input--no-events'),\n          )}\n          {...props}\n        />\n        {title ? (\n          <label className=\"checkbox__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,GAAG,YAAY,WAAWC,WAAAA,KAAK,MAAM,gBAAgB,CAAC;EAAtE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAWD,WAAAA,GACT,mBACAC,WAAAA,KAAK,CAAC,YAAY,4BAA4B,CAChD;GACA,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,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 "./checkbox.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("checkbox", className, when(hide, "checkbox--hide")),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: "checkbox",
+			id: inputId,
+			disabled,
+			className: cn("checkbox__input", when(!withCursor, "checkbox__input--no-events")),
+			...props
+		}), title ? /* @__PURE__ */ jsx("label", {
+			className: "checkbox__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 './checkbox.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('checkbox', className, when(hide, 'checkbox--hide'))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(\n            'checkbox__input',\n            when(!withCursor, 'checkbox__input--no-events'),\n          )}\n          {...props}\n        />\n        {title ? (\n          <label className=\"checkbox__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,YAAY,WAAW,KAAK,MAAM,gBAAgB,CAAC;EAAtE,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAW,GACT,mBACA,KAAK,CAAC,YAAY,4BAA4B,CAChD;GACA,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA,MAAM,WAAW,KAAK,GAAG;EACrB,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.scss

@@ -0,0 +1,108 @@
+@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;
+  }
+}
+
+.checkbox__label {
+  font-size: 14px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding-left: 5px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.checkbox__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 var(--color-red);
+  }
+
+  &: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');
+      }
+    }
+
+    & + .checkbox__label {
+      color: var(--color-gray);
+      cursor: not-allowed;
+    }
+  }
+
+  &--no-events {
+    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,18 @@
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./input.scss");
+// 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("input", className, require_cn.when(recommended, "input--recommended"), require_cn.when(error, "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","when"],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './input.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        'input',\n        className,\n        when(recommended, 'input--recommended'),\n        when(error, '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,GACT,SACA,WACAC,WAAAA,KAAK,aAAa,oBAAoB,GACtCA,WAAAA,KAAK,OAAO,cAAc,CAC5B;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 "./input.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("input", className, when(recommended, "input--recommended"), when(error, "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 './input.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        'input',\n        className,\n        when(recommended, 'input--recommended'),\n        when(error, '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,SACA,WACA,KAAK,aAAa,oBAAoB,GACtC,KAAK,OAAO,cAAc,CAC5B;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}