@jinmi/ui 0.0.0-stage → 6.0.2

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';\r\n\r\nimport { accentGradient } from '@/awesome/landingTokens';\r\n\r\nconst splitStack = '@media (max-width: 860px)';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  accent: css`\r\n    background: ${accentGradient};\r\n    background-clip: text;\r\n\r\n    -webkit-text-fill-color: transparent;\r\n  `,\r\n  actions: css`\r\n    justify-content: center;\r\n    margin-block-start: 36px;\r\n\r\n    [data-layout='split'] & {\r\n      justify-content: flex-start;\r\n    }\r\n  `,\r\n  aside: css`\r\n    display: flex;\r\n    justify-content: center;\r\n    min-inline-size: 0;\r\n\r\n    > * {\r\n      inline-size: 100%;\r\n    }\r\n  `,\r\n  badge: css`\r\n    display: inline-flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n\r\n    margin-block-end: 24px;\r\n    padding-block: 4px;\r\n    padding-inline: 12px;\r\n    border: 1px solid ${cssVar.colorBorderSecondary};\r\n    border-radius: 999px;\r\n\r\n    font-size: ${cssVar.fontSizeSM};\r\n    color: ${cssVar.colorTextSecondary};\r\n\r\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent);\r\n    backdrop-filter: blur(8px);\r\n\r\n    a {\r\n      color: inherit;\r\n      text-decoration: none;\r\n    }\r\n\r\n    a:hover {\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  content: css`\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n\r\n    inline-size: 100%;\r\n  `,\r\n  description: css`\r\n    max-inline-size: 36rem;\r\n    margin-block: 20px 0;\r\n    margin-inline: 0;\r\n\r\n    font-size: clamp(16px, 2vw, 19px);\r\n    line-height: 1.6;\r\n    color: ${cssVar.colorTextSecondary};\r\n    text-wrap: balance;\r\n  `,\r\n  intro: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    min-inline-size: 0;\r\n\r\n    [data-layout='split'] & {\r\n      align-items: flex-start;\r\n      text-align: start;\r\n    }\r\n\r\n    ${splitStack} {\r\n      [data-layout='split'] & {\r\n        align-items: center;\r\n        text-align: center;\r\n      }\r\n    }\r\n  `,\r\n  main: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    inline-size: 100%;\r\n\r\n    [data-layout='split'] & {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\r\n      gap: clamp(32px, 5vw, 64px);\r\n      align-items: center;\r\n    }\r\n\r\n    ${splitStack} {\r\n      [data-layout='split'] & {\r\n        grid-template-columns: minmax(0, 1fr);\r\n        gap: 48px;\r\n      }\r\n    }\r\n  `,\r\n  extra: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 40px;\r\n    align-items: center;\r\n\r\n    inline-size: 100%;\r\n    margin-block-start: 48px;\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n\r\n    padding-block: clamp(72px, 13vh, 128px) clamp(40px, 7vh, 72px);\r\n\r\n    text-align: center;\r\n\r\n    &[data-layout='split'] {\r\n      padding-block-start: clamp(56px, 10vh, 104px);\r\n    }\r\n  `,\r\n  title: css`\r\n    margin: 0;\r\n\r\n    font-size: clamp(44px, 8vw, 84px);\r\n    font-weight: 900;\r\n    line-height: 1.02;\r\n    color: ${cssVar.colorText};\r\n    text-wrap: balance;\r\n    letter-spacing: -0.045em;\r\n\r\n    [data-layout='split'] & {\r\n      font-size: clamp(44px, 6vw, 72px);\r\n    }\r\n  `,\r\n}));\r\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 Tag from "../../base-ui/Tag/Tag.mjs";
+import { LandingActions } from "../landingActions.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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { LandingActions } from '@/awesome/landingActions';\r\nimport Tag from '@/base-ui/Tag';\r\n\r\nimport { styles } from './style';\r\nimport type { LandingSectionProps } from './type';\r\n\r\nconst LandingSection = memo<LandingSectionProps>(\r\n  ({\r\n    actions,\r\n    align = 'start',\r\n    children,\r\n    className,\r\n    description,\r\n    divider = true,\r\n    eyebrow,\r\n    eyebrowColor = 'blue',\r\n    extra,\r\n    id,\r\n    onNavigate,\r\n    renderLink,\r\n    title,\r\n    ...rest\r\n  }) => {\r\n    const headingId = id ? `${id}-title` : undefined;\r\n    const hasActions = Boolean(actions?.length);\r\n    const hasAside = hasActions || Boolean(extra);\r\n    const hasHeader = Boolean(eyebrow || title || description || hasAside);\r\n\r\n    return (\r\n      <section\r\n        aria-labelledby={title ? headingId : undefined}\r\n        className={cx(styles.root, className)}\r\n        data-divider={divider}\r\n        id={id}\r\n        {...rest}\r\n      >\r\n        {hasHeader && (\r\n          <div className={styles.header} data-align={align}>\r\n            <div className={styles.heading}>\r\n              {eyebrow && (\r\n                <Tag className={styles.eyebrow} color={eyebrowColor} shape={'round'}>\r\n                  {eyebrow}\r\n                </Tag>\r\n              )}\r\n              {title && (\r\n                <h2 className={styles.title} id={headingId}>\r\n                  {title}\r\n                </h2>\r\n              )}\r\n              {description && <p className={styles.description}>{description}</p>}\r\n            </div>\r\n            {hasAside && (\r\n              <div className={styles.extra}>\r\n                {hasActions && (\r\n                  <LandingActions\r\n                    actions={actions!}\r\n                    renderLink={renderLink}\r\n                    size={'small'}\r\n                    onNavigate={onNavigate}\r\n                  />\r\n                )}\r\n                {extra}\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        {children && <div className={hasHeader ? styles.body : undefined}>{children}</div>}\r\n      </section>\r\n    );\r\n  },\r\n);\r\n\r\nLandingSection.displayName = 'LandingSection';\r\n\r\nexport default LandingSection;\r\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';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  body: css`\r\n    margin-block-start: 32px;\r\n  `,\r\n  description: css`\r\n    max-inline-size: 34rem;\r\n    margin: 0;\r\n\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n    color: ${cssVar.colorTextSecondary};\r\n    text-wrap: pretty;\r\n  `,\r\n  eyebrow: css`\r\n    margin-block-end: 6px;\r\n  `,\r\n  extra: css`\r\n    display: flex;\r\n    flex: none;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    align-items: center;\r\n\r\n    ${responsive.mobile} {\r\n      [data-align='start'] > & {\r\n        align-self: flex-start;\r\n      }\r\n    }\r\n  `,\r\n  header: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    align-items: center;\r\n\r\n    text-align: center;\r\n\r\n    &[data-align='start'] {\r\n      flex-direction: row;\r\n      gap: 32px;\r\n      align-items: flex-end;\r\n      justify-content: space-between;\r\n\r\n      text-align: start;\r\n\r\n      ${responsive.mobile} {\r\n        flex-direction: column;\r\n        gap: 16px;\r\n        align-items: stretch;\r\n      }\r\n    }\r\n  `,\r\n  heading: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    align-items: center;\r\n\r\n    min-inline-size: 0;\r\n\r\n    [data-align='start'] > & {\r\n      align-items: flex-start;\r\n    }\r\n  `,\r\n  root: css`\r\n    padding-block: clamp(48px, 8vh, 80px);\r\n\r\n    &[data-divider='true'] {\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    }\r\n  `,\r\n  title: css`\r\n    margin: 0;\r\n\r\n    font-size: clamp(24px, 3vw, 32px);\r\n    font-weight: bold;\r\n    line-height: 1.2;\r\n    color: ${cssVar.colorText};\r\n    text-wrap: balance;\r\n    letter-spacing: -0.025em;\r\n  `,\r\n}));\r\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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type CSSProperties, memo } from 'react';\r\n\r\nimport { renderLandingIcon } from '@/awesome/landingIcon';\r\n\r\nimport { styles } from './style';\r\nimport type { LogoMarqueeProps } from './type';\r\n\r\nconst Track = ({\r\n  hidden,\r\n  iconOnly,\r\n  iconSize,\r\n  items,\r\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\r\n  <div aria-hidden={hidden || undefined} className={styles.track}>\r\n    {items.map(({ icon, label }) => (\r\n      <span className={styles.item} key={label} title={iconOnly ? label : undefined}>\r\n        {renderLandingIcon(icon, iconSize)}\r\n        {!iconOnly && label}\r\n      </span>\r\n    ))}\r\n  </div>\r\n);\r\n\r\nconst LogoMarquee = memo<LogoMarqueeProps>(\r\n  ({\r\n    caption,\r\n    className,\r\n    duration = 28,\r\n    gap = 36,\r\n    iconOnly = false,\r\n    iconSize = 18,\r\n    items,\r\n    maxWidth = 640,\r\n    style,\r\n    ...rest\r\n  }) => {\r\n    const variables = {\r\n      '--logo-marquee-duration': `${duration}s`,\r\n      '--logo-marquee-gap': `${gap}px`,\r\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\r\n    } as CSSProperties;\r\n\r\n    return (\r\n      <div className={cx(styles.root, className)} style={{ ...variables, ...style }} {...rest}>\r\n        <div className={styles.viewport}>\r\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\r\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\r\n        </div>\r\n        {caption && <p className={styles.caption}>{caption}</p>}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nLogoMarquee.displayName = 'LogoMarquee';\r\n\r\nexport default LogoMarquee;\r\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';\r\n\r\nconst slide = keyframes`\r\n  to {\r\n    transform: translateX(calc(-100% - var(--logo-marquee-gap)));\r\n  }\r\n`;\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  caption: css`\r\n    margin: 0;\r\n    font-size: ${cssVar.fontSizeSM};\r\n    color: ${cssVar.colorTextTertiary};\r\n\r\n    a {\r\n      color: inherit;\r\n      text-decoration: none;\r\n      transition: color 140ms ease;\r\n    }\r\n\r\n    a:hover {\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  item: css`\r\n    display: inline-flex;\r\n    gap: 8px;\r\n    align-items: center;\r\n\r\n    font-size: ${cssVar.fontSize};\r\n    color: ${cssVar.colorTextTertiary};\r\n    white-space: nowrap;\r\n  `,\r\n  root: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    align-items: center;\r\n\r\n    inline-size: 100%;\r\n  `,\r\n  track: css`\r\n    display: flex;\r\n    flex: none;\r\n    gap: var(--logo-marquee-gap);\r\n    align-items: center;\r\n\r\n    animation: ${slide} var(--logo-marquee-duration) linear infinite;\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      animation: none;\r\n    }\r\n  `,\r\n  viewport: css`\r\n    overflow: hidden;\r\n    display: flex;\r\n    gap: var(--logo-marquee-gap);\r\n\r\n    inline-size: min(100%, var(--logo-marquee-max-width));\r\n\r\n    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);\r\n\r\n    &:hover > * {\r\n      animation-play-state: paused;\r\n    }\r\n  `,\r\n}));\r\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/Spline/ParentSize.mjs

@@ -0,0 +1,71 @@
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { debounce } from "es-toolkit/compat";
+import { mergeRefs } from "react-merge-refs";
+//#region src/awesome/Spline/ParentSize.tsx
+const defaultIgnoreDimensions = [];
+const defaultParentSizeStyles = {
+	height: "100%",
+	width: "100%"
+};
+const ParentSize = memo(({ ref, className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, parentSizeStyles, enableDebounceLeadingCall = true, resizeObserverPolyfill, ...restProps }) => {
+	const target = useRef(null);
+	const animationFrameID = useRef(0);
+	const [state, setState] = useState({
+		height: 0,
+		left: 0,
+		top: 0,
+		width: 0
+	});
+	const resize = useMemo(() => {
+		const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+		return debounce((incoming) => {
+			setState((existing) => {
+				return Object.keys(existing).filter((key) => existing[key] !== incoming[key]).every((key) => normalized.includes(key)) ? existing : incoming;
+			});
+		}, debounceTime, { leading: enableDebounceLeadingCall });
+	}, [
+		debounceTime,
+		enableDebounceLeadingCall,
+		ignoreDimensions
+	]);
+	useEffect(() => {
+		const observer = new (resizeObserverPolyfill || window.ResizeObserver)((entries) => {
+			for (const entry of entries) {
+				const { left, top, width, height } = entry?.contentRect ?? {};
+				animationFrameID.current = window.requestAnimationFrame(() => {
+					resize({
+						height,
+						left,
+						top,
+						width
+					});
+				});
+			}
+		});
+		if (target.current) observer.observe(target.current);
+		return () => {
+			window.cancelAnimationFrame(animationFrameID.current);
+			observer.disconnect();
+			resize.cancel();
+		};
+	}, [resize, resizeObserverPolyfill]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref: mergeRefs([ref, target]),
+		style: {
+			...defaultParentSizeStyles,
+			...parentSizeStyles
+		},
+		...restProps,
+		children: children({
+			...state,
+			ref: target.current,
+			resize
+		})
+	});
+});
+//#endregion
+export { ParentSize as default };
+
+//# sourceMappingURL=ParentSize.mjs.map