@bezdenegsvarkinet/ui-library 1.1.2 → 1.3.0

package/dist/index.cjs

@@ -37,8 +37,36 @@ var import_class_variance_authority = require("class-variance-authority");
 
 // src/stories/typography/config/typography-sizes.ts
 var typographySizes = {
+  "display/eb/64": "text-[64px] font-extrabold",
+  "display/b/56": "text-[56px] font-bold",
+  "heading/b/48": "text-[48px] font-bold",
+  "heading/sb/40": "text-[40px] font-semibold",
+  "heading/sb/36": "text-[36px] font-semibold",
+  "heading/sb/32": "text-[32px] font-semibold",
+  "heading/sb/28": "text-[28px] font-semibold",
+  "subtitle/sb/24": "text-[24px] font-semibold",
+  "subtitle/m/24": "text-[24px] font-medium",
+  "subtitle/sb/20": "text-[20px] font-semibold",
+  "subtitle/m/20": "text-[20px] font-medium",
+  "subtitle/sb/18": "text-[18px] font-semibold",
+  "subtitle/m/18": "text-[18px] font-medium",
+  "body/m/18": "text-[18px] font-medium",
+  "body/sb/16": "text-[16px] font-semibold",
+  "body/m/16": "text-[16px] font-medium",
+  "body/r/16": "text-[16px] font-normal",
+  "body/sb/14": "text-[14px] font-semibold",
+  "body/m/14": "text-[14px] font-medium",
+  "body/r/14": "text-[14px] font-normal",
+  "button/m/20": "text-[20px] font-medium",
+  "button/m/18": "text-[18px] font-medium",
   "button/m/16": "text-[16px] font-medium",
-  "button/m/14": "text-[14px] font-medium"
+  "button/m/14": "text-[14px] font-medium",
+  "caption/r/14": "text-[14px] font-normal",
+  "caption/sb/12": "text-[12px] font-semibold",
+  "caption/m/12": "text-[12px] font-medium",
+  "caption/r/12": "text-[12px] font-normal",
+  "caption/m/10": "text-[10px] font-medium",
+  "caption/r/10": "text-[10px] font-normal"
 };
 
 // src/stories/typography/ui/typography.tsx
@@ -50,7 +78,7 @@ var typographyVariants = (0, import_class_variance_authority.cva)("transition-al
     }
   },
   defaultVariants: {
-    size: "button/m/16"
+    size: "body/r/16"
   }
 });
 var Typography = ({ children, tag = "p", size, className, ...props }) => {
@@ -61,11 +89,13 @@ var Typography = ({ children, tag = "p", size, className, ...props }) => {
 // src/stories/button/ui/button.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 
-// src/stories/button/config/button-bgs.ts
-var buttonBgs = {
-  primary: "bg-blue-500 text-white hover:bg-blue-600",
-  secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-  outline: "bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-50"
+// src/stories/button/config/button-variants.ts
+var buttonVariants = {
+  "primary-fill": "bg-primary-blue-500 text-white not-disabled:hover:bg-primary-blue-800 not-disabled:active:bg-primary-blue-700 disabled:bg-neutral-200 disabled:text-neutral-400",
+  "primary-outline": "bg-transparent border border-primary-blue-500 text-primary-blue-500 not-disabled:hover:border-primary-blue-800 not-disabled:hover:text-primary-blue-800 not-disabled:active:border-primary-blue-700 not-disabled:active:text-primary-blue-700 disabled:border-primary-neutral-200 disabled:text-primary-neutral-400",
+  "primary-ghost": "bg-transparent text-primary-blue-500 not-disabled:hover:text-primary-blue-800 not-disabled:active:text-primary-blue-700 disabled:text-primary-neutral-400",
+  "secondary-fill": "bg-primary-neutral-800 text-white hover:bg-primary-neutral-700",
+  "secondary-outline": "border-2 border-primary-neutral-800 text-primary-neutral-800 not-disabled:hover:bg-primary-neutral-700 not-disabled:active:bg-primary-neutral-700"
 };
 
 // src/stories/button/config/button-sizes.ts
@@ -77,23 +107,42 @@ var buttonSizes = {
 };
 
 // src/stories/button/ui/button.tsx
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority2.cva)("transition-all duration-300 py-2 px-4 rounded-[8px] leading-[100%]", {
-  variants: {
-    bg: {
-      ...buttonBgs
+var buttonConfig = (0, import_class_variance_authority2.cva)(
+  "transition-all cursor-pointer duration-300 py-2 px-4 rounded-[8px] flex items-center gap-2 disabled:cursor-not-allowed ",
+  {
+    variants: {
+      variant: {
+        ...buttonVariants
+      },
+      size: {
+        ...buttonSizes
+      }
     },
-    size: {
-      ...buttonSizes
+    defaultVariants: {
+      variant: "primary-fill",
+      size: "56"
     }
-  },
-  defaultVariants: {
-    bg: "primary",
-    size: "32"
   }
-});
-var Button = ({ children, bg, size, className, asChild = false, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { ...props, className: cn(buttonVariants({ bg, size, className })), children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Typography, { children }) : children });
+);
+var Button = ({
+  children,
+  variant,
+  size,
+  className,
+  iconSide = "left",
+  textSize = "body/r/16",
+  showLoader = false,
+  icon,
+  ...props
+}) => {
+  const Icon = icon && import_lucide_react.icons[icon];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { ...props, className: cn(buttonConfig({ variant, size, className })), children: props.disabled && showLoader ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { size: 20, strokeWidth: 1.5, className: "animate-spin" }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    Icon && iconSide === "left" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { size: 20, strokeWidth: 1.5 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Typography, { size: textSize, children }),
+    Icon && iconSide === "right" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { size: 20, strokeWidth: 1.5 })
+  ] }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/lib/utils.ts","../src/stories/typography/ui/typography.tsx","../src/stories/typography/config/typography-sizes.ts","../src/stories/button/ui/button.tsx","../src/stories/button/config/button-bgs.ts","../src/stories/button/config/button-sizes.ts"],"sourcesContent":["// Экспортируем только компоненты, не stories и не CSS\nexport { Typography } from './stories/typography'\nexport { Button } from './stories/button'\n\n// export type { IButtonProps } from 'src/stories/button/ui/button'\n// export type { ITypographyProps } from 'src/stories/typography/ui/typography'\n\n// Импортируем CSS с Tailwind (он попадёт в сборку)\nimport './index.css'","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { FC } from 'react'\nimport { cn } from '@/lib/utils'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { typographySizes } from '../config/typography-sizes'\n\nconst typographyVariants = cva('transition-all duration-300 leading-[100%]', {\n\tvariants: {\n\t\tsize: {\n\t\t\t...typographySizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'button/m/16',\n\t},\n})\n\ntype TTag = 'p' | 'span'\n\nexport interface ITypographyProps\n\textends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {\n\tchildren: React.ReactNode\n\ttag?: TTag\n}\n\nexport const Typography: FC<ITypographyProps> = ({ children, tag = 'p', size, className, ...props }) => {\n\tconst Tag = tag\n\n\treturn (\n\t\t<Tag {...props} className={cn(typographyVariants({ size, className }))}>\n\t\t\t{children}\n\t\t</Tag>\n\t)\n}","export const typographySizes = {\n\t'button/m/16': 'text-[16px] font-medium',\n\t'button/m/14': 'text-[14px] font-medium',\n}","'use client'\n\nimport { FC } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '@/stories/typography'\nimport { buttonBgs, buttonSizes } from '../config'\n\nconst buttonVariants = cva('transition-all duration-300 py-2 px-4 rounded-[8px] leading-[100%]', {\n\tvariants: {\n\t\tbg: {\n\t\t\t...buttonBgs,\n\t\t},\n\t\tsize: {\n\t\t\t...buttonSizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbg: 'primary',\n\t\tsize: '32',\n\t},\n})\n\nexport interface IButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n\t/** Контент кнопки (текст или иконки) */\n\tchildren: React.ReactNode\n\t/**\n\t * Если true, оборачивает children в компонент Typography для единообразия.\n\t * По умолчанию false.\n\t */\n\tasChild?: boolean\n}\n\n/**\n * Компонент Button используется для интерактивных элементов действия.\n * Поддерживает различные варианты оформления (bg) и размеры (size).\n *\n * @example\n * <Button bg=\"primary\" size=\"40\">Нажми меня</Button>\n */\nexport const Button: FC<IButtonProps> = ({ children, bg, size, className, asChild = false, ...props }) => {\n\treturn (\n\t\t<button {...props} className={cn(buttonVariants({ bg, size, className }))}>\n\t\t\t{asChild ? <Typography>{children}</Typography> : children}\n\t\t</button>\n\t)\n}","export const buttonBgs = {\n\tprimary: 'bg-blue-500 text-white hover:bg-blue-600',\n\tsecondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n\toutline: 'bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-50',\n}","export const buttonSizes = {\n\t'32': 'h-[32px]',\n\t'40': 'h-[40px]',\n\t'48': 'h-[48px]',\n\t'56': 'h-[56px]',\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACDA,sCAAkC;;;ACJ3B,IAAM,kBAAkB;AAAA,EAC9B,eAAe;AAAA,EACf,eAAe;AAChB;;;AD2BE;AAvBF,IAAM,yBAAqB,qCAAI,8CAA8C;AAAA,EAC5E,UAAU;AAAA,IACT,MAAM;AAAA,MACL,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EACP;AACD,CAAC;AAUM,IAAM,aAAmC,CAAC,EAAE,UAAU,MAAM,KAAK,MAAM,WAAW,GAAG,MAAM,MAAM;AACvG,QAAM,MAAM;AAEZ,SACC,4CAAC,OAAK,GAAG,OAAO,WAAW,GAAG,mBAAmB,EAAE,MAAM,UAAU,CAAC,CAAC,GACnE,UACF;AAEF;;;AE/BA,IAAAA,mCAAkC;;;ACH3B,IAAM,YAAY;AAAA,EACxB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AACV;;;ACJO,IAAM,cAAc;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACP;;;AFuCc,IAAAC,sBAAA;AApCd,IAAM,qBAAiB,sCAAI,sEAAsE;AAAA,EAChG,UAAU;AAAA,IACT,IAAI;AAAA,MACH,GAAG;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACL,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,MAAM;AAAA,EACP;AACD,CAAC;AAoBM,IAAM,SAA2B,CAAC,EAAE,UAAU,IAAI,MAAM,WAAW,UAAU,OAAO,GAAG,MAAM,MAAM;AACzG,SACC,6CAAC,YAAQ,GAAG,OAAO,WAAW,GAAG,eAAe,EAAE,IAAI,MAAM,UAAU,CAAC,CAAC,GACtE,oBAAU,6CAAC,cAAY,UAAS,IAAgB,UAClD;AAEF;","names":["import_class_variance_authority","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/lib/utils.ts","../src/stories/typography/ui/typography.tsx","../src/stories/typography/config/typography-sizes.ts","../src/stories/button/ui/button.tsx","../src/stories/button/config/button-variants.ts","../src/stories/button/config/button-sizes.ts"],"sourcesContent":["// Экспортируем только компоненты, не stories и не CSS\nexport { Typography } from './stories/typography'\nexport { Button } from './stories/button'\n\n// export type { IButtonProps } from 'src/stories/button/ui/button'\n// export type { ITypographyProps } from 'src/stories/typography/ui/typography'\n\n// Импортируем CSS с Tailwind (он попадёт в сборку)\nimport './index.css'","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { FC } from 'react'\nimport { cn } from '@/lib/utils'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { typographySizes } from '../config/typography-sizes'\n\nconst typographyVariants = cva('transition-all duration-300 leading-[100%]', {\n\tvariants: {\n\t\tsize: {\n\t\t\t...typographySizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'body/r/16',\n\t},\n})\n\ntype TTag = 'p' | 'span'\n\nexport interface ITypographyProps\n\textends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {\n\tchildren: React.ReactNode\n\ttag?: TTag\n}\n\nexport const Typography: FC<ITypographyProps> = ({ children, tag = 'p', size, className, ...props }) => {\n\tconst Tag = tag\n\n\treturn (\n\t\t<Tag {...props} className={cn(typographyVariants({ size, className }))}>\n\t\t\t{children}\n\t\t</Tag>\n\t)\n}","export const typographySizes = {\n\t'display/eb/64': 'text-[64px] font-extrabold',\n\t'display/b/56': 'text-[56px] font-bold',\n\n\t'heading/b/48': 'text-[48px] font-bold',\n\t'heading/sb/40': 'text-[40px] font-semibold',\n\t'heading/sb/36': 'text-[36px] font-semibold',\n\t'heading/sb/32': 'text-[32px] font-semibold',\n\t'heading/sb/28': 'text-[28px] font-semibold',\n\n\t'subtitle/sb/24': 'text-[24px] font-semibold',\n\t'subtitle/m/24': 'text-[24px] font-medium',\n\t'subtitle/sb/20': 'text-[20px] font-semibold',\n\t'subtitle/m/20': 'text-[20px] font-medium',\n\t'subtitle/sb/18': 'text-[18px] font-semibold',\n\t'subtitle/m/18': 'text-[18px] font-medium',\n\n\t'body/m/18': 'text-[18px] font-medium',\n\t'body/sb/16': 'text-[16px] font-semibold',\n\t'body/m/16': 'text-[16px] font-medium',\n\t'body/r/16': 'text-[16px] font-normal',\n\t'body/sb/14': 'text-[14px] font-semibold',\n\t'body/m/14': 'text-[14px] font-medium',\n\t'body/r/14': 'text-[14px] font-normal',\n\n\t'button/m/20': 'text-[20px] font-medium',\n\t'button/m/18': 'text-[18px] font-medium',\n\t'button/m/16': 'text-[16px] font-medium',\n\t'button/m/14': 'text-[14px] font-medium',\n\n\t'caption/r/14': 'text-[14px] font-normal',\n\t'caption/sb/12': 'text-[12px] font-semibold',\n\t'caption/m/12': 'text-[12px] font-medium',\n\t'caption/r/12': 'text-[12px] font-normal',\n\t'caption/m/10': 'text-[10px] font-medium',\n\t'caption/r/10': 'text-[10px] font-normal',\n}","'use client'\n\nimport { FC } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '@/stories/typography'\nimport { buttonSizes, buttonVariants } from '../config'\nimport { icons, Loader2 } from 'lucide-react'\nimport { TTypographySizes } from '@/stories/typography/types'\n\nconst buttonConfig = cva(\n\t'transition-all cursor-pointer duration-300 py-2 px-4 rounded-[8px] flex items-center gap-2 disabled:cursor-not-allowed ',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\t...buttonVariants,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\t...buttonSizes,\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'primary-fill',\n\t\t\tsize: '56',\n\t\t},\n\t},\n)\n\nexport interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonConfig> {\n\t/** Контент кнопки (текст или иконки) */\n\tchildren: React.ReactNode\n\n\t/**\n\t * Иконка для отображения внутри кнопки.\n\t */\n\ticon?: keyof typeof icons\n\n\t/**\n\t * Расположение иконки внутри кнопки.\n\t * По умолчанию 'left'.\n\t */\n\ticonSide?: 'left' | 'right'\n\n\t/**\n\t * Размер текста внутри кнопки.\n\t * По умолчанию 'body/r/16'.\n\t */\n\ttextSize?: TTypographySizes\n\n\t/**\n\t * Отображение индикатора загрузки внутри кнопки.\n\t * Индикатор отображается только при disabled=true.\n\t * По умолчанию false.\n\t */\n\tshowLoader?: boolean\n}\n\n/**\n * Компонент Button используется для интерактивных элементов действия.\n * Поддерживает различные варианты оформления (variant) и размеры (size).\n *\n * @example\n * <Button variant=\"primary-fill\" size=\"40\">Нажми меня</Button>\n */\nexport const Button: FC<IButtonProps> = ({\n\tchildren,\n\tvariant,\n\tsize,\n\tclassName,\n\ticonSide = 'left',\n\ttextSize = 'body/r/16',\n\tshowLoader = false,\n\ticon,\n\t...props\n}) => {\n\tconst Icon = icon && icons[icon]\n\n\treturn (\n\t\t<button {...props} className={cn(buttonConfig({ variant, size, className }))}>\n\t\t\t{props.disabled && showLoader ? (\n\t\t\t\t<div className='flex items-center justify-center'>\n\t\t\t\t\t<Loader2 size={20} strokeWidth={1.5} className='animate-spin' />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{Icon && iconSide === 'left' && <Icon size={20} strokeWidth={1.5} />}\n\n\t\t\t\t\t<Typography size={textSize}>{children}</Typography>\n\n\t\t\t\t\t{Icon && iconSide === 'right' && <Icon size={20} strokeWidth={1.5} />}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</button>\n\t)\n}","export const buttonVariants = {\n\t'primary-fill':\n\t\t'bg-primary-blue-500 text-white not-disabled:hover:bg-primary-blue-800 not-disabled:active:bg-primary-blue-700 disabled:bg-neutral-200 disabled:text-neutral-400',\n\n\t'primary-outline':\n\t\t'bg-transparent border border-primary-blue-500 text-primary-blue-500 not-disabled:hover:border-primary-blue-800 not-disabled:hover:text-primary-blue-800 not-disabled:active:border-primary-blue-700 not-disabled:active:text-primary-blue-700 disabled:border-primary-neutral-200 disabled:text-primary-neutral-400',\n\n\t'primary-ghost':\n\t\t'bg-transparent text-primary-blue-500 not-disabled:hover:text-primary-blue-800 not-disabled:active:text-primary-blue-700 disabled:text-primary-neutral-400',\n\n\t'secondary-fill': 'bg-primary-neutral-800 text-white hover:bg-primary-neutral-700',\n\n\t'secondary-outline':\n\t\t'border-2 border-primary-neutral-800 text-primary-neutral-800 not-disabled:hover:bg-primary-neutral-700 not-disabled:active:bg-primary-neutral-700',\n}","export const buttonSizes = {\n\t'32': 'h-[32px]',\n\t'40': 'h-[40px]',\n\t'48': 'h-[48px]',\n\t'56': 'h-[56px]',\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACDA,sCAAkC;;;ACJ3B,IAAM,kBAAkB;AAAA,EAC9B,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAEhB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EAEjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EAEjB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EAEb,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EAEf,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AACjB;;;ADNE;AAvBF,IAAM,yBAAqB,qCAAI,8CAA8C;AAAA,EAC5E,UAAU;AAAA,IACT,MAAM;AAAA,MACL,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EACP;AACD,CAAC;AAUM,IAAM,aAAmC,CAAC,EAAE,UAAU,MAAM,KAAK,MAAM,WAAW,GAAG,MAAM,MAAM;AACvG,QAAM,MAAM;AAEZ,SACC,4CAAC,OAAK,GAAG,OAAO,WAAW,GAAG,mBAAmB,EAAE,MAAM,UAAU,CAAC,CAAC,GACnE,UACF;AAEF;;;AE/BA,IAAAA,mCAAkC;;;ACH3B,IAAM,iBAAiB;AAAA,EAC7B,gBACC;AAAA,EAED,mBACC;AAAA,EAED,iBACC;AAAA,EAED,kBAAkB;AAAA,EAElB,qBACC;AACF;;;ACdO,IAAM,cAAc;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACP;;;AFEA,0BAA+B;AA0E1B,IAAAC,sBAAA;AAvEL,IAAM,mBAAe;AAAA,EACpB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,GAAG;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACL,GAAG;AAAA,MACJ;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,MACT,MAAM;AAAA,IACP;AAAA,EACD;AACD;AAsCO,IAAM,SAA2B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACJ,MAAM;AACL,QAAM,OAAO,QAAQ,0BAAM,IAAI;AAE/B,SACC,6CAAC,YAAQ,GAAG,OAAO,WAAW,GAAG,aAAa,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GACzE,gBAAM,YAAY,aAClB,6CAAC,SAAI,WAAU,oCACd,uDAAC,+BAAQ,MAAM,IAAI,aAAa,KAAK,WAAU,gBAAe,GAC/D,IAEA,8EACE;AAAA,YAAQ,aAAa,UAAU,6CAAC,QAAK,MAAM,IAAI,aAAa,KAAK;AAAA,IAElE,6CAAC,cAAW,MAAM,UAAW,UAAS;AAAA,IAErC,QAAQ,aAAa,WAAW,6CAAC,QAAK,MAAM,IAAI,aAAa,KAAK;AAAA,KACpE,GAEF;AAEF;","names":["import_class_variance_authority","import_jsx_runtime"]}

package/dist/index.css

@@ -8,19 +8,54 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-blue-50: oklch(97% 0.014 254.604);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-primary-blue-50: var(--color-primary-blue-50);
+    --color-primary-blue-100: var(--color-primary-blue-100);
+    --color-primary-blue-200: var(--color-primary-blue-200);
+    --color-primary-blue-300: var(--color-primary-blue-300);
+    --color-primary-blue-400: var(--color-primary-blue-400);
+    --color-primary-blue-500: var(--color-primary-blue-500);
+    --color-primary-blue-600: var(--color-primary-blue-600);
+    --color-primary-blue-700: var(--color-primary-blue-700);
+    --color-primary-blue-800: var(--color-primary-blue-800);
+    --color-primary-blue-900: var(--color-primary-blue-900);
+    --color-primary-neutral-100: var(--color-primary-neutral-100);
+    --color-primary-neutral-200: var(--color-primary-neutral-200);
+    --color-primary-neutral-300: var(--color-primary-neutral-300);
+    --color-primary-neutral-400: var(--color-primary-neutral-400);
+    --color-primary-neutral-500: var(--color-primary-neutral-500);
+    --color-primary-neutral-600: var(--color-primary-neutral-600);
+    --color-primary-neutral-700: var(--color-primary-neutral-700);
+    --color-primary-neutral-800: var(--color-primary-neutral-800);
+    --color-primary-neutral-900: var(--color-primary-neutral-900);
+    --color-state-error-100: var(--color-state-error-100);
+    --color-state-error-200: var(--color-state-error-200);
+    --color-state-error-500: var(--color-state-error-500);
+    --color-state-error-800: var(--color-state-error-800);
+    --color-state-warning-100: var(--color-state-warning-100);
+    --color-state-warning-500: var(--color-state-warning-500);
+    --color-state-warning-800: var(--color-state-warning-800);
+    --color-state-info-100: var(--color-state-info-100);
+    --color-state-info-200: var(--color-state-info-200);
+    --color-state-info-500: var(--color-state-info-500);
+    --color-state-info-800: var(--color-state-info-800);
   }
 }
 @layer base {
@@ -202,6 +237,12 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -214,15 +255,24 @@
   .items-start {
     align-items: flex-start;
   }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .rounded-\[8px\] {
     border-radius: 8px;
   }
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -231,43 +281,111 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-blue-500 {
-    border-color: var(--color-blue-500);
+  .border-primary-blue-500 {
+    border-color: var(--color-primary-blue-500);
   }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
+  .border-primary-neutral-800 {
+    border-color: var(--color-primary-neutral-800);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-primary-blue-500 {
+    background-color: var(--color-primary-blue-500);
+  }
+  .bg-primary-neutral-800 {
+    background-color: var(--color-primary-neutral-800);
   }
   .bg-transparent {
     background-color: transparent;
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
   .text-\[16px\] {
     font-size: 16px;
   }
+  .text-\[18px\] {
+    font-size: 18px;
+  }
+  .text-\[20px\] {
+    font-size: 20px;
+  }
+  .text-\[24px\] {
+    font-size: 24px;
+  }
+  .text-\[28px\] {
+    font-size: 28px;
+  }
+  .text-\[32px\] {
+    font-size: 32px;
+  }
+  .text-\[36px\] {
+    font-size: 36px;
+  }
+  .text-\[40px\] {
+    font-size: 40px;
+  }
+  .text-\[48px\] {
+    font-size: 48px;
+  }
+  .text-\[56px\] {
+    font-size: 56px;
+  }
+  .text-\[64px\] {
+    font-size: 64px;
+  }
   .leading-\[100\%\] {
     --tw-leading: 100%;
     line-height: 100%;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .text-blue-500 {
-    color: var(--color-blue-500);
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-primary-blue-500 {
+    color: var(--color-primary-blue-500);
   }
-  .text-gray-800 {
-    color: var(--color-gray-800);
+  .text-primary-neutral-800 {
+    color: var(--color-primary-neutral-800);
   }
   .text-red-500 {
     color: var(--color-red-500);
@@ -275,10 +393,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -288,29 +402,138 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .hover\:bg-blue-50 {
+  .hover\:bg-primary-neutral-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-50);
+        background-color: var(--color-primary-neutral-700);
       }
     }
   }
-  .hover\:bg-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-600);
+  .not-disabled\:hover\:border-primary-blue-800 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary-blue-800);
+        }
       }
     }
   }
-  .hover\:bg-gray-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-300);
+  .not-disabled\:hover\:bg-primary-blue-800 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary-blue-800);
+        }
+      }
+    }
+  }
+  .not-disabled\:hover\:bg-primary-neutral-700 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary-neutral-700);
+        }
       }
     }
   }
+  .not-disabled\:hover\:text-primary-blue-800 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-primary-blue-800);
+        }
+      }
+    }
+  }
+  .not-disabled\:active\:border-primary-blue-700 {
+    &:not(*:disabled) {
+      &:active {
+        border-color: var(--color-primary-blue-700);
+      }
+    }
+  }
+  .not-disabled\:active\:bg-primary-blue-700 {
+    &:not(*:disabled) {
+      &:active {
+        background-color: var(--color-primary-blue-700);
+      }
+    }
+  }
+  .not-disabled\:active\:bg-primary-neutral-700 {
+    &:not(*:disabled) {
+      &:active {
+        background-color: var(--color-primary-neutral-700);
+      }
+    }
+  }
+  .not-disabled\:active\:text-primary-blue-700 {
+    &:not(*:disabled) {
+      &:active {
+        color: var(--color-primary-blue-700);
+      }
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:border-primary-neutral-200 {
+    &:disabled {
+      border-color: var(--color-primary-neutral-200);
+    }
+  }
+  .disabled\:bg-neutral-200 {
+    &:disabled {
+      background-color: var(--color-neutral-200);
+    }
+  }
+  .disabled\:text-neutral-400 {
+    &:disabled {
+      color: var(--color-neutral-400);
+    }
+  }
+  .disabled\:text-primary-neutral-400 {
+    &:disabled {
+      color: var(--color-primary-neutral-400);
+    }
+  }
 }
 :root {
+  --color-primary-blue-50: #EFF5FF;
+  --color-primary-blue-100: #CFE3FF;
+  --color-primary-blue-200: #9EC7FF;
+  --color-primary-blue-300: #6EABFF;
+  --color-primary-blue-400: #3E8FFF;
+  --color-primary-blue-500: #005DDC;
+  --color-primary-blue-600: #004EB7;
+  --color-primary-blue-700: #003E93;
+  --color-primary-blue-800: #063B82;
+  --color-primary-blue-900: #002F6E;
+  --color-primary-neutral-50: #F9F9F9;
+  --color-primary-neutral-100: #F4F4F4;
+  --color-primary-neutral-200: #EDEDED;
+  --color-primary-neutral-300: #CBCBCB;
+  --color-primary-neutral-400: #A5A5A5;
+  --color-primary-neutral-500: #757575;
+  --color-primary-neutral-600: #515151;
+  --color-primary-neutral-700: #353535;
+  --color-primary-neutral-800: #282828;
+  --color-state-error-100: #FFEEEE;
+  --color-state-error-200: #FACCCC;
+  --color-state-error-500: #DC0000;
+  --color-state-error-800: #840000;
+  --color-state-success-100: #EEFFF0;
+  --color-state-success-200: #CCFACC;
+  --color-state-success-500: #009E00;
+  --color-state-success-800: #034203;
+  --color-state-warning-100: #FFEBB2;
+  --color-state-warning-500: #F6B500;
+  --color-state-warning-800: #7F5E00;
+  --color-state-info-100: #E4FFFF;
+  --color-state-info-200: #8BF2F2;
+  --color-state-info-500: #00AEAE;
+  --color-state-info-800: #044747;
   --color-primary: #3b82f6;
   --color-secondary: #64748b;
   --font-base: system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -347,39 +570,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
 @layer base {
   * {
     border-color: var(--border);
@@ -426,15 +616,15 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -446,7 +636,6 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
-      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.css"],"sourcesContent":["@import \"tailwindcss\";\n\n@source \"../src/**/*.{ts,tsx}\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --color-primary: #3b82f6;\n  --color-secondary: #64748b;\n  --font-base: system-ui, Avenir, Helvetica, Arial, sans-serif;\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\n@theme inline {\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --radius-2xl: calc(var(--radius) + 8px);\n  --radius-3xl: calc(var(--radius) + 12px);\n  --radius-4xl: calc(var(--radius) + 16px);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.205 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.269 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.556 0 0);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.css"],"sourcesContent":["@import \"tailwindcss\";\n\n@source \"../src/**/*.{ts,tsx}\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* Основные цвета и настройки */\n  --color-primary-blue-50: #EFF5FF;\n  --color-primary-blue-100: #CFE3FF;\n  --color-primary-blue-200: #9EC7FF;\n  --color-primary-blue-300: #6EABFF;\n  --color-primary-blue-400: #3E8FFF;\n  --color-primary-blue-500: #005DDC;\n  --color-primary-blue-600: #004EB7;\n  --color-primary-blue-700: #003E93;\n  --color-primary-blue-800: #063B82;\n  --color-primary-blue-900: #002F6E;\n\n  --color-primary-neutral-50: #F9F9F9;\n  --color-primary-neutral-100: #F4F4F4;\n  --color-primary-neutral-200: #EDEDED;\n  --color-primary-neutral-300: #CBCBCB;\n  --color-primary-neutral-400: #A5A5A5;\n  --color-primary-neutral-500: #757575;\n  --color-primary-neutral-600: #515151;\n  --color-primary-neutral-700: #353535;\n  --color-primary-neutral-800: #282828;\n\n  --color-state-error-100: #FFEEEE;\n  --color-state-error-200: #FACCCC;\n  --color-state-error-500: #DC0000;\n  --color-state-error-800: #840000;\n\n  --color-state-success-100: #EEFFF0;\n  --color-state-success-200: #CCFACC;\n  --color-state-success-500: #009E00;\n  --color-state-success-800: #034203;\n\n  --color-state-warning-100: #FFEBB2;\n  --color-state-warning-500: #F6B500;\n  --color-state-warning-800: #7F5E00;\n\n  --color-state-info-100: #E4FFFF;\n  --color-state-info-200: #8BF2F2;\n  --color-state-info-500: #00AEAE;\n  --color-state-info-800: #044747;\n\n  --color-primary: #3b82f6;\n  --color-secondary: #64748b;\n  --font-base: system-ui, Avenir, Helvetica, Arial, sans-serif;\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\n@theme inline {\n  /* Основные настройки */\n  --color-primary-blue-50: var(--color-primary-blue-50);\n  --color-primary-blue-100: var(--color-primary-blue-100);\n  --color-primary-blue-200: var(--color-primary-blue-200);\n  --color-primary-blue-300: var(--color-primary-blue-300);\n  --color-primary-blue-400: var(--color-primary-blue-400);\n  --color-primary-blue-500: var(--color-primary-blue-500);\n  --color-primary-blue-600: var(--color-primary-blue-600);\n  --color-primary-blue-700: var(--color-primary-blue-700);\n  --color-primary-blue-800: var(--color-primary-blue-800);\n  --color-primary-blue-900: var(--color-primary-blue-900);\n\n  --color-primary-neutral-100: var(--color-primary-neutral-100);\n  --color-primary-neutral-200: var(--color-primary-neutral-200);\n  --color-primary-neutral-300: var(--color-primary-neutral-300);\n  --color-primary-neutral-400: var(--color-primary-neutral-400);\n  --color-primary-neutral-500: var(--color-primary-neutral-500);\n  --color-primary-neutral-600: var(--color-primary-neutral-600);\n  --color-primary-neutral-700: var(--color-primary-neutral-700);\n  --color-primary-neutral-800: var(--color-primary-neutral-800);\n  --color-primary-neutral-900: var(--color-primary-neutral-900);\n\n  --color-state-error-100: var(--color-state-error-100);\n  --color-state-error-200: var(--color-state-error-200);\n  --color-state-error-500: var(--color-state-error-500);\n  --color-state-error-800: var(--color-state-error-800);\n\n  --color-state-warning-100: var(--color-state-warning-100);\n  --color-state-warning-500: var(--color-state-warning-500);\n  --color-state-warning-800: var(--color-state-warning-800);\n\n  --color-state-info-100: var(--color-state-info-100);\n  --color-state-info-200: var(--color-state-info-200);\n  --color-state-info-500: var(--color-state-info-500);\n  --color-state-info-800: var(--color-state-info-800);\n\n --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --radius-2xl: calc(var(--radius) + 8px);\n  --radius-3xl: calc(var(--radius) + 12px);\n  --radius-4xl: calc(var(--radius) + 16px);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -1,9 +1,10 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { FC } from 'react';
 import { VariantProps } from 'class-variance-authority';
+import { icons } from 'lucide-react';
 
 declare const typographyVariants: (props?: ({
-    size?: "button/m/16" | "button/m/14" | null | undefined;
+    size?: "body/r/16" | "display/eb/64" | "display/b/56" | "heading/b/48" | "heading/sb/40" | "heading/sb/36" | "heading/sb/32" | "heading/sb/28" | "subtitle/sb/24" | "subtitle/m/24" | "subtitle/sb/20" | "subtitle/m/20" | "subtitle/sb/18" | "subtitle/m/18" | "body/m/18" | "body/sb/16" | "body/m/16" | "body/sb/14" | "body/m/14" | "body/r/14" | "button/m/20" | "button/m/18" | "button/m/16" | "button/m/14" | "caption/r/14" | "caption/sb/12" | "caption/m/12" | "caption/r/12" | "caption/m/10" | "caption/r/10" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TTag = 'p' | 'span';
 interface ITypographyProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
@@ -12,25 +13,75 @@ interface ITypographyProps extends React.HTMLAttributes<HTMLParagraphElement>, V
 }
 declare const Typography: FC<ITypographyProps>;
 
-declare const buttonVariants: (props?: ({
-    bg?: "primary" | "secondary" | "outline" | null | undefined;
-    size?: "32" | "40" | "48" | "56" | null | undefined;
+declare const typographySizes: {
+    'display/eb/64': string;
+    'display/b/56': string;
+    'heading/b/48': string;
+    'heading/sb/40': string;
+    'heading/sb/36': string;
+    'heading/sb/32': string;
+    'heading/sb/28': string;
+    'subtitle/sb/24': string;
+    'subtitle/m/24': string;
+    'subtitle/sb/20': string;
+    'subtitle/m/20': string;
+    'subtitle/sb/18': string;
+    'subtitle/m/18': string;
+    'body/m/18': string;
+    'body/sb/16': string;
+    'body/m/16': string;
+    'body/r/16': string;
+    'body/sb/14': string;
+    'body/m/14': string;
+    'body/r/14': string;
+    'button/m/20': string;
+    'button/m/18': string;
+    'button/m/16': string;
+    'button/m/14': string;
+    'caption/r/14': string;
+    'caption/sb/12': string;
+    'caption/m/12': string;
+    'caption/r/12': string;
+    'caption/m/10': string;
+    'caption/r/10': string;
+};
+
+type TTypographySizes = keyof typeof typographySizes;
+
+declare const buttonConfig: (props?: ({
+    variant?: "primary-fill" | "primary-outline" | "primary-ghost" | "secondary-fill" | "secondary-outline" | null | undefined;
+    size?: "56" | "32" | "40" | "48" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonConfig> {
     /** Контент кнопки (текст или иконки) */
     children: React.ReactNode;
     /**
-     * Если true, оборачивает children в компонент Typography для единообразия.
+     * Иконка для отображения внутри кнопки.
+     */
+    icon?: keyof typeof icons;
+    /**
+     * Расположение иконки внутри кнопки.
+     * По умолчанию 'left'.
+     */
+    iconSide?: 'left' | 'right';
+    /**
+     * Размер текста внутри кнопки.
+     * По умолчанию 'body/r/16'.
+     */
+    textSize?: TTypographySizes;
+    /**
+     * Отображение индикатора загрузки внутри кнопки.
+     * Индикатор отображается только при disabled=true.
      * По умолчанию false.
      */
-    asChild?: boolean;
+    showLoader?: boolean;
 }
 /**
  * Компонент Button используется для интерактивных элементов действия.
- * Поддерживает различные варианты оформления (bg) и размеры (size).
+ * Поддерживает различные варианты оформления (variant) и размеры (size).
  *
  * @example
- * <Button bg="primary" size="40">Нажми меня</Button>
+ * <Button variant="primary-fill" size="40">Нажми меня</Button>
  */
 declare const Button: FC<IButtonProps>;
 

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { FC } from 'react';
 import { VariantProps } from 'class-variance-authority';
+import { icons } from 'lucide-react';
 
 declare const typographyVariants: (props?: ({
-    size?: "button/m/16" | "button/m/14" | null | undefined;
+    size?: "body/r/16" | "display/eb/64" | "display/b/56" | "heading/b/48" | "heading/sb/40" | "heading/sb/36" | "heading/sb/32" | "heading/sb/28" | "subtitle/sb/24" | "subtitle/m/24" | "subtitle/sb/20" | "subtitle/m/20" | "subtitle/sb/18" | "subtitle/m/18" | "body/m/18" | "body/sb/16" | "body/m/16" | "body/sb/14" | "body/m/14" | "body/r/14" | "button/m/20" | "button/m/18" | "button/m/16" | "button/m/14" | "caption/r/14" | "caption/sb/12" | "caption/m/12" | "caption/r/12" | "caption/m/10" | "caption/r/10" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TTag = 'p' | 'span';
 interface ITypographyProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
@@ -12,25 +13,75 @@ interface ITypographyProps extends React.HTMLAttributes<HTMLParagraphElement>, V
 }
 declare const Typography: FC<ITypographyProps>;
 
-declare const buttonVariants: (props?: ({
-    bg?: "primary" | "secondary" | "outline" | null | undefined;
-    size?: "32" | "40" | "48" | "56" | null | undefined;
+declare const typographySizes: {
+    'display/eb/64': string;
+    'display/b/56': string;
+    'heading/b/48': string;
+    'heading/sb/40': string;
+    'heading/sb/36': string;
+    'heading/sb/32': string;
+    'heading/sb/28': string;
+    'subtitle/sb/24': string;
+    'subtitle/m/24': string;
+    'subtitle/sb/20': string;
+    'subtitle/m/20': string;
+    'subtitle/sb/18': string;
+    'subtitle/m/18': string;
+    'body/m/18': string;
+    'body/sb/16': string;
+    'body/m/16': string;
+    'body/r/16': string;
+    'body/sb/14': string;
+    'body/m/14': string;
+    'body/r/14': string;
+    'button/m/20': string;
+    'button/m/18': string;
+    'button/m/16': string;
+    'button/m/14': string;
+    'caption/r/14': string;
+    'caption/sb/12': string;
+    'caption/m/12': string;
+    'caption/r/12': string;
+    'caption/m/10': string;
+    'caption/r/10': string;
+};
+
+type TTypographySizes = keyof typeof typographySizes;
+
+declare const buttonConfig: (props?: ({
+    variant?: "primary-fill" | "primary-outline" | "primary-ghost" | "secondary-fill" | "secondary-outline" | null | undefined;
+    size?: "56" | "32" | "40" | "48" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonConfig> {
     /** Контент кнопки (текст или иконки) */
     children: React.ReactNode;
     /**
-     * Если true, оборачивает children в компонент Typography для единообразия.
+     * Иконка для отображения внутри кнопки.
+     */
+    icon?: keyof typeof icons;
+    /**
+     * Расположение иконки внутри кнопки.
+     * По умолчанию 'left'.
+     */
+    iconSide?: 'left' | 'right';
+    /**
+     * Размер текста внутри кнопки.
+     * По умолчанию 'body/r/16'.
+     */
+    textSize?: TTypographySizes;
+    /**
+     * Отображение индикатора загрузки внутри кнопки.
+     * Индикатор отображается только при disabled=true.
      * По умолчанию false.
      */
-    asChild?: boolean;
+    showLoader?: boolean;
 }
 /**
  * Компонент Button используется для интерактивных элементов действия.
- * Поддерживает различные варианты оформления (bg) и размеры (size).
+ * Поддерживает различные варианты оформления (variant) и размеры (size).
  *
  * @example
- * <Button bg="primary" size="40">Нажми меня</Button>
+ * <Button variant="primary-fill" size="40">Нажми меня</Button>
  */
 declare const Button: FC<IButtonProps>;
 

package/dist/index.js

@@ -10,8 +10,36 @@ import { cva } from "class-variance-authority";
 
 // src/stories/typography/config/typography-sizes.ts
 var typographySizes = {
+  "display/eb/64": "text-[64px] font-extrabold",
+  "display/b/56": "text-[56px] font-bold",
+  "heading/b/48": "text-[48px] font-bold",
+  "heading/sb/40": "text-[40px] font-semibold",
+  "heading/sb/36": "text-[36px] font-semibold",
+  "heading/sb/32": "text-[32px] font-semibold",
+  "heading/sb/28": "text-[28px] font-semibold",
+  "subtitle/sb/24": "text-[24px] font-semibold",
+  "subtitle/m/24": "text-[24px] font-medium",
+  "subtitle/sb/20": "text-[20px] font-semibold",
+  "subtitle/m/20": "text-[20px] font-medium",
+  "subtitle/sb/18": "text-[18px] font-semibold",
+  "subtitle/m/18": "text-[18px] font-medium",
+  "body/m/18": "text-[18px] font-medium",
+  "body/sb/16": "text-[16px] font-semibold",
+  "body/m/16": "text-[16px] font-medium",
+  "body/r/16": "text-[16px] font-normal",
+  "body/sb/14": "text-[14px] font-semibold",
+  "body/m/14": "text-[14px] font-medium",
+  "body/r/14": "text-[14px] font-normal",
+  "button/m/20": "text-[20px] font-medium",
+  "button/m/18": "text-[18px] font-medium",
   "button/m/16": "text-[16px] font-medium",
-  "button/m/14": "text-[14px] font-medium"
+  "button/m/14": "text-[14px] font-medium",
+  "caption/r/14": "text-[14px] font-normal",
+  "caption/sb/12": "text-[12px] font-semibold",
+  "caption/m/12": "text-[12px] font-medium",
+  "caption/r/12": "text-[12px] font-normal",
+  "caption/m/10": "text-[10px] font-medium",
+  "caption/r/10": "text-[10px] font-normal"
 };
 
 // src/stories/typography/ui/typography.tsx
@@ -23,7 +51,7 @@ var typographyVariants = cva("transition-all duration-300 leading-[100%]", {
     }
   },
   defaultVariants: {
-    size: "button/m/16"
+    size: "body/r/16"
   }
 });
 var Typography = ({ children, tag = "p", size, className, ...props }) => {
@@ -34,11 +62,13 @@ var Typography = ({ children, tag = "p", size, className, ...props }) => {
 // src/stories/button/ui/button.tsx
 import { cva as cva2 } from "class-variance-authority";
 
-// src/stories/button/config/button-bgs.ts
-var buttonBgs = {
-  primary: "bg-blue-500 text-white hover:bg-blue-600",
-  secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-  outline: "bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-50"
+// src/stories/button/config/button-variants.ts
+var buttonVariants = {
+  "primary-fill": "bg-primary-blue-500 text-white not-disabled:hover:bg-primary-blue-800 not-disabled:active:bg-primary-blue-700 disabled:bg-neutral-200 disabled:text-neutral-400",
+  "primary-outline": "bg-transparent border border-primary-blue-500 text-primary-blue-500 not-disabled:hover:border-primary-blue-800 not-disabled:hover:text-primary-blue-800 not-disabled:active:border-primary-blue-700 not-disabled:active:text-primary-blue-700 disabled:border-primary-neutral-200 disabled:text-primary-neutral-400",
+  "primary-ghost": "bg-transparent text-primary-blue-500 not-disabled:hover:text-primary-blue-800 not-disabled:active:text-primary-blue-700 disabled:text-primary-neutral-400",
+  "secondary-fill": "bg-primary-neutral-800 text-white hover:bg-primary-neutral-700",
+  "secondary-outline": "border-2 border-primary-neutral-800 text-primary-neutral-800 not-disabled:hover:bg-primary-neutral-700 not-disabled:active:bg-primary-neutral-700"
 };
 
 // src/stories/button/config/button-sizes.ts
@@ -50,23 +80,42 @@ var buttonSizes = {
 };
 
 // src/stories/button/ui/button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var buttonVariants = cva2("transition-all duration-300 py-2 px-4 rounded-[8px] leading-[100%]", {
-  variants: {
-    bg: {
-      ...buttonBgs
+import { icons, Loader2 } from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonConfig = cva2(
+  "transition-all cursor-pointer duration-300 py-2 px-4 rounded-[8px] flex items-center gap-2 disabled:cursor-not-allowed ",
+  {
+    variants: {
+      variant: {
+        ...buttonVariants
+      },
+      size: {
+        ...buttonSizes
+      }
     },
-    size: {
-      ...buttonSizes
+    defaultVariants: {
+      variant: "primary-fill",
+      size: "56"
     }
-  },
-  defaultVariants: {
-    bg: "primary",
-    size: "32"
   }
-});
-var Button = ({ children, bg, size, className, asChild = false, ...props }) => {
-  return /* @__PURE__ */ jsx2("button", { ...props, className: cn(buttonVariants({ bg, size, className })), children: asChild ? /* @__PURE__ */ jsx2(Typography, { children }) : children });
+);
+var Button = ({
+  children,
+  variant,
+  size,
+  className,
+  iconSide = "left",
+  textSize = "body/r/16",
+  showLoader = false,
+  icon,
+  ...props
+}) => {
+  const Icon = icon && icons[icon];
+  return /* @__PURE__ */ jsx2("button", { ...props, className: cn(buttonConfig({ variant, size, className })), children: props.disabled && showLoader ? /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx2(Loader2, { size: 20, strokeWidth: 1.5, className: "animate-spin" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && iconSide === "left" && /* @__PURE__ */ jsx2(Icon, { size: 20, strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsx2(Typography, { size: textSize, children }),
+    Icon && iconSide === "right" && /* @__PURE__ */ jsx2(Icon, { size: 20, strokeWidth: 1.5 })
+  ] }) });
 };
 export {
   Button,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/stories/typography/ui/typography.tsx","../src/stories/typography/config/typography-sizes.ts","../src/stories/button/ui/button.tsx","../src/stories/button/config/button-bgs.ts","../src/stories/button/config/button-sizes.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { FC } from 'react'\nimport { cn } from '@/lib/utils'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { typographySizes } from '../config/typography-sizes'\n\nconst typographyVariants = cva('transition-all duration-300 leading-[100%]', {\n\tvariants: {\n\t\tsize: {\n\t\t\t...typographySizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'button/m/16',\n\t},\n})\n\ntype TTag = 'p' | 'span'\n\nexport interface ITypographyProps\n\textends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {\n\tchildren: React.ReactNode\n\ttag?: TTag\n}\n\nexport const Typography: FC<ITypographyProps> = ({ children, tag = 'p', size, className, ...props }) => {\n\tconst Tag = tag\n\n\treturn (\n\t\t<Tag {...props} className={cn(typographyVariants({ size, className }))}>\n\t\t\t{children}\n\t\t</Tag>\n\t)\n}","export const typographySizes = {\n\t'button/m/16': 'text-[16px] font-medium',\n\t'button/m/14': 'text-[14px] font-medium',\n}","'use client'\n\nimport { FC } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '@/stories/typography'\nimport { buttonBgs, buttonSizes } from '../config'\n\nconst buttonVariants = cva('transition-all duration-300 py-2 px-4 rounded-[8px] leading-[100%]', {\n\tvariants: {\n\t\tbg: {\n\t\t\t...buttonBgs,\n\t\t},\n\t\tsize: {\n\t\t\t...buttonSizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbg: 'primary',\n\t\tsize: '32',\n\t},\n})\n\nexport interface IButtonProps\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n\t/** Контент кнопки (текст или иконки) */\n\tchildren: React.ReactNode\n\t/**\n\t * Если true, оборачивает children в компонент Typography для единообразия.\n\t * По умолчанию false.\n\t */\n\tasChild?: boolean\n}\n\n/**\n * Компонент Button используется для интерактивных элементов действия.\n * Поддерживает различные варианты оформления (bg) и размеры (size).\n *\n * @example\n * <Button bg=\"primary\" size=\"40\">Нажми меня</Button>\n */\nexport const Button: FC<IButtonProps> = ({ children, bg, size, className, asChild = false, ...props }) => {\n\treturn (\n\t\t<button {...props} className={cn(buttonVariants({ bg, size, className }))}>\n\t\t\t{asChild ? <Typography>{children}</Typography> : children}\n\t\t</button>\n\t)\n}","export const buttonBgs = {\n\tprimary: 'bg-blue-500 text-white hover:bg-blue-600',\n\tsecondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',\n\toutline: 'bg-transparent border-2 border-blue-500 text-blue-500 hover:bg-blue-50',\n}","export const buttonSizes = {\n\t'32': 'h-[32px]',\n\t'40': 'h-[40px]',\n\t'48': 'h-[48px]',\n\t'56': 'h-[56px]',\n}"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACDA,SAAS,WAAyB;;;ACJ3B,IAAM,kBAAkB;AAAA,EAC9B,eAAe;AAAA,EACf,eAAe;AAChB;;;AD2BE;AAvBF,IAAM,qBAAqB,IAAI,8CAA8C;AAAA,EAC5E,UAAU;AAAA,IACT,MAAM;AAAA,MACL,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EACP;AACD,CAAC;AAUM,IAAM,aAAmC,CAAC,EAAE,UAAU,MAAM,KAAK,MAAM,WAAW,GAAG,MAAM,MAAM;AACvG,QAAM,MAAM;AAEZ,SACC,oBAAC,OAAK,GAAG,OAAO,WAAW,GAAG,mBAAmB,EAAE,MAAM,UAAU,CAAC,CAAC,GACnE,UACF;AAEF;;;AE/BA,SAAS,OAAAA,YAAyB;;;ACH3B,IAAM,YAAY;AAAA,EACxB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AACV;;;ACJO,IAAM,cAAc;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACP;;;AFuCc,gBAAAC,YAAA;AApCd,IAAM,iBAAiBC,KAAI,sEAAsE;AAAA,EAChG,UAAU;AAAA,IACT,IAAI;AAAA,MACH,GAAG;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACL,GAAG;AAAA,IACJ;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,MAAM;AAAA,EACP;AACD,CAAC;AAoBM,IAAM,SAA2B,CAAC,EAAE,UAAU,IAAI,MAAM,WAAW,UAAU,OAAO,GAAG,MAAM,MAAM;AACzG,SACC,gBAAAD,KAAC,YAAQ,GAAG,OAAO,WAAW,GAAG,eAAe,EAAE,IAAI,MAAM,UAAU,CAAC,CAAC,GACtE,oBAAU,gBAAAA,KAAC,cAAY,UAAS,IAAgB,UAClD;AAEF;","names":["cva","jsx","cva"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/stories/typography/ui/typography.tsx","../src/stories/typography/config/typography-sizes.ts","../src/stories/button/ui/button.tsx","../src/stories/button/config/button-variants.ts","../src/stories/button/config/button-sizes.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { FC } from 'react'\nimport { cn } from '@/lib/utils'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { typographySizes } from '../config/typography-sizes'\n\nconst typographyVariants = cva('transition-all duration-300 leading-[100%]', {\n\tvariants: {\n\t\tsize: {\n\t\t\t...typographySizes,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'body/r/16',\n\t},\n})\n\ntype TTag = 'p' | 'span'\n\nexport interface ITypographyProps\n\textends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {\n\tchildren: React.ReactNode\n\ttag?: TTag\n}\n\nexport const Typography: FC<ITypographyProps> = ({ children, tag = 'p', size, className, ...props }) => {\n\tconst Tag = tag\n\n\treturn (\n\t\t<Tag {...props} className={cn(typographyVariants({ size, className }))}>\n\t\t\t{children}\n\t\t</Tag>\n\t)\n}","export const typographySizes = {\n\t'display/eb/64': 'text-[64px] font-extrabold',\n\t'display/b/56': 'text-[56px] font-bold',\n\n\t'heading/b/48': 'text-[48px] font-bold',\n\t'heading/sb/40': 'text-[40px] font-semibold',\n\t'heading/sb/36': 'text-[36px] font-semibold',\n\t'heading/sb/32': 'text-[32px] font-semibold',\n\t'heading/sb/28': 'text-[28px] font-semibold',\n\n\t'subtitle/sb/24': 'text-[24px] font-semibold',\n\t'subtitle/m/24': 'text-[24px] font-medium',\n\t'subtitle/sb/20': 'text-[20px] font-semibold',\n\t'subtitle/m/20': 'text-[20px] font-medium',\n\t'subtitle/sb/18': 'text-[18px] font-semibold',\n\t'subtitle/m/18': 'text-[18px] font-medium',\n\n\t'body/m/18': 'text-[18px] font-medium',\n\t'body/sb/16': 'text-[16px] font-semibold',\n\t'body/m/16': 'text-[16px] font-medium',\n\t'body/r/16': 'text-[16px] font-normal',\n\t'body/sb/14': 'text-[14px] font-semibold',\n\t'body/m/14': 'text-[14px] font-medium',\n\t'body/r/14': 'text-[14px] font-normal',\n\n\t'button/m/20': 'text-[20px] font-medium',\n\t'button/m/18': 'text-[18px] font-medium',\n\t'button/m/16': 'text-[16px] font-medium',\n\t'button/m/14': 'text-[14px] font-medium',\n\n\t'caption/r/14': 'text-[14px] font-normal',\n\t'caption/sb/12': 'text-[12px] font-semibold',\n\t'caption/m/12': 'text-[12px] font-medium',\n\t'caption/r/12': 'text-[12px] font-normal',\n\t'caption/m/10': 'text-[10px] font-medium',\n\t'caption/r/10': 'text-[10px] font-normal',\n}","'use client'\n\nimport { FC } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Typography } from '@/stories/typography'\nimport { buttonSizes, buttonVariants } from '../config'\nimport { icons, Loader2 } from 'lucide-react'\nimport { TTypographySizes } from '@/stories/typography/types'\n\nconst buttonConfig = cva(\n\t'transition-all cursor-pointer duration-300 py-2 px-4 rounded-[8px] flex items-center gap-2 disabled:cursor-not-allowed ',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\t...buttonVariants,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\t...buttonSizes,\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'primary-fill',\n\t\t\tsize: '56',\n\t\t},\n\t},\n)\n\nexport interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonConfig> {\n\t/** Контент кнопки (текст или иконки) */\n\tchildren: React.ReactNode\n\n\t/**\n\t * Иконка для отображения внутри кнопки.\n\t */\n\ticon?: keyof typeof icons\n\n\t/**\n\t * Расположение иконки внутри кнопки.\n\t * По умолчанию 'left'.\n\t */\n\ticonSide?: 'left' | 'right'\n\n\t/**\n\t * Размер текста внутри кнопки.\n\t * По умолчанию 'body/r/16'.\n\t */\n\ttextSize?: TTypographySizes\n\n\t/**\n\t * Отображение индикатора загрузки внутри кнопки.\n\t * Индикатор отображается только при disabled=true.\n\t * По умолчанию false.\n\t */\n\tshowLoader?: boolean\n}\n\n/**\n * Компонент Button используется для интерактивных элементов действия.\n * Поддерживает различные варианты оформления (variant) и размеры (size).\n *\n * @example\n * <Button variant=\"primary-fill\" size=\"40\">Нажми меня</Button>\n */\nexport const Button: FC<IButtonProps> = ({\n\tchildren,\n\tvariant,\n\tsize,\n\tclassName,\n\ticonSide = 'left',\n\ttextSize = 'body/r/16',\n\tshowLoader = false,\n\ticon,\n\t...props\n}) => {\n\tconst Icon = icon && icons[icon]\n\n\treturn (\n\t\t<button {...props} className={cn(buttonConfig({ variant, size, className }))}>\n\t\t\t{props.disabled && showLoader ? (\n\t\t\t\t<div className='flex items-center justify-center'>\n\t\t\t\t\t<Loader2 size={20} strokeWidth={1.5} className='animate-spin' />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{Icon && iconSide === 'left' && <Icon size={20} strokeWidth={1.5} />}\n\n\t\t\t\t\t<Typography size={textSize}>{children}</Typography>\n\n\t\t\t\t\t{Icon && iconSide === 'right' && <Icon size={20} strokeWidth={1.5} />}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</button>\n\t)\n}","export const buttonVariants = {\n\t'primary-fill':\n\t\t'bg-primary-blue-500 text-white not-disabled:hover:bg-primary-blue-800 not-disabled:active:bg-primary-blue-700 disabled:bg-neutral-200 disabled:text-neutral-400',\n\n\t'primary-outline':\n\t\t'bg-transparent border border-primary-blue-500 text-primary-blue-500 not-disabled:hover:border-primary-blue-800 not-disabled:hover:text-primary-blue-800 not-disabled:active:border-primary-blue-700 not-disabled:active:text-primary-blue-700 disabled:border-primary-neutral-200 disabled:text-primary-neutral-400',\n\n\t'primary-ghost':\n\t\t'bg-transparent text-primary-blue-500 not-disabled:hover:text-primary-blue-800 not-disabled:active:text-primary-blue-700 disabled:text-primary-neutral-400',\n\n\t'secondary-fill': 'bg-primary-neutral-800 text-white hover:bg-primary-neutral-700',\n\n\t'secondary-outline':\n\t\t'border-2 border-primary-neutral-800 text-primary-neutral-800 not-disabled:hover:bg-primary-neutral-700 not-disabled:active:bg-primary-neutral-700',\n}","export const buttonSizes = {\n\t'32': 'h-[32px]',\n\t'40': 'h-[40px]',\n\t'48': 'h-[48px]',\n\t'56': 'h-[56px]',\n}"],"mappings":"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","names":["cva","jsx","cva"]}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@bezdenegsvarkinet/ui-library",
 	"private": false,
-	"version": "1.1.2",
+	"version": "1.3.0",
 	"type": "module",
 	"files": [
 		"dist"