@dmitriikapustin/ui 0.2.11 → 0.2.13
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.
- package/dist/index.cjs +46 -15
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +46 -15
- 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(
|
|
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.
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
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
|
|
|
@@ -5782,7 +5814,6 @@ __styleInject(`.PromoSplit-module_root {
|
|
|
5782
5814
|
display: flex;
|
|
5783
5815
|
align-items: center;
|
|
5784
5816
|
justify-content: center;
|
|
5785
|
-
padding: 1.5rem;
|
|
5786
5817
|
}
|
|
5787
5818
|
|
|
5788
5819
|
.PromoSplit-module_mediaPlaceholder {
|
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(
|
|
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__ */
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
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
|
|
|
@@ -5776,7 +5808,6 @@ __styleInject(`.PromoSplit-module_root {
|
|
|
5776
5808
|
display: flex;
|
|
5777
5809
|
align-items: center;
|
|
5778
5810
|
justify-content: center;
|
|
5779
|
-
padding: 1.5rem;
|
|
5780
5811
|
}
|
|
5781
5812
|
|
|
5782
5813
|
.PromoSplit-module_mediaPlaceholder {
|
package/package.json
CHANGED