@dmitriikapustin/ui 0.4.2 → 0.4.3

package/dist/index.cjs

@@ -1690,10 +1690,9 @@ function Skeleton({ variant = "line", width, height, className = "" }) {
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/SectionHeading.module.scss
 __styleInject(`@charset "UTF-8";
-/* SectionHeading \u2014 \u0435\u0434\u0438\u043D\u0430\u044F \u0442\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430 \u0434\u043B\u044F section-h2 \u0432 \u043F\u0430\u043A\u0435\u0442\u0435 \u0438 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F\u0445.
-   \u0417\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0437\u0435\u0440\u043A\u0430\u043B\u044F\u0442 PromoSplit-module_heading / PromoTestimonials-module_heading. */
+/* SectionHeading \u2014 \u0442\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430 \u0434\u043B\u044F section-headings.
+   \u0422\u0440\u0438 \u0440\u0430\u0437\u043C\u0435\u0440\u0430: sm (sub-block), md (default, typical section h2), lg (landing promo). */
 .SectionHeading-module_heading {
-  font-size: clamp(1.75rem, 4vw, 2.75rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.03em;
@@ -1702,6 +1701,21 @@ __styleInject(`@charset "UTF-8";
   margin: 0;
 }
 
+/* \u2014 \u0420\u0430\u0437\u043C\u0435\u0440\u044B (responsive clamp) \u2014 */
+.SectionHeading-module_sizeSm {
+  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
+  letter-spacing: -0.02em;
+}
+
+.SectionHeading-module_sizeMd {
+  font-size: clamp(1.5rem, 3vw, 2rem);
+}
+
+.SectionHeading-module_sizeLg {
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+}
+
+/* \u2014 \u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u2014 */
 .SectionHeading-module_alignLeft {
   text-align: left;
 }
@@ -1710,6 +1724,7 @@ __styleInject(`@charset "UTF-8";
   text-align: center;
 }
 
+/* \u2014 Wrapper \u0434\u043B\u044F subtitle \u2014 */
 .SectionHeading-module_wrap {
   display: flex;
   flex-direction: column;
@@ -1737,15 +1752,21 @@ __styleInject(`@charset "UTF-8";
     font-size: 1.125rem;
   }
 }`);
-var __default20 = { "heading": "SectionHeading-module_heading", "alignLeft": "SectionHeading-module_alignLeft", "alignCenter": "SectionHeading-module_alignCenter", "wrap": "SectionHeading-module_wrap", "wrapCenter": "SectionHeading-module_wrapCenter", "subtitle": "SectionHeading-module_subtitle" };
+var __default20 = { "heading": "SectionHeading-module_heading", "sizeSm": "SectionHeading-module_sizeSm", "sizeMd": "SectionHeading-module_sizeMd", "sizeLg": "SectionHeading-module_sizeLg", "alignLeft": "SectionHeading-module_alignLeft", "alignCenter": "SectionHeading-module_alignCenter", "wrap": "SectionHeading-module_wrap", "wrapCenter": "SectionHeading-module_wrapCenter", "subtitle": "SectionHeading-module_subtitle" };
+var SIZE_CLASS = {
+  sm: __default20.sizeSm,
+  md: __default20.sizeMd,
+  lg: __default20.sizeLg
+};
 function SectionHeading({
   children,
+  size = "md",
   as = "h2",
   align = "left",
   subtitle,
   className = ""
 }) {
-  const headingClass = `${__default20.heading} ${align === "center" ? __default20.alignCenter : __default20.alignLeft}${className ? ` ${className}` : ""}`;
+  const headingClass = `${__default20.heading} ${SIZE_CLASS[size]} ${align === "center" ? __default20.alignCenter : __default20.alignLeft}${className ? ` ${className}` : ""}`;
   if (subtitle) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: align === "center" ? __default20.wrapCenter : __default20.wrap, children: [
       react.createElement(as, { className: headingClass }, children),

package/dist/index.d.cts

@@ -203,9 +203,17 @@ declare function Skeleton({ variant, width, height, className }: SkeletonProps):
 
 type HeadingTag = 'h1' | 'h2' | 'h3';
 type HeadingAlign = 'left' | 'center';
+type HeadingSize = 'sm' | 'md' | 'lg';
 interface SectionHeadingProps {
     children: ReactNode;
-    /** HTML-тег. Default `'h2'` (стандартный section heading). */
+    /**
+     * Размер заголовка (responsive clamp).
+     * - `'sm'` — `clamp(1.125rem, 2.5vw, 1.375rem)` ≈ 18-22px. Sub-block heading, card group titles.
+     * - `'md'` (default) — `clamp(1.5rem, 3vw, 2rem)` ≈ 24-32px. Typical section h2 (industry-standard).
+     * - `'lg'` — `clamp(1.75rem, 4vw, 2.75rem)` ≈ 28-44px. Landing promo section (= PromoSplit/PromoTestimonials).
+     */
+    size?: HeadingSize;
+    /** HTML-тег. Default `'h2'`. Не привязан к size — используй для семантики. */
     as?: HeadingTag;
     /** Выравнивание. Default `'left'`. */
     align?: HeadingAlign;
@@ -214,20 +222,21 @@ interface SectionHeadingProps {
     className?: string;
 }
 /**
- * Единый source для section-h2 типографики во всём пакете и потребителях.
- * Берёт ту же типографику что у `PromoSplit.heading` / `PromoTestimonials.heading`:
- * `font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em`.
+ * Единый source типографики для section-headings во всём пакете и потребителях.
+ * Три размера:
+ * - `sm` (18-22px) — подсекции, group titles.
+ * - `md` (24-32px, default) — typical section h2 (industry-standard: shadcn / Tailwind UI / Linear).
+ * - `lg` (28-44px) — landing promo headings (идентично PromoSplit/PromoTestimonials).
  *
- * Закрывает кейс когда потребитель кладёт `FeatureGrid` / `BentoGrid` / `Gallery`
- * без встроенного title и вынужден захардкоживать ту же типографику в своём `.heading`
- * — теперь импортирует `<SectionHeading>` и получает единый стиль автоматически.
+ * Прop `as` (h1/h2/h3) независим от `size` — используй для семантики:
  *
  * ```tsx
- * <SectionHeading>Почему гости выбирают этот отель</SectionHeading>
- * <FeatureGrid features={...} verticalPadding="none" />
+ * <SectionHeading>Section h2 — default md size</SectionHeading>
+ * <SectionHeading size="lg" as="h1">Landing hero h1 — large</SectionHeading>
+ * <SectionHeading size="sm" as="h3">Subsection</SectionHeading>
  * ```
  */
-declare function SectionHeading({ children, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeading({ children, size, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
 
 interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;

package/dist/index.d.ts

@@ -203,9 +203,17 @@ declare function Skeleton({ variant, width, height, className }: SkeletonProps):
 
 type HeadingTag = 'h1' | 'h2' | 'h3';
 type HeadingAlign = 'left' | 'center';
+type HeadingSize = 'sm' | 'md' | 'lg';
 interface SectionHeadingProps {
     children: ReactNode;
-    /** HTML-тег. Default `'h2'` (стандартный section heading). */
+    /**
+     * Размер заголовка (responsive clamp).
+     * - `'sm'` — `clamp(1.125rem, 2.5vw, 1.375rem)` ≈ 18-22px. Sub-block heading, card group titles.
+     * - `'md'` (default) — `clamp(1.5rem, 3vw, 2rem)` ≈ 24-32px. Typical section h2 (industry-standard).
+     * - `'lg'` — `clamp(1.75rem, 4vw, 2.75rem)` ≈ 28-44px. Landing promo section (= PromoSplit/PromoTestimonials).
+     */
+    size?: HeadingSize;
+    /** HTML-тег. Default `'h2'`. Не привязан к size — используй для семантики. */
     as?: HeadingTag;
     /** Выравнивание. Default `'left'`. */
     align?: HeadingAlign;
@@ -214,20 +222,21 @@ interface SectionHeadingProps {
     className?: string;
 }
 /**
- * Единый source для section-h2 типографики во всём пакете и потребителях.
- * Берёт ту же типографику что у `PromoSplit.heading` / `PromoTestimonials.heading`:
- * `font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em`.
+ * Единый source типографики для section-headings во всём пакете и потребителях.
+ * Три размера:
+ * - `sm` (18-22px) — подсекции, group titles.
+ * - `md` (24-32px, default) — typical section h2 (industry-standard: shadcn / Tailwind UI / Linear).
+ * - `lg` (28-44px) — landing promo headings (идентично PromoSplit/PromoTestimonials).
  *
- * Закрывает кейс когда потребитель кладёт `FeatureGrid` / `BentoGrid` / `Gallery`
- * без встроенного title и вынужден захардкоживать ту же типографику в своём `.heading`
- * — теперь импортирует `<SectionHeading>` и получает единый стиль автоматически.
+ * Прop `as` (h1/h2/h3) независим от `size` — используй для семантики:
  *
  * ```tsx
- * <SectionHeading>Почему гости выбирают этот отель</SectionHeading>
- * <FeatureGrid features={...} verticalPadding="none" />
+ * <SectionHeading>Section h2 — default md size</SectionHeading>
+ * <SectionHeading size="lg" as="h1">Landing hero h1 — large</SectionHeading>
+ * <SectionHeading size="sm" as="h3">Subsection</SectionHeading>
  * ```
  */
-declare function SectionHeading({ children, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeading({ children, size, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
 
 interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;

package/dist/index.js

@@ -1684,10 +1684,9 @@ function Skeleton({ variant = "line", width, height, className = "" }) {
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/atoms/SectionHeading.module.scss
 __styleInject(`@charset "UTF-8";
-/* SectionHeading \u2014 \u0435\u0434\u0438\u043D\u0430\u044F \u0442\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430 \u0434\u043B\u044F section-h2 \u0432 \u043F\u0430\u043A\u0435\u0442\u0435 \u0438 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F\u0445.
-   \u0417\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0437\u0435\u0440\u043A\u0430\u043B\u044F\u0442 PromoSplit-module_heading / PromoTestimonials-module_heading. */
+/* SectionHeading \u2014 \u0442\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430 \u0434\u043B\u044F section-headings.
+   \u0422\u0440\u0438 \u0440\u0430\u0437\u043C\u0435\u0440\u0430: sm (sub-block), md (default, typical section h2), lg (landing promo). */
 .SectionHeading-module_heading {
-  font-size: clamp(1.75rem, 4vw, 2.75rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.03em;
@@ -1696,6 +1695,21 @@ __styleInject(`@charset "UTF-8";
   margin: 0;
 }
 
+/* \u2014 \u0420\u0430\u0437\u043C\u0435\u0440\u044B (responsive clamp) \u2014 */
+.SectionHeading-module_sizeSm {
+  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
+  letter-spacing: -0.02em;
+}
+
+.SectionHeading-module_sizeMd {
+  font-size: clamp(1.5rem, 3vw, 2rem);
+}
+
+.SectionHeading-module_sizeLg {
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+}
+
+/* \u2014 \u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u2014 */
 .SectionHeading-module_alignLeft {
   text-align: left;
 }
@@ -1704,6 +1718,7 @@ __styleInject(`@charset "UTF-8";
   text-align: center;
 }
 
+/* \u2014 Wrapper \u0434\u043B\u044F subtitle \u2014 */
 .SectionHeading-module_wrap {
   display: flex;
   flex-direction: column;
@@ -1731,15 +1746,21 @@ __styleInject(`@charset "UTF-8";
     font-size: 1.125rem;
   }
 }`);
-var __default20 = { "heading": "SectionHeading-module_heading", "alignLeft": "SectionHeading-module_alignLeft", "alignCenter": "SectionHeading-module_alignCenter", "wrap": "SectionHeading-module_wrap", "wrapCenter": "SectionHeading-module_wrapCenter", "subtitle": "SectionHeading-module_subtitle" };
+var __default20 = { "heading": "SectionHeading-module_heading", "sizeSm": "SectionHeading-module_sizeSm", "sizeMd": "SectionHeading-module_sizeMd", "sizeLg": "SectionHeading-module_sizeLg", "alignLeft": "SectionHeading-module_alignLeft", "alignCenter": "SectionHeading-module_alignCenter", "wrap": "SectionHeading-module_wrap", "wrapCenter": "SectionHeading-module_wrapCenter", "subtitle": "SectionHeading-module_subtitle" };
+var SIZE_CLASS = {
+  sm: __default20.sizeSm,
+  md: __default20.sizeMd,
+  lg: __default20.sizeLg
+};
 function SectionHeading({
   children,
+  size = "md",
   as = "h2",
   align = "left",
   subtitle,
   className = ""
 }) {
-  const headingClass = `${__default20.heading} ${align === "center" ? __default20.alignCenter : __default20.alignLeft}${className ? ` ${className}` : ""}`;
+  const headingClass = `${__default20.heading} ${SIZE_CLASS[size]} ${align === "center" ? __default20.alignCenter : __default20.alignLeft}${className ? ` ${className}` : ""}`;
   if (subtitle) {
     return /* @__PURE__ */ jsxs("div", { className: align === "center" ? __default20.wrapCenter : __default20.wrap, children: [
       createElement(as, { className: headingClass }, children),

package/package.json

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