@jinmi/ui 6.0.2 → 6.1.0

package/es/base-ui/DetailPage/DetailPage.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ArrowLeft } from "lucide-react";
+// src/base-ui/DetailPage/DetailPage.tsx
+/** The centered 1080px column of a detail page, with an optional "← Back" link. */
+const DetailPage = memo(({ back, children, className, ref, ...rest }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.page, className),
+	ref,
+	...rest,
+	children: [back && /* @__PURE__ */ jsxs("button", {
+		className: styles.back,
+		type: "button",
+		onClick: back.onClick,
+		children: [/* @__PURE__ */ jsx(ArrowLeft, { size: 14 }), back.label]
+	}), children]
+}));
+DetailPage.displayName = "DetailPage";
+/** Icon tile, 26px title with badges, byline, description, and actions on the right. */
+const DetailHeader = memo(({ actions, avatar, badges, byline, className, description, ref, running, title, ...rest }) => /* @__PURE__ */ jsxs("header", {
+	className: cx(styles.header, className),
+	ref,
+	...rest,
+	children: [
+		avatar !== void 0 && /* @__PURE__ */ jsxs("span", {
+			className: styles.icon,
+			children: [avatar, running && /* @__PURE__ */ jsx("span", { className: styles.running })]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: styles.headText,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: styles.titleRow,
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: styles.title,
+						children: title
+					}), badges?.filter(Boolean).map((badge, index) => /* @__PURE__ */ jsx("span", {
+						className: styles.badge,
+						children: badge
+					}, index))]
+				}),
+				byline && /* @__PURE__ */ jsx("span", {
+					className: styles.byline,
+					children: byline
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: styles.description,
+					children: description
+				})
+			]
+		}),
+		actions && /* @__PURE__ */ jsx("div", {
+			className: styles.actions,
+			children: actions
+		})
+	]
+}));
+DetailHeader.displayName = "DetailHeader";
+/** Main column (sections, 28px apart) beside a sticky 300px aside. */
+const DetailGrid = memo(({ aside, asideHidden, children, className, ref, ...rest }) => {
+	const showAside = !!aside && !asideHidden;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.grid, className),
+		"data-aside": showAside,
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.main,
+			children
+		}), aside && /* @__PURE__ */ jsx("aside", {
+			className: styles.aside,
+			hidden: !showAside,
+			children: aside
+		})]
+	});
+});
+DetailGrid.displayName = "DetailGrid";
+/** The bordered "Thông tin" card of the aside. */
+const InfoCard = memo(({ children, className, ref, title, ...rest }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.card, className),
+	ref,
+	...rest,
+	children: [title && /* @__PURE__ */ jsx("h2", {
+		className: styles.cardTitle,
+		children: title
+	}), children]
+}));
+InfoCard.displayName = "InfoCard";
+/** Label / value pairs; `tone="warning"` colors a value that needs attention. */
+const FactList = memo(({ className, items, title }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [title && /* @__PURE__ */ jsx("h3", {
+	className: styles.factsTitle,
+	children: title
+}), /* @__PURE__ */ jsx("dl", {
+	className: cx(styles.facts, className),
+	children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+		className: styles.fact,
+		"data-tone": item.tone ?? "default",
+		children: [/* @__PURE__ */ jsx("dt", { children: item.label }), /* @__PURE__ */ jsx("dd", { children: item.value })]
+	}, item.key ?? (typeof item.label === "string" ? item.label : index)))
+})] }));
+FactList.displayName = "FactList";
+/** A read-only text box (instructions, greeting) — the shape of an input, not editable. */
+const ReadonlyBlock = memo(({ className, ref, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.readonly, className),
+	ref,
+	...rest
+}));
+ReadonlyBlock.displayName = "ReadonlyBlock";
+export { DetailGrid, DetailHeader, FactList, InfoCard, ReadonlyBlock, DetailPage as default };
+
+//# sourceMappingURL=DetailPage.mjs.map

package/es/base-ui/DetailPage/DetailPage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPage.mjs","names":[],"sources":["../../../src/base-ui/DetailPage/DetailPage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type {\n  DetailGridProps,\n  DetailHeaderProps,\n  DetailPageProps,\n  FactListProps,\n  InfoCardProps,\n  ReadonlyBlockProps,\n} from './type';\n\n/** The centered 1080px column of a detail page, with an optional \"← Back\" link. */\nconst DetailPage = memo<DetailPageProps>(({ back, children, className, ref, ...rest }) => (\n  <div className={cx(styles.page, className)} ref={ref} {...rest}>\n    {back && (\n      <button className={styles.back} type={'button'} onClick={back.onClick}>\n        <ArrowLeft size={14} />\n        {back.label}\n      </button>\n    )}\n    {children}\n  </div>\n));\n\nDetailPage.displayName = 'DetailPage';\n\n/** Icon tile, 26px title with badges, byline, description, and actions on the right. */\nexport const DetailHeader = memo<DetailHeaderProps>(\n  ({ actions, avatar, badges, byline, className, description, ref, running, title, ...rest }) => (\n    <header className={cx(styles.header, className)} ref={ref} {...rest}>\n      {avatar !== undefined && (\n        <span className={styles.icon}>\n          {avatar}\n          {running && <span className={styles.running} />}\n        </span>\n      )}\n      <div className={styles.headText}>\n        <div className={styles.titleRow}>\n          <h1 className={styles.title}>{title}</h1>\n          {badges?.filter(Boolean).map((badge, index) => (\n            <span className={styles.badge} key={index}>\n              {badge}\n            </span>\n          ))}\n        </div>\n        {byline && <span className={styles.byline}>{byline}</span>}\n        {description && <p className={styles.description}>{description}</p>}\n      </div>\n      {actions && <div className={styles.actions}>{actions}</div>}\n    </header>\n  ),\n);\n\nDetailHeader.displayName = 'DetailHeader';\n\n/** Main column (sections, 28px apart) beside a sticky 300px aside. */\nexport const DetailGrid = memo<DetailGridProps>(\n  ({ aside, asideHidden, children, className, ref, ...rest }) => {\n    const showAside = !!aside && !asideHidden;\n    return (\n      <div className={cx(styles.grid, className)} data-aside={showAside} ref={ref} {...rest}>\n        <div className={styles.main}>{children}</div>\n        {aside && (\n          <aside className={styles.aside} hidden={!showAside}>\n            {aside}\n          </aside>\n        )}\n      </div>\n    );\n  },\n);\n\nDetailGrid.displayName = 'DetailGrid';\n\n/** The bordered \"Thông tin\" card of the aside. */\nexport const InfoCard = memo<InfoCardProps>(({ children, className, ref, title, ...rest }) => (\n  <div className={cx(styles.card, className)} ref={ref} {...rest}>\n    {title && <h2 className={styles.cardTitle}>{title}</h2>}\n    {children}\n  </div>\n));\n\nInfoCard.displayName = 'InfoCard';\n\n/** Label / value pairs; `tone=\"warning\"` colors a value that needs attention. */\nexport const FactList = memo<FactListProps>(({ className, items, title }) => (\n  <>\n    {title && <h3 className={styles.factsTitle}>{title}</h3>}\n    <dl className={cx(styles.facts, className)}>\n      {items.map((item, index) => (\n        <div\n          className={styles.fact}\n          data-tone={item.tone ?? 'default'}\n          key={item.key ?? (typeof item.label === 'string' ? item.label : index)}\n        >\n          <dt>{item.label}</dt>\n          <dd>{item.value}</dd>\n        </div>\n      ))}\n    </dl>\n  </>\n));\n\nFactList.displayName = 'FactList';\n\n/** A read-only text box (instructions, greeting) — the shape of an input, not editable. */\nexport const ReadonlyBlock = memo<ReadonlyBlockProps>(({ className, ref, ...rest }) => (\n  <div className={cx(styles.readonly, className)} ref={ref} {...rest} />\n));\n\nReadonlyBlock.displayName = 'ReadonlyBlock';\n\nexport default DetailPage;\n"],"mappings":"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"}

package/es/base-ui/DetailPage/index.d.mts

@@ -0,0 +1,4 @@
+import { DetailGridProps, DetailHeaderProps, DetailPageProps, FactItem, FactListProps, FactTone, InfoCardProps, ReadonlyBlockProps } from "./type.mjs";
+import DetailPage, { DetailGrid, DetailHeader, FactList, InfoCard, ReadonlyBlock } from "./DetailPage.mjs";
+import { styles } from "./style.mjs";
+export { DetailGrid, type DetailGridProps, DetailHeader, type DetailHeaderProps, type DetailPageProps, type FactItem, FactList, type FactListProps, type FactTone, InfoCard, type InfoCardProps, ReadonlyBlock, type ReadonlyBlockProps, DetailPage as default, styles as detailPageStyles };

package/es/base-ui/DetailPage/style.d.mts

@@ -0,0 +1,25 @@
+declare const styles: {
+  actions: string;
+  aside: string;
+  back: string;
+  badge: string;
+  byline: string;
+  card: string;
+  cardTitle: string;
+  description: string;
+  fact: string;
+  facts: string;
+  factsTitle: string;
+  grid: string;
+  header: string;
+  headText: string;
+  icon: string;
+  main: string;
+  page: string;
+  readonly: string;
+  running: string;
+  title: string;
+  titleRow: string;
+};
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/DetailPage/style.mjs

@@ -0,0 +1,226 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+import { createStaticStyles, cssVar } from "antd-style";
+// src/base-ui/DetailPage/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actions: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  `,
+	aside: css`
+    position: sticky;
+    inset-block-start: 0;
+  `,
+	back: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    align-self: flex-start;
+
+    padding: 0;
+    border: 0;
+
+    font: inherit;
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+
+    background: transparent;
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	badge: css`
+    display: inline-flex;
+    align-items: center;
+
+    height: 22px;
+    padding-block: 0;
+    padding-inline: 8px;
+    border-radius: 6px;
+
+    font-size: 12px;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	byline: css`
+    font-size: 13px;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	card: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    padding: 18px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+  `,
+	cardTitle: css`
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+  `,
+	description: css`
+    max-width: 640px;
+    margin-block: 4px 0;
+    margin-inline: 0;
+
+    font-size: 15px;
+    line-height: 1.6;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	fact: css`
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    font-size: 13px;
+
+    dt {
+      flex: none;
+      color: ${cssVar.colorTextTertiary};
+    }
+
+    dd {
+      overflow: hidden;
+
+      min-width: 0;
+      margin: 0;
+
+      color: ${cssVar.colorText};
+      text-align: end;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &[data-tone='warning'] dd {
+      color: ${cssVar.colorWarningText};
+    }
+  `,
+	facts: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 0;
+  `,
+	factsTitle: css`
+    margin-block: 8px 0;
+    margin-inline: 0;
+    font-size: 13px;
+    font-weight: 600;
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    gap: 32px;
+    align-items: start;
+
+    margin-block-start: 26px;
+
+    &[data-aside='false'] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    @media (width <= 900px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  `,
+	header: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: flex-start;
+
+    margin-block-start: 20px;
+  `,
+	headText: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 6px;
+
+    min-width: 280px;
+  `,
+	icon: css`
+    position: relative;
+
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 68px;
+    height: 68px;
+    border-radius: 18px;
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	main: css`
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    min-width: 0;
+  `,
+	page: css`
+    display: flex;
+    flex-direction: column;
+
+    max-width: 1080px;
+    margin-inline: auto;
+    padding-block: 28px 56px;
+    padding-inline: 40px;
+
+    @media (width <= 720px) {
+      padding-block: 20px 40px;
+      padding-inline: 16px;
+    }
+  `,
+	readonly: css`
+    padding-block: 12px;
+    padding-inline: 14px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 14px;
+
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${cssVar.colorText};
+    white-space: pre-wrap;
+
+    background: ${cssVar.colorFillQuaternary};
+  `,
+	running: css`
+    position: absolute;
+    inset-block-start: -3px;
+    inset-inline-end: -3px;
+
+    width: 12px;
+    height: 12px;
+    border: 2px solid ${cssVar.colorBgContainer};
+    border-radius: 999px;
+
+    background: ${brandCssVar.colorBrand};
+    box-shadow: 0 0 8px ${brandCssVar.colorBrandGlow};
+  `,
+	title: css`
+    margin: 0;
+
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: ${cssVar.colorText};
+    letter-spacing: -0.03em;
+  `,
+	titleRow: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  `
+}));
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/DetailPage/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DetailPage/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n  aside: css`\n    position: sticky;\n    inset-block-start: 0;\n  `,\n  back: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    align-self: flex-start;\n\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  badge: css`\n    display: inline-flex;\n    align-items: center;\n\n    height: 22px;\n    padding-block: 0;\n    padding-inline: 8px;\n    border-radius: 6px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  byline: css`\n    font-size: 13px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  card: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n\n    padding: 18px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 16px;\n  `,\n  cardTitle: css`\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n  `,\n  description: css`\n    max-width: 640px;\n    margin-block: 4px 0;\n    margin-inline: 0;\n\n    font-size: 15px;\n    line-height: 1.6;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  fact: css`\n    display: flex;\n    gap: 12px;\n    justify-content: space-between;\n    font-size: 13px;\n\n    dt {\n      flex: none;\n      color: ${cssVar.colorTextTertiary};\n    }\n\n    dd {\n      overflow: hidden;\n\n      min-width: 0;\n      margin: 0;\n\n      color: ${cssVar.colorText};\n      text-align: end;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &[data-tone='warning'] dd {\n      color: ${cssVar.colorWarningText};\n    }\n  `,\n  facts: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin: 0;\n  `,\n  factsTitle: css`\n    margin-block: 8px 0;\n    margin-inline: 0;\n    font-size: 13px;\n    font-weight: 600;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 300px;\n    gap: 32px;\n    align-items: start;\n\n    margin-block-start: 26px;\n\n    &[data-aside='false'] {\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    @media (width <= 900px) {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  `,\n  header: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n\n    margin-block-start: 20px;\n  `,\n  headText: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 6px;\n\n    min-width: 280px;\n  `,\n  icon: css`\n    position: relative;\n\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 68px;\n    height: 68px;\n    border-radius: 18px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  main: css`\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n    min-width: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n\n    max-width: 1080px;\n    margin-inline: auto;\n    padding-block: 28px 56px;\n    padding-inline: 40px;\n\n    @media (width <= 720px) {\n      padding-block: 20px 40px;\n      padding-inline: 16px;\n    }\n  `,\n  readonly: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 14px;\n\n    font-size: 14px;\n    line-height: 1.6;\n    color: ${cssVar.colorText};\n    white-space: pre-wrap;\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  running: css`\n    position: absolute;\n    inset-block-start: -3px;\n    inset-inline-end: -3px;\n\n    width: 12px;\n    height: 12px;\n    border: 2px solid ${cssVar.colorBgContainer};\n    border-radius: 999px;\n\n    background: ${brandCssVar.colorBrand};\n    box-shadow: 0 0 8px ${brandCssVar.colorBrandGlow};\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: 26px;\n    font-weight: 600;\n    line-height: 1.25;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.03em;\n  `,\n  titleRow: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;;;;;;;;;;;aAaE,OAAO,mBAAmB;;;;;eAKxB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;;;;;aAUC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;CAEzC,QAAQ,GAAG;;aAEA,OAAO,kBAAkB;;CAEpC,MAAM,GAAG;;;;;;wBAMa,OAAO,qBAAqB;;;CAGlD,WAAW,GAAG;;;;;CAKd,aAAa,GAAG;;;;;;;aAOL,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;;;eAQI,OAAO,kBAAkB;;;;;;;;;eASzB,OAAO,UAAU;;;;;;;eAOjB,OAAO,iBAAiB;;;CAGrC,OAAO,GAAG;;;;;;CAMV,YAAY,GAAG;;;;;;CAMf,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,QAAQ,GAAG;;;;;;;;CAQX,UAAU,GAAG;;;;;;;;CAQb,MAAM,GAAG;;;;;;;;;;;;kBAYO,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;;;CAcT,UAAU,GAAG;;;wBAGS,OAAO,qBAAqB;;;;;aAKvC,OAAO,UAAU;;;kBAGZ,OAAO,oBAAoB;;CAE3C,SAAS,GAAG;;;;;;;wBAOU,OAAO,iBAAiB;;;kBAG9B,YAAY,WAAW;0BACf,YAAY,eAAe;;CAEnD,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAG5B,UAAU,GAAG;;;;;;AAMf,EAAE"}

package/es/base-ui/DetailPage/type.d.mts

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+interface DetailPageProps extends ComponentProps<'div'> {
+  /** "← Back" link above the header. */
+  back?: {
+    label: ReactNode;
+    onClick: () => void;
+  };
+  ref?: Ref<HTMLDivElement>;
+}
+interface DetailHeaderProps extends Omit<ComponentProps<'header'>, 'title'> {
+  /** Buttons on the right (chat, add, share, …). */
+  actions?: ReactNode;
+  /** Content of the 68px icon tile (avatar, emoji, brand mark). */
+  avatar?: ReactNode;
+  /** Small grey badges after the title ("Chia sẻ", "Bản nháp"). */
+  badges?: ReactNode[];
+  /** One meta line under the title ("by Jinmi · 1.2k uses"). */
+  byline?: ReactNode;
+  description?: ReactNode;
+  ref?: Ref<HTMLElement>;
+  /** Brand-colored dot on the icon tile: working right now. */
+  running?: boolean;
+  title: ReactNode;
+}
+interface DetailGridProps extends ComponentProps<'div'> {
+  /** The 300px side column (usually an `InfoCard`). */
+  aside?: ReactNode;
+  /** Keep the aside mounted but hidden, giving the main column the full width. */
+  asideHidden?: boolean;
+  ref?: Ref<HTMLDivElement>;
+}
+interface InfoCardProps extends Omit<ComponentProps<'div'>, 'title'> {
+  ref?: Ref<HTMLDivElement>;
+  title?: ReactNode;
+}
+type FactTone = 'default' | 'warning';
+interface FactItem {
+  key?: string;
+  label: ReactNode;
+  tone?: FactTone;
+  value: ReactNode;
+}
+interface FactListProps {
+  className?: string;
+  items: FactItem[];
+  /** Small heading above the list, inside an `InfoCard` ("Cần kết nối"). */
+  title?: ReactNode;
+}
+interface ReadonlyBlockProps extends ComponentProps<'div'> {
+  ref?: Ref<HTMLDivElement>;
+}
+export { DetailGridProps, DetailHeaderProps, DetailPageProps, FactItem, FactListProps, FactTone, InfoCardProps, ReadonlyBlockProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Divider/Divider.d.mts

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

package/es/base-ui/Divider/Divider.mjs

@@ -4,7 +4,7 @@ import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Separator } from "@base-ui/react/separator";
-//#region src/base-ui/Divider/Divider.tsx
+// src/base-ui/Divider/Divider.tsx
 const Divider = memo(({ children, className, dashed = false, orientation = "horizontal", ref, ...rest }) => {
 	if (children != null && orientation === "horizontal") return /* @__PURE__ */ jsx(Separator, {
 		className: cx(styles.withText, dashed && styles.dashed, className),
@@ -24,7 +24,6 @@ const Divider = memo(({ children, className, dashed = false, orientation = "hori
 	});
 });
 Divider.displayName = "Divider";
-//#endregion
 export { Divider as default };
 
 //# sourceMappingURL=Divider.mjs.map

package/es/base-ui/Divider/style.mjs

@@ -1,5 +1,5 @@
 import { createStaticStyles } from "antd-style";
-//#region src/base-ui/Divider/style.ts
+// src/base-ui/Divider/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	dashed: css`
     border-style: dashed;
@@ -53,7 +53,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `
 }));
-//#endregion
 export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/base-ui/Divider/type.d.mts

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactNode, Ref } from "react";
-//#region src/base-ui/Divider/type.d.ts
 type DividerOrientation = 'horizontal' | 'vertical';
 interface DividerProps extends Omit<ComponentProps<'div'>, 'children'> {
   children?: ReactNode;
@@ -7,6 +6,5 @@ interface DividerProps extends Omit<ComponentProps<'div'>, 'children'> {
   orientation?: DividerOrientation;
   ref?: Ref<HTMLDivElement>;
 }
-//#endregion
 export { DividerOrientation, DividerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/DraggablePanel/DraggablePanel.d.mts

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

package/es/base-ui/DraggablePanel/DraggablePanel.mjs

@@ -4,7 +4,7 @@ import { DraggablePanelContent, DraggablePanelHandle, DraggablePanelRoot, Dragga
 import { memo, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
+// src/base-ui/DraggablePanel/DraggablePanel.tsx
 const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
 const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, style, styles: customStyles, ...rest }) => {
 	const { vertical } = AXES[placement];
@@ -65,7 +65,6 @@ const DraggablePanel = memo(({ backgroundColor, children, className, classNames,
 	});
 });
 DraggablePanel.displayName = "DraggablePanel";
-//#endregion
 export { DraggablePanel as default };
 
 //# sourceMappingURL=DraggablePanel.mjs.map

package/es/base-ui/DraggablePanel/atoms.d.mts

@@ -1,7 +1,6 @@
 import { DivProps } from "../../types/index.mjs";
 import { Placement } from "./core/axes.mjs";
 import { ReactNode } from "react";
-//#region src/base-ui/DraggablePanel/atoms.d.ts
 interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {
   backgroundColor?: string;
   collapseThreshold?: number;
@@ -42,6 +41,5 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'>
   title?: ReactNode;
 }
 declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
-//#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps, DraggablePanelContainer, DraggablePanelContainerProps, DraggablePanelContent, DraggablePanelContentProps, DraggablePanelFooter, DraggablePanelFooterProps, DraggablePanelHandle, DraggablePanelHandleProps, DraggablePanelHeader, DraggablePanelHeaderProps, DraggablePanelRoot, DraggablePanelRootProps, DraggablePanelToggle, DraggablePanelToggleProps };
 //# sourceMappingURL=atoms.d.mts.map

package/es/base-ui/DraggablePanel/atoms.mjs

@@ -14,7 +14,7 @@ import { cx } from "antd-style";
 import { useTransform } from "motion/react";
 import useMergeState from "use-merge-value";
 import { ChevronLeft } from "lucide-react";
-//#region src/base-ui/DraggablePanel/atoms.tsx
+// src/base-ui/DraggablePanel/atoms.tsx
 const PAN_THRESHOLD = 3;
 const ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;
 const ARROW_C = ARROW_BOX / 2;
@@ -336,7 +336,6 @@ const DraggablePanelHeader = memo(({ className, extra, onCollapse, title, ...res
 	});
 });
 DraggablePanelHeader.displayName = "DraggablePanelHeader";
-//#endregion
 export { DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle };
 
 //# sourceMappingURL=atoms.mjs.map

package/es/base-ui/DraggablePanel/context.d.mts

@@ -1,6 +1,5 @@
 import { Axis, Placement } from "./core/axes.mjs";
 import { PanelController, PanelState } from "./core/controller.mjs";
-//#region src/base-ui/DraggablePanel/context.d.ts
 interface DraggablePanelContextValue {
   axis: Axis;
   controller: PanelController;
@@ -12,6 +11,5 @@ interface DraggablePanelContextValue {
   toggleExpand: () => void;
 }
 declare const useDraggablePanelContext: () => DraggablePanelContextValue;
-//#endregion
 export { DraggablePanelContextValue, useDraggablePanelContext };
 //# sourceMappingURL=context.d.mts.map

package/es/base-ui/DraggablePanel/context.mjs

@@ -1,13 +1,12 @@
 "use client";
 import { createContext, use } from "react";
-//#region src/base-ui/DraggablePanel/context.ts
+// src/base-ui/DraggablePanel/context.ts
 const DraggablePanelContext = createContext(null);
 const useDraggablePanelContext = () => {
 	const context = use(DraggablePanelContext);
 	if (!context) throw new Error("DraggablePanel atoms must be used inside DraggablePanelRoot");
 	return context;
 };
-//#endregion
 export { DraggablePanelContext, useDraggablePanelContext };
 
 //# sourceMappingURL=context.mjs.map

package/es/base-ui/DraggablePanel/core/axes.d.mts

@@ -1,4 +1,3 @@
-//#region src/base-ui/DraggablePanel/core/axes.d.ts
 type Placement = 'bottom' | 'left' | 'right' | 'top';
 interface Axis {
   anchorEnd: boolean;
@@ -11,6 +10,5 @@ interface Axis {
   point: 'x' | 'y';
   vertical: boolean;
 }
-//#endregion
 export { Axis, Placement };
 //# sourceMappingURL=axes.d.mts.map

package/es/base-ui/DraggablePanel/core/axes.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/axes.ts
+// src/base-ui/DraggablePanel/core/axes.ts
 const AXES = {
 	bottom: {
 		anchorEnd: true,
@@ -45,7 +45,6 @@ const AXES = {
 		vertical: true
 	}
 };
-//#endregion
 export { AXES };
 
 //# sourceMappingURL=axes.mjs.map

package/es/base-ui/DraggablePanel/core/controller.d.mts

@@ -1,6 +1,5 @@
 import { Axis, Placement } from "./axes.mjs";
 import { MotionValue } from "motion/react";
-//#region src/base-ui/DraggablePanel/core/controller.d.ts
 interface PanelControllerOptions {
   collapseThreshold?: number;
   defaultSize: number;
@@ -51,6 +50,5 @@ interface PanelController {
   sync: (options: PanelControllerOptions) => void;
   target: number;
 }
-//#endregion
 export { PanelController, PanelControllerOptions, PanelKeyEvent, PanelState };
 //# sourceMappingURL=controller.d.mts.map

package/es/base-ui/DraggablePanel/core/controller.mjs

@@ -3,7 +3,7 @@ import { isRtl, lockBody } from "./dom.mjs";
 import { timing } from "./transition.mjs";
 import { clamp, emitter } from "./utils.mjs";
 import { animate, motionValue } from "motion/react";
-//#region src/base-ui/DraggablePanel/core/controller.ts
+// src/base-ui/DraggablePanel/core/controller.ts
 const KEY_STEP = 10;
 const KEY_STEP_FAST = 50;
 const SCREEN_DELTA = {
@@ -200,7 +200,6 @@ const createPanelController = (initial) => {
 		}
 	};
 };
-//#endregion
 export { createPanelController };
 
 //# sourceMappingURL=controller.mjs.map

package/es/base-ui/DraggablePanel/core/dom.mjs

@@ -1,4 +1,4 @@
-//#region src/base-ui/DraggablePanel/core/dom.ts
+// src/base-ui/DraggablePanel/core/dom.ts
 const isRtl = (element) => !!element && getComputedStyle(element).direction === "rtl";
 let locks = 0;
 let saved = {};
@@ -28,7 +28,6 @@ const lockBody = (cursor, onEscape) => {
 		removeEventListener("keydown", onKeyDown, true);
 	};
 };
-//#endregion
 export { isRtl, lockBody };
 
 //# sourceMappingURL=dom.mjs.map