@bezdenegsvarkinet/ui-library 1.1.2 → 1.2.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,12 @@ 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-blue-500 text-white not-disabled:hover:bg-blue-800 not-disabled:active:bg-blue-700 disabled:bg-neutral-200 disabled:text-neutral-500",
+  "primary-outline": "bg-transparent border border-blue-500 text-blue-500 not-disabled:hover:border-blue-800 not-disabled:active:border-blue-700 disabled:border-neutral-500 disabled:bg-neutral-200",
+  "secondary-fill": "bg-neutral-800 text-white hover:bg-neutral-700",
+  "secondary-outline": "border-2 border-neutral-800 text-neutral-800 not-disabled:hover:bg-neutral-700 not-disabled:active:bg-neutral-700 disabled:bg-neutral-200"
 };
 
 // src/stories/button/config/button-sizes.ts
@@ -77,23 +106,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-blue-500 text-white not-disabled:hover:bg-blue-800 not-disabled:active:bg-blue-700 disabled:bg-neutral-200 disabled:text-neutral-500',\n\t'primary-outline':\n\t\t'bg-transparent border border-blue-500 text-blue-500 not-disabled:hover:border-blue-800 not-disabled:active:border-blue-700 disabled:border-neutral-500 disabled:bg-neutral-200',\n\n\t'secondary-fill': 'bg-neutral-800 text-white hover:bg-neutral-700',\n\t'secondary-outline':\n\t\t'border-2 border-neutral-800 text-neutral-800 not-disabled:hover:bg-neutral-700 not-disabled:active:bg-neutral-700 disabled:bg-neutral-200',\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,EACD,mBACC;AAAA,EAED,kBAAkB;AAAA,EAClB,qBACC;AACF;;;ACTO,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,15 +8,21 @@
     --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-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
     --color-white: #fff;
     --spacing: 0.25rem;
+    --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);
@@ -202,6 +208,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,6 +226,9 @@
   .items-start {
     align-items: flex-start;
   }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -234,11 +249,14 @@
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
+  .border-neutral-800 {
+    border-color: var(--color-neutral-800);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
+  .bg-neutral-800 {
+    background-color: var(--color-neutral-800);
   }
   .bg-transparent {
     background-color: transparent;
@@ -249,25 +267,77 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .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);
   }
+  .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-blue-500 {
     color: var(--color-blue-500);
   }
-  .text-gray-800 {
-    color: var(--color-gray-800);
+  .text-neutral-800 {
+    color: var(--color-neutral-800);
   }
   .text-red-500 {
     color: var(--color-red-500);
@@ -275,10 +345,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,27 +354,81 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .hover\:bg-blue-50 {
+  .hover\:bg-neutral-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-50);
+        background-color: var(--color-neutral-700);
       }
     }
   }
-  .hover\:bg-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-600);
+  .not-disabled\:hover\:border-blue-800 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-blue-800);
+        }
       }
     }
   }
-  .hover\:bg-gray-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-300);
+  .not-disabled\:hover\:bg-blue-800 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-blue-800);
+        }
       }
     }
   }
+  .not-disabled\:hover\:bg-neutral-700 {
+    &:not(*:disabled) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-neutral-700);
+        }
+      }
+    }
+  }
+  .not-disabled\:active\:border-blue-700 {
+    &:not(*:disabled) {
+      &:active {
+        border-color: var(--color-blue-700);
+      }
+    }
+  }
+  .not-disabled\:active\:bg-blue-700 {
+    &:not(*:disabled) {
+      &:active {
+        background-color: var(--color-blue-700);
+      }
+    }
+  }
+  .not-disabled\:active\:bg-neutral-700 {
+    &:not(*:disabled) {
+      &:active {
+        background-color: var(--color-neutral-700);
+      }
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:border-neutral-500 {
+    &:disabled {
+      border-color: var(--color-neutral-500);
+    }
+  }
+  .disabled\:bg-neutral-200 {
+    &:disabled {
+      background-color: var(--color-neutral-200);
+    }
+  }
+  .disabled\:text-neutral-500 {
+    &:disabled {
+      color: var(--color-neutral-500);
+    }
+  }
 }
 :root {
   --color-primary: #3b82f6;
@@ -426,15 +546,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 +566,6 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
-      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }

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" | "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" | "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,12 @@ 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-blue-500 text-white not-disabled:hover:bg-blue-800 not-disabled:active:bg-blue-700 disabled:bg-neutral-200 disabled:text-neutral-500",
+  "primary-outline": "bg-transparent border border-blue-500 text-blue-500 not-disabled:hover:border-blue-800 not-disabled:active:border-blue-700 disabled:border-neutral-500 disabled:bg-neutral-200",
+  "secondary-fill": "bg-neutral-800 text-white hover:bg-neutral-700",
+  "secondary-outline": "border-2 border-neutral-800 text-neutral-800 not-disabled:hover:bg-neutral-700 not-disabled:active:bg-neutral-700 disabled:bg-neutral-200"
 };
 
 // src/stories/button/config/button-sizes.ts
@@ -50,23 +79,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-blue-500 text-white not-disabled:hover:bg-blue-800 not-disabled:active:bg-blue-700 disabled:bg-neutral-200 disabled:text-neutral-500',\n\t'primary-outline':\n\t\t'bg-transparent border border-blue-500 text-blue-500 not-disabled:hover:border-blue-800 not-disabled:active:border-blue-700 disabled:border-neutral-500 disabled:bg-neutral-200',\n\n\t'secondary-fill': 'bg-neutral-800 text-white hover:bg-neutral-700',\n\t'secondary-outline':\n\t\t'border-2 border-neutral-800 text-neutral-800 not-disabled:hover:bg-neutral-700 not-disabled:active:bg-neutral-700 disabled:bg-neutral-200',\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,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,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,iBAAiB;AAAA,EAC7B,gBACC;AAAA,EACD,mBACC;AAAA,EAED,kBAAkB;AAAA,EAClB,qBACC;AACF;;;ACTO,IAAM,cAAc;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACP;;;AFEA,SAAS,OAAO,eAAe;AA0E1B,SAGD,UAHC,OAAAC,MAGD,YAHC;AAvEL,IAAM,eAAeC;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,MAAM,IAAI;AAE/B,SACC,gBAAAD,KAAC,YAAQ,GAAG,OAAO,WAAW,GAAG,aAAa,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GACzE,gBAAM,YAAY,aAClB,gBAAAA,KAAC,SAAI,WAAU,oCACd,0BAAAA,KAAC,WAAQ,MAAM,IAAI,aAAa,KAAK,WAAU,gBAAe,GAC/D,IAEA,iCACE;AAAA,YAAQ,aAAa,UAAU,gBAAAA,KAAC,QAAK,MAAM,IAAI,aAAa,KAAK;AAAA,IAElE,gBAAAA,KAAC,cAAW,MAAM,UAAW,UAAS;AAAA,IAErC,QAAQ,aAAa,WAAW,gBAAAA,KAAC,QAAK,MAAM,IAAI,aAAa,KAAK;AAAA,KACpE,GAEF;AAEF;","names":["cva","jsx","cva"]}

package/package.json

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