@lobehub/ui 5.48.2 → 5.49.0

package/es/awesome/LandingHero/style.mjs

@@ -0,0 +1,155 @@
+import { accentGradient } from "../landingTokens.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/LandingHero/style.ts
+const splitStack = "@media (max-width: 860px)";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	accent: css`
+    background: ${accentGradient};
+    background-clip: text;
+
+    -webkit-text-fill-color: transparent;
+  `,
+	actions: css`
+    justify-content: center;
+    margin-block-start: 36px;
+
+    [data-layout='split'] & {
+      justify-content: flex-start;
+    }
+  `,
+	aside: css`
+    display: flex;
+    justify-content: center;
+    min-inline-size: 0;
+
+    > * {
+      inline-size: 100%;
+    }
+  `,
+	badge: css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    margin-block-end: 24px;
+    padding-block: 4px;
+    padding-inline: 12px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 999px;
+
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextSecondary};
+
+    background: color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent);
+    backdrop-filter: blur(8px);
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	content: css`
+    position: relative;
+    z-index: 1;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    inline-size: 100%;
+  `,
+	description: css`
+    max-inline-size: 36rem;
+    margin-block: 20px 0;
+    margin-inline: 0;
+
+    font-size: clamp(16px, 2vw, 19px);
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+    text-wrap: balance;
+  `,
+	intro: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-inline-size: 0;
+
+    [data-layout='split'] & {
+      align-items: flex-start;
+      text-align: start;
+    }
+
+    ${splitStack} {
+      [data-layout='split'] & {
+        align-items: center;
+        text-align: center;
+      }
+    }
+  `,
+	main: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    inline-size: 100%;
+
+    [data-layout='split'] & {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+      gap: clamp(32px, 5vw, 64px);
+      align-items: center;
+    }
+
+    ${splitStack} {
+      [data-layout='split'] & {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 48px;
+      }
+    }
+  `,
+	extra: css`
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    align-items: center;
+
+    inline-size: 100%;
+    margin-block-start: 48px;
+  `,
+	root: css`
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding-block: clamp(72px, 13vh, 128px) clamp(40px, 7vh, 72px);
+
+    text-align: center;
+
+    &[data-layout='split'] {
+      padding-block-start: clamp(56px, 10vh, 104px);
+    }
+  `,
+	title: css`
+    margin: 0;
+
+    font-size: clamp(44px, 8vw, 84px);
+    font-weight: 900;
+    line-height: 1.02;
+    color: ${cssVar.colorText};
+    text-wrap: balance;
+    letter-spacing: -0.045em;
+
+    [data-layout='split'] & {
+      font-size: clamp(44px, 6vw, 72px);
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/awesome/LandingHero/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LandingHero/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { accentGradient } from '@/awesome/landingTokens';\n\nconst splitStack = '@media (max-width: 860px)';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  accent: css`\n    background: ${accentGradient};\n    background-clip: text;\n\n    -webkit-text-fill-color: transparent;\n  `,\n  actions: css`\n    justify-content: center;\n    margin-block-start: 36px;\n\n    [data-layout='split'] & {\n      justify-content: flex-start;\n    }\n  `,\n  aside: css`\n    display: flex;\n    justify-content: center;\n    min-inline-size: 0;\n\n    > * {\n      inline-size: 100%;\n    }\n  `,\n  badge: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    margin-block-end: 24px;\n    padding-block: 4px;\n    padding-inline: 12px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 999px;\n\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextSecondary};\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent);\n    backdrop-filter: blur(8px);\n\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    a:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  content: css`\n    position: relative;\n    z-index: 1;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    inline-size: 100%;\n  `,\n  description: css`\n    max-inline-size: 36rem;\n    margin-block: 20px 0;\n    margin-inline: 0;\n\n    font-size: clamp(16px, 2vw, 19px);\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: balance;\n  `,\n  intro: css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-inline-size: 0;\n\n    [data-layout='split'] & {\n      align-items: flex-start;\n      text-align: start;\n    }\n\n    ${splitStack} {\n      [data-layout='split'] & {\n        align-items: center;\n        text-align: center;\n      }\n    }\n  `,\n  main: css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    inline-size: 100%;\n\n    [data-layout='split'] & {\n      display: grid;\n      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n      gap: clamp(32px, 5vw, 64px);\n      align-items: center;\n    }\n\n    ${splitStack} {\n      [data-layout='split'] & {\n        grid-template-columns: minmax(0, 1fr);\n        gap: 48px;\n      }\n    }\n  `,\n  extra: css`\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n    align-items: center;\n\n    inline-size: 100%;\n    margin-block-start: 48px;\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    padding-block: clamp(72px, 13vh, 128px) clamp(40px, 7vh, 72px);\n\n    text-align: center;\n\n    &[data-layout='split'] {\n      padding-block-start: clamp(56px, 10vh, 104px);\n    }\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: clamp(44px, 8vw, 84px);\n    font-weight: 900;\n    line-height: 1.02;\n    color: ${cssVar.colorText};\n    text-wrap: balance;\n    letter-spacing: -0.045em;\n\n    [data-layout='split'] & {\n      font-size: clamp(44px, 6vw, 72px);\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAM,aAAa;AAEnB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;kBACK,eAAe;;;;;CAK/B,SAAS,GAAG;;;;;;;;CAQZ,OAAO,GAAG;;;;;;;;;CASV,OAAO,GAAG;;;;;;;;wBAQY,OAAO,qBAAqB;;;iBAGnC,OAAO,WAAW;aACtB,OAAO,mBAAmB;;qCAEF,OAAO,iBAAiB;;;;;;;;;eAS9C,OAAO,UAAU;;;CAG9B,SAAS,GAAG;;;;;;;;;;CAUZ,aAAa,GAAG;;;;;;;aAOL,OAAO,mBAAmB;;;CAGrC,OAAO,GAAG;;;;;;;;;;;MAWN,WAAW;;;;;;;CAOf,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW;;;;;;;CAOf,OAAO,GAAG;;;;;;;;;CASV,MAAM,GAAG;;;;;;;;;;;;;;;CAeT,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;;;;;;AAQ9B,EAAE"}

package/es/awesome/LandingHero/type.d.mts

@@ -0,0 +1,29 @@
+import { DivProps } from "../../types/index.mjs";
+import { LandingLinkRender } from "../landingLink.mjs";
+import { LandingAction, LandingNavigate } from "../landingActions.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/LandingHero/type.d.ts
+type LandingHeroAction = LandingAction;
+interface LandingHeroProps extends Omit<DivProps, 'title'> {
+  /** Rendered after the title with the landing accent gradient. */
+  accent?: ReactNode;
+  actions?: LandingHeroAction[];
+  /**
+   * Content beside the text, e.g. an AgentSkillCard or a product preview. Setting it switches the
+   * hero to a two-column layout with left-aligned text; it stacks below the text on narrow screens.
+   */
+  aside?: ReactNode;
+  /** Small pill above the title, e.g. a release note link. */
+  badge?: ReactNode;
+  /** Full-width content below the hero, e.g. a LogoMarquee. */
+  children?: ReactNode;
+  description?: ReactNode;
+  /** Renders action links, so client-side routers can supply their own Link. */
+  /** Client-side navigation for internal non-primary actions (rendered as BottomGradientButton). */
+  onNavigate?: LandingNavigate;
+  renderLink?: LandingLinkRender;
+  title: ReactNode;
+}
+//#endregion
+export { LandingHeroAction, LandingHeroProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/LandingSection/LandingSection.d.mts

@@ -0,0 +1,6 @@
+import { LandingSectionProps } from "./type.mjs";
+//#region src/awesome/LandingSection/LandingSection.d.ts
+declare const LandingSection: import("react").NamedExoticComponent<LandingSectionProps>;
+//#endregion
+export { LandingSection as default };
+//# sourceMappingURL=LandingSection.d.mts.map

package/es/awesome/LandingSection/LandingSection.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { LandingActions } from "../landingActions.mjs";
+import Tag from "../../base-ui/Tag/Tag.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/LandingSection/LandingSection.tsx
+const LandingSection = memo(({ actions, align = "start", children, className, description, divider = true, eyebrow, eyebrowColor = "blue", extra, id, onNavigate, renderLink, title, ...rest }) => {
+	const headingId = id ? `${id}-title` : void 0;
+	const hasActions = Boolean(actions?.length);
+	const hasAside = hasActions || Boolean(extra);
+	const hasHeader = Boolean(eyebrow || title || description || hasAside);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": title ? headingId : void 0,
+		className: cx(styles.root, className),
+		"data-divider": divider,
+		id,
+		...rest,
+		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
+			className: styles.header,
+			"data-align": align,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.heading,
+				children: [
+					eyebrow && /* @__PURE__ */ jsx(Tag, {
+						className: styles.eyebrow,
+						color: eyebrowColor,
+						shape: "round",
+						children: eyebrow
+					}),
+					title && /* @__PURE__ */ jsx("h2", {
+						className: styles.title,
+						id: headingId,
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: styles.description,
+						children: description
+					})
+				]
+			}), hasAside && /* @__PURE__ */ jsxs("div", {
+				className: styles.extra,
+				children: [hasActions && /* @__PURE__ */ jsx(LandingActions, {
+					actions,
+					renderLink,
+					size: "small",
+					onNavigate
+				}), extra]
+			})]
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: hasHeader ? styles.body : void 0,
+			children
+		})]
+	});
+});
+LandingSection.displayName = "LandingSection";
+//#endregion
+export { LandingSection as default };
+
+//# sourceMappingURL=LandingSection.mjs.map

package/es/awesome/LandingSection/LandingSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LandingSection.mjs","names":[],"sources":["../../../src/awesome/LandingSection/LandingSection.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { LandingActions } from '@/awesome/landingActions';\nimport Tag from '@/base-ui/Tag';\n\nimport { styles } from './style';\nimport type { LandingSectionProps } from './type';\n\nconst LandingSection = memo<LandingSectionProps>(\n  ({\n    actions,\n    align = 'start',\n    children,\n    className,\n    description,\n    divider = true,\n    eyebrow,\n    eyebrowColor = 'blue',\n    extra,\n    id,\n    onNavigate,\n    renderLink,\n    title,\n    ...rest\n  }) => {\n    const headingId = id ? `${id}-title` : undefined;\n    const hasActions = Boolean(actions?.length);\n    const hasAside = hasActions || Boolean(extra);\n    const hasHeader = Boolean(eyebrow || title || description || hasAside);\n\n    return (\n      <section\n        aria-labelledby={title ? headingId : undefined}\n        className={cx(styles.root, className)}\n        data-divider={divider}\n        id={id}\n        {...rest}\n      >\n        {hasHeader && (\n          <div className={styles.header} data-align={align}>\n            <div className={styles.heading}>\n              {eyebrow && (\n                <Tag className={styles.eyebrow} color={eyebrowColor} shape={'round'}>\n                  {eyebrow}\n                </Tag>\n              )}\n              {title && (\n                <h2 className={styles.title} id={headingId}>\n                  {title}\n                </h2>\n              )}\n              {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {hasAside && (\n              <div className={styles.extra}>\n                {hasActions && (\n                  <LandingActions\n                    actions={actions!}\n                    renderLink={renderLink}\n                    size={'small'}\n                    onNavigate={onNavigate}\n                  />\n                )}\n                {extra}\n              </div>\n            )}\n          </div>\n        )}\n        {children && <div className={hasHeader ? styles.body : undefined}>{children}</div>}\n      </section>\n    );\n  },\n);\n\nLandingSection.displayName = 'LandingSection';\n\nexport default LandingSection;\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,MACpB,EACC,SACA,QAAQ,SACR,UACA,WACA,aACA,UAAU,MACV,SACA,eAAe,QACf,OACA,IACA,YACA,YACA,OACA,GAAG,WACC;CACJ,MAAM,YAAY,KAAK,GAAG,GAAG,UAAU,KAAA;CACvC,MAAM,aAAa,QAAQ,SAAS,MAAM;CAC1C,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,YAAY,QAAQ,WAAW,SAAS,eAAe,QAAQ;CAErE,OACE,qBAAC,WAAD;EACE,mBAAiB,QAAQ,YAAY,KAAA;EACrC,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,gBAAc;EACV;EACJ,GAAI;EALN,UAAA,CAOG,aACC,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,cAAY;GAA3C,UAAA,CACE,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA;KACG,WACC,oBAAC,KAAD;MAAK,WAAW,OAAO;MAAS,OAAO;MAAc,OAAO;MACzD,UAAA;KACE,CAAA;KAEN,SACC,oBAAC,MAAD;MAAI,WAAW,OAAO;MAAO,IAAI;MAC9B,UAAA;KACC,CAAA;KAEL,eAAe,oBAAC,KAAD;MAAG,WAAW,OAAO;MAAc,UAAA;KAAe,CAAA;IAC/D;GACJ,CAAA,GAAA,YACC,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,cACC,oBAAC,gBAAD;KACW;KACG;KACZ,MAAM;KACM;IACb,CAAA,GAEF,KACE;GAEJ,CAAA,CAAA;EAEN,CAAA,GAAA,YAAY,oBAAC,OAAD;GAAK,WAAW,YAAY,OAAO,OAAO,KAAA;GAAY;EAAc,CAAA,CAC1E;;AAEb,CACF;AAEA,eAAe,cAAc"}

package/es/awesome/LandingSection/index.d.mts

@@ -0,0 +1,3 @@
+import { LandingSectionProps } from "./type.mjs";
+import LandingSection from "./LandingSection.mjs";
+export { type LandingSectionProps, LandingSection as default };

package/es/awesome/LandingSection/style.mjs

@@ -0,0 +1,88 @@
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/LandingSection/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	body: css`
+    margin-block-start: 32px;
+  `,
+	description: css`
+    max-inline-size: 34rem;
+    margin: 0;
+
+    font-size: 15px;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+    text-wrap: pretty;
+  `,
+	eyebrow: css`
+    margin-block-end: 6px;
+  `,
+	extra: css`
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    ${responsive.mobile} {
+      [data-align='start'] > & {
+        align-self: flex-start;
+      }
+    }
+  `,
+	header: css`
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
+
+    text-align: center;
+
+    &[data-align='start'] {
+      flex-direction: row;
+      gap: 32px;
+      align-items: flex-end;
+      justify-content: space-between;
+
+      text-align: start;
+
+      ${responsive.mobile} {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+      }
+    }
+  `,
+	heading: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+
+    min-inline-size: 0;
+
+    [data-align='start'] > & {
+      align-items: flex-start;
+    }
+  `,
+	root: css`
+    padding-block: clamp(48px, 8vh, 80px);
+
+    &[data-divider='true'] {
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+    }
+  `,
+	title: css`
+    margin: 0;
+
+    font-size: clamp(24px, 3vw, 32px);
+    font-weight: bold;
+    line-height: 1.2;
+    color: ${cssVar.colorText};
+    text-wrap: balance;
+    letter-spacing: -0.025em;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/awesome/LandingSection/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LandingSection/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  body: css`\n    margin-block-start: 32px;\n  `,\n  description: css`\n    max-inline-size: 34rem;\n    margin: 0;\n\n    font-size: 15px;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n  `,\n  eyebrow: css`\n    margin-block-end: 6px;\n  `,\n  extra: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    ${responsive.mobile} {\n      [data-align='start'] > & {\n        align-self: flex-start;\n      }\n    }\n  `,\n  header: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    align-items: center;\n\n    text-align: center;\n\n    &[data-align='start'] {\n      flex-direction: row;\n      gap: 32px;\n      align-items: flex-end;\n      justify-content: space-between;\n\n      text-align: start;\n\n      ${responsive.mobile} {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n    }\n  `,\n  heading: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n\n    [data-align='start'] > & {\n      align-items: flex-start;\n    }\n  `,\n  root: css`\n    padding-block: clamp(48px, 8vh, 80px);\n\n    &[data-divider='true'] {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: clamp(24px, 3vw, 32px);\n    font-weight: bold;\n    line-height: 1.2;\n    color: ${cssVar.colorText};\n    text-wrap: balance;\n    letter-spacing: -0.025em;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;CAGT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;;MAON,WAAW,OAAO;;;;;;CAMtB,QAAQ,GAAG;;;;;;;;;;;;;;;;QAgBL,WAAW,OAAO;;;;;;;CAOxB,SAAS,GAAG;;;;;;;;;;;;CAYZ,MAAM,GAAG;;;;sCAI2B,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;;AAI9B,EAAE"}

package/es/awesome/LandingSection/type.d.mts

@@ -0,0 +1,40 @@
+import { DivProps } from "../../types/index.mjs";
+import { LandingLinkRender } from "../landingLink.mjs";
+import { LandingAction, LandingNavigate } from "../landingActions.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/LandingSection/type.d.ts
+interface LandingSectionProps extends Omit<DivProps, 'title'> {
+  /** Small buttons on the right side of the header, e.g. "Browse components". */
+  actions?: LandingAction[];
+  /**
+   * `start` puts the heading on the left and `actions`/`extra` on the right; `center` stacks
+   * everything centered.
+   * @default 'start'
+   */
+  align?: 'center' | 'start';
+  children?: ReactNode;
+  description?: ReactNode;
+  /**
+   * Draws a hairline above the section to separate it from the previous one.
+   * @default true
+   */
+  divider?: boolean;
+  /** Custom content on the right side of the header, after `actions`. */
+  extra?: ReactNode;
+  /** Small tag above the title, e.g. "Components". */
+  eyebrow?: ReactNode;
+  /**
+   * Tag color: a preset such as `purple`, `blue`, `cyan`, `green`, `orange` or `magenta`, or any CSS color.
+   * @default 'blue'
+   */
+  eyebrowColor?: string;
+  /** Used for the heading id so the section is labelled for assistive technology. */
+  id?: string;
+  /** Client-side navigation for internal non-primary actions (rendered as BottomGradientButton). */
+  onNavigate?: LandingNavigate;
+  renderLink?: LandingLinkRender;
+  title?: ReactNode;
+}
+//#endregion
+export { LandingSectionProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/LogoMarquee/LogoMarquee.d.mts

@@ -0,0 +1,6 @@
+import { LogoMarqueeProps } from "./type.mjs";
+//#region src/awesome/LogoMarquee/LogoMarquee.d.ts
+declare const LogoMarquee: import("react").NamedExoticComponent<LogoMarqueeProps>;
+//#endregion
+export { LogoMarquee as default };
+//# sourceMappingURL=LogoMarquee.d.mts.map

package/es/awesome/LogoMarquee/LogoMarquee.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { renderLandingIcon } from "../landingIcon.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/LogoMarquee/LogoMarquee.tsx
+const Track = ({ hidden, iconOnly, iconSize, items }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": hidden || void 0,
+	className: styles.track,
+	children: items.map(({ icon, label }) => /* @__PURE__ */ jsxs("span", {
+		className: styles.item,
+		title: iconOnly ? label : void 0,
+		children: [renderLandingIcon(icon, iconSize), !iconOnly && label]
+	}, label))
+});
+const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnly = false, iconSize = 18, items, maxWidth = 640, style, ...rest }) => {
+	const variables = {
+		"--logo-marquee-duration": `${duration}s`,
+		"--logo-marquee-gap": `${gap}px`,
+		"--logo-marquee-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		style: {
+			...variables,
+			...style
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.viewport,
+			children: [/* @__PURE__ */ jsx(Track, {
+				iconOnly,
+				iconSize,
+				items
+			}), /* @__PURE__ */ jsx(Track, {
+				hidden: true,
+				iconOnly,
+				iconSize,
+				items
+			})]
+		}), caption && /* @__PURE__ */ jsx("p", {
+			className: styles.caption,
+			children: caption
+		})]
+	});
+});
+LogoMarquee.displayName = "LogoMarquee";
+//#endregion
+export { LogoMarquee as default };
+
+//# sourceMappingURL=LogoMarquee.mjs.map

package/es/awesome/LogoMarquee/LogoMarquee.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoMarquee.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\n\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} className={styles.track}>\n    {items.map(({ icon, label }) => (\n      <span className={styles.item} key={label} title={iconOnly ? label : undefined}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div className={cx(styles.root, className)} style={{ ...variables, ...style }} {...rest}>\n        <div className={styles.viewport}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && <p className={styles.caption}>{caption}</p>}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;AAUA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAEA,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,WAAW,OAAO;CACtD,UAAA,MAAM,KAAK,EAAE,MAAM,YAClB,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAApE,UAAA,CACG,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAH6B,GAAA,KAG7B,CACP;AACE,CAAA;AAGP,MAAM,cAAc,MACjB,EACC,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;EAAG,GAAI;EAAnF,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAW,OAAO;GAAU,UAAA;EAAW,CAAA,CACnD;;AAET,CACF;AAEA,YAAY,cAAc"}

package/es/awesome/LogoMarquee/index.d.mts

@@ -0,0 +1,3 @@
+import { LogoMarqueeItem, LogoMarqueeProps } from "./type.mjs";
+import LogoMarquee from "./LogoMarquee.mjs";
+export { type LogoMarqueeItem, type LogoMarqueeProps, LogoMarquee as default };

package/es/awesome/LogoMarquee/style.mjs

@@ -0,0 +1,70 @@
+import { createStaticStyles, keyframes } from "antd-style";
+//#region src/awesome/LogoMarquee/style.ts
+const slide = keyframes`
+  to {
+    transform: translateX(calc(-100% - var(--logo-marquee-gap)));
+  }
+`;
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	caption: css`
+    margin: 0;
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextTertiary};
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      transition: color 140ms ease;
+    }
+
+    a:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	item: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    font-size: ${cssVar.fontSize};
+    color: ${cssVar.colorTextTertiary};
+    white-space: nowrap;
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+
+    inline-size: 100%;
+  `,
+	track: css`
+    display: flex;
+    flex: none;
+    gap: var(--logo-marquee-gap);
+    align-items: center;
+
+    animation: ${slide} var(--logo-marquee-duration) linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  `,
+	viewport: css`
+    overflow: hidden;
+    display: flex;
+    gap: var(--logo-marquee-gap);
+
+    inline-size: min(100%, var(--logo-marquee-max-width));
+
+    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
+
+    &:hover > * {
+      animation-play-state: paused;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/awesome/LogoMarquee/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst slide = keyframes`\n  to {\n    transform: translateX(calc(-100% - var(--logo-marquee-gap)));\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  caption: css`\n    margin: 0;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextTertiary};\n\n    a {\n      color: inherit;\n      text-decoration: none;\n      transition: color 140ms ease;\n    }\n\n    a:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  item: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: center;\n\n    inline-size: 100%;\n  `,\n  track: css`\n    display: flex;\n    flex: none;\n    gap: var(--logo-marquee-gap);\n    align-items: center;\n\n    animation: ${slide} var(--logo-marquee-duration) linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation: none;\n    }\n  `,\n  viewport: css`\n    overflow: hidden;\n    display: flex;\n    gap: var(--logo-marquee-gap);\n\n    inline-size: min(100%, var(--logo-marquee-max-width));\n\n    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);\n\n    &:hover > * {\n      animation-play-state: paused;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;AAMvB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;iBAEG,OAAO,WAAW;aACtB,OAAO,kBAAkB;;;;;;;;;eASvB,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;iBAKM,OAAO,SAAS;aACpB,OAAO,kBAAkB;;;CAGpC,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;;iBAMK,MAAM;;;;;;CAMrB,UAAU,GAAG;;;;;;;;;;;;;AAaf,EAAE"}

package/es/awesome/LogoMarquee/type.d.mts

@@ -0,0 +1,40 @@
+import { DivProps } from "../../types/index.mjs";
+import { ElementType, ReactNode } from "react";
+//#region src/awesome/LogoMarquee/type.d.ts
+interface LogoMarqueeItem {
+  /** An icon component such as `OpenAI` from `@lobehub/icons`, or a ready-made node. */
+  icon: ElementType<{
+    size: number;
+  }> | ReactNode;
+  label: string;
+}
+interface LogoMarqueeProps extends DivProps {
+  /** Caption below the track, e.g. a link to the icon catalog. */
+  caption?: ReactNode;
+  /**
+   * Seconds for one full loop.
+   * @default 28
+   */
+  duration?: number;
+  /**
+   * Gap between items in pixels.
+   * @default 36
+   */
+  gap?: number;
+  /**
+   * Hides the text labels and shows icons only.
+   * @default false
+   */
+  iconOnly?: boolean;
+  /** @default 18 */
+  iconSize?: number;
+  items: LogoMarqueeItem[];
+  /**
+   * Max width of the visible track.
+   * @default 640
+   */
+  maxWidth?: number | string;
+}
+//#endregion
+export { LogoMarqueeItem, LogoMarqueeProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/index.d.mts

@@ -1,15 +1,34 @@
+import { AgentSkillCardAgent, AgentSkillCardMode, AgentSkillCardPanel, AgentSkillCardProps } from "./AgentSkillCard/type.mjs";
+import { DEFAULT_SKILL_AGENTS } from "./AgentSkillCard/agents.mjs";
+import AgentSkillCard from "./AgentSkillCard/AgentSkillCard.mjs";
+import "./AgentSkillCard/index.mjs";
 import { AuroraBackgroundProps } from "./AuroraBackground/type.mjs";
 import AuroraBackground from "./AuroraBackground/AuroraBackground.mjs";
 import "./AuroraBackground/index.mjs";
+import { LandingLinkProps, LandingLinkRender } from "./landingLink.mjs";
+import { BentoCardProps, BentoGridProps } from "./BentoGrid/type.mjs";
+import BentoCard from "./BentoGrid/BentoCard.mjs";
+import BentoGrid from "./BentoGrid/BentoGrid.mjs";
+import "./BentoGrid/index.mjs";
 import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
 import { BottomGradientButtonProps } from "./BottomGradientButton/type.mjs";
 import "./BottomGradientButton/index.mjs";
+import { CodeShowcaseItem, CodeShowcaseProps } from "./CodeShowcase/type.mjs";
+import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";
+import "./CodeShowcase/index.mjs";
+import { FeatureGridItem, FeatureGridProps } from "./FeatureGrid/type.mjs";
+import FeatureGrid from "./FeatureGrid/FeatureGrid.mjs";
+import "./FeatureGrid/index.mjs";
 import { SpotlightCardProps } from "./SpotlightCard/type.mjs";
 import SpotlightCard from "./SpotlightCard/SpotlightCard.mjs";
 import "./SpotlightCard/index.mjs";
 import { FeatureItemType, FeaturesProps } from "./Features/type.mjs";
 import Features from "./Features/Features.mjs";
 import "./Features/index.mjs";
+import { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingPalette, accentGradient } from "./landingTokens.mjs";
+import { FluidGradientProps } from "./FluidGradient/type.mjs";
+import FluidGradient from "./FluidGradient/FluidGradient.mjs";
+import "./FluidGradient/index.mjs";
 import { GiscusProps } from "./Giscus/type.mjs";
 import Giscus from "./Giscus/Giscus.mjs";
 import "./Giscus/index.mjs";
@@ -23,6 +42,19 @@ import "./GridBackground/index.mjs";
 import { HeroAction, HeroProps } from "./Hero/type.mjs";
 import Hero from "./Hero/Hero.mjs";
 import "./Hero/index.mjs";
+import { InstallBannerProps } from "./InstallBanner/type.mjs";
+import InstallBanner from "./InstallBanner/InstallBanner.mjs";
+import "./InstallBanner/index.mjs";
+import { LandingAction, LandingNavigate } from "./landingActions.mjs";
+import { LandingHeroAction, LandingHeroProps } from "./LandingHero/type.mjs";
+import LandingHero from "./LandingHero/LandingHero.mjs";
+import "./LandingHero/index.mjs";
+import { LandingSectionProps } from "./LandingSection/type.mjs";
+import LandingSection from "./LandingSection/LandingSection.mjs";
+import "./LandingSection/index.mjs";
+import { LogoMarqueeItem, LogoMarqueeProps } from "./LogoMarquee/type.mjs";
+import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
+import "./LogoMarquee/index.mjs";
 import { SplineProps } from "./Spline/type.mjs";
 import Spline from "./Spline/Spine.mjs";
 import "./Spline/index.mjs";
@@ -32,4 +64,4 @@ import "./Spotlight/index.mjs";
 import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./TypewriterEffect/type.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
 import "./TypewriterEffect/index.mjs";
-export { AuroraBackground, type AuroraBackgroundProps, BottomGradientButton, type BottomGradientButtonProps, type CursorStyle, type FeatureItemType, Features, type FeaturesProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps };
+export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };