@dmitriikapustin/ui 0.3.3 → 0.3.6

package/dist/index.cjs

@@ -3780,18 +3780,26 @@ __styleInject(`@charset "UTF-8";
 
 .Footer-module_grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
   gap: 2rem;
+  text-align: center;
 }
 @media (min-width: 768px) {
   .Footer-module_grid {
     grid-template-columns: repeat(4, 1fr);
+    text-align: left;
   }
 }
 
 .Footer-module_brandCell {
   display: flex;
   flex-direction: column;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .Footer-module_brandCell {
+    align-items: flex-start;
+  }
 }
 
 .Footer-module_tagline {
@@ -3817,6 +3825,12 @@ __styleInject(`@charset "UTF-8";
   list-style: none;
   padding: 0;
   margin: 0;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .Footer-module_linkList {
+    align-items: flex-start;
+  }
 }
 
 .Footer-module_link {
@@ -3973,16 +3987,24 @@ __styleInject(`.PricingCard-module_root {
   color: var(--fg-secondary);
 }
 
+.PricingCard-module_featureItemExcluded {
+  color: var(--fg-muted);
+}
+
 .PricingCard-module_featureIcon {
   flex-shrink: 0;
   margin-top: 2px;
   color: var(--color-success);
 }
 
+.PricingCard-module_featureIconExcluded {
+  color: var(--fg-muted);
+}
+
 .PricingCard-module_cta {
   width: 100%;
 }`);
-var __default44 = { "root": "PricingCard-module_root", "highlighted": "PricingCard-module_highlighted", "badgeWrap": "PricingCard-module_badgeWrap", "header": "PricingCard-module_header", "plan": "PricingCard-module_plan", "description": "PricingCard-module_description", "priceBlock": "PricingCard-module_priceBlock", "price": "PricingCard-module_price", "period": "PricingCard-module_period", "features": "PricingCard-module_features", "featureItem": "PricingCard-module_featureItem", "featureIcon": "PricingCard-module_featureIcon", "cta": "PricingCard-module_cta" };
+var __default44 = { "root": "PricingCard-module_root", "highlighted": "PricingCard-module_highlighted", "badgeWrap": "PricingCard-module_badgeWrap", "header": "PricingCard-module_header", "plan": "PricingCard-module_plan", "description": "PricingCard-module_description", "priceBlock": "PricingCard-module_priceBlock", "price": "PricingCard-module_price", "period": "PricingCard-module_period", "features": "PricingCard-module_features", "featureItem": "PricingCard-module_featureItem", "featureItemExcluded": "PricingCard-module_featureItemExcluded", "featureIcon": "PricingCard-module_featureIcon", "featureIconExcluded": "PricingCard-module_featureIconExcluded", "cta": "PricingCard-module_cta" };
 function PricingCard({
   plan,
   price,
@@ -4008,10 +4030,21 @@ function PricingCard({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default44.price, children: price }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default44.period, children: period })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: __default44.features, children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: __default44.featureItem, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 16 }) }),
-          feature
-        ] }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: __default44.features, children: features.map((feature, i) => {
+          const text = typeof feature === "string" ? feature : feature.text;
+          const isExcluded = typeof feature === "object" && feature.included === false;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: `${__default44.featureItem}${isExcluded ? ` ${__default44.featureItemExcluded}` : ""}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${__default44.featureIcon}${isExcluded ? ` ${__default44.featureIconExcluded}` : ""}`, children: isExcluded ? /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 16 }) }),
+                text
+              ]
+            },
+            i
+          );
+        }) }),
         cta && /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -5517,7 +5550,7 @@ function ComparisonTable({ columns, rows, className = "" }) {
           "td",
           {
             className: cellClass,
-            children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.textValue, children: val })
+            children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 18 }) }) : typeof val === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.textValue, children: val }) : val
           },
           vi
         );
@@ -6873,38 +6906,47 @@ __styleInject(`@charset "UTF-8";
 }
 
 .PromoHeroForm-module_formInner {
+  /* Mobile: input \u0438 \u043A\u043D\u043E\u043F\u043A\u0430 \u2014 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B (input \u0441 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u043E\u0439 \u0440\u0430\u043C\u043A\u043E\u0439, \u043A\u043D\u043E\u043F\u043A\u0430 \u043A\u0430\u043A pill).
+     Desktop \u2265640px: \u043E\u0431\u0430 \u0432\u043D\u0443\u0442\u0440\u0438 \u043E\u0431\u0449\u0435\u0439 pill-\u043E\u0431\u0451\u0440\u0442\u043A\u0438, side-by-side. */
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  background: var(--bg);
-  border: 1px solid var(--neutral-200);
-  border-radius: 24px;
-  transition: border-color var(--transition-fast);
-}
-.PromoHeroForm-module_formInner:focus-within {
-  border-color: var(--fg);
+  gap: 12px;
 }
 @media (min-width: 640px) {
   .PromoHeroForm-module_formInner {
     flex-direction: row;
     align-items: stretch;
+    gap: 8px;
+    padding: 8px;
+    background: var(--bg);
+    border: 1px solid var(--neutral-200);
     border-radius: 9999px;
+    transition: border-color var(--transition-fast);
+  }
+  .PromoHeroForm-module_formInner:focus-within {
+    border-color: var(--fg);
   }
 }
 
 .PromoHeroForm-module_input {
+  /* Mobile: \u0441\u0442\u0438\u043B\u044C \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043D \u0441 \u043F\u0430\u043A\u0435\u0442\u043D\u044B\u043C <Input> \u0430\u0442\u043E\u043C\u043E\u043C \u2014 \u043A\u043E\u043D\u0442\u0440\u0430\u0441\u0442\u043D\u0430\u044F \u0440\u0430\u043C\u043A\u0430 var(--fg-muted),
+     \u0446\u0432\u0435\u0442 var(--fg-secondary), padding-block 0.75rem (\u043D\u0430\u0442\u0443\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 ~44px \u043F\u043E line-height). */
   flex: 1;
   width: 100%;
-  height: 56px;
-  padding-inline: 16px;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 15px;
   letter-spacing: -0.25px;
-  color: var(--fg);
-  background: transparent;
-  border: none;
+  color: var(--fg-secondary);
+  background: var(--bg);
+  border: 1px solid var(--fg-muted);
+  border-radius: 9999px;
   outline: none;
+  transition: border-color var(--transition-fast);
+}
+.PromoHeroForm-module_input:focus {
+  border-color: var(--fg);
 }
 .PromoHeroForm-module_input::placeholder {
   color: var(--fg-muted);
@@ -6915,7 +6957,19 @@ __styleInject(`@charset "UTF-8";
 }
 @media (min-width: 640px) {
   .PromoHeroForm-module_input {
+    /* Desktop: \u0432\u043D\u0443\u0442\u0440\u0438 \u043E\u0431\u0449\u0435\u0439 pill-\u043E\u0431\u0451\u0440\u0442\u043A\u0438 \u2014 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0440\u0430\u043C\u043A\u0430 \u043D\u0435 \u043D\u0443\u0436\u043D\u0430.
+       \u0412\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043C hero-\u0432\u044B\u0441\u043E\u0442\u0443 56px \u0434\u043B\u044F \u043F\u0430\u0440\u043D\u043E\u0441\u0442\u0438 \u0441 Button.size='hero'. */
+    height: 56px;
+    padding-block: 0;
     padding-inline: 24px;
+    font-size: 16px;
+    color: var(--fg);
+    background: transparent;
+    border: none;
+    border-radius: 0;
+  }
+  .PromoHeroForm-module_input:focus {
+    border-color: transparent;
   }
 }
 

package/dist/index.d.cts

@@ -517,12 +517,21 @@ interface FooterProps {
 }
 declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
 
+interface PricingFeature {
+    text: string;
+    /** `false` → приглушённая ✗ + muted текст. `true`/undefined → ✓ + обычный текст. */
+    included?: boolean;
+}
 interface PricingCardProps {
     plan: string;
     price: string;
     period?: string;
     description?: string;
-    features: string[];
+    /**
+     * Список features. Строки рендерятся как `included: true` (BC).
+     * Объекты `{ text, included }` — позволяют пометить пункт как отсутствующий (✗).
+     */
+    features: Array<string | PricingFeature>;
     highlighted?: boolean;
     badge?: string;
     /** CTA-кнопка. Если undefined — кнопка не рендерится. */
@@ -715,7 +724,13 @@ interface ComparisonColumn {
 }
 interface ComparisonRow {
     feature: string;
-    values: (boolean | string)[];
+    /**
+     * Значения колонок по порядку.
+     * - `boolean` — рендерится как ✓ (true) / ✗ (false) иконка.
+     * - `string` — рендерится как текст по центру (стилизация .textValue).
+     * - `ReactNode` (JSX) — рендерится as-is без обёртки. Use-case: CTA-row с `<Button>`, badges, иконки.
+     */
+    values: (boolean | string | ReactNode)[];
 }
 interface ComparisonTableProps {
     columns: ComparisonColumn[];

package/dist/index.d.ts

@@ -517,12 +517,21 @@ interface FooterProps {
 }
 declare function Footer({ brand, columns, socials, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
 
+interface PricingFeature {
+    text: string;
+    /** `false` → приглушённая ✗ + muted текст. `true`/undefined → ✓ + обычный текст. */
+    included?: boolean;
+}
 interface PricingCardProps {
     plan: string;
     price: string;
     period?: string;
     description?: string;
-    features: string[];
+    /**
+     * Список features. Строки рендерятся как `included: true` (BC).
+     * Объекты `{ text, included }` — позволяют пометить пункт как отсутствующий (✗).
+     */
+    features: Array<string | PricingFeature>;
     highlighted?: boolean;
     badge?: string;
     /** CTA-кнопка. Если undefined — кнопка не рендерится. */
@@ -715,7 +724,13 @@ interface ComparisonColumn {
 }
 interface ComparisonRow {
     feature: string;
-    values: (boolean | string)[];
+    /**
+     * Значения колонок по порядку.
+     * - `boolean` — рендерится как ✓ (true) / ✗ (false) иконка.
+     * - `string` — рендерится как текст по центру (стилизация .textValue).
+     * - `ReactNode` (JSX) — рендерится as-is без обёртки. Use-case: CTA-row с `<Button>`, badges, иконки.
+     */
+    values: (boolean | string | ReactNode)[];
 }
 interface ComparisonTableProps {
     columns: ComparisonColumn[];

package/dist/index.js

@@ -3774,18 +3774,26 @@ __styleInject(`@charset "UTF-8";
 
 .Footer-module_grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
   gap: 2rem;
+  text-align: center;
 }
 @media (min-width: 768px) {
   .Footer-module_grid {
     grid-template-columns: repeat(4, 1fr);
+    text-align: left;
   }
 }
 
 .Footer-module_brandCell {
   display: flex;
   flex-direction: column;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .Footer-module_brandCell {
+    align-items: flex-start;
+  }
 }
 
 .Footer-module_tagline {
@@ -3811,6 +3819,12 @@ __styleInject(`@charset "UTF-8";
   list-style: none;
   padding: 0;
   margin: 0;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .Footer-module_linkList {
+    align-items: flex-start;
+  }
 }
 
 .Footer-module_link {
@@ -3967,16 +3981,24 @@ __styleInject(`.PricingCard-module_root {
   color: var(--fg-secondary);
 }
 
+.PricingCard-module_featureItemExcluded {
+  color: var(--fg-muted);
+}
+
 .PricingCard-module_featureIcon {
   flex-shrink: 0;
   margin-top: 2px;
   color: var(--color-success);
 }
 
+.PricingCard-module_featureIconExcluded {
+  color: var(--fg-muted);
+}
+
 .PricingCard-module_cta {
   width: 100%;
 }`);
-var __default44 = { "root": "PricingCard-module_root", "highlighted": "PricingCard-module_highlighted", "badgeWrap": "PricingCard-module_badgeWrap", "header": "PricingCard-module_header", "plan": "PricingCard-module_plan", "description": "PricingCard-module_description", "priceBlock": "PricingCard-module_priceBlock", "price": "PricingCard-module_price", "period": "PricingCard-module_period", "features": "PricingCard-module_features", "featureItem": "PricingCard-module_featureItem", "featureIcon": "PricingCard-module_featureIcon", "cta": "PricingCard-module_cta" };
+var __default44 = { "root": "PricingCard-module_root", "highlighted": "PricingCard-module_highlighted", "badgeWrap": "PricingCard-module_badgeWrap", "header": "PricingCard-module_header", "plan": "PricingCard-module_plan", "description": "PricingCard-module_description", "priceBlock": "PricingCard-module_priceBlock", "price": "PricingCard-module_price", "period": "PricingCard-module_period", "features": "PricingCard-module_features", "featureItem": "PricingCard-module_featureItem", "featureItemExcluded": "PricingCard-module_featureItemExcluded", "featureIcon": "PricingCard-module_featureIcon", "featureIconExcluded": "PricingCard-module_featureIconExcluded", "cta": "PricingCard-module_cta" };
 function PricingCard({
   plan,
   price,
@@ -4002,10 +4024,21 @@ function PricingCard({
           /* @__PURE__ */ jsx("span", { className: __default44.price, children: price }),
           /* @__PURE__ */ jsx("span", { className: __default44.period, children: period })
         ] }),
-        /* @__PURE__ */ jsx("ul", { className: __default44.features, children: features.map((feature, i) => /* @__PURE__ */ jsxs("li", { className: __default44.featureItem, children: [
-          /* @__PURE__ */ jsx("span", { className: __default44.featureIcon, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 16 }) }),
-          feature
-        ] }, i)) }),
+        /* @__PURE__ */ jsx("ul", { className: __default44.features, children: features.map((feature, i) => {
+          const text = typeof feature === "string" ? feature : feature.text;
+          const isExcluded = typeof feature === "object" && feature.included === false;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: `${__default44.featureItem}${isExcluded ? ` ${__default44.featureItemExcluded}` : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `${__default44.featureIcon}${isExcluded ? ` ${__default44.featureIconExcluded}` : ""}`, children: isExcluded ? /* @__PURE__ */ jsx(IconlyClose, { size: 16 }) : /* @__PURE__ */ jsx(IconlyCheck, { size: 16 }) }),
+                text
+              ]
+            },
+            i
+          );
+        }) }),
         cta && /* @__PURE__ */ jsx(
           Button,
           {
@@ -5511,7 +5544,7 @@ function ComparisonTable({ columns, rows, className = "" }) {
           "td",
           {
             className: cellClass,
-            children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsx(IconlyClose, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.textValue, children: val })
+            children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsx(IconlyClose, { size: 18 }) }) : typeof val === "string" ? /* @__PURE__ */ jsx("span", { className: __default57.textValue, children: val }) : val
           },
           vi
         );
@@ -6867,38 +6900,47 @@ __styleInject(`@charset "UTF-8";
 }
 
 .PromoHeroForm-module_formInner {
+  /* Mobile: input \u0438 \u043A\u043D\u043E\u043F\u043A\u0430 \u2014 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B (input \u0441 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u043E\u0439 \u0440\u0430\u043C\u043A\u043E\u0439, \u043A\u043D\u043E\u043F\u043A\u0430 \u043A\u0430\u043A pill).
+     Desktop \u2265640px: \u043E\u0431\u0430 \u0432\u043D\u0443\u0442\u0440\u0438 \u043E\u0431\u0449\u0435\u0439 pill-\u043E\u0431\u0451\u0440\u0442\u043A\u0438, side-by-side. */
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  background: var(--bg);
-  border: 1px solid var(--neutral-200);
-  border-radius: 24px;
-  transition: border-color var(--transition-fast);
-}
-.PromoHeroForm-module_formInner:focus-within {
-  border-color: var(--fg);
+  gap: 12px;
 }
 @media (min-width: 640px) {
   .PromoHeroForm-module_formInner {
     flex-direction: row;
     align-items: stretch;
+    gap: 8px;
+    padding: 8px;
+    background: var(--bg);
+    border: 1px solid var(--neutral-200);
     border-radius: 9999px;
+    transition: border-color var(--transition-fast);
+  }
+  .PromoHeroForm-module_formInner:focus-within {
+    border-color: var(--fg);
   }
 }
 
 .PromoHeroForm-module_input {
+  /* Mobile: \u0441\u0442\u0438\u043B\u044C \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043D \u0441 \u043F\u0430\u043A\u0435\u0442\u043D\u044B\u043C <Input> \u0430\u0442\u043E\u043C\u043E\u043C \u2014 \u043A\u043E\u043D\u0442\u0440\u0430\u0441\u0442\u043D\u0430\u044F \u0440\u0430\u043C\u043A\u0430 var(--fg-muted),
+     \u0446\u0432\u0435\u0442 var(--fg-secondary), padding-block 0.75rem (\u043D\u0430\u0442\u0443\u0440\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 ~44px \u043F\u043E line-height). */
   flex: 1;
   width: 100%;
-  height: 56px;
-  padding-inline: 16px;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 15px;
   letter-spacing: -0.25px;
-  color: var(--fg);
-  background: transparent;
-  border: none;
+  color: var(--fg-secondary);
+  background: var(--bg);
+  border: 1px solid var(--fg-muted);
+  border-radius: 9999px;
   outline: none;
+  transition: border-color var(--transition-fast);
+}
+.PromoHeroForm-module_input:focus {
+  border-color: var(--fg);
 }
 .PromoHeroForm-module_input::placeholder {
   color: var(--fg-muted);
@@ -6909,7 +6951,19 @@ __styleInject(`@charset "UTF-8";
 }
 @media (min-width: 640px) {
   .PromoHeroForm-module_input {
+    /* Desktop: \u0432\u043D\u0443\u0442\u0440\u0438 \u043E\u0431\u0449\u0435\u0439 pill-\u043E\u0431\u0451\u0440\u0442\u043A\u0438 \u2014 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0440\u0430\u043C\u043A\u0430 \u043D\u0435 \u043D\u0443\u0436\u043D\u0430.
+       \u0412\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043C hero-\u0432\u044B\u0441\u043E\u0442\u0443 56px \u0434\u043B\u044F \u043F\u0430\u0440\u043D\u043E\u0441\u0442\u0438 \u0441 Button.size='hero'. */
+    height: 56px;
+    padding-block: 0;
     padding-inline: 24px;
+    font-size: 16px;
+    color: var(--fg);
+    background: transparent;
+    border: none;
+    border-radius: 0;
+  }
+  .PromoHeroForm-module_input:focus {
+    border-color: transparent;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmitriikapustin/ui",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
   "author": "Kapustin Team",
   "license": "MIT",