@de-kit/st-ui 0.1.0 → 0.1.2

package/README.md

@@ -1,13 +1,12 @@
 # @de-kit/st-ui
 
-React-компоненты splittest. Стили — SCSS-модули, токены скопированы из `splittest-frontend/src/app/styles`. Tailwind нет.
+React-компоненты splittest. Стили едут вместе с компонентом (глобальный SCSS, не CSS-модули). Токены скопированы из `splittest-frontend/src/app/styles`. Tailwind нет.
 
 ## Подключение
 
-В CRA (sass уже стоит):
+В CRA и в Vite отдельный импорт CSS не нужен — `import './button.scss'` сидит внутри компонента:
 
 ```tsx
-import '@de-kit/st-ui/global.scss';
 import {
   Button,
   Input,
@@ -20,14 +19,15 @@ import {
 
 `global.scss` — база приложения (body, заголовки, таблицы, `.wrapper`). В чужой странице его не подключать. Шрифт Inter библиотека не везёт, его по-прежнему грузит фронтенд.
 
-Свои экраны могут брать те же переменные:
+Токены подключаются один раз вместе с пакетом (`import './styles/vars.scss'` в `src/index.ts`). В своих scss это обычные `var()`, `@use` не нужен. `@use '@de-kit/st-ui/vars.scss'` — только если стили собираются без JS. Миксины отдельно:
 
 ```scss
-@import '@de-kit/st-ui/vars.scss';
-@import '@de-kit/st-ui/mixins.scss';
+@use '@de-kit/st-ui/mixins.scss' as mixins;
 ```
 
-Компонентный css собирает sass-loader приложения: js импортирует `*.module.scss`, классы хешируются на стороне хоста.
+`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`.
 
 ## Кнопка
 
@@ -35,20 +35,22 @@ import {
 
 ```tsx
 <Button onClick={save}>Сохранить</Button>
-<Button outline>Отмена</Button>
-<Button transparent disabled>Скрыть</Button>
+<Button variant="outline">Отмена</Button>
+<Button variant="link" disabled>Скрыть</Button>
 <Button href="/prices">Тарифы</Button>
+<Button size="sm">Маленькая</Button>
+<Button size="lg">Крупная</Button>
 <Button fullWidth>Дальше</Button>
 ```
 
-| Prop                                                       | По умолчанию |                                            |
-| ---------------------------------------------------------- | ------------ | ------------------------------------------ |
-| `transparent` / `outline` / `empty` / `link` / `nopadding` | `false`      | варианты из `index.module.scss` приложения |
-| `withIcon`                                                 | `true`       | как в приложении: левый паддинг под иконку |
-| `fullWidth`                                                | `false`      | `width: 100%`                              |
-| `href`                                                     | —            | рендер `<a>`, не `<Link>`                  |
+| Prop        | По умолчанию |                                                    |
+| ----------- | ------------ | -------------------------------------------------- |
+| `variant`   | `default`    | `default` заливка, `outline` обводка, `link` текст |
+| `size`      | `md`         | `sm` компактная, `md` обычная, `lg` крупная        |
+| `fullWidth` | `false`      | ширина 100%, не зависит от `size`                  |
+| `href`      | —            | рендер `<a>`, не `<Link>`                          |
 
-`link` — это `font-weight: 400`, не тип элемента.
+`variant="link"` — это вид кнопки (`font-weight: 400`), не тип элемента. Ссылка — отдельный проп `href`.
 
 ## Остальные
 
@@ -70,5 +72,5 @@ import {
 pnpm install
 pnpm dev       # Storybook, :6006
 pnpm test
-pnpm build     # dist: js + d.ts + scss рядом с модулями
+pnpm build     # dist: js + d.ts + scss рядом с компонентами
 ```

package/dist/components/button/button.cjs

@@ -1,18 +1,15 @@
-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);
+require("./button.scss");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/components/button/button.tsx
 const styleKeys = [
-	"outline",
-	"withIcon",
+	"variant",
+	"size",
 	"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 getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => require_cn.cn("button", className, `button--${variant}`, `button--${size}`, require_cn.when(fullWidth, "button--full-width"), require_cn.when(disabled, "button--disabled"));
 const omitStyleProps = (props) => {
 	const next = {};
 	const skipped = new Set(styleKeys);

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

@@ -1 +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"}
+{"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\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: 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 = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  className,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    'button',\n    className,\n    `button--${variant}`,\n    `button--${size}`,\n    when(fullWidth, 'button--full-width'),\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;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEAA,WAAAA,GACE,UACA,WACA,WAAW,WACX,WAAW,QACXC,WAAAA,KAAK,WAAW,oBAAoB,GACpCA,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

@@ -1,11 +1,10 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+export type ButtonVariant = 'default' | 'outline' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonStyleProps {
-  outline?: boolean;
-  /** В приложении по умолчанию true: левый паддинг под иконку. */
-  withIcon?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
   fullWidth?: boolean;
-  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */
-  link?: boolean;
   className?: string;
   children?: ReactNode;
 }

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

@@ -1,11 +1,10 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+export type ButtonVariant = 'default' | 'outline' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonStyleProps {
-  outline?: boolean;
-  /** В приложении по умолчанию true: левый паддинг под иконку. */
-  withIcon?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
   fullWidth?: boolean;
-  /** Визуальный вес ссылки (font-weight: 400), не тип элемента. */
-  link?: boolean;
   className?: string;
   children?: ReactNode;
 }

package/dist/components/button/button.js

@@ -1,16 +1,15 @@
 import { cn, when } from "../../lib/cn.js";
 import { forwardRef } from "react";
-import styles from "./button.module.scss";
+import "./button.scss";
 import { jsx } from "react/jsx-runtime";
 // src/components/button/button.tsx
 const styleKeys = [
-	"outline",
-	"withIcon",
+	"variant",
+	"size",
 	"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 getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => cn("button", className, `button--${variant}`, `button--${size}`, when(fullWidth, "button--full-width"), when(disabled, "button--disabled"));
 const omitStyleProps = (props) => {
 	const next = {};
 	const skipped = new Set(styleKeys);

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

@@ -1 +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"}
+{"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\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: 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 = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  className,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    'button',\n    className,\n    `button--${variant}`,\n    `button--${size}`,\n    when(fullWidth, 'button--full-width'),\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;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEA,GACE,UACA,WACA,WAAW,WACX,WAAW,QACX,KAAK,WAAW,oBAAoB,GACpC,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,94 @@
+.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);
+    border: 2px solid var(--color-black);
+
+    &:disabled {
+      background-color: transparent;
+      border: 2px solid var(--color-black);
+    }
+  }
+
+  &--sm {
+    padding: 6px 12px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &--lg {
+    padding: 14px 24px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &--full-width {
+    width: 100%;
+    justify-content: center;
+  }
+
+  &--link {
+    border: none;
+    background-color: transparent;
+    color: var(--color-black);
+    fill: var(--color-black);
+    border-radius: 0;
+    padding: 0;
+    font-weight: 400;
+
+    &: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

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

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

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

package/dist/components/checkbox/checkbox.cjs

@@ -1,24 +1,22 @@
-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);
+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(src_components_checkbox_checkbox_module_scss.default.checkbox, className, require_cn.when(hide, src_components_checkbox_checkbox_module_scss.default.hide)),
+		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(src_components_checkbox_checkbox_module_scss.default.input, require_cn.when(!withCursor, src_components_checkbox_checkbox_module_scss.default.noEvents)),
+			className: require_cn.cn("checkbox__input", require_cn.when(!withCursor, "checkbox__input--no-events")),
 			...props
 		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			className: src_components_checkbox_checkbox_module_scss.default.label,
+			className: "checkbox__label",
 			htmlFor: inputId,
 			children: title.replaceAll("-", "–")
 		}) : null]

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

@@ -1 +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"}
+{"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.js

@@ -1,22 +1,22 @@
 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";
+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(styles.checkbox, className, when(hide, styles.hide)),
+		className: cn("checkbox", className, when(hide, "checkbox--hide")),
 		children: [/* @__PURE__ */ jsx("input", {
 			ref,
 			type: "checkbox",
 			id: inputId,
 			disabled,
-			className: cn(styles.input, when(!withCursor, styles.noEvents)),
+			className: cn("checkbox__input", when(!withCursor, "checkbox__input--no-events")),
 			...props
 		}), title ? /* @__PURE__ */ jsx("label", {
-			className: styles.label,
+			className: "checkbox__label",
 			htmlFor: inputId,
 			children: title.replaceAll("-", "–")
 		}) : null]

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

@@ -1 +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"}
+{"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.module.scss → checkbox.scss}

@@ -1,5 +1,3 @@
-@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");
 }
@@ -7,13 +5,13 @@
 .checkbox {
   display: flex;
   align-items: flex-start;
-}
 
-.hide {
-  display: none;
+  &--hide {
+    display: none;
+  }
 }
 
-.label {
+.checkbox__label {
   font-size: 14px;
   line-height: 20px;
   display: inline-block;
@@ -23,7 +21,7 @@
   cursor: pointer;
 }
 
-.input {
+.checkbox__input {
   --active: #000;
   --active-inner: #fff;
   --border: #e5e5e5;
@@ -65,7 +63,7 @@
   }
 
   &:required:not(:hover):not(:checked):not(:disabled) {
-    border: 1px solid $colorRed;
+    border: 1px solid var(--color-red);
   }
 
   &:checked {
@@ -98,13 +96,13 @@
       }
     }
 
-    & + .label {
-      color: $colorGrayTwo;
+    & + .checkbox__label {
+      color: var(--color-gray);
       cursor: not-allowed;
     }
   }
-}
 
-.noEvents {
-  pointer-events: none;
+  &--no-events {
+    pointer-events: none;
+  }
 }

package/dist/components/input/input.cjs

@@ -1,9 +1,7 @@
-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);
+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", {
@@ -11,7 +9,7 @@ const Input = (0, react.forwardRef)(function Input({ type = "text", recommended,
 		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"])),
+		className: require_cn.cn("input", className, require_cn.when(recommended, "input--recommended"), require_cn.when(error, "input--error")),
 		...props
 	});
 });

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

@@ -1 +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"}
+{"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.js

@@ -1,7 +1,7 @@
 import { cn, when } from "../../lib/cn.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import styles from "./input.module.scss";
+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", {
@@ -9,7 +9,7 @@ const Input = forwardRef(function Input({ type = "text", recommended, error, cla
 		type,
 		disabled,
 		"aria-invalid": error || void 0,
-		className: cn(styles.input, className, when(recommended, styles["input--recommended"]), when(error, styles["input--error"])),
+		className: cn("input", className, when(recommended, "input--recommended"), when(error, "input--error")),
 		...props
 	});
 });

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

@@ -1 +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"}
+{"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"}

package/dist/components/input/{input.module.scss → input.scss}

@@ -1,5 +1,3 @@
-@import '../../styles/vars.scss';
-
 .input {
   box-sizing: border-box;
   display: flex;
@@ -9,11 +7,11 @@
   font-size: 14px;
   line-height: 20px;
   background-color: transparent;
-  color: $colorBlack;
-  border-radius: $borderRadius;
+  color: var(--color-black);
+  border-radius: var(--radius-sm);
   appearance: none;
-  font-family: $mainFontName;
-  border: 1px solid $borderInputColor;
+  font-family: var(--font-sans);
+  border: 1px solid var(--color-input);
   outline: none;
   transition:
     background 0.3s,
@@ -46,21 +44,21 @@
   }
 
   &:focus {
-    border-color: $colorBlack;
-    box-shadow: 0 0 0 1px $colorBlack;
+    border-color: var(--color-black);
+    box-shadow: 0 0 0 1px var(--color-black);
   }
 
   &:disabled {
-    background-color: $colorGray;
-    color: $colorGrayIcon;
-    fill: $colorGrayIcon;
+    background-color: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    fill: var(--color-neutral-500);
   }
 
   &--recommended {
-    background-color: $inputRecomendBg;
+    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
   }
 
   &--error {
-    border-color: $inputErrorBorder;
+    border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
   }
 }

package/dist/components/radio/radio.cjs

@@ -1,24 +1,22 @@
-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_radio_radio_module_scss = require("./radio.module.scss");
-src_components_radio_radio_module_scss = require_runtime.__toESM(src_components_radio_radio_module_scss, 1);
+require("./radio.scss");
 // src/components/radio/radio.tsx
 const RadioInput = (0, react.forwardRef)(function RadioInput({ id, className, title, error, disabled, ...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_radio_radio_module_scss.default.radio, className),
+		className: require_cn.cn("radio", className, require_cn.when(error, "radio--error")),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref,
 			type: "radio",
 			id: inputId,
 			disabled,
-			className: require_cn.cn(src_components_radio_radio_module_scss.default.input, require_cn.when(error, src_components_radio_radio_module_scss.default.error)),
+			className: "radio__input",
 			...props
 		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			className: src_components_radio_radio_module_scss.default.label,
+			className: "radio__label",
 			htmlFor: inputId,
 			children: title
 		}) : null]

package/dist/components/radio/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["forwardRef","useId","cn","styles","when"],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './radio.module.scss';\n\nexport interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  error?: boolean;\n}\n\nexport const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(\n  function RadioInput(\n    { id, className, title, error, disabled, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn(styles.radio, className)}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(styles.input, when(error, styles.error))}\n          {...props}\n        />\n        {title ? (\n          <label className={styles.label} htmlFor={inputId}>\n            {title}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAUA,MAAa,cAAA,GAAaA,MAAAA,WAAAA,CACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,GAAG,SAC5C,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAGC,uCAAAA,QAAO,OAAO,SAAS;EAA1C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAWD,WAAAA,GAAGC,uCAAAA,QAAO,OAAOC,WAAAA,KAAK,OAAOD,uCAAAA,QAAO,KAAK,CAAC;GACrD,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAWA,uCAAAA,QAAO;GAAO,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"radio.cjs","names":["forwardRef","useId","cn","when"],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './radio.scss';\n\nexport interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  error?: boolean;\n}\n\nexport const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(\n  function RadioInput(\n    { id, className, title, error, disabled, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('radio', className, when(error, 'radio--error'))}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          disabled={disabled}\n          className=\"radio__input\"\n          {...props}\n        />\n        {title ? (\n          <label className=\"radio__label\" htmlFor={inputId}>\n            {title}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAUA,MAAa,cAAA,GAAaA,MAAAA,WAAAA,CACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,GAAG,SAC5C,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,SAAS,WAAWC,WAAAA,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAU;GACV,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}