@shmidko61/lc-ui-kit 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,90 +1,92 @@
-import { Accordion as a, AccordionItem as r, AccordionRoot as n } from "./accordion.js";
+import { Accordion as r, AccordionItem as a, AccordionRoot as n } from "./accordion.js";
 import { Box as i } from "./box.js";
 import { Button as s, buttonSizeBorderRadius as p, buttonSizeBoxProps as l, buttonSizeClassNames as I, buttonVariantClassNames as d, buttonVariants as m } from "./button.js";
 import { U as x, u as b, a as f, b as u } from "./ui-kit-provider-C6Mk5g_7.js";
 import { Flex as C } from "./flex.js";
-import { Grid as M, GridItem as g } from "./grid.js";
-import { ArrowCornerIcon as y, ArrowIcon as B, BurgerIcon as P, CheckIcon as A, CopyIcon as w, DropDown as G, EyeOpenIcon as v, FileIcon as D, GeminiStarIcon as K, GeoIcon as U, LockClosedIcon as V, LockOpenIcon as z, LogoutIcon as F, MailIcon as L, MediaMaxIcon as N, MediaPictureIcon as R, MediaTgIcon as H, MediaVkIcon as O, MediaWaIcon as W, NetUploadIcon as j, PaperclipIcon as E, PhoneIcon as X, PlusIcon as q, SaveIcon as J, SparkIcon as Q, SparkleIcon as Y, TelephoneIcon as Z, TimeClockIcon as _, TrashIcon as $, XMarkIcon as oo } from "./icons.js";
-import { Input as ao } from "./input.js";
-import { MediaCard as no } from "./media-card.js";
-import { MediaGallery as io } from "./media-gallery.js";
-import { Pagination as so } from "./pagination.js";
-import { Picture as lo } from "./picture.js";
-import { Select as mo } from "./select.js";
-import { r as xo, a as bo } from "./responsive-style.config-DFuATrIM.js";
-import { StatusBadge as uo } from "./status-badge.js";
-import { Switch as Co } from "./switch.js";
-import { D as Mo, T as go, a as ho, b as yo, c as Bo, d as Po, e as Ao, f as wo, g as Go, h as vo, i as Do, j as Ko, k as Uo } from "./table-container-BsE-uIE1.js";
+import { Grid as h, GridItem as S } from "./grid.js";
+import { ArrowCornerIcon as y, ArrowIcon as B, ArrowLongLeftIcon as A, ArrowheadRightIcon as P, BurgerIcon as w, CheckIcon as G, CopyIcon as L, DropDown as v, EyeOpenIcon as D, FileIcon as K, GeminiStarIcon as R, GeoIcon as U, LockClosedIcon as V, LockOpenIcon as z, LogoutIcon as F, MailIcon as N, MediaMaxIcon as H, MediaPictureIcon as O, MediaTgIcon as W, MediaVkIcon as j, MediaWaIcon as E, NetUploadIcon as X, PaperclipIcon as q, PhoneIcon as J, PlusIcon as Q, SaveIcon as Y, SparkIcon as Z, SparkleIcon as _, TelephoneIcon as $, TimeClockIcon as oo, TrashIcon as eo, XMarkIcon as ro } from "./icons.js";
+import { Input as no } from "./input.js";
+import { MediaCard as io } from "./media-card.js";
+import { MediaGallery as so } from "./media-gallery.js";
+import { Pagination as lo } from "./pagination.js";
+import { Picture as mo } from "./picture.js";
+import { Select as xo } from "./select.js";
+import { r as fo, a as uo } from "./responsive-style.config-DFuATrIM.js";
+import { StatusBadge as Co } from "./status-badge.js";
+import { Switch as ho } from "./switch.js";
+import { D as Mo, T as yo, a as Bo, b as Ao, c as Po, d as wo, e as Go, f as Lo, g as vo, h as Do, i as Ko, j as Ro, k as Uo } from "./table-container-BsE-uIE1.js";
 import { Typography as zo, typographyVariants as Fo } from "./typography.js";
 export {
-  a as Accordion,
-  r as AccordionItem,
+  r as Accordion,
+  a as AccordionItem,
   n as AccordionRoot,
   y as ArrowCornerIcon,
   B as ArrowIcon,
+  A as ArrowLongLeftIcon,
+  P as ArrowheadRightIcon,
   i as Box,
-  P as BurgerIcon,
+  w as BurgerIcon,
   s as Button,
-  A as CheckIcon,
-  w as CopyIcon,
+  G as CheckIcon,
+  L as CopyIcon,
   Mo as DataTable,
-  G as DropDown,
-  v as EyeOpenIcon,
-  D as FileIcon,
+  v as DropDown,
+  D as EyeOpenIcon,
+  K as FileIcon,
   C as Flex,
-  K as GeminiStarIcon,
+  R as GeminiStarIcon,
   U as GeoIcon,
-  M as Grid,
-  g as GridItem,
-  ao as Input,
+  h as Grid,
+  S as GridItem,
+  no as Input,
   V as LockClosedIcon,
   z as LockOpenIcon,
   F as LogoutIcon,
-  L as MailIcon,
-  no as MediaCard,
-  io as MediaGallery,
-  N as MediaMaxIcon,
-  R as MediaPictureIcon,
-  H as MediaTgIcon,
-  O as MediaVkIcon,
-  W as MediaWaIcon,
-  j as NetUploadIcon,
-  so as Pagination,
-  E as PaperclipIcon,
-  X as PhoneIcon,
-  lo as Picture,
-  q as PlusIcon,
-  J as SaveIcon,
-  mo as Select,
-  Q as SparkIcon,
-  Y as SparkleIcon,
-  uo as StatusBadge,
-  Co as Switch,
-  go as Table,
-  ho as TableBody,
-  yo as TableCaption,
-  Bo as TableCell,
-  Po as TableContainer,
-  Ao as TableFooter,
-  wo as TableHead,
-  Go as TableHeader,
-  vo as TableRow,
-  Do as TableScrollArea,
-  Ko as TableStatus,
+  N as MailIcon,
+  io as MediaCard,
+  so as MediaGallery,
+  H as MediaMaxIcon,
+  O as MediaPictureIcon,
+  W as MediaTgIcon,
+  j as MediaVkIcon,
+  E as MediaWaIcon,
+  X as NetUploadIcon,
+  lo as Pagination,
+  q as PaperclipIcon,
+  J as PhoneIcon,
+  mo as Picture,
+  Q as PlusIcon,
+  Y as SaveIcon,
+  xo as Select,
+  Z as SparkIcon,
+  _ as SparkleIcon,
+  Co as StatusBadge,
+  ho as Switch,
+  yo as Table,
+  Bo as TableBody,
+  Ao as TableCaption,
+  Po as TableCell,
+  wo as TableContainer,
+  Go as TableFooter,
+  Lo as TableHead,
+  vo as TableHeader,
+  Do as TableRow,
+  Ko as TableScrollArea,
+  Ro as TableStatus,
   Uo as TableToolbar,
-  Z as TelephoneIcon,
-  _ as TimeClockIcon,
-  $ as TrashIcon,
+  $ as TelephoneIcon,
+  oo as TimeClockIcon,
+  eo as TrashIcon,
   zo as Typography,
   x as UiKitProvider,
-  oo as XMarkIcon,
+  ro as XMarkIcon,
   p as buttonSizeBorderRadius,
   l as buttonSizeBoxProps,
   I as buttonSizeClassNames,
   d as buttonVariantClassNames,
   m as buttonVariants,
-  xo as responsiveBreakpointMinWidth,
-  bo as responsiveBreakpoints,
+  fo as responsiveBreakpointMinWidth,
+  uo as responsiveBreakpoints,
   Fo as typographyVariants,
   b as uiKitColorTokens,
   f as uiKitTypographyTokens,

package/dist/input/input.d.ts

@@ -1,10 +1,10 @@
 import { ChangeEventHandler, InputHTMLAttributes, JSX, ReactNode, TextareaHTMLAttributes } from 'react';
-import { InputPlaceholderProps } from './input.types';
-export type { InputPlaceholderProps, InputPlaceholderStyleProps } from './input.types';
+import { InputPlaceholderProps, InputTextProps } from './input.types';
+export type { InputPlaceholderProps, InputPlaceholderStyleProps, InputTextProps, InputTextStyleProps, } from './input.types';
 /** Варианты отображения поля ввода. */
 type InputVariant = 'default' | 'password' | 'textarea';
 /** Общие props для input и textarea режимов. */
-type InputBaseProps = {
+type InputBaseProps = InputTextProps & {
     /** Оформление placeholder с overrides md, lg, xl; по умолчанию сохраняется стиль UI-kit. */
     placeholderProps?: InputPlaceholderProps;
     /** Класс внешнего контейнера с label, control и сообщением. */
@@ -47,6 +47,6 @@ export type InputProps = NativeInputProps | TextareaInputProps;
  * textarea. Label, helper/error text и иконки встроены в компонент, чтобы
  * приложения использовали единый визуальный и accessibility-паттерн.
  */
-export declare function Input({ className, containerClassName, disabled, error, helperText, id, label, leftIcon, placeholderProps, style, rightIcon, variant, ...props }: InputProps): JSX.Element;
+export declare function Input({ className, containerClassName, disabled, error, helperText, id, label, leftIcon, fontSize, fontWeight, lineHeight, letterSpacing, fontFamily, md, lg, xl, placeholderProps, style, rightIcon, variant, ...props }: InputProps): JSX.Element;
 /** Универсальный тип change handler для input и textarea режимов. */
 export type InputChangeHandler = ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;

package/dist/input/input.helpers.d.ts

@@ -1,5 +1,10 @@
 import { CSSProperties, ReactNode } from 'react';
-import { InputPlaceholderProps } from './input.types';
+import { InputPlaceholderProps, InputTextProps } from './input.types';
+/** Генерирует типографику control через общий механизм CSS-переменных. */
+export declare function getInputTextPlan(props: InputTextProps): {
+    className: string;
+    style: CSSProperties;
+};
 /** Генерирует CSS-переменные и responsive-классы только для заданных свойств подсказки. */
 export declare function getInputPlaceholderPlan(props?: InputPlaceholderProps): {
     className: string;

package/dist/input/input.types.d.ts

@@ -1,7 +1,22 @@
 import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
-import { TypographyColorValue, TypographyFontSizeValue, TypographyFontWeightValue } from '../types';
+import { TypographyColorValue, TypographyFontSizeValue, TypographyFontWeightValue, TypographyLetterSpacingValue, TypographyLineHeightValue } from '../types';
+/** Типографика текста поля; числовой lineHeight — безразмерный множитель. */
+export type InputTextStyleProps = {
+    /** Размер текста: число в px, CSS-строка или токен. */
+    fontSize?: TypographyFontSizeValue;
+    /** Насыщенность текста или токен. */
+    fontWeight?: TypographyFontWeightValue;
+    /** Высота строки: множитель, CSS-строка или токен. */
+    lineHeight?: TypographyLineHeightValue;
+    /** Межбуквенное расстояние: число в px или CSS-строка; normal сбрасывает значение. */
+    letterSpacing?: TypographyLetterSpacingValue;
+    /** Семейство шрифта или токен; inherit возвращает наследование. */
+    fontFamily?: string;
+};
+/** Типографика control с наследованием отдельных свойств base → md → lg → xl. */
+export type InputTextProps = InputTextStyleProps & Partial<Record<ResponsiveStyleBreakpoint, InputTextStyleProps>>;
 /** Оформление placeholder; не влияет на введённый текст. */
-export type InputPlaceholderStyleProps = {
+export type InputPlaceholderStyleProps = InputTextStyleProps & {
     /** CSS-цвет или цветовой токен UI-kit. */
     color?: TypographyColorValue;
     /** Размер шрифта; число преобразуется в пиксели. */

package/dist/input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("react"),q=require("./icons.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs"),w=require("./typography.cjs");function _(o){const n=[],s={};for(const a of[void 0,...p.responsiveBreakpoints]){const r=a?o?.[a]:o;if(!r)continue;const u={color:r.color,"font-size":r.fontSize,"font-weight":r.fontWeight,opacity:r.opacity,"font-style":r.italic===void 0?void 0:r.italic?"italic":"normal"};for(const[i,e]of Object.entries(u)){if(e===void 0)continue;const d=`--input-placeholder-${a?`${a}-`:""}${i}`;s[d]=typeof e=="string"&&e.startsWith("--")?`var(${e})`:i==="font-size"&&typeof e=="number"?`${e}px`:e,n.push(`${a?`${a}:`:""}placeholder:[${i}:var(${d})]`)}}return{className:n.join(" "),style:s}}function T(o,n){return o&&typeof o!="boolean"?o:n}const N="w-full rounded-[8px] border border-transparent bg-[var(--color-background-subtle)] px-4 text-[14px] font-normal leading-[120%] text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-secondary)] focus-visible:border-[var(--color-primary-accent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:cursor-not-allowed disabled:opacity-50 [font-family:var(--font-family)] [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";function O({className:o,containerClassName:n,disabled:s,error:a=!1,helperText:r,id:u,label:i,leftIcon:e,placeholderProps:d,style:$,rightIcon:k,variant:x="default",...c}){const P=j.useId(),y=_(d),b={...y.style,...$},v=u??P,[g,z]=j.useState(!1),l=!!a,h=T(a,r),I=x==="textarea",m=x==="password",f=m?t.jsx("button",{"aria-label":g?"Скрыть значение":"Показать значение",disabled:s,type:"button",onClick:()=>z(S=>!S),children:t.jsx(q.EyeOpenIcon,{})}):k;return t.jsxs("div",{className:p.cn("grid w-full gap-2",n),children:[i?t.jsx(w.Typography,{as:"label",color:"--color-text-secondary",htmlFor:v,variant:"b3",children:i}):null,t.jsxs("div",{className:"relative w-full",children:[e&&t.jsx("span",{className:"pointer-events-none absolute left-4 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5",children:e}),I?t.jsx("textarea",{...c,"aria-invalid":l||c["aria-invalid"],className:p.cn(N,y.className,"min-h-[109px] resize-y px-4 py-3",l&&"border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",e&&"pl-12",o),disabled:s,style:b,id:v}):t.jsx("input",{...c,"aria-invalid":l||c["aria-invalid"],className:p.cn(N,y.className,"min-h-[42px] py-3",l&&"border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",e&&"pl-12",f&&"pr-12",o),disabled:s,style:b,id:v,type:m&&!g?"password":c.type??"text"}),f&&t.jsx("span",{className:"absolute right-2 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5",children:f})]}),h?t.jsx(w.Typography,{as:"p",color:l?"--color-secondary-accent-2":"--color-text-secondary",variant:"b3",children:h}):null]})}exports.Input=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),N=require("react"),V=require("./icons.cjs"),y=require("./responsive-style.config-B2m9jVlX.cjs"),$=require("./typography.cjs");function k(e,s){const i=[],c={};for(const r of[void 0,...y.responsiveBreakpoints]){const t=r?e?.[r]:e;if(!t)continue;const p={color:t.color,"font-size":t.fontSize,"font-weight":t.fontWeight,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing,"font-family":t.fontFamily,opacity:t.opacity,"font-style":t.italic===void 0?void 0:t.italic?"italic":"normal"};for(const[a,o]of Object.entries(p)){if(o===void 0)continue;const u=`--input-${s?"placeholder":"text"}-${r?`${r}-`:""}${a}`;c[u]=typeof o=="string"&&o.startsWith("--")?`var(${o})`:(a==="font-size"||a==="letter-spacing")&&typeof o=="number"?`${o}px`:o,i.push(`${r?`${r}:`:""}${s?"placeholder:":""}[${a}:var(${u})]`)}}return{className:i.join(" "),style:c}}function W(e){return k(e,!1)}function H(e){return k(e,!0)}function A(e,s){return e&&typeof e!="boolean"?e:s}const P="w-full rounded-[8px] border border-transparent bg-[var(--color-background-subtle)] px-4 text-[14px] font-normal leading-[120%] text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-secondary)] focus-visible:border-[var(--color-primary-accent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:cursor-not-allowed disabled:opacity-50 [font-family:var(--font-family)] [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";function D({className:e,containerClassName:s,disabled:i,error:c=!1,helperText:r,id:t,label:p,leftIcon:a,fontSize:o,fontWeight:u,lineHeight:I,letterSpacing:S,fontFamily:z,md:q,lg:T,xl:_,placeholderProps:O,style:R,rightIcon:B,variant:b="default",...l}){const C=N.useId(),f=H(O),v=W({fontSize:o,fontWeight:u,lineHeight:I,letterSpacing:S,fontFamily:z,md:q,lg:T,xl:_}),h={...v.style,...f.style,...R},x=t??C,[m,E]=N.useState(!1),d=!!c,j=A(c,r),F=b==="textarea",w=b==="password",g=w?n.jsx("button",{"aria-label":m?"Скрыть значение":"Показать значение",disabled:i,type:"button",onClick:()=>E(M=>!M),children:n.jsx(V.EyeOpenIcon,{})}):B;return n.jsxs("div",{className:y.cn("grid w-full gap-2",s),children:[p?n.jsx($.Typography,{as:"label",color:"--color-text-secondary",htmlFor:x,variant:"b3",children:p}):null,n.jsxs("div",{className:"relative w-full",children:[a&&n.jsx("span",{className:"pointer-events-none absolute left-4 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5",children:a}),F?n.jsx("textarea",{...l,"aria-invalid":d||l["aria-invalid"],className:y.cn(P,f.className,v.className,"min-h-[109px] resize-y px-4 py-3",d&&"border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",a&&"pl-12",e),disabled:i,style:h,id:x}):n.jsx("input",{...l,"aria-invalid":d||l["aria-invalid"],className:y.cn(P,f.className,v.className,"min-h-[42px] py-3",d&&"border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",a&&"pl-12",g&&"pr-12",e),disabled:i,style:h,id:x,type:w&&!m?"password":l.type??"text"}),g&&n.jsx("span",{className:"absolute right-2 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5",children:g})]}),j?n.jsx($.Typography,{as:"p",color:d?"--color-secondary-accent-2":"--color-text-secondary",variant:"b3",children:j}):null]})}exports.Input=D;

package/dist/input.js

@@ -1,113 +1,141 @@
-import { jsxs as w, jsx as r } from "react/jsx-runtime";
-import { useId as S, useState as B } from "react";
-import { EyeOpenIcon as C } from "./icons.js";
-import { a as E, c as y } from "./responsive-style.config-DFuATrIM.js";
-import { Typography as N } from "./typography.js";
-function O(o) {
-  const n = [], s = {};
-  for (const t of [void 0, ...E]) {
-    const a = t ? o?.[t] : o;
-    if (!a) continue;
+import { jsxs as $, jsx as r } from "react/jsx-runtime";
+import { useId as M, useState as R } from "react";
+import { EyeOpenIcon as q } from "./icons.js";
+import { a as A, c as b } from "./responsive-style.config-DFuATrIM.js";
+import { Typography as P } from "./typography.js";
+function I(e, i) {
+  const s = [], l = {};
+  for (const n of [void 0, ...A]) {
+    const t = n ? e?.[n] : e;
+    if (!t) continue;
     const p = {
-      color: a.color,
-      "font-size": a.fontSize,
-      "font-weight": a.fontWeight,
-      opacity: a.opacity,
-      "font-style": a.italic === void 0 ? void 0 : a.italic ? "italic" : "normal"
+      color: t.color,
+      "font-size": t.fontSize,
+      "font-weight": t.fontWeight,
+      "line-height": t.lineHeight,
+      "letter-spacing": t.letterSpacing,
+      "font-family": t.fontFamily,
+      opacity: t.opacity,
+      "font-style": t.italic === void 0 ? void 0 : t.italic ? "italic" : "normal"
     };
-    for (const [i, e] of Object.entries(p)) {
-      if (e === void 0) continue;
-      const d = `--input-placeholder-${t ? `${t}-` : ""}${i}`;
-      s[d] = typeof e == "string" && e.startsWith("--") ? `var(${e})` : i === "font-size" && typeof e == "number" ? `${e}px` : e, n.push(
-        `${t ? `${t}:` : ""}placeholder:[${i}:var(${d})]`
+    for (const [a, o] of Object.entries(p)) {
+      if (o === void 0) continue;
+      const u = `--input-${i ? "placeholder" : "text"}-${n ? `${n}-` : ""}${a}`;
+      l[u] = typeof o == "string" && o.startsWith("--") ? `var(${o})` : (a === "font-size" || a === "letter-spacing") && typeof o == "number" ? `${o}px` : o, s.push(
+        `${n ? `${n}:` : ""}${i ? "placeholder:" : ""}[${a}:var(${u})]`
       );
     }
   }
-  return { className: n.join(" "), style: s };
+  return { className: s.join(" "), style: l };
 }
-function T(o, n) {
-  return o && typeof o != "boolean" ? o : n;
+function D(e) {
+  return I(e, !1);
 }
-const $ = "w-full rounded-[8px] border border-transparent bg-[var(--color-background-subtle)] px-4 text-[14px] font-normal leading-[120%] text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-secondary)] focus-visible:border-[var(--color-primary-accent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:cursor-not-allowed disabled:opacity-50 [font-family:var(--font-family)] [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
-function q({
-  className: o,
-  containerClassName: n,
+function G(e) {
+  return I(e, !0);
+}
+function J(e, i) {
+  return e && typeof e != "boolean" ? e : i;
+}
+const k = "w-full rounded-[8px] border border-transparent bg-[var(--color-background-subtle)] px-4 text-[14px] font-normal leading-[120%] text-[var(--color-text-primary)] outline-none transition-colors placeholder:text-[var(--color-text-secondary)] focus-visible:border-[var(--color-primary-accent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:cursor-not-allowed disabled:opacity-50 [font-family:var(--font-family)] [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
+function Y({
+  className: e,
+  containerClassName: i,
   disabled: s,
-  error: t = !1,
-  helperText: a,
-  id: p,
-  label: i,
-  leftIcon: e,
-  placeholderProps: d,
-  style: k,
-  rightIcon: z,
-  variant: m = "default",
-  ...l
+  error: l = !1,
+  helperText: n,
+  id: t,
+  label: p,
+  leftIcon: a,
+  fontSize: o,
+  fontWeight: u,
+  lineHeight: z,
+  letterSpacing: S,
+  fontFamily: j,
+  md: _,
+  lg: T,
+  xl: B,
+  placeholderProps: C,
+  style: E,
+  rightIcon: F,
+  variant: x = "default",
+  ...c
 }) {
-  const P = S(), f = O(d), b = { ...f.style, ...k }, u = p ?? P, [x, I] = B(!1), c = !!t, h = T(t, a), j = m === "textarea", g = m === "password", v = g ? /* @__PURE__ */ r(
+  const O = M(), f = G(C), y = D({
+    fontSize: o,
+    fontWeight: u,
+    lineHeight: z,
+    letterSpacing: S,
+    fontFamily: j,
+    md: _,
+    lg: T,
+    xl: B
+  }), g = { ...y.style, ...f.style, ...E }, v = t ?? O, [h, V] = R(!1), d = !!l, w = J(l, n), W = x === "textarea", N = x === "password", m = N ? /* @__PURE__ */ r(
     "button",
     {
-      "aria-label": x ? "Скрыть значение" : "Показать значение",
+      "aria-label": h ? "Скрыть значение" : "Показать значение",
       disabled: s,
       type: "button",
-      onClick: () => I((_) => !_),
-      children: /* @__PURE__ */ r(C, {})
+      onClick: () => V((H) => !H),
+      children: /* @__PURE__ */ r(q, {})
     }
-  ) : z;
-  return /* @__PURE__ */ w("div", { className: y("grid w-full gap-2", n), children: [
-    i ? /* @__PURE__ */ r(N, { as: "label", color: "--color-text-secondary", htmlFor: u, variant: "b3", children: i }) : null,
-    /* @__PURE__ */ w("div", { className: "relative w-full", children: [
-      e && /* @__PURE__ */ r("span", { className: "pointer-events-none absolute left-4 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5", children: e }),
-      j ? /* @__PURE__ */ r(
+  ) : F;
+  return /* @__PURE__ */ $("div", { className: b("grid w-full gap-2", i), children: [
+    p ? /* @__PURE__ */ r(P, { as: "label", color: "--color-text-secondary", htmlFor: v, variant: "b3", children: p }) : null,
+    /* @__PURE__ */ $("div", { className: "relative w-full", children: [
+      a && /* @__PURE__ */ r("span", { className: "pointer-events-none absolute left-4 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5", children: a }),
+      W ? /* @__PURE__ */ r(
         "textarea",
         {
-          ...l,
-          "aria-invalid": c || l["aria-invalid"],
-          className: y(
-            $,
+          ...c,
+          "aria-invalid": d || c["aria-invalid"],
+          className: b(
+            k,
             f.className,
+            y.className,
             "min-h-[109px] resize-y px-4 py-3",
-            c && "border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",
-            e && "pl-12",
-            o
+            d && "border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",
+            a && "pl-12",
+            e
           ),
           disabled: s,
-          style: b,
-          id: u
+          style: g,
+          id: v
         }
       ) : /* @__PURE__ */ r(
         "input",
         {
-          ...l,
-          "aria-invalid": c || l["aria-invalid"],
-          className: y(
-            $,
+          ...c,
+          "aria-invalid": d || c["aria-invalid"],
+          className: b(
+            k,
             f.className,
+            y.className,
             "min-h-[42px] py-3",
-            c && "border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",
-            e && "pl-12",
-            v && "pr-12",
-            o
+            d && "border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",
+            a && "pl-12",
+            m && "pr-12",
+            e
           ),
           disabled: s,
-          style: b,
-          id: u,
-          type: g && !x ? "password" : l.type ?? "text"
+          style: g,
+          id: v,
+          type: N && !h ? "password" : c.type ?? "text"
         }
       ),
-      v && /* @__PURE__ */ r("span", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5", children: v })
+      m && /* @__PURE__ */ r("span", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 text-[var(--color-text-secondary)] [&_svg]:size-5", children: m })
     ] }),
-    h ? /* @__PURE__ */ r(
-      N,
+    w ? /* @__PURE__ */ r(
+      P,
       {
         as: "p",
-        color: c ? "--color-secondary-accent-2" : "--color-text-secondary",
+        color: d ? "--color-secondary-accent-2" : "--color-text-secondary",
         variant: "b3",
-        children: h
+        children: w
       }
     ) : null
   ] });
 }
 export {
-  q as Input
+  Y as Input
 };