@jinmi/ui 0.0.0-stage → 6.0.1

package/es/awesome/BottomGradientButton/style.mjs

@@ -0,0 +1,39 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/awesome/BottomGradientButton/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLinkColor, css`
+      overflow: hidden;
+      font-weight: bold;
+      transition: all 0.2s ease-in-out;
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        inset-block-end: 0;
+
+        display: block;
+
+        width: 50%;
+        height: 1px;
+
+        opacity: 0;
+        background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);
+
+        transition: all 0.2s ease-in-out;
+      }
+
+      &&:not(:hover) {
+        color: ${cssVar.colorTextSecondary};
+      }
+
+      &:hover {
+        &::before {
+          opacity: 1;
+        }
+      }
+    `));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) =>\r\n  cx(\r\n    lobeStaticStylish.resetLinkColor,\r\n    css`\r\n      overflow: hidden;\r\n      font-weight: bold;\r\n      transition: all 0.2s ease-in-out;\r\n\r\n      &::before {\r\n        content: '';\r\n\r\n        position: absolute;\r\n        inset-block-end: 0;\r\n\r\n        display: block;\r\n\r\n        width: 50%;\r\n        height: 1px;\r\n\r\n        opacity: 0;\r\n        background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);\r\n\r\n        transition: all 0.2s ease-in-out;\r\n      }\r\n\r\n      &&:not(:hover) {\r\n        color: ${cssVar.colorTextSecondary};\r\n      }\r\n\r\n      &:hover {\r\n        &::before {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    `,\r\n  ),\r\n);\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAC/C,GACEA,cAAkB,gBAClB,GAAG;;;;;;;;;;;;;;;;;mEAiB4D,OAAO,KAAK;;;;;;iBAM9D,OAAO,mBAAmB;;;;;;;;KASzC,CACF"}

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

@@ -0,0 +1,7 @@
+import { ButtonProps } from "../../base-ui/Button/type.mjs";
+import "../../base-ui/Button/index.mjs";
+//#region src/awesome/BottomGradientButton/type.d.ts
+type BottomGradientButtonProps = ButtonProps;
+//#endregion
+export { BottomGradientButtonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/CodeShowcase/CodeShowcase.d.mts

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

package/es/awesome/CodeShowcase/CodeShowcase.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { Highlighter } from "../../Highlighter/Highlighter.mjs";
+import Segmented from "../../base-ui/Segmented/Segmented.mjs";
+import { styles } from "./style.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/CodeShowcase/CodeShowcase.tsx
+const CodeShowcase = memo(({ activeKey: controlledKey, className, defaultActiveKey, items, minHeight, onChange, style, ...rest }) => {
+	const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);
+	const activeKey = controlledKey ?? innerKey;
+	const active = items.find((item) => item.key === activeKey) ?? items[0];
+	if (!active) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		style: {
+			"--code-showcase-min-height": `${minHeight}px`,
+			...style
+		},
+		...rest,
+		children: [items.length > 1 && /* @__PURE__ */ jsx(Segmented, {
+			className: styles.tabs,
+			options: items.map(({ key, label }) => ({
+				label,
+				value: key
+			})),
+			value: active.key,
+			variant: "outlined",
+			onChange: (key) => {
+				setInnerKey(key);
+				onChange?.(key);
+			}
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.panes,
+			children: [/* @__PURE__ */ jsx(Highlighter, {
+				className: styles.code,
+				language: active.language ?? "tsx",
+				variant: "outlined",
+				children: active.code
+			}), /* @__PURE__ */ jsx("div", {
+				className: styles.preview,
+				children: active.preview
+			})]
+		})]
+	});
+});
+CodeShowcase.displayName = "CodeShowcase";
+//#endregion
+export { CodeShowcase as default };
+
+//# sourceMappingURL=CodeShowcase.mjs.map

package/es/awesome/CodeShowcase/CodeShowcase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeShowcase.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/CodeShowcase.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type CSSProperties, memo, useState } from 'react';\r\n\r\nimport Segmented from '@/base-ui/Segmented';\r\nimport Highlighter from '@/Highlighter';\r\n\r\nimport { styles } from './style';\r\nimport type { CodeShowcaseProps } from './type';\r\n\r\nconst CodeShowcase = memo<CodeShowcaseProps>(\r\n  ({\r\n    activeKey: controlledKey,\r\n    className,\r\n    defaultActiveKey,\r\n    items,\r\n    minHeight,\r\n    onChange,\r\n    style,\r\n    ...rest\r\n  }) => {\r\n    const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);\r\n    const activeKey = controlledKey ?? innerKey;\r\n    const active = items.find((item) => item.key === activeKey) ?? items[0];\r\n\r\n    if (!active) return null;\r\n\r\n    return (\r\n      <div\r\n        className={cx(styles.root, className)}\r\n        style={{ '--code-showcase-min-height': `${minHeight}px`, ...style } as CSSProperties}\r\n        {...rest}\r\n      >\r\n        {items.length > 1 && (\r\n          <Segmented\r\n            className={styles.tabs}\r\n            options={items.map(({ key, label }) => ({ label, value: key }))}\r\n            value={active.key}\r\n            variant={'outlined'}\r\n            onChange={(key) => {\r\n              setInnerKey(key);\r\n              onChange?.(key);\r\n            }}\r\n          />\r\n        )}\r\n        <div className={styles.panes}>\r\n          <Highlighter\r\n            className={styles.code}\r\n            language={active.language ?? 'tsx'}\r\n            variant={'outlined'}\r\n          >\r\n            {active.code}\r\n          </Highlighter>\r\n          <div className={styles.preview}>{active.preview}</div>\r\n        </div>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nCodeShowcase.displayName = 'CodeShowcase';\r\n\r\nexport default CodeShowcase;\r\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EACC,WAAW,eACX,WACA,kBACA,OACA,WACA,UACA,OACA,GAAG,WACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,oBAAoB,MAAM,EAAE,EAAE,GAAG;CAC1E,MAAM,YAAY,iBAAiB;CACnC,MAAM,SAAS,MAAM,MAAM,SAAS,KAAK,QAAQ,SAAS,KAAK,MAAM;CAErE,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,OAAO;GAAE,8BAA8B,GAAG,UAAU;GAAK,GAAG;EAAM;EAClE,GAAI;EAHN,UAAA,CAKG,MAAM,SAAS,KACd,oBAAC,WAAD;GACE,WAAW,OAAO;GAClB,SAAS,MAAM,KAAK,EAAE,KAAK,aAAa;IAAE;IAAO,OAAO;GAAI,EAAE;GAC9D,OAAO,OAAO;GACd,SAAS;GACT,WAAW,QAAQ;IACjB,YAAY,GAAG;IACf,WAAW,GAAG;GAChB;EACD,CAAA,GAEH,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,UAAU,OAAO,YAAY;IAC7B,SAAS;IAER,UAAA,OAAO;GACG,CAAA,GACb,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAU,UAAA,OAAO;GAAa,CAAA,CAClD;EACF,CAAA,CAAA;;AAET,CACF;AAEA,aAAa,cAAc"}

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

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

package/es/awesome/CodeShowcase/style.mjs

@@ -0,0 +1,50 @@
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/CodeShowcase/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	code: css`
+    overflow: auto;
+    min-inline-size: 0;
+    min-block-size: var(--code-showcase-min-height);
+  `,
+	panes: css`
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+
+    ${responsive.mobile} {
+      grid-template-columns: 1fr;
+    }
+  `,
+	preview: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: 0;
+    min-block-size: var(--code-showcase-min-height);
+    padding: 20px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    > * {
+      max-inline-size: 100%;
+    }
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: stretch;
+  `,
+	tabs: css`
+    align-self: center;
+    max-inline-size: 100%;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/CodeShowcase/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  code: css`\r\n    overflow: auto;\r\n    min-inline-size: 0;\r\n    min-block-size: var(--code-showcase-min-height);\r\n  `,\r\n  panes: css`\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 12px;\r\n\r\n    ${responsive.mobile} {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  `,\r\n  preview: css`\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-inline-size: 0;\r\n    min-block-size: var(--code-showcase-min-height);\r\n    padding: 20px;\r\n    border: 1px solid ${cssVar.colorBorderSecondary};\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n\r\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\r\n    box-shadow: ${cssVar.boxShadowTertiary};\r\n\r\n    > * {\r\n      max-inline-size: 100%;\r\n    }\r\n  `,\r\n  root: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    align-items: stretch;\r\n  `,\r\n  tabs: css`\r\n    align-self: center;\r\n    max-inline-size: 100%;\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;CAKT,OAAO,GAAG;;;;;MAKN,WAAW,OAAO;;;;CAItB,SAAS,GAAG;;;;;;;;wBAQU,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;qCAEN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;CAMzC,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;AAIX,EAAE"}

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

@@ -0,0 +1,27 @@
+import { DivProps } from "../../types/index.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/CodeShowcase/type.d.ts
+interface CodeShowcaseItem {
+  /** The snippet shown on the left. Keep it short enough to read without scrolling. */
+  code: string;
+  key: string;
+  label: ReactNode;
+  /** @default 'tsx' */
+  language?: string;
+  /** The live render of the snippet, shown on the right. */
+  preview: ReactNode;
+}
+interface CodeShowcaseProps extends Omit<DivProps, 'onChange'> {
+  activeKey?: string;
+  defaultActiveKey?: string;
+  items: CodeShowcaseItem[];
+  /**
+   * Minimum height of both panes in pixels.
+   * @default 300
+   */
+  minHeight?: number;
+  onChange?: (key: string) => void;
+}
+//#endregion
+export { CodeShowcaseItem, CodeShowcaseProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/FeatureGrid/FeatureGrid.d.mts

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

package/es/awesome/FeatureGrid/FeatureGrid.mjs

@@ -0,0 +1,48 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { renderLandingLink } from "../landingLink.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/FeatureGrid/FeatureGrid.tsx
+const FeatureGrid = memo(({ className, columns = 3, items, renderLink, style, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.grid, className),
+	style: {
+		"--feature-grid-columns": columns,
+		...style
+	},
+	...rest,
+	children: items.map(({ description, href, icon, title }, index) => {
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: styles.icon,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: styles.title,
+				children: title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: styles.description,
+				children: description
+			})
+		] });
+		return /* @__PURE__ */ jsx(Fragment, { children: href ? renderLandingLink(renderLink, {
+			children: content,
+			className: styles.item,
+			href
+		}) : /* @__PURE__ */ jsx("div", {
+			className: styles.item,
+			children: content
+		}) }, typeof title === "string" ? title : index);
+	})
+}));
+FeatureGrid.displayName = "FeatureGrid";
+//#endregion
+export { FeatureGrid as default };
+
+//# sourceMappingURL=FeatureGrid.mjs.map

package/es/awesome/FeatureGrid/FeatureGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureGrid.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/FeatureGrid.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type CSSProperties, Fragment, memo } from 'react';\r\n\r\nimport { renderLandingLink } from '@/awesome/landingLink';\r\nimport Icon from '@/Icon';\r\n\r\nimport { styles } from './style';\r\nimport type { FeatureGridProps } from './type';\r\n\r\nconst FeatureGrid = memo<FeatureGridProps>(\r\n  ({ className, columns = 3, items, renderLink, style, ...rest }) => (\r\n    <div\r\n      className={cx(styles.grid, className)}\r\n      style={{ '--feature-grid-columns': columns, ...style } as CSSProperties}\r\n      {...rest}\r\n    >\r\n      {items.map(({ description, href, icon, title }, index) => {\r\n        const content = (\r\n          <>\r\n            {icon && (\r\n              <span className={styles.icon}>\r\n                <Icon icon={icon} size={16} />\r\n              </span>\r\n            )}\r\n            <h3 className={styles.title}>{title}</h3>\r\n            <p className={styles.description}>{description}</p>\r\n          </>\r\n        );\r\n\r\n        return (\r\n          <Fragment key={typeof title === 'string' ? title : index}>\r\n            {href ? (\r\n              renderLandingLink(renderLink, { children: content, className: styles.item, href })\r\n            ) : (\r\n              <div className={styles.item}>{content}</div>\r\n            )}\r\n          </Fragment>\r\n        );\r\n      })}\r\n    </div>\r\n  ),\r\n);\r\n\r\nFeatureGrid.displayName = 'FeatureGrid';\r\n\r\nexport default FeatureGrid;\r\n"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,MACjB,EAAE,WAAW,UAAU,GAAG,OAAO,YAAY,OAAO,GAAG,WACtD,oBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,OAAO;EAAE,0BAA0B;EAAS,GAAG;CAAM;CACrD,GAAI;CAEH,UAAA,MAAM,KAAK,EAAE,aAAa,MAAM,MAAM,SAAS,UAAU;EACxD,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;GACG,QACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IACtB,UAAA,oBAAC,MAAD;KAAY;KAAM,MAAM;IAAK,CAAA;GACzB,CAAA;GAER,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACxC,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAc,UAAA;GAAe,CAAA;EAClD,EAAA,CAAA;EAGJ,OACE,oBAAC,UAAD,EAAA,UACG,OACC,kBAAkB,YAAY;GAAE,UAAU;GAAS,WAAW,OAAO;GAAM;EAAK,CAAC,IAEjF,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAa,CAAA,EAErC,GANK,OAAO,UAAU,WAAW,QAAQ,KAMzC;CAEd,CAAC;AACE,CAAA,CAET;AAEA,YAAY,cAAc"}

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

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

package/es/awesome/FeatureGrid/style.mjs

@@ -0,0 +1,75 @@
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/FeatureGrid/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	description: css`
+    margin: 0;
+
+    font-size: 13.5px;
+    line-height: 1.65;
+    color: ${cssVar.colorTextSecondary};
+    text-wrap: pretty;
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: repeat(var(--feature-grid-columns), minmax(0, 1fr));
+    gap: 16px;
+
+    ${responsive.tablet} {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    ${responsive.mobile} {
+      grid-template-columns: 1fr;
+    }
+  `,
+	icon: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 30px;
+    block-size: 30px;
+    margin-block-end: 14px;
+    border-radius: 9px;
+
+    color: ${cssVar.colorPrimary};
+
+    background: ${cssVar.colorPrimaryBg};
+  `,
+	item: css`
+    display: block;
+
+    padding-block: 20px 22px;
+    padding-inline: 20px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    color: inherit;
+    text-decoration: none;
+
+    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    transition:
+      border-color 140ms ease,
+      box-shadow 140ms ease;
+
+    &:hover {
+      border-color: ${cssVar.colorBorder};
+      box-shadow: ${cssVar.boxShadowSecondary};
+    }
+  `,
+	title: css`
+    margin-block: 0 6px;
+    margin-inline: 0;
+
+    font-size: 15px;
+    font-weight: 600;
+    color: ${cssVar.colorText};
+    letter-spacing: -0.01em;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/FeatureGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  description: css`\r\n    margin: 0;\r\n\r\n    font-size: 13.5px;\r\n    line-height: 1.65;\r\n    color: ${cssVar.colorTextSecondary};\r\n    text-wrap: pretty;\r\n  `,\r\n  grid: css`\r\n    display: grid;\r\n    grid-template-columns: repeat(var(--feature-grid-columns), minmax(0, 1fr));\r\n    gap: 16px;\r\n\r\n    ${responsive.tablet} {\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    ${responsive.mobile} {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  `,\r\n  icon: css`\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    inline-size: 30px;\r\n    block-size: 30px;\r\n    margin-block-end: 14px;\r\n    border-radius: 9px;\r\n\r\n    color: ${cssVar.colorPrimary};\r\n\r\n    background: ${cssVar.colorPrimaryBg};\r\n  `,\r\n  item: css`\r\n    display: block;\r\n\r\n    padding-block: 20px 22px;\r\n    padding-inline: 20px;\r\n    border: 1px solid ${cssVar.colorBorderSecondary};\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n\r\n    color: inherit;\r\n    text-decoration: none;\r\n\r\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\r\n    box-shadow: ${cssVar.boxShadowTertiary};\r\n\r\n    transition:\r\n      border-color 140ms ease,\r\n      box-shadow 140ms ease;\r\n\r\n    &:hover {\r\n      border-color: ${cssVar.colorBorder};\r\n      box-shadow: ${cssVar.boxShadowSecondary};\r\n    }\r\n  `,\r\n  title: css`\r\n    margin-block: 0 6px;\r\n    margin-inline: 0;\r\n\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: ${cssVar.colorText};\r\n    letter-spacing: -0.01em;\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,aAAa,GAAG;;;;;aAKL,OAAO,mBAAmB;;;CAGrC,MAAM,GAAG;;;;;MAKL,WAAW,OAAO;;;;MAIlB,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,aAAa;;kBAEf,OAAO,eAAe;;CAEtC,MAAM,GAAG;;;;;wBAKa,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;;;;qCAKN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;;sBAOrB,OAAO,YAAY;oBACrB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;AAG9B,EAAE"}

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

@@ -0,0 +1,25 @@
+import { DivProps } from "../../types/index.mjs";
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { LandingLinkRender } from "../landingLink.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/FeatureGrid/type.d.ts
+interface FeatureGridItem {
+  description: ReactNode;
+  /** Makes the whole card a link. */
+  href?: string;
+  icon?: IconProps['icon'];
+  title: ReactNode;
+}
+interface FeatureGridProps extends DivProps {
+  /**
+   * Columns on wide screens. The grid collapses to one column on phones.
+   * @default 3
+   */
+  columns?: number;
+  items: FeatureGridItem[];
+  renderLink?: LandingLinkRender;
+}
+//#endregion
+export { FeatureGridItem, FeatureGridProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/Features/FeatureItem.mjs

@@ -0,0 +1,86 @@
+"use client";
+import A from "../../A/index.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Center from "../../Flex/Center.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import Text from "../../Text/Text.mjs";
+import Img from "../../Img/index.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/Features/FeatureItem.tsx
+const Image = memo(({ image, className, title, style }) => {
+	return image.startsWith("http") ? /* @__PURE__ */ jsx(Img, {
+		alt: title,
+		className,
+		src: image,
+		style
+	}) : /* @__PURE__ */ jsx(Center, {
+		className,
+		style,
+		children: image
+	});
+});
+const Item = memo(({ style, className, row, column, description, image, title, link, icon, imageStyle, openExternal, ...rest }) => {
+	const rowNumber = row || 7;
+	const hasLink = Boolean(link);
+	const cssVariables = useMemo(() => ({
+		"--features-row-num": String(rowNumber),
+		"--features-title-hover-size": hasLink ? "14px" : "20px"
+	}), [rowNumber, hasLink]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(hasLink ? styles.containerHasLink : styles.container, className),
+		style: {
+			...cssVariables,
+			gridColumn: `span ${column || 1}`,
+			gridRow: `span ${rowNumber}`,
+			...style
+		},
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.cell,
+			children: [
+				image || icon && /* @__PURE__ */ jsxs(Center, {
+					className: styles.imgContainer,
+					style: imageStyle,
+					children: [icon && /* @__PURE__ */ jsx(Icon, {
+						className: styles.img,
+						icon
+					}), image && /* @__PURE__ */ jsx(Image, {
+						className: styles.img,
+						image,
+						title
+					})]
+				}),
+				title && /* @__PURE__ */ jsx(FlexBasic_default, {
+					horizontal: true,
+					align: "center",
+					as: "h3",
+					className: styles.title,
+					gap: 8,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(Text, {
+					className: styles.desc,
+					ellipsis: { rows: 4 },
+					children: description
+				}),
+				link && /* @__PURE__ */ jsx("div", {
+					className: styles.link,
+					children: /* @__PURE__ */ jsx(A, {
+						href: link,
+						rel: "noreferrer",
+						target: openExternal ? "_blank" : void 0,
+						children: "Read More"
+					})
+				})
+			]
+		})
+	});
+});
+Item.displayName = "FeatureItem";
+//#endregion
+export { Item as default };
+
+//# sourceMappingURL=FeatureItem.mjs.map

package/es/awesome/Features/FeatureItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type CSSProperties, memo, useMemo } from 'react';\r\n\r\nimport A from '@/A';\r\nimport { Center, Flexbox } from '@/Flex';\r\nimport Icon from '@/Icon';\r\nimport Img from '@/Img';\r\nimport Text from '@/Text';\r\n\r\nimport { styles } from './style';\r\nimport type { FeatureItemProps } from './type';\r\n\r\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\r\n  ({ image, className, title, style }) => {\r\n    return image.startsWith('http') ? (\r\n      <Img alt={title} className={className} src={image} style={style} />\r\n    ) : (\r\n      <Center className={className} style={style}>\r\n        {image}\r\n      </Center>\r\n    );\r\n  },\r\n);\r\n\r\nconst Item = memo<FeatureItemProps>(\r\n  ({\r\n    style,\r\n    className,\r\n    row,\r\n    column,\r\n    description,\r\n    image,\r\n    title,\r\n    link,\r\n    icon,\r\n    imageStyle,\r\n    openExternal,\r\n    ...rest\r\n  }) => {\r\n    const rowNumber = row || 7;\r\n    const hasLink = Boolean(link);\r\n\r\n    const cssVariables = useMemo<Record<string, string>>(\r\n      () => ({\r\n        '--features-row-num': String(rowNumber),\r\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\r\n      }),\r\n      [rowNumber, hasLink],\r\n    );\r\n\r\n    return (\r\n      <div\r\n        className={cx(hasLink ? styles.containerHasLink : styles.container, className)}\r\n        style={{\r\n          ...cssVariables,\r\n          gridColumn: `span ${column || 1}`,\r\n          gridRow: `span ${rowNumber}`,\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        <div className={styles.cell}>\r\n          {image ||\r\n            (icon && (\r\n              <Center className={styles.imgContainer} style={imageStyle}>\r\n                {icon && <Icon className={styles.img} icon={icon} />}\r\n                {image && <Image className={styles.img} image={image} title={title} />}\r\n              </Center>\r\n            ))}\r\n          {title && (\r\n            <Flexbox horizontal align={'center'} as={'h3'} className={styles.title} gap={8}>\r\n              {title}\r\n            </Flexbox>\r\n          )}\r\n          {description && (\r\n            <Text\r\n              className={styles.desc}\r\n              ellipsis={{\r\n                rows: 4,\r\n              }}\r\n            >\r\n              {description}\r\n            </Text>\r\n          )}\r\n          {link && (\r\n            <div className={styles.link}>\r\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\r\n                Read More\r\n              </A>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nItem.displayName = 'FeatureItem';\r\n\r\nexport default Item;\r\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;CACtC,OAAO,MAAM,WAAW,MAAM,IAC5B,oBAAC,KAAD;EAAK,KAAK;EAAkB;EAAW,KAAK;EAAc;CAAQ,CAAA,IAElE,oBAAC,QAAD;EAAmB;EAAkB;EAClC,UAAA;CACK,CAAA;AAEZ,CACF;AAEA,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,IAAI;CAE5B,MAAM,eAAe,eACZ;EACL,sBAAsB,OAAO,SAAS;EACtC,+BAA+B,UAAU,SAAS;CACpD,IACA,CAAC,WAAW,OAAO,CACrB;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU,OAAO,mBAAmB,OAAO,WAAW,SAAS;EAC7E,OAAO;GACL,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;EACL;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA;IACG,SACE,QACC,qBAAC,QAAD;KAAQ,WAAW,OAAO;KAAc,OAAO;KAA/C,UAAA,CACG,QAAQ,oBAAC,MAAD;MAAM,WAAW,OAAO;MAAW;KAAO,CAAA,GAClD,SAAS,oBAAC,OAAD;MAAO,WAAW,OAAO;MAAY;MAAc;KAAQ,CAAA,CAC/D;;IAEX,SACC,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAC1E,UAAA;IACM,CAAA;IAEV,eACC,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,EACR;KAEC,UAAA;IACG,CAAA;IAEP,QACC,oBAAC,OAAD;KAAK,WAAW,OAAO;KACrB,UAAA,oBAAC,GAAD;MAAG,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW,KAAA;MAAW,UAAA;KAE1E,CAAA;IACA,CAAA;GAEJ;;CACF,CAAA;AAET,CACF;AAEA,KAAK,cAAc"}

package/es/awesome/Features/Features.d.mts

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

package/es/awesome/Features/Features.mjs

@@ -0,0 +1,28 @@
+"use client";
+import SpotlightCard from "../SpotlightCard/SpotlightCard.mjs";
+import Item from "./FeatureItem.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/awesome/Features/Features.tsx
+const Features = memo(({ items, className, itemClassName, itemStyle, maxWidth = 960, style, ...rest }) => {
+	if (!items?.length) return;
+	return /* @__PURE__ */ jsx(SpotlightCard, {
+		className,
+		items,
+		style: {
+			maxWidth,
+			...style
+		},
+		renderItem: (item) => /* @__PURE__ */ jsx(Item, {
+			className: itemClassName,
+			style: itemStyle,
+			...item
+		}, item.title),
+		...rest
+	});
+});
+Features.displayName = "Features";
+//#endregion
+export { Features as default };
+
+//# sourceMappingURL=Features.mjs.map

package/es/awesome/Features/Features.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Features.mjs","names":["FeatureItem"],"sources":["../../../src/awesome/Features/Features.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { memo } from 'react';\r\n\r\nimport SpotlightCard from '@/awesome/SpotlightCard';\r\n\r\nimport FeatureItem from './FeatureItem';\r\nimport type { FeaturesProps } from './type';\r\n\r\nconst Features = memo<FeaturesProps>(\r\n  ({ items, className, itemClassName, itemStyle, maxWidth = 960, style, ...rest }) => {\r\n    if (!items?.length) return;\r\n\r\n    return (\r\n      <SpotlightCard\r\n        className={className}\r\n        items={items}\r\n        style={{ maxWidth, ...style }}\r\n        renderItem={(item: any) => (\r\n          <FeatureItem className={itemClassName} key={item.title} style={itemStyle} {...item} />\r\n        )}\r\n        {...rest}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nFeatures.displayName = 'Features';\r\n\r\nexport default Features;\r\n"],"mappings":";;;;;;AASA,MAAM,WAAW,MACd,EAAE,OAAO,WAAW,eAAe,WAAW,WAAW,KAAK,OAAO,GAAG,WAAW;CAClF,IAAI,CAAC,OAAO,QAAQ;CAEpB,OACE,oBAAC,eAAD;EACa;EACJ;EACP,OAAO;GAAE;GAAU,GAAG;EAAM;EAC5B,aAAa,SACX,oBAACA,MAAD;GAAa,WAAW;GAAgC,OAAO;GAAW,GAAI;EAAO,GAAzC,KAAK,KAAoC;EAEvF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

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

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