@jinmi/ui 6.0.2 → 6.1.0

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

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

@@ -0,0 +1,43 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Plus } from "lucide-react";
+// src/base-ui/Section/Section.tsx
+/** A titled block of a settings or detail page: 15px title, hint, actions on the right. */
+const Section = memo(({ actions, children, className, hint, ref, title, ...rest }) => /* @__PURE__ */ jsxs("section", {
+	className: cx(styles.root, className),
+	ref,
+	...rest,
+	children: [(title || actions) && /* @__PURE__ */ jsxs("div", {
+		className: styles.head,
+		children: [
+			title && /* @__PURE__ */ jsx("h2", {
+				className: styles.title,
+				children: title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: styles.hint,
+				children: hint
+			}),
+			actions && /* @__PURE__ */ jsx("span", {
+				className: styles.actions,
+				children: actions
+			})
+		]
+	}), children]
+}));
+Section.displayName = "Section";
+/** The quiet "+ Add …" button at the end of a section head. */
+const SectionAction = memo(({ children, className, icon, ref, type = "button", ...rest }) => /* @__PURE__ */ jsxs("button", {
+	className: cx(styles.action, className),
+	ref,
+	type,
+	...rest,
+	children: [icon === void 0 ? /* @__PURE__ */ jsx(Plus, { size: 13 }) : icon, children]
+}));
+SectionAction.displayName = "SectionAction";
+export { SectionAction, Section as default };
+
+//# sourceMappingURL=Section.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","names":[],"sources":["../../../src/base-ui/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Plus } from 'lucide-react';\nimport { memo } from 'react';\n\nimport { styles } from './style';\nimport type { SectionActionProps, SectionProps } from './type';\n\n/** A titled block of a settings or detail page: 15px title, hint, actions on the right. */\nconst Section = memo<SectionProps>(\n  ({ actions, children, className, hint, ref, title, ...rest }) => (\n    <section className={cx(styles.root, className)} ref={ref} {...rest}>\n      {(title || actions) && (\n        <div className={styles.head}>\n          {title && <h2 className={styles.title}>{title}</h2>}\n          <span className={styles.hint}>{hint}</span>\n          {actions && <span className={styles.actions}>{actions}</span>}\n        </div>\n      )}\n      {children}\n    </section>\n  ),\n);\n\nSection.displayName = 'Section';\n\n/** The quiet \"+ Add …\" button at the end of a section head. */\nexport const SectionAction = memo<SectionActionProps>(\n  ({ children, className, icon, ref, type = 'button', ...rest }) => (\n    <button className={cx(styles.action, className)} ref={ref} type={type} {...rest}>\n      {icon === undefined ? <Plus size={13} /> : icon}\n      {children}\n    </button>\n  ),\n);\n\nSectionAction.displayName = 'SectionAction';\n\nexport default Section;\n"],"mappings":";;;;;;;;AAUA,MAAM,UAAU,MACb,EAAE,SAAS,UAAU,WAAW,MAAM,KAAK,OAAO,GAAG,WACpD,qBAAC,WAAD;CAAS,WAAW,GAAG,OAAO,MAAM,SAAS;CAAQ;CAAK,GAAI;CAA9D,UAAA,EACI,SAAS,YACT,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA;GACG,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GAClD,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAW,CAAA;GACzC,WAAW,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAU,UAAA;GAAc,CAAA;EACzD;CAEN,CAAA,GAAA,QACM;AAEb,CAAA,CAAA;AAEA,QAAQ,cAAc;;AAGtB,MAAa,gBAAgB,MAC1B,EAAE,UAAU,WAAW,MAAM,KAAK,OAAO,UAAU,GAAG,WACrD,qBAAC,UAAD;CAAQ,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAQ;CAAW;CAAM,GAAI;CAA3E,UAAA,CACG,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAM,MAAM,GAAK,CAAA,IAAI,MAC1C,QACK;AAEZ,CAAA,CAAA;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,4 @@
+import { SectionActionProps, SectionProps } from "./type.mjs";
+import Section, { SectionAction } from "./Section.mjs";
+import { styles } from "./style.mjs";
+export { SectionAction, type SectionActionProps, type SectionProps, Section as default, styles as sectionStyles };

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  action: string;
+  actions: string;
+  head: string;
+  hint: string;
+  root: string;
+  title: string;
+};
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,74 @@
+import { createStaticStyles, cssVar } from "antd-style";
+// src/base-ui/Section/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	action: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    gap: 5px;
+    align-items: center;
+
+    height: 30px;
+    padding-block: 0;
+    padding-inline: 10px;
+    border: 0;
+    border-radius: 8px;
+
+    font: inherit;
+    font-size: 13px;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillTertiary};
+
+    transition: background 0.15s;
+
+    &:hover:not(:disabled) {
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  `,
+	actions: css`
+    display: flex;
+    flex: none;
+    gap: 6px;
+    align-items: center;
+    align-self: center;
+
+    margin-inline-start: auto;
+  `,
+	head: css`
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    min-height: 30px;
+  `,
+	hint: css`
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  `,
+	title: css`
+    flex: none;
+
+    margin: 0;
+
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+  `
+}));
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Section/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    gap: 5px;\n    align-items: center;\n\n    height: 30px;\n    padding-block: 0;\n    padding-inline: 10px;\n    border: 0;\n    border-radius: 8px;\n\n    font: inherit;\n    font-size: 13px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n\n    transition: background 0.15s;\n\n    &:hover:not(:disabled) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n    }\n  `,\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 6px;\n    align-items: center;\n    align-self: center;\n\n    margin-inline-start: auto;\n  `,\n  head: css`\n    display: flex;\n    gap: 10px;\n    align-items: baseline;\n    min-height: 30px;\n  `,\n  hint: css`\n    flex: 1;\n    min-width: 0;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  `,\n  title: css`\n    flex: none;\n\n    margin: 0;\n\n    font-size: 15px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,QAAQ,GAAG;;;;;;;;;;;;;;;;aAgBA,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;;;;oBAKvB,OAAO,mBAAmB;;;;;;;;CAQ5C,SAAS,GAAG;;;;;;;;;CASZ,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,MAAM,GAAG;;;;;CAKT,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;AAE9B,EAAE"}

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

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+interface SectionProps extends Omit<ComponentProps<'section'>, 'title'> {
+  /** Right side of the head: usually one `SectionAction`, sometimes a menu or icon buttons. */
+  actions?: ReactNode;
+  /** One short line beside the title, in the secondary text color. */
+  hint?: ReactNode;
+  ref?: Ref<HTMLElement>;
+  title?: ReactNode;
+}
+interface SectionActionProps extends ComponentProps<'button'> {
+  /** Leading icon. Defaults to "+"; pass `null` for a label-only button. */
+  icon?: ReactNode;
+  ref?: Ref<HTMLButtonElement>;
+}
+export { SectionActionProps, SectionProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -1,9 +1,7 @@
 import { SegmentedProps } from "./type.mjs";
-//#region src/base-ui/Segmented/Segmented.d.ts
 declare const Segmented: {
   <Value extends string = string>({ block, className, classNames, defaultValue, disabled, glass, id, name, onChange, options, ref, shadow, size, style, styles: customStyles, value, variant, vertical }: SegmentedProps<Value>): import("react").JSX.Element;
   displayName: string;
 };
-//#endregion
 export { Segmented as default };
 //# sourceMappingURL=Segmented.d.mts.map

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

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
-//#region src/base-ui/Segmented/Segmented.tsx
+// src/base-ui/Segmented/Segmented.tsx
 const normalizeOption = (option) => typeof option === "string" ? {
 	label: option,
 	value: option
@@ -107,7 +107,6 @@ const Segmented = ({ block = false, className, classNames, defaultValue, disable
 	});
 };
 Segmented.displayName = "Segmented";
-//#endregion
 export { Segmented as default };
 
 //# sourceMappingURL=Segmented.mjs.map

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

@@ -2,7 +2,6 @@ import { SegmentedSize, SegmentedVariant } from "./type.mjs";
 import { CSSProperties, ComponentProps, FC, ReactNode } from "react";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
-//#region src/base-ui/Segmented/atoms.d.ts
 type SegmentedRootProps<Value extends string = string> = Omit<ComponentProps<typeof ToggleGroup<Value>>, 'className' | 'render'> & {
   block?: boolean;
   className?: string;
@@ -35,6 +34,5 @@ interface SegmentedIndicatorProps {
   style?: CSSProperties;
 }
 declare const SegmentedIndicator: FC<SegmentedIndicatorProps>;
-//#endregion
 export { SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedRoot, SegmentedRootProps };
 //# sourceMappingURL=atoms.d.mts.map

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

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
-//#region src/base-ui/Segmented/atoms.tsx
+// src/base-ui/Segmented/atoms.tsx
 const SegmentedRoot = ({ block = false, className, glass = false, shadow = false, variant = "filled", ...rest }) => {
 	return /* @__PURE__ */ jsx(ToggleGroup, {
 		className: cx(listVariants({
@@ -46,7 +46,6 @@ const SegmentedIndicator = ({ className, style }) => /* @__PURE__ */ jsx("span",
 	style
 });
 SegmentedIndicator.displayName = "SegmentedIndicator";
-//#endregion
 export { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot };
 
 //# sourceMappingURL=atoms.mjs.map

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

@@ -2,7 +2,7 @@ import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
 import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
-//#region src/base-ui/Segmented/style.ts
+// src/base-ui/Segmented/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => {
 	return {
 		indicator: css`
@@ -204,7 +204,6 @@ const itemVariants = cva(styles.item, {
 		}
 	}
 });
-//#endregion
 export { itemVariants, listVariants, styles };
 
 //# sourceMappingURL=style.mjs.map