@lobehub/ui 5.48.2 → 5.49.0

package/es/awesome/BentoGrid/BentoGrid.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/BentoGrid/BentoGrid.tsx
+const BentoGrid = memo(({ className, columns = 4, rowHeight = 120, style, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.grid, className),
+	style: {
+		"--bento-columns": columns,
+		"--bento-row-height": `${rowHeight}px`,
+		...style
+	},
+	...rest
+}));
+BentoGrid.displayName = "BentoGrid";
+//#endregion
+export { BentoGrid as default };
+
+//# sourceMappingURL=BentoGrid.mjs.map

package/es/awesome/BentoGrid/BentoGrid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BentoGrid.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoGrid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styles } from './style';\nimport type { BentoGridProps } from './type';\n\nconst BentoGrid = memo<BentoGridProps>(\n  ({ className, columns = 4, rowHeight = 120, style, ...rest }) => (\n    <div\n      className={cx(styles.grid, className)}\n      style={\n        {\n          '--bento-columns': columns,\n          '--bento-row-height': `${rowHeight}px`,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    />\n  ),\n);\n\nBentoGrid.displayName = 'BentoGrid';\n\nexport default BentoGrid;\n"],"mappings":";;;;;;AAQA,MAAM,YAAY,MACf,EAAE,WAAW,UAAU,GAAG,YAAY,KAAK,OAAO,GAAG,WACpD,oBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,OACE;EACE,mBAAmB;EACnB,sBAAsB,GAAG,UAAU;EACnC,GAAG;CACL;CAEF,GAAI;AACL,CAAA,CAEL;AAEA,UAAU,cAAc"}

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

@@ -0,0 +1,4 @@
+import { BentoCardProps, BentoGridProps } from "./type.mjs";
+import BentoCard from "./BentoCard.mjs";
+import BentoGrid from "./BentoGrid.mjs";
+export { BentoCard, type BentoCardProps, type BentoGridProps, BentoGrid as default };

package/es/awesome/BentoGrid/style.mjs

@@ -0,0 +1,102 @@
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/BentoGrid/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	card: css`
+    display: flex;
+    grid-column: span var(--bento-col-span, 1);
+    grid-row: span var(--bento-row-span, 1);
+    flex-direction: column;
+
+    min-inline-size: 0;
+    padding-block: 14px 16px;
+    padding-inline: 16px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
+    box-shadow: ${cssVar.boxShadowTertiary};
+
+    transition:
+      border-color 140ms ease,
+      transform 140ms ease,
+      box-shadow 140ms ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      border-color: ${cssVar.colorBorder};
+      box-shadow: ${cssVar.boxShadowSecondary};
+    }
+
+    ${responsive.tablet} {
+      &[data-wide='true'] {
+        grid-column: span 2;
+      }
+    }
+
+    ${responsive.mobile} {
+      grid-column: span 1;
+      grid-row: span 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &:hover {
+        transform: none;
+      }
+    }
+  `,
+	body: css`
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: 0;
+    margin-block-start: 12px;
+
+    > * {
+      max-inline-size: 100%;
+    }
+  `,
+	grid: css`
+    display: grid;
+    grid-auto-rows: minmax(var(--bento-row-height), auto);
+    grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr));
+    gap: 12px;
+
+    ${responsive.tablet} {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    ${responsive.mobile} {
+      grid-template-columns: 1fr;
+    }
+  `,
+	header: css`
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    justify-content: space-between;
+  `,
+	hint: css`
+    overflow: hidden;
+
+    font-size: 11px;
+    color: ${cssVar.colorTextTertiary};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	title: css`
+    font-size: ${cssVar.fontSizeSM};
+    font-weight: 600;
+    color: ${cssVar.colorText};
+    text-decoration: none;
+
+    &[href]:hover {
+      color: ${cssVar.colorPrimary};
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  card: css`\n    display: flex;\n    grid-column: span var(--bento-col-span, 1);\n    grid-row: span var(--bento-row-span, 1);\n    flex-direction: column;\n\n    min-inline-size: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition:\n      border-color 140ms ease,\n      transform 140ms ease,\n      box-shadow 140ms ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      border-color: ${cssVar.colorBorder};\n      box-shadow: ${cssVar.boxShadowSecondary};\n    }\n\n    ${responsive.tablet} {\n      &[data-wide='true'] {\n        grid-column: span 2;\n      }\n    }\n\n    ${responsive.mobile} {\n      grid-column: span 1;\n      grid-row: span 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      &:hover {\n        transform: none;\n      }\n    }\n  `,\n  body: css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 0;\n    margin-block-start: 12px;\n\n    > * {\n      max-inline-size: 100%;\n    }\n  `,\n  grid: css`\n    display: grid;\n    grid-auto-rows: minmax(var(--bento-row-height), auto);\n    grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr));\n    gap: 12px;\n\n    ${responsive.tablet} {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  header: css`\n    display: flex;\n    gap: 8px;\n    align-items: baseline;\n    justify-content: space-between;\n  `,\n  hint: css`\n    overflow: hidden;\n\n    font-size: 11px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  title: css`\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    text-decoration: none;\n\n    &[href]:hover {\n      color: ${cssVar.colorPrimary};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;wBASa,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;qCAEN,OAAO,gBAAgB;kBAC1C,OAAO,kBAAkB;;;;;;;;;sBASrB,OAAO,YAAY;oBACrB,OAAO,mBAAmB;;;MAGxC,WAAW,OAAO;;;;;;MAMlB,WAAW,OAAO;;;;;;;;;;;CAWtB,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;MAML,WAAW,OAAO;;;;MAIlB,WAAW,OAAO;;;;CAItB,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;;;CAIpC,OAAO,GAAG;iBACK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;;;eAIf,OAAO,aAAa;;;AAGnC,EAAE"}

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

@@ -0,0 +1,40 @@
+import { DivProps } from "../../types/index.mjs";
+import { LandingLinkRender } from "../landingLink.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/BentoGrid/type.d.ts
+interface BentoGridProps extends DivProps {
+  children?: ReactNode;
+  /**
+   * Columns on wide screens. The grid drops to two columns on tablets and one on phones.
+   * @default 4
+   */
+  columns?: number;
+  /**
+   * Minimum row height in pixels.
+   * @default 120
+   */
+  rowHeight?: number;
+}
+interface BentoCardProps extends Omit<DivProps, 'title'> {
+  /** The live content of the tile. Render real components, not screenshots. */
+  children?: ReactNode;
+  /**
+   * Columns the tile spans on wide screens.
+   * @default 1
+   */
+  colSpan?: 1 | 2 | 3 | 4;
+  /** Short muted note on the right side of the header. */
+  hint?: ReactNode;
+  /** Makes the title a link, e.g. to the component page. */
+  href?: string;
+  renderLink?: LandingLinkRender;
+  /**
+   * Rows the tile spans on wide screens.
+   * @default 1
+   */
+  rowSpan?: 1 | 2 | 3;
+  title?: ReactNode;
+}
+//#endregion
+export { BentoCardProps, BentoGridProps };
+//# 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';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo, useState } from 'react';\n\nimport Segmented from '@/base-ui/Segmented';\nimport Highlighter from '@/Highlighter';\n\nimport { styles } from './style';\nimport type { CodeShowcaseProps } from './type';\n\nconst CodeShowcase = memo<CodeShowcaseProps>(\n  ({\n    activeKey: controlledKey,\n    className,\n    defaultActiveKey,\n    items,\n    minHeight,\n    onChange,\n    style,\n    ...rest\n  }) => {\n    const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);\n    const activeKey = controlledKey ?? innerKey;\n    const active = items.find((item) => item.key === activeKey) ?? items[0];\n\n    if (!active) return null;\n\n    return (\n      <div\n        className={cx(styles.root, className)}\n        style={{ '--code-showcase-min-height': `${minHeight}px`, ...style } as CSSProperties}\n        {...rest}\n      >\n        {items.length > 1 && (\n          <Segmented\n            className={styles.tabs}\n            options={items.map(({ key, label }) => ({ label, value: key }))}\n            value={active.key}\n            variant={'outlined'}\n            onChange={(key) => {\n              setInnerKey(key);\n              onChange?.(key);\n            }}\n          />\n        )}\n        <div className={styles.panes}>\n          <Highlighter\n            className={styles.code}\n            language={active.language ?? 'tsx'}\n            variant={'outlined'}\n          >\n            {active.code}\n          </Highlighter>\n          <div className={styles.preview}>{active.preview}</div>\n        </div>\n      </div>\n    );\n  },\n);\n\nCodeShowcase.displayName = 'CodeShowcase';\n\nexport default CodeShowcase;\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';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  code: css`\n    overflow: auto;\n    min-inline-size: 0;\n    min-block-size: var(--code-showcase-min-height);\n  `,\n  panes: css`\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  preview: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 0;\n    min-block-size: var(--code-showcase-min-height);\n    padding: 20px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    > * {\n      max-inline-size: 100%;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    align-items: stretch;\n  `,\n  tabs: css`\n    align-self: center;\n    max-inline-size: 100%;\n  `,\n}));\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';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, Fragment, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { FeatureGridProps } from './type';\n\nconst FeatureGrid = memo<FeatureGridProps>(\n  ({ className, columns = 3, items, renderLink, style, ...rest }) => (\n    <div\n      className={cx(styles.grid, className)}\n      style={{ '--feature-grid-columns': columns, ...style } as CSSProperties}\n      {...rest}\n    >\n      {items.map(({ description, href, icon, title }, index) => {\n        const content = (\n          <>\n            {icon && (\n              <span className={styles.icon}>\n                <Icon icon={icon} size={16} />\n              </span>\n            )}\n            <h3 className={styles.title}>{title}</h3>\n            <p className={styles.description}>{description}</p>\n          </>\n        );\n\n        return (\n          <Fragment key={typeof title === 'string' ? title : index}>\n            {href ? (\n              renderLandingLink(renderLink, { children: content, className: styles.item, href })\n            ) : (\n              <div className={styles.item}>{content}</div>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  ),\n);\n\nFeatureGrid.displayName = 'FeatureGrid';\n\nexport default FeatureGrid;\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';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  description: css`\n    margin: 0;\n\n    font-size: 13.5px;\n    line-height: 1.65;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(var(--feature-grid-columns), minmax(0, 1fr));\n    gap: 16px;\n\n    ${responsive.tablet} {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    ${responsive.mobile} {\n      grid-template-columns: 1fr;\n    }\n  `,\n  icon: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 30px;\n    block-size: 30px;\n    margin-block-end: 14px;\n    border-radius: 9px;\n\n    color: ${cssVar.colorPrimary};\n\n    background: ${cssVar.colorPrimaryBg};\n  `,\n  item: css`\n    display: block;\n\n    padding-block: 20px 22px;\n    padding-inline: 20px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: inherit;\n    text-decoration: none;\n\n    background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition:\n      border-color 140ms ease,\n      box-shadow 140ms ease;\n\n    &:hover {\n      border-color: ${cssVar.colorBorder};\n      box-shadow: ${cssVar.boxShadowSecondary};\n    }\n  `,\n  title: css`\n    margin-block: 0 6px;\n    margin-inline: 0;\n\n    font-size: 15px;\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.01em;\n  `,\n}));\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/FluidGradient/FluidGradient.d.mts

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