@dmitriikapustin/ui 0.2.11 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +46 -14
  2. package/dist/index.d.cts +8 -1
  3. package/dist/index.d.ts +8 -1
  4. package/dist/index.js +46 -14
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -4450,7 +4450,8 @@ function EmptyState({ icon, title, description, action, className = "" }) {
4450
4450
  }
4451
4451
 
4452
4452
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/HeroSection.module.scss
4453
- __styleInject(`.HeroSection-module_root {
4453
+ __styleInject(`@charset "UTF-8";
4454
+ .HeroSection-module_root {
4454
4455
  position: relative;
4455
4456
  overflow: hidden;
4456
4457
  }
@@ -4611,6 +4612,24 @@ __styleInject(`.HeroSection-module_root {
4611
4612
  max-width: 56rem;
4612
4613
  }
4613
4614
 
4615
+ /* Split-right mode: side-by-side desktop layout, stacked on mobile */
4616
+ .HeroSection-module_splitGrid {
4617
+ display: grid;
4618
+ grid-template-columns: 1fr;
4619
+ gap: 3rem;
4620
+ align-items: center;
4621
+ }
4622
+ @media (min-width: 768px) {
4623
+ .HeroSection-module_splitGrid {
4624
+ grid-template-columns: 1fr 1fr;
4625
+ gap: 4rem;
4626
+ }
4627
+ }
4628
+
4629
+ .HeroSection-module_mediaSplit {
4630
+ /* \u0412 split-\u0440\u0435\u0436\u0438\u043C\u0435 media \u0437\u0430\u043F\u043E\u043B\u043D\u044F\u0435\u0442 \u0441\u0432\u043E\u044E grid-\u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0431\u0435\u0437 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E max-width */
4631
+ }
4632
+
4614
4633
  .HeroSection-module_mediaBox {
4615
4634
  border-radius: var(--radius-xl);
4616
4635
  border: 1px solid var(--border-color);
@@ -4618,7 +4637,7 @@ __styleInject(`.HeroSection-module_root {
4618
4637
  overflow: hidden;
4619
4638
  background: var(--bg-secondary);
4620
4639
  }`);
4621
- var __default51 = { "root": "HeroSection-module_root", "bgGlow": "HeroSection-module_bgGlow", "glowOrb": "HeroSection-module_glowOrb", "inner": "HeroSection-module_inner", "innerCompact": "HeroSection-module_innerCompact", "content": "HeroSection-module_content", "contentCenter": "HeroSection-module_contentCenter HeroSection-module_content", "eyebrowWrap": "HeroSection-module_eyebrowWrap", "eyebrowCenter": "HeroSection-module_eyebrowCenter", "eyebrow": "HeroSection-module_eyebrow", "eyebrowDot": "HeroSection-module_eyebrowDot", "title": "HeroSection-module_title", "subtitle": "HeroSection-module_subtitle", "subtitleCenter": "HeroSection-module_subtitleCenter", "actions": "HeroSection-module_actions", "actionsCenter": "HeroSection-module_actionsCenter", "mediaWrapCenter": "HeroSection-module_mediaWrapCenter HeroSection-module_mediaWrap", "mediaWrapLeft": "HeroSection-module_mediaWrapLeft HeroSection-module_mediaWrap", "mediaBox": "HeroSection-module_mediaBox" };
4640
+ var __default51 = { "root": "HeroSection-module_root", "bgGlow": "HeroSection-module_bgGlow", "glowOrb": "HeroSection-module_glowOrb", "inner": "HeroSection-module_inner", "innerCompact": "HeroSection-module_innerCompact", "content": "HeroSection-module_content", "contentCenter": "HeroSection-module_contentCenter HeroSection-module_content", "eyebrowWrap": "HeroSection-module_eyebrowWrap", "eyebrowCenter": "HeroSection-module_eyebrowCenter", "eyebrow": "HeroSection-module_eyebrow", "eyebrowDot": "HeroSection-module_eyebrowDot", "title": "HeroSection-module_title", "subtitle": "HeroSection-module_subtitle", "subtitleCenter": "HeroSection-module_subtitleCenter", "actions": "HeroSection-module_actions", "actionsCenter": "HeroSection-module_actionsCenter", "mediaWrapCenter": "HeroSection-module_mediaWrapCenter HeroSection-module_mediaWrap", "mediaWrapLeft": "HeroSection-module_mediaWrapLeft HeroSection-module_mediaWrap", "splitGrid": "HeroSection-module_splitGrid", "mediaSplit": "HeroSection-module_mediaSplit", "mediaBox": "HeroSection-module_mediaBox" };
4622
4641
  function HeroSection({
4623
4642
  eyebrow,
4624
4643
  title,
@@ -4627,24 +4646,37 @@ function HeroSection({
4627
4646
  media,
4628
4647
  align = "center",
4629
4648
  size = "default",
4649
+ mediaPosition = "left",
4630
4650
  className = ""
4631
4651
  }) {
4632
4652
  const isCenter = align === "center";
4633
4653
  const isCompact = size === "compact";
4654
+ const isSplitRight = !isCenter && mediaPosition === "right" && !!media;
4655
+ const contentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isCenter ? __default51.contentCenter : __default51.content, children: [
4656
+ eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default51.eyebrowWrap}${isCenter ? ` ${__default51.eyebrowCenter}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default51.eyebrow, children: [
4657
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default51.eyebrowDot }),
4658
+ eyebrow
4659
+ ] }) }),
4660
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: __default51.title, children: title }),
4661
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${__default51.subtitle}${isCenter ? ` ${__default51.subtitleCenter}` : ""}`, children: subtitle }),
4662
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default51.actions}${isCenter ? ` ${__default51.actionsCenter}` : ""}`, children: actions })
4663
+ ] });
4664
+ const mediaBlock = media && /* @__PURE__ */ jsxRuntime.jsx(
4665
+ "div",
4666
+ {
4667
+ className: isSplitRight ? __default51.mediaSplit : isCenter ? __default51.mediaWrapCenter : __default51.mediaWrapLeft,
4668
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default51.mediaBox, children: media })
4669
+ }
4670
+ );
4634
4671
  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `${__default51.root}${className ? ` ${className}` : ""}`, children: [
4635
4672
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default51.bgGlow, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default51.glowOrb }) }),
4636
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isCompact ? __default51.innerCompact : __default51.inner, children: [
4637
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isCenter ? __default51.contentCenter : __default51.content, children: [
4638
- eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default51.eyebrowWrap}${isCenter ? ` ${__default51.eyebrowCenter}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: __default51.eyebrow, children: [
4639
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default51.eyebrowDot }),
4640
- eyebrow
4641
- ] }) }),
4642
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: __default51.title, children: title }),
4643
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${__default51.subtitle}${isCenter ? ` ${__default51.subtitleCenter}` : ""}`, children: subtitle }),
4644
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${__default51.actions}${isCenter ? ` ${__default51.actionsCenter}` : ""}`, children: actions })
4645
- ] }),
4646
- media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: isCenter ? __default51.mediaWrapCenter : __default51.mediaWrapLeft, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default51.mediaBox, children: media }) })
4647
- ] })
4673
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: isCompact ? __default51.innerCompact : __default51.inner, children: isSplitRight ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default51.splitGrid, children: [
4674
+ contentBlock,
4675
+ mediaBlock
4676
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4677
+ contentBlock,
4678
+ mediaBlock
4679
+ ] }) })
4648
4680
  ] });
4649
4681
  }
4650
4682
 
package/dist/index.d.cts CHANGED
@@ -606,9 +606,16 @@ interface HeroSectionProps {
606
606
  media?: ReactNode;
607
607
  align?: 'left' | 'center';
608
608
  size?: 'default' | 'compact';
609
+ /**
610
+ * Положение media на desktop (применяется только при `align='left'`).
611
+ * - `'left'` (default, backward-compat): media стекируется ниже content.
612
+ * - `'right'`: side-by-side — content слева, media справа.
613
+ * На mobile (≤ 768px) всегда стекируется снизу.
614
+ */
615
+ mediaPosition?: 'left' | 'right';
609
616
  className?: string;
610
617
  }
611
- declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
618
+ declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
612
619
 
613
620
  interface LogoCloudProps {
614
621
  label?: string;
package/dist/index.d.ts CHANGED
@@ -606,9 +606,16 @@ interface HeroSectionProps {
606
606
  media?: ReactNode;
607
607
  align?: 'left' | 'center';
608
608
  size?: 'default' | 'compact';
609
+ /**
610
+ * Положение media на desktop (применяется только при `align='left'`).
611
+ * - `'left'` (default, backward-compat): media стекируется ниже content.
612
+ * - `'right'`: side-by-side — content слева, media справа.
613
+ * На mobile (≤ 768px) всегда стекируется снизу.
614
+ */
615
+ mediaPosition?: 'left' | 'right';
609
616
  className?: string;
610
617
  }
611
- declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
618
+ declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
612
619
 
613
620
  interface LogoCloudProps {
614
621
  label?: string;
package/dist/index.js CHANGED
@@ -4444,7 +4444,8 @@ function EmptyState({ icon, title, description, action, className = "" }) {
4444
4444
  }
4445
4445
 
4446
4446
  // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/organisms/HeroSection.module.scss
4447
- __styleInject(`.HeroSection-module_root {
4447
+ __styleInject(`@charset "UTF-8";
4448
+ .HeroSection-module_root {
4448
4449
  position: relative;
4449
4450
  overflow: hidden;
4450
4451
  }
@@ -4605,6 +4606,24 @@ __styleInject(`.HeroSection-module_root {
4605
4606
  max-width: 56rem;
4606
4607
  }
4607
4608
 
4609
+ /* Split-right mode: side-by-side desktop layout, stacked on mobile */
4610
+ .HeroSection-module_splitGrid {
4611
+ display: grid;
4612
+ grid-template-columns: 1fr;
4613
+ gap: 3rem;
4614
+ align-items: center;
4615
+ }
4616
+ @media (min-width: 768px) {
4617
+ .HeroSection-module_splitGrid {
4618
+ grid-template-columns: 1fr 1fr;
4619
+ gap: 4rem;
4620
+ }
4621
+ }
4622
+
4623
+ .HeroSection-module_mediaSplit {
4624
+ /* \u0412 split-\u0440\u0435\u0436\u0438\u043C\u0435 media \u0437\u0430\u043F\u043E\u043B\u043D\u044F\u0435\u0442 \u0441\u0432\u043E\u044E grid-\u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0431\u0435\u0437 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E max-width */
4625
+ }
4626
+
4608
4627
  .HeroSection-module_mediaBox {
4609
4628
  border-radius: var(--radius-xl);
4610
4629
  border: 1px solid var(--border-color);
@@ -4612,7 +4631,7 @@ __styleInject(`.HeroSection-module_root {
4612
4631
  overflow: hidden;
4613
4632
  background: var(--bg-secondary);
4614
4633
  }`);
4615
- var __default51 = { "root": "HeroSection-module_root", "bgGlow": "HeroSection-module_bgGlow", "glowOrb": "HeroSection-module_glowOrb", "inner": "HeroSection-module_inner", "innerCompact": "HeroSection-module_innerCompact", "content": "HeroSection-module_content", "contentCenter": "HeroSection-module_contentCenter HeroSection-module_content", "eyebrowWrap": "HeroSection-module_eyebrowWrap", "eyebrowCenter": "HeroSection-module_eyebrowCenter", "eyebrow": "HeroSection-module_eyebrow", "eyebrowDot": "HeroSection-module_eyebrowDot", "title": "HeroSection-module_title", "subtitle": "HeroSection-module_subtitle", "subtitleCenter": "HeroSection-module_subtitleCenter", "actions": "HeroSection-module_actions", "actionsCenter": "HeroSection-module_actionsCenter", "mediaWrapCenter": "HeroSection-module_mediaWrapCenter HeroSection-module_mediaWrap", "mediaWrapLeft": "HeroSection-module_mediaWrapLeft HeroSection-module_mediaWrap", "mediaBox": "HeroSection-module_mediaBox" };
4634
+ var __default51 = { "root": "HeroSection-module_root", "bgGlow": "HeroSection-module_bgGlow", "glowOrb": "HeroSection-module_glowOrb", "inner": "HeroSection-module_inner", "innerCompact": "HeroSection-module_innerCompact", "content": "HeroSection-module_content", "contentCenter": "HeroSection-module_contentCenter HeroSection-module_content", "eyebrowWrap": "HeroSection-module_eyebrowWrap", "eyebrowCenter": "HeroSection-module_eyebrowCenter", "eyebrow": "HeroSection-module_eyebrow", "eyebrowDot": "HeroSection-module_eyebrowDot", "title": "HeroSection-module_title", "subtitle": "HeroSection-module_subtitle", "subtitleCenter": "HeroSection-module_subtitleCenter", "actions": "HeroSection-module_actions", "actionsCenter": "HeroSection-module_actionsCenter", "mediaWrapCenter": "HeroSection-module_mediaWrapCenter HeroSection-module_mediaWrap", "mediaWrapLeft": "HeroSection-module_mediaWrapLeft HeroSection-module_mediaWrap", "splitGrid": "HeroSection-module_splitGrid", "mediaSplit": "HeroSection-module_mediaSplit", "mediaBox": "HeroSection-module_mediaBox" };
4616
4635
  function HeroSection({
4617
4636
  eyebrow,
4618
4637
  title,
@@ -4621,24 +4640,37 @@ function HeroSection({
4621
4640
  media,
4622
4641
  align = "center",
4623
4642
  size = "default",
4643
+ mediaPosition = "left",
4624
4644
  className = ""
4625
4645
  }) {
4626
4646
  const isCenter = align === "center";
4627
4647
  const isCompact = size === "compact";
4648
+ const isSplitRight = !isCenter && mediaPosition === "right" && !!media;
4649
+ const contentBlock = /* @__PURE__ */ jsxs("div", { className: isCenter ? __default51.contentCenter : __default51.content, children: [
4650
+ eyebrow && /* @__PURE__ */ jsx("div", { className: `${__default51.eyebrowWrap}${isCenter ? ` ${__default51.eyebrowCenter}` : ""}`, children: /* @__PURE__ */ jsxs("span", { className: __default51.eyebrow, children: [
4651
+ /* @__PURE__ */ jsx("span", { className: __default51.eyebrowDot }),
4652
+ eyebrow
4653
+ ] }) }),
4654
+ /* @__PURE__ */ jsx("h1", { className: __default51.title, children: title }),
4655
+ subtitle && /* @__PURE__ */ jsx("p", { className: `${__default51.subtitle}${isCenter ? ` ${__default51.subtitleCenter}` : ""}`, children: subtitle }),
4656
+ actions && /* @__PURE__ */ jsx("div", { className: `${__default51.actions}${isCenter ? ` ${__default51.actionsCenter}` : ""}`, children: actions })
4657
+ ] });
4658
+ const mediaBlock = media && /* @__PURE__ */ jsx(
4659
+ "div",
4660
+ {
4661
+ className: isSplitRight ? __default51.mediaSplit : isCenter ? __default51.mediaWrapCenter : __default51.mediaWrapLeft,
4662
+ children: /* @__PURE__ */ jsx("div", { className: __default51.mediaBox, children: media })
4663
+ }
4664
+ );
4628
4665
  return /* @__PURE__ */ jsxs("section", { className: `${__default51.root}${className ? ` ${className}` : ""}`, children: [
4629
4666
  /* @__PURE__ */ jsx("div", { className: __default51.bgGlow, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: __default51.glowOrb }) }),
4630
- /* @__PURE__ */ jsxs("div", { className: isCompact ? __default51.innerCompact : __default51.inner, children: [
4631
- /* @__PURE__ */ jsxs("div", { className: isCenter ? __default51.contentCenter : __default51.content, children: [
4632
- eyebrow && /* @__PURE__ */ jsx("div", { className: `${__default51.eyebrowWrap}${isCenter ? ` ${__default51.eyebrowCenter}` : ""}`, children: /* @__PURE__ */ jsxs("span", { className: __default51.eyebrow, children: [
4633
- /* @__PURE__ */ jsx("span", { className: __default51.eyebrowDot }),
4634
- eyebrow
4635
- ] }) }),
4636
- /* @__PURE__ */ jsx("h1", { className: __default51.title, children: title }),
4637
- subtitle && /* @__PURE__ */ jsx("p", { className: `${__default51.subtitle}${isCenter ? ` ${__default51.subtitleCenter}` : ""}`, children: subtitle }),
4638
- actions && /* @__PURE__ */ jsx("div", { className: `${__default51.actions}${isCenter ? ` ${__default51.actionsCenter}` : ""}`, children: actions })
4639
- ] }),
4640
- media && /* @__PURE__ */ jsx("div", { className: isCenter ? __default51.mediaWrapCenter : __default51.mediaWrapLeft, children: /* @__PURE__ */ jsx("div", { className: __default51.mediaBox, children: media }) })
4641
- ] })
4667
+ /* @__PURE__ */ jsx("div", { className: isCompact ? __default51.innerCompact : __default51.inner, children: isSplitRight ? /* @__PURE__ */ jsxs("div", { className: __default51.splitGrid, children: [
4668
+ contentBlock,
4669
+ mediaBlock
4670
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
4671
+ contentBlock,
4672
+ mediaBlock
4673
+ ] }) })
4642
4674
  ] });
4643
4675
  }
4644
4676
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dmitriikapustin/ui",
3
- "version": "0.2.11",
3
+ "version": "0.2.12",
4
4
  "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
5
5
  "author": "Kapustin Team",
6
6
  "license": "MIT",