@jinmi/ui 6.0.1 → 6.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Rate/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  empty: css`\r\n    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */\r\n    color: ${cssVar.colorText};\r\n    opacity: 0.12;\r\n  `,\r\n  fill: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    inset-block: 0;\r\n    inset-inline-start: 0;\r\n\r\n    overflow: hidden;\r\n    display: flex;\r\n  `,\r\n  half: css`\r\n    position: absolute;\r\n    inset-block: 0;\r\n    width: 50%;\r\n\r\n    &[data-half='start'] {\r\n      inset-inline-start: 0;\r\n    }\r\n\r\n    &[data-half='end'] {\r\n      inset-inline-end: 0;\r\n    }\r\n  `,\r\n  icon: css`\r\n    display: inline-flex;\r\n    flex: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n  `,\r\n  root: css`\r\n    display: inline-flex;\r\n    align-items: center;\r\n    line-height: 1;\r\n    outline: none;\r\n\r\n    &[role='slider'] {\r\n      cursor: pointer;\r\n    }\r\n\r\n    &[role='slider']:focus-visible {\r\n      border-radius: 4px;\r\n      outline: 2px solid ${brandCssVar.colorBrand};\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    &[aria-disabled='true'] {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n    }\r\n  `,\r\n  star: css`\r\n    position: relative;\r\n\r\n    display: inline-flex;\r\n    flex: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    transition: transform 0.15s ease;\r\n\r\n    [role='slider']:not([aria-disabled='true']) > &:hover {\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;aAEC,OAAO,UAAU;;;CAG5B,MAAM,GAAG;;;;;;;;;;CAUT,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;2BAYgB,YAAY,WAAW;;;;;;;;;CAShD,MAAM,GAAG;;;;;;;;;;;;;;;;;;AAkBX,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Rate/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  empty: css`\n    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */\n    color: ${cssVar.colorText};\n    opacity: 0.12;\n  `,\n  fill: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n\n    overflow: hidden;\n    display: flex;\n  `,\n  half: css`\n    position: absolute;\n    inset-block: 0;\n    width: 50%;\n\n    &[data-half='start'] {\n      inset-inline-start: 0;\n    }\n\n    &[data-half='end'] {\n      inset-inline-end: 0;\n    }\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n  `,\n  root: css`\n    display: inline-flex;\n    align-items: center;\n    line-height: 1;\n    outline: none;\n\n    &[role='slider'] {\n      cursor: pointer;\n    }\n\n    &[role='slider']:focus-visible {\n      border-radius: 4px;\n      outline: 2px solid ${brandCssVar.colorBrand};\n      outline-offset: 2px;\n    }\n\n    &[aria-disabled='true'] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  star: css`\n    position: relative;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    transition: transform 0.15s ease;\n\n    [role='slider']:not([aria-disabled='true']) > &:hover {\n      transform: scale(1.1);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;aAEC,OAAO,UAAU;;;CAG5B,MAAM,GAAG;;;;;;;;;;CAUT,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;2BAYgB,YAAY,WAAW;;;;;;;;;CAShD,MAAM,GAAG;;;;;;;;;;;;;;;;;;AAkBX,EAAE"}

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

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactNode, Ref } from "react";
-//#region src/base-ui/Rate/type.d.ts
 interface RateProps extends Omit<ComponentProps<'div'>, 'children' | 'defaultValue' | 'onChange'> {
   allowHalf?: boolean;
   character?: ReactNode;
@@ -14,6 +13,5 @@ interface RateProps extends Omit<ComponentProps<'div'>, 'children' | 'defaultVal
   size?: number;
   value?: number;
 }
-//#endregion
 export { RateProps };
 //# sourceMappingURL=type.d.mts.map

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

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

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

@@ -4,7 +4,7 @@ import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cssVar, cx } from "antd-style";
 import { Check, Info, TriangleAlert, X } from "lucide-react";
-//#region src/base-ui/Result/Result.tsx
+// src/base-ui/Result/Result.tsx
 const statusIcon = {
 	error: /* @__PURE__ */ jsx(X, {
 		size: 36,
@@ -66,7 +66,6 @@ const Result = memo(({ children, className, extra, icon, ref, status = "info", s
 	});
 });
 Result.displayName = "Result";
-//#endregion
 export { Result as default };
 
 //# sourceMappingURL=Result.mjs.map

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

@@ -1,5 +1,5 @@
 import { createStaticStyles, cssVar } from "antd-style";
-//#region src/base-ui/Result/style.ts
+// src/base-ui/Result/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	customIcon: css`
     display: flex;
@@ -66,7 +66,6 @@ const statusColor = {
 	success: cssVar.colorSuccess,
 	warning: cssVar.colorWarning
 };
-//#endregion
 export { statusColor, styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactNode, Ref } from "react";
-//#region src/base-ui/Result/type.d.ts
 type ResultStatus = 'success' | 'error' | 'info' | 'warning';
 interface ResultProps extends Omit<ComponentProps<'section'>, 'title'> {
   extra?: ReactNode;
@@ -9,6 +8,5 @@ interface ResultProps extends Omit<ComponentProps<'section'>, 'title'> {
   subTitle?: ReactNode;
   title?: ReactNode;
 }
-//#endregion
 export { ResultProps, ResultStatus };
 //# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,14 @@
+import { RowActionProps, RowIconButtonProps, RowItemProps, RowListProps } from "./type.mjs";
+/** A bordered list of `RowItem`s, optionally under a small group label. */
+declare const RowList: import("react").NamedExoticComponent<RowListProps>;
+/** One 58px row: icon tile, title (+ tag), meta, trailing controls. */
+declare const RowItem: import("react").NamedExoticComponent<RowItemProps>;
+/**
+ * Trailing text of a row. With `onClick` it is a text action ("Sửa", "Gỡ"),
+ * with `primary` the filled ink button ("Kết nối"); otherwise plain text ("10:42").
+ */
+declare const RowAction: import("react").NamedExoticComponent<RowActionProps>;
+/** A 30px icon button for rows and section heads (menus, remove, sort). */
+declare const RowIconButton: import("react").NamedExoticComponent<RowIconButtonProps>;
+export { RowAction, RowIconButton, RowItem, RowList as default };
+//# sourceMappingURL=RowList.d.mts.map

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

@@ -0,0 +1,105 @@
+"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";
+// src/base-ui/RowList/RowList.tsx
+/** A bordered list of `RowItem`s, optionally under a small group label. */
+const RowList = memo(({ children, className, label, ref, ...rest }) => {
+	const list = /* @__PURE__ */ jsx("div", {
+		className: cx(styles.list, className),
+		ref,
+		role: "list",
+		...rest,
+		children
+	});
+	if (!label) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.wrap,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.label,
+			children: label
+		}), list]
+	});
+});
+RowList.displayName = "RowList";
+/** One 58px row: icon tile, title (+ tag), meta, trailing controls. */
+const RowItem = memo(({ below, children, className, icon, meta, onOpen, ref, running, tag, tagTone = "default", title, titleText, ...rest }) => {
+	const text = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		className: styles.titleLine,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.title,
+			title: titleText,
+			children: title
+		}), tag && /* @__PURE__ */ jsx("span", {
+			className: styles.tag,
+			"data-tone": tagTone,
+			children: tag
+		})]
+	}), meta && /* @__PURE__ */ jsx("span", {
+		className: styles.meta,
+		children: meta
+	})] });
+	const textBlock = onOpen ? /* @__PURE__ */ jsx("button", {
+		className: styles.text,
+		type: "button",
+		onClick: onOpen,
+		children: text
+	}) : /* @__PURE__ */ jsx("span", {
+		className: styles.text,
+		children: text
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-row-item": true,
+		className: cx(styles.row, className),
+		"data-openable": !!onOpen,
+		ref,
+		role: "listitem",
+		...rest,
+		children: [
+			icon !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: styles.icon,
+				children: [icon, running && /* @__PURE__ */ jsx("span", { className: styles.running })]
+			}),
+			below ? /* @__PURE__ */ jsxs("div", {
+				className: styles.column,
+				children: [textBlock, below]
+			}) : textBlock,
+			children
+		]
+	});
+});
+RowItem.displayName = "RowItem";
+/**
+* Trailing text of a row. With `onClick` it is a text action ("Sửa", "Gỡ"),
+* with `primary` the filled ink button ("Kết nối"); otherwise plain text ("10:42").
+*/
+const RowAction = memo(({ children, className, onClick, primary, ref, type = "button", ...rest }) => {
+	if (!onClick && !primary) return /* @__PURE__ */ jsx("span", {
+		className: cx(styles.trail, className),
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		className: cx(styles.action, primary && styles.actionPrimary, className),
+		ref,
+		type,
+		onClick,
+		...rest,
+		children
+	});
+});
+RowAction.displayName = "RowAction";
+/** A 30px icon button for rows and section heads (menus, remove, sort). */
+const RowIconButton = memo(({ className, hoverOnly, icon, label, ref, type = "button", ...rest }) => /* @__PURE__ */ jsx("button", {
+	"aria-label": label,
+	className: cx(styles.iconButton, hoverOnly && styles.hoverOnly, className),
+	ref,
+	title: label,
+	type,
+	...rest,
+	children: icon
+}));
+RowIconButton.displayName = "RowIconButton";
+export { RowAction, RowIconButton, RowItem, RowList as default };
+
+//# sourceMappingURL=RowList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RowList.mjs","names":[],"sources":["../../../src/base-ui/RowList/RowList.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type { RowActionProps, RowIconButtonProps, RowItemProps, RowListProps } from './type';\n\n/** A bordered list of `RowItem`s, optionally under a small group label. */\nconst RowList = memo<RowListProps>(({ children, className, label, ref, ...rest }) => {\n  const list = (\n    <div className={cx(styles.list, className)} ref={ref} role={'list'} {...rest}>\n      {children}\n    </div>\n  );\n  if (!label) return list;\n  return (\n    <div className={styles.wrap}>\n      <span className={styles.label}>{label}</span>\n      {list}\n    </div>\n  );\n});\n\nRowList.displayName = 'RowList';\n\n/** One 58px row: icon tile, title (+ tag), meta, trailing controls. */\nexport const RowItem = memo<RowItemProps>(\n  ({\n    below,\n    children,\n    className,\n    icon,\n    meta,\n    onOpen,\n    ref,\n    running,\n    tag,\n    tagTone = 'default',\n    title,\n    titleText,\n    ...rest\n  }) => {\n    const text = (\n      <>\n        <span className={styles.titleLine}>\n          <span className={styles.title} title={titleText}>\n            {title}\n          </span>\n          {tag && (\n            <span className={styles.tag} data-tone={tagTone}>\n              {tag}\n            </span>\n          )}\n        </span>\n        {meta && <span className={styles.meta}>{meta}</span>}\n      </>\n    );\n\n    const textBlock = onOpen ? (\n      <button className={styles.text} type={'button'} onClick={onOpen}>\n        {text}\n      </button>\n    ) : (\n      <span className={styles.text}>{text}</span>\n    );\n\n    return (\n      <div\n        data-row-item\n        className={cx(styles.row, className)}\n        data-openable={!!onOpen}\n        ref={ref}\n        role={'listitem'}\n        {...rest}\n      >\n        {icon !== undefined && (\n          <span className={styles.icon}>\n            {icon}\n            {running && <span className={styles.running} />}\n          </span>\n        )}\n        {below ? (\n          <div className={styles.column}>\n            {textBlock}\n            {below}\n          </div>\n        ) : (\n          textBlock\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nRowItem.displayName = 'RowItem';\n\n/**\n * Trailing text of a row. With `onClick` it is a text action (\"Sửa\", \"Gỡ\"),\n * with `primary` the filled ink button (\"Kết nối\"); otherwise plain text (\"10:42\").\n */\nexport const RowAction = memo<RowActionProps>(\n  ({ children, className, onClick, primary, ref, type = 'button', ...rest }) => {\n    if (!onClick && !primary) {\n      return <span className={cx(styles.trail, className)}>{children}</span>;\n    }\n    return (\n      <button\n        className={cx(styles.action, primary && styles.actionPrimary, className)}\n        ref={ref}\n        type={type}\n        onClick={onClick}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nRowAction.displayName = 'RowAction';\n\n/** A 30px icon button for rows and section heads (menus, remove, sort). */\nexport const RowIconButton = memo<RowIconButtonProps>(\n  ({ className, hoverOnly, icon, label, ref, type = 'button', ...rest }) => (\n    <button\n      aria-label={label}\n      className={cx(styles.iconButton, hoverOnly && styles.hoverOnly, className)}\n      ref={ref}\n      title={label}\n      type={type}\n      {...rest}\n    >\n      {icon}\n    </button>\n  ),\n);\n\nRowIconButton.displayName = 'RowIconButton';\n\nexport default RowList;\n"],"mappings":";;;;;;;AASA,MAAM,UAAU,MAAoB,EAAE,UAAU,WAAW,OAAO,KAAK,GAAG,WAAW;CACnF,MAAM,OACJ,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAK,MAAM;EAAQ,GAAI;EACrE;CACE,CAAA;CAEP,IAAI,CAAC,OAAO,OAAO;CACnB,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAQ,UAAA;EAAY,CAAA,GAC3C,IACE;;AAET,CAAC;AAED,QAAQ,cAAc;;AAGtB,MAAa,UAAU,MACpB,EACC,OACA,UACA,WACA,MACA,MACA,QACA,KACA,SACA,KACA,UAAU,WACV,OACA,WACA,GAAG,WACC;CACJ,MAAM,OACJ,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAxB,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,OAAO;GACnC,UAAA;EACG,CAAA,GACL,OACC,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAK,aAAW;GACrC,UAAA;EACG,CAAA,CAEJ;CACL,CAAA,GAAA,QAAQ,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAO,UAAA;CAAW,CAAA,CACnD,EAAA,CAAA;CAGJ,MAAM,YAAY,SAChB,oBAAC,UAAD;EAAQ,WAAW,OAAO;EAAM,MAAM;EAAU,SAAS;EACtD,UAAA;CACK,CAAA,IAER,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAO,UAAA;CAAW,CAAA;CAG5C,OACE,qBAAC,OAAD;EACE,iBAAA;EACA,WAAW,GAAG,OAAO,KAAK,SAAS;EACnC,iBAAe,CAAC,CAAC;EACZ;EACL,MAAM;EACN,GAAI;EANN,UAAA;GAQG,SAAS,KAAA,KACR,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACG,MACA,WAAW,oBAAC,QAAD,EAAM,WAAW,OAAO,QAAU,CAAA,CAC1C;;GAEP,QACC,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,WACA,KACE;GAEL,CAAA,IAAA;GAED;EACE;;AAET,CACF;AAEA,QAAQ,cAAc;;;;;AAMtB,MAAa,YAAY,MACtB,EAAE,UAAU,WAAW,SAAS,SAAS,KAAK,OAAO,UAAU,GAAG,WAAW;CAC5E,IAAI,CAAC,WAAW,CAAC,SACf,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,OAAO,OAAO,SAAS;EAAI;CAAe,CAAA;CAEvE,OACE,oBAAC,UAAD;EACE,WAAW,GAAG,OAAO,QAAQ,WAAW,OAAO,eAAe,SAAS;EAClE;EACC;EACG;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CACF;AAEA,UAAU,cAAc;;AAGxB,MAAa,gBAAgB,MAC1B,EAAE,WAAW,WAAW,MAAM,OAAO,KAAK,OAAO,UAAU,GAAG,WAC7D,oBAAC,UAAD;CACE,cAAY;CACZ,WAAW,GAAG,OAAO,YAAY,aAAa,OAAO,WAAW,SAAS;CACpE;CACL,OAAO;CACD;CACN,GAAI;CAEH,UAAA;AACK,CAAA,CAEZ;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,4 @@
+import { RowActionProps, RowIconButtonProps, RowItemProps, RowItemTagTone, RowListProps } from "./type.mjs";
+import RowList, { RowAction, RowIconButton, RowItem } from "./RowList.mjs";
+import { styles } from "./style.mjs";
+export { RowAction, type RowActionProps, RowIconButton, type RowIconButtonProps, RowItem, type RowItemProps, type RowItemTagTone, type RowListProps, RowList as default, styles as rowListStyles };

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

@@ -0,0 +1,21 @@
+declare const styles: {
+  action: string;
+  actionPrimary: string;
+  column: string;
+  hoverOnly: string;
+  icon: string;
+  iconButton: string;
+  label: string;
+  list: string;
+  meta: string;
+  row: string;
+  running: string;
+  tag: string;
+  text: string;
+  title: string;
+  titleLine: string;
+  trail: string;
+  wrap: string;
+};
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,232 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+import { createStaticStyles, cssVar } from "antd-style";
+// src/base-ui/RowList/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	action: css`
+    cursor: pointer;
+
+    flex: none;
+
+    padding: 0;
+    border: 0;
+
+    font: inherit;
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+
+    background: transparent;
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorText};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	actionPrimary: css`
+    height: 30px;
+    padding-inline: 12px;
+    border-radius: 8px;
+
+    font-size: 12px;
+    color: ${cssVar.colorBgContainer};
+
+    background: ${cssVar.colorText};
+
+    &:hover:not(:disabled) {
+      color: ${cssVar.colorBgContainer};
+      opacity: 0.88;
+    }
+  `,
+	column: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 6px;
+
+    min-width: 0;
+  `,
+	hoverOnly: css`
+    opacity: 0;
+    transition: opacity 0.12s;
+
+    [data-row-item]:hover &,
+    &:focus-visible,
+    &[aria-expanded='true'],
+    &[data-popup-open] {
+      opacity: 1;
+    }
+
+    @media (hover: none) {
+      opacity: 1;
+    }
+  `,
+	icon: css`
+    position: relative;
+
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	iconButton: css`
+    cursor: pointer;
+
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 0;
+    border-radius: 8px;
+
+    color: ${cssVar.colorTextSecondary};
+
+    background: transparent;
+
+    &:hover:not(:disabled),
+    &[aria-pressed='true'] {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	label: css`
+    margin-block-end: -2px;
+    font-size: 12px;
+    font-weight: 500;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	list: css`
+    overflow: hidden;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 14px;
+  `,
+	meta: css`
+    overflow: hidden;
+
+    font-size: 12px;
+    color: ${cssVar.colorTextTertiary};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	row: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    box-sizing: border-box;
+    min-height: 58px;
+    padding-block: 8px;
+    padding-inline: 14px;
+
+    & + & {
+      border-block-start: 1px solid ${cssVar.colorFillTertiary};
+    }
+
+    &[data-openable='true']:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	running: css`
+    position: absolute;
+    inset-block-start: -3px;
+    inset-inline-end: -3px;
+
+    width: 9px;
+    height: 9px;
+    border: 2px solid ${cssVar.colorBgContainer};
+    border-radius: 999px;
+
+    background: ${brandCssVar.colorBrand};
+  `,
+	tag: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+
+    height: 20px;
+    padding-block: 0;
+    padding-inline: 7px;
+    border-radius: 6px;
+
+    font-size: 11px;
+    font-weight: 400;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillTertiary};
+
+    &[data-tone='warning'] {
+      color: ${cssVar.colorWarningText};
+      background: ${cssVar.colorWarningBg};
+    }
+  `,
+	text: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+
+    min-width: 0;
+    padding: 0;
+    border: 0;
+
+    font: inherit;
+    line-height: 1.35;
+    color: inherit;
+    text-align: start;
+
+    background: transparent;
+
+    &:is(button) {
+      cursor: pointer;
+    }
+  `,
+	title: css`
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	titleLine: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    min-width: 0;
+  `,
+	trail: css`
+    flex: none;
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+	wrap: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  `
+}));
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/RowList/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  action: css`\n    cursor: pointer;\n\n    flex: none;\n\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  actionPrimary: css`\n    height: 30px;\n    padding-inline: 12px;\n    border-radius: 8px;\n\n    font-size: 12px;\n    color: ${cssVar.colorBgContainer};\n\n    background: ${cssVar.colorText};\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorBgContainer};\n      opacity: 0.88;\n    }\n  `,\n  column: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 6px;\n\n    min-width: 0;\n  `,\n  hoverOnly: css`\n    opacity: 0;\n    transition: opacity 0.12s;\n\n    [data-row-item]:hover &,\n    &:focus-visible,\n    &[aria-expanded='true'],\n    &[data-popup-open] {\n      opacity: 1;\n    }\n\n    @media (hover: none) {\n      opacity: 1;\n    }\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: 34px;\n    height: 34px;\n    border-radius: 10px;\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  iconButton: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 30px;\n    height: 30px;\n    padding: 0;\n    border: 0;\n    border-radius: 8px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    &:hover:not(:disabled),\n    &[aria-pressed='true'] {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  label: css`\n    margin-block-end: -2px;\n    font-size: 12px;\n    font-weight: 500;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  list: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 14px;\n  `,\n  meta: css`\n    overflow: hidden;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    box-sizing: border-box;\n    min-height: 58px;\n    padding-block: 8px;\n    padding-inline: 14px;\n\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorFillTertiary};\n    }\n\n    &[data-openable='true']:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  running: css`\n    position: absolute;\n    inset-block-start: -3px;\n    inset-inline-end: -3px;\n\n    width: 9px;\n    height: 9px;\n    border: 2px solid ${cssVar.colorBgContainer};\n    border-radius: 999px;\n\n    background: ${brandCssVar.colorBrand};\n  `,\n  tag: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n\n    height: 20px;\n    padding-block: 0;\n    padding-inline: 7px;\n    border-radius: 6px;\n\n    font-size: 11px;\n    font-weight: 400;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-tone='warning'] {\n      color: ${cssVar.colorWarningText};\n      background: ${cssVar.colorWarningBg};\n    }\n  `,\n  text: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 2px;\n\n    min-width: 0;\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    line-height: 1.35;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n\n    &:is(button) {\n      cursor: pointer;\n    }\n  `,\n  title: css`\n    overflow: hidden;\n\n    font-size: 14px;\n    font-weight: 500;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  titleLine: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    min-width: 0;\n  `,\n  trail: css`\n    flex: none;\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  wrap: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,QAAQ,GAAG;;;;;;;;;;aAUA,OAAO,mBAAmB;;;;;;eAMxB,OAAO,UAAU;;;;;;;;CAQ9B,eAAe,GAAG;;;;;;aAMP,OAAO,iBAAiB;;kBAEnB,OAAO,UAAU;;;eAGpB,OAAO,iBAAiB;;;;CAIrC,QAAQ,GAAG;;;;;;;;CAQX,WAAW,GAAG;;;;;;;;;;;;;;;CAed,MAAM,GAAG;;;;;;;;;;;;aAYE,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,YAAY,GAAG;;;;;;;;;;;;;;aAcJ,OAAO,mBAAmB;;;;;;eAMxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;;;;CAQ3C,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;CAEpC,MAAM,GAAG;;wBAEa,OAAO,qBAAqB;;;CAGlD,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;;;CAIpC,KAAK,GAAG;;;;;;;;;;;sCAW4B,OAAO,kBAAkB;;;;oBAI3C,OAAO,oBAAoB;;;CAG7C,SAAS,GAAG;;;;;;;wBAOU,OAAO,iBAAiB;;;kBAG9B,YAAY,WAAW;;CAEvC,KAAK,GAAG;;;;;;;;;;;;aAYG,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,iBAAiB;oBACnB,OAAO,eAAe;;;CAGxC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBT,OAAO,GAAG;;;;;aAKC,OAAO,UAAU;;;;CAI5B,WAAW,GAAG;;;;;;CAMd,OAAO,GAAG;;;aAGC,OAAO,mBAAmB;;;CAGrC,MAAM,GAAG;;;;;AAKX,EAAE"}

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

@@ -0,0 +1,42 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+interface RowListProps extends ComponentProps<'div'> {
+  /** Small group label above the bordered list ("Hôm nay", "Tuần trước"). */
+  label?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+}
+type RowItemTagTone = 'default' | 'warning';
+interface RowItemProps extends Omit<ComponentProps<'div'>, 'title'> {
+  /** Block content under the title and meta (a progress bar, an activity line). */
+  below?: ReactNode;
+  /** Trailing controls: a switch, a `RowAction`, a menu. */
+  children?: ReactNode;
+  /** Content of the 34px icon tile (an icon, avatar or checkbox). Omit for no tile. */
+  icon?: ReactNode;
+  /** Second line, ellipsized. */
+  meta?: ReactNode;
+  /** Makes the title area a button that opens or edits the item. */
+  onOpen?: () => void;
+  ref?: Ref<HTMLDivElement>;
+  /** Brand-colored dot on the icon tile: the item is working right now. */
+  running?: boolean;
+  tag?: ReactNode;
+  tagTone?: RowItemTagTone;
+  title: ReactNode;
+  /** Native tooltip for a long, ellipsized title. */
+  titleText?: string;
+}
+interface RowActionProps extends ComponentProps<'button'> {
+  /** The filled ink button ("Kết nối") instead of a text action ("Sửa"). */
+  primary?: boolean;
+  ref?: Ref<HTMLButtonElement>;
+}
+interface RowIconButtonProps extends ComponentProps<'button'> {
+  /** Show only while the row is hovered or the button is focused / open. */
+  hoverOnly?: boolean;
+  icon: ReactNode;
+  /** Accessible name; also the native tooltip. */
+  label: string;
+  ref?: Ref<HTMLButtonElement>;
+}
+export { RowActionProps, RowIconButtonProps, RowItemProps, RowItemTagTone, RowListProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -1,7 +1,5 @@
 import { ScrollAreaProps } from "./type.mjs";
 import { FC } from "react";
-//#region src/base-ui/ScrollArea/ScrollArea.d.ts
 declare const ScrollArea: FC<ScrollAreaProps>;
-//#endregion
 export { ScrollArea };
 //# sourceMappingURL=ScrollArea.d.mts.map

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

@@ -1,7 +1,7 @@
 "use client";
 import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./atoms.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/base-ui/ScrollArea/ScrollArea.tsx
+// src/base-ui/ScrollArea/ScrollArea.tsx
 const ScrollArea = ({ children, contentProps, corner = false, cornerProps, disableContentFit = false, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
 	const mergedContentProps = disableContentFit ? {
 		...contentProps,
@@ -29,7 +29,6 @@ const ScrollArea = ({ children, contentProps, corner = false, cornerProps, disab
 		]
 	});
 };
-//#endregion
 export { ScrollArea };
 
 //# sourceMappingURL=ScrollArea.mjs.map

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { ScrollArea } from "@base-ui/react/scroll-area";
-//#region src/base-ui/ScrollArea/atoms.d.ts
 type ScrollAreaRootProps = React.ComponentProps<typeof ScrollArea.Root>;
 type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';
 type ScrollAreaViewportProps = React.ComponentProps<typeof ScrollArea.Viewport> & {
@@ -41,6 +40,5 @@ declare const ScrollAreaCorner: {
   ({ className, ...rest }: ScrollAreaCornerProps): React.JSX.Element;
   displayName: string;
 };
-//#endregion
 export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
 //# sourceMappingURL=atoms.d.mts.map

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

@@ -4,7 +4,7 @@ import { styles } from "./style.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { ScrollArea } from "@base-ui/react/scroll-area";
-//#region src/base-ui/ScrollArea/atoms.tsx
+// src/base-ui/ScrollArea/atoms.tsx
 const mergeStateClassName = (base, className) => {
 	if (typeof className === "function") return (state) => cx(base, className(state));
 	return cx(base, className);
@@ -52,7 +52,6 @@ const ScrollAreaCorner = ({ className, ...rest }) => {
 	});
 };
 ScrollAreaCorner.displayName = "ScrollAreaCorner";
-//#endregion
 export { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };
 
 //# sourceMappingURL=atoms.mjs.map

package/es/base-ui/ScrollArea/globalStyle.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { createGlobalStyle, css } from "antd-style";
-//#region src/base-ui/ScrollArea/globalStyle.ts
+// src/base-ui/ScrollArea/globalStyle.ts
 /**
 * Register animatable custom properties used by scroll-driven animations.
 *
@@ -20,7 +20,6 @@ const ScrollAreaGlobalStyle = createGlobalStyle(() => css`
       syntax: '<length>';
     }
   `);
-//#endregion
 export { ScrollAreaGlobalStyle as default };
 
 //# sourceMappingURL=globalStyle.mjs.map

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

@@ -1,6 +1,6 @@
 import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
-//#region src/base-ui/ScrollArea/style.ts
+// src/base-ui/ScrollArea/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	corner: css`
     background: ${cssVar.colorFillSecondary};
@@ -310,7 +310,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `
 }));
-//#endregion
 export { styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1,6 +1,5 @@
 import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "./atoms.mjs";
 import { ReactNode } from "react";
-//#region src/base-ui/ScrollArea/type.d.ts
 interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
   children?: ReactNode;
   contentProps?: Omit<ScrollAreaContentProps, 'children'>;
@@ -28,6 +27,5 @@ interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
   thumbProps?: ScrollAreaThumbProps;
   viewportProps?: Omit<ScrollAreaViewportProps, 'children' | 'scrollFade'>;
 }
-//#endregion
 export { ScrollAreaProps };
 //# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,7 @@
+import { SectionActionProps, SectionProps } from "./type.mjs";
+/** A titled block of a settings or detail page: 15px title, hint, actions on the right. */
+declare const Section: import("react").NamedExoticComponent<SectionProps>;
+/** The quiet "+ Add …" button at the end of a section head. */
+declare const SectionAction: import("react").NamedExoticComponent<SectionActionProps>;
+export { SectionAction, Section as default };
+//# sourceMappingURL=Section.d.mts.map