@jinmi/ui 6.0.1 → 6.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Carousel/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  arrow: css`\r\n    position: absolute;\r\n    z-index: 1;\r\n    inset-block-start: 50%;\r\n    transform: translateY(-50%);\r\n\r\n    color: ${cssVar.colorText};\r\n\r\n    background: ${cssVar.colorBgContainer};\r\n    box-shadow: 0 1px 4px rgb(0 0 0 / 12%);\r\n  `,\r\n  dot: css`\r\n    cursor: pointer;\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n    padding: 0;\r\n    border: 0;\r\n    border-radius: 999px;\r\n\r\n    background: ${cssVar.colorFill};\r\n\r\n    transition:\r\n      width 0.2s ease,\r\n      background 0.2s ease;\r\n\r\n    &:hover {\r\n      background: ${cssVar.colorTextQuaternary};\r\n    }\r\n\r\n    &[aria-current='true'] {\r\n      width: 18px;\r\n      background: ${cssVar.colorText};\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline: 2px solid ${brandCssVar.colorBrand};\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n  dots: css`\r\n    display: flex;\r\n    gap: 6px;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding-block: 10px;\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n  `,\r\n  slide: css`\r\n    flex: 0 0 100%;\r\n    min-width: 0;\r\n  `,\r\n  track: css`\r\n    display: flex;\r\n    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n  trackAdaptive: css`\r\n    align-items: flex-start;\r\n  `,\r\n  viewport: css`\r\n    touch-action: pan-y;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: height 0.3s ease;\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;;;;;;aAMC,OAAO,UAAU;;kBAEZ,OAAO,iBAAiB;;;CAGxC,KAAK,GAAG;;;;;;;;;kBASQ,OAAO,UAAU;;;;;;;oBAOf,OAAO,oBAAoB;;;;;oBAK3B,OAAO,UAAU;;;;2BAIV,YAAY,WAAW;;;;;;;;CAQhD,MAAM,GAAG;;;;;;;;CAQT,MAAM,GAAG;;;CAGT,OAAO,GAAG;;;;CAIV,OAAO,GAAG;;;;;;;;CAQV,eAAe,GAAG;;;CAGlB,UAAU,GAAG;;;;;;;;;;AAUf,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Carousel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: 0 1px 4px rgb(0 0 0 / 12%);\n  `,\n  dot: css`\n    cursor: pointer;\n\n    width: 6px;\n    height: 6px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n\n    background: ${cssVar.colorFill};\n\n    transition:\n      width 0.2s ease,\n      background 0.2s ease;\n\n    &:hover {\n      background: ${cssVar.colorTextQuaternary};\n    }\n\n    &[aria-current='true'] {\n      width: 18px;\n      background: ${cssVar.colorText};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${brandCssVar.colorBrand};\n      outline-offset: 2px;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n  dots: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    padding-block: 10px;\n  `,\n  root: css`\n    position: relative;\n  `,\n  slide: css`\n    flex: 0 0 100%;\n    min-width: 0;\n  `,\n  track: css`\n    display: flex;\n    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n  trackAdaptive: css`\n    align-items: flex-start;\n  `,\n  viewport: css`\n    touch-action: pan-y;\n    position: relative;\n    overflow: hidden;\n    transition: height 0.3s ease;\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;;;;;;aAMC,OAAO,UAAU;;kBAEZ,OAAO,iBAAiB;;;CAGxC,KAAK,GAAG;;;;;;;;;kBASQ,OAAO,UAAU;;;;;;;oBAOf,OAAO,oBAAoB;;;;;oBAK3B,OAAO,UAAU;;;;2BAIV,YAAY,WAAW;;;;;;;;CAQhD,MAAM,GAAG;;;;;;;;CAQT,MAAM,GAAG;;;CAGT,OAAO,GAAG;;;;CAIV,OAAO,GAAG;;;;;;;;CAQV,eAAe,GAAG;;;CAGlB,UAAU,GAAG;;;;;;;;;;AAUf,EAAE"}

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

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactNode, Ref } from "react";
-//#region src/base-ui/Carousel/type.d.ts
 interface CarouselRef {
   goTo: (index: number) => void;
   next: () => void;
@@ -18,6 +17,5 @@ interface CarouselProps extends Omit<ComponentProps<'div'>, 'children' | 'ref'>
   pauseOnHover?: boolean;
   ref?: Ref<CarouselRef>;
 }
-//#endregion
 export { CarouselProps, CarouselRef };
 //# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+interface ChatExampleProps {
+  /** The reply, shown as plain text (line breaks kept). */
+  answer?: ReactNode;
+  /** The user's message, as a right-aligned bubble. */
+  ask: ReactNode;
+  className?: string;
+}
+/** One sample exchange: what you ask, what the agent answers. */
+declare const ChatExample: import("react").NamedExoticComponent<ChatExampleProps>;
+export { ChatExampleProps, ChatExample as default };
+//# sourceMappingURL=ChatExample.d.mts.map

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

@@ -0,0 +1,51 @@
+"use client";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cssVar, cx } from "antd-style";
+// src/base-ui/ChatExample/ChatExample.tsx
+const styles = createStaticStyles(({ css }) => ({
+	answer: css`
+    font-size: 14px;
+    line-height: 1.65;
+    color: ${cssVar.colorText};
+    white-space: pre-line;
+  `,
+	ask: css`
+    align-self: flex-end;
+
+    max-width: 80%;
+    padding-block: 10px;
+    padding-inline: 14px;
+    border-radius: 18px 18px 6px;
+
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+
+    padding: 20px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: 16px;
+  `
+}));
+/** One sample exchange: what you ask, what the agent answers. */
+const ChatExample = memo(({ answer, ask, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.root, className),
+	children: [/* @__PURE__ */ jsx("div", {
+		className: styles.ask,
+		children: ask
+	}), answer && /* @__PURE__ */ jsx("div", {
+		className: styles.answer,
+		children: answer
+	})]
+}));
+ChatExample.displayName = "ChatExample";
+export { ChatExample as default };
+
+//# sourceMappingURL=ChatExample.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatExample.mjs","names":[],"sources":["../../../src/base-ui/ChatExample/ChatExample.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cssVar, cx } from 'antd-style';\nimport { memo, type ReactNode } from 'react';\n\nconst styles = createStaticStyles(({ css }) => ({\n  answer: css`\n    font-size: 14px;\n    line-height: 1.65;\n    color: ${cssVar.colorText};\n    white-space: pre-line;\n  `,\n  ask: css`\n    align-self: flex-end;\n\n    max-width: 80%;\n    padding-block: 10px;\n    padding-inline: 14px;\n    border-radius: 18px 18px 6px;\n\n    font-size: 14px;\n    line-height: 1.6;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n\n    padding: 20px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 16px;\n  `,\n}));\n\nexport interface ChatExampleProps {\n  /** The reply, shown as plain text (line breaks kept). */\n  answer?: ReactNode;\n  /** The user's message, as a right-aligned bubble. */\n  ask: ReactNode;\n  className?: string;\n}\n\n/** One sample exchange: what you ask, what the agent answers. */\nconst ChatExample = memo<ChatExampleProps>(({ answer, ask, className }) => (\n  <div className={cx(styles.root, className)}>\n    <div className={styles.ask}>{ask}</div>\n    {answer && <div className={styles.answer}>{answer}</div>}\n  </div>\n));\n\nChatExample.displayName = 'ChatExample';\n\nexport default ChatExample;\n"],"mappings":";;;;;AAKA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,QAAQ,GAAG;;;aAGA,OAAO,UAAU;;;CAG5B,KAAK,GAAG;;;;;;;;;;aAUG,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;;;wBAMa,OAAO,qBAAqB;;;AAGpD,EAAE;;AAWF,MAAM,cAAc,MAAwB,EAAE,QAAQ,KAAK,gBACzD,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAM,UAAA;CAAS,CAAA,GACrC,UAAU,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAS,UAAA;CAAY,CAAA,CACpD;AACN,CAAA,CAAA;AAED,YAAY,cAAc"}

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

@@ -0,0 +1,2 @@
+import ChatExample, { ChatExampleProps } from "./ChatExample.mjs";
+export { type ChatExampleProps, ChatExample as default };

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+interface CheckListItem {
+  /** Met / done. Leave undefined when the state isn't tracked (an empty box). */
+  checked?: boolean;
+  key: string;
+  label: ReactNode;
+}
+interface CheckListProps {
+  className?: string;
+  items: CheckListItem[];
+  /** Small heading above the list ("Tiêu chí nghiệm thu"). */
+  title?: ReactNode;
+}
+/** A read-only checklist: an ink-filled box for met items, an empty box for the rest. */
+declare const CheckList: import("react").NamedExoticComponent<CheckListProps>;
+export { CheckListItem, CheckListProps, CheckList as default };
+//# sourceMappingURL=CheckList.d.mts.map

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

@@ -0,0 +1,84 @@
+"use client";
+import { inkCssVar } from "../../styles/inkCssVar.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cssVar, cx } from "antd-style";
+import { Check } from "lucide-react";
+// src/base-ui/CheckList/CheckList.tsx
+const styles = createStaticStyles(({ css }) => ({
+	box: css`
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    border: 1.5px solid ${cssVar.colorTextQuaternary};
+    border-radius: 6px;
+
+    color: ${cssVar.colorBgContainer};
+
+    [data-checked='true'] > & {
+      border: 0;
+      background: ${inkCssVar.colorInk};
+    }
+  `,
+	item: css`
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+
+    font-size: 13px;
+    line-height: 18px;
+    color: ${cssVar.colorText};
+
+    &[data-checked='true'] {
+      color: ${cssVar.colorTextSecondary};
+    }
+  `,
+	list: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+  `,
+	title: css`
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: ${cssVar.colorTextSecondary};
+  `
+}));
+/** A read-only checklist: an ink-filled box for met items, an empty box for the rest. */
+const CheckList = memo(({ className, items, title }) => /* @__PURE__ */ jsxs("div", {
+	className,
+	children: [title && /* @__PURE__ */ jsx("h4", {
+		className: styles.title,
+		children: title
+	}), /* @__PURE__ */ jsx("ul", {
+		className: styles.list,
+		style: title ? { marginBlockStart: 8 } : void 0,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: cx(styles.item),
+			"data-checked": !!item.checked,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: styles.box,
+				children: item.checked && /* @__PURE__ */ jsx(Check, {
+					size: 11,
+					strokeWidth: 3
+				})
+			}), /* @__PURE__ */ jsx("span", { children: item.label })]
+		}, item.key))
+	})]
+}));
+CheckList.displayName = "CheckList";
+export { CheckList as default };
+
+//# sourceMappingURL=CheckList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckList.mjs","names":[],"sources":["../../../src/base-ui/CheckList/CheckList.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cssVar, cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport { inkCssVar } from '@/styles/inkCssVar';\n\nconst styles = createStaticStyles(({ css }) => ({\n  box: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    border: 1.5px solid ${cssVar.colorTextQuaternary};\n    border-radius: 6px;\n\n    color: ${cssVar.colorBgContainer};\n\n    [data-checked='true'] > & {\n      border: 0;\n      background: ${inkCssVar.colorInk};\n    }\n  `,\n  item: css`\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n\n    font-size: 13px;\n    line-height: 18px;\n    color: ${cssVar.colorText};\n\n    &[data-checked='true'] {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  list: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    margin: 0;\n    padding: 0;\n\n    list-style: none;\n  `,\n  title: css`\n    margin: 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: ${cssVar.colorTextSecondary};\n  `,\n}));\n\nexport interface CheckListItem {\n  /** Met / done. Leave undefined when the state isn't tracked (an empty box). */\n  checked?: boolean;\n  key: string;\n  label: ReactNode;\n}\n\nexport interface CheckListProps {\n  className?: string;\n  items: CheckListItem[];\n  /** Small heading above the list (\"Tiêu chí nghiệm thu\"). */\n  title?: ReactNode;\n}\n\n/** A read-only checklist: an ink-filled box for met items, an empty box for the rest. */\nconst CheckList = memo<CheckListProps>(({ className, items, title }) => (\n  <div className={className}>\n    {title && <h4 className={styles.title}>{title}</h4>}\n    <ul className={styles.list} style={title ? { marginBlockStart: 8 } : undefined}>\n      {items.map((item) => (\n        <li className={cx(styles.item)} data-checked={!!item.checked} key={item.key}>\n          <span aria-hidden className={styles.box}>\n            {item.checked && <Check size={11} strokeWidth={3} />}\n          </span>\n          <span>{item.label}</span>\n        </li>\n      ))}\n    </ul>\n  </div>\n));\n\nCheckList.displayName = 'CheckList';\n\nexport default CheckList;\n"],"mappings":";;;;;;;AAQA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,KAAK,GAAG;;;;;;;;;0BASgB,OAAO,oBAAoB;;;aAGxC,OAAO,iBAAiB;;;;oBAIjB,UAAU,SAAS;;;CAGrC,MAAM,GAAG;;;;;;;aAOE,OAAO,UAAU;;;eAGf,OAAO,mBAAmB;;;CAGvC,MAAM,GAAG;;;;;;;;;;CAUT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;AAEvC,EAAE;;AAiBF,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,YAC1D,qBAAC,OAAD;CAAgB;CAAhB,UAAA,CACG,SAAS,oBAAC,MAAD;EAAI,WAAW,OAAO;EAAQ,UAAA;CAAU,CAAA,GAClD,oBAAC,MAAD;EAAI,WAAW,OAAO;EAAM,OAAO,QAAQ,EAAE,kBAAkB,EAAE,IAAI,KAAA;EAClE,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;GAAI,WAAW,GAAG,OAAO,IAAI;GAAG,gBAAc,CAAC,CAAC,KAAK;GAArD,UAAA,CACE,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,OAAO;IACjC,UAAA,KAAK,WAAW,oBAAC,OAAD;KAAO,MAAM;KAAI,aAAa;IAAI,CAAA;GAC/C,CAAA,GACN,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA,CACtB;EAL+D,GAAA,KAAK,GAKpE,CACL;CACC,CAAA,CACD;AACN,CAAA,CAAA;AAED,UAAU,cAAc"}

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

@@ -0,0 +1,2 @@
+import CheckList, { CheckListItem, CheckListProps } from "./CheckList.mjs";
+export { type CheckListItem, type CheckListProps, CheckList as default };

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

@@ -1,10 +1,8 @@
 import { CheckboxProps } from "./type.mjs";
-//#region src/base-ui/Checkbox/Checkbox.d.ts
 declare const _default: import("react").NamedExoticComponent<CheckboxProps> & {
   formBinding: {
     readonly valueProp: "checked";
   };
 };
-//#endregion
 export { _default as default };
 //# sourceMappingURL=Checkbox.d.mts.map

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

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { CheckIcon, Minus } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
-//#region src/base-ui/Checkbox/Checkbox.tsx
+// src/base-ui/Checkbox/Checkbox.tsx
 const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, children, className, classNames, styles: customStyles, style, textProps, onChange, disabled, indeterminate, ...rest }) => {
 	const boxStyle = {
 		borderRadius: shape === "square" ? `max(4px, ${Math.round(size / 4)}px)` : "50%",
@@ -56,7 +56,6 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 });
 Checkbox$1.displayName = "Checkbox";
 var Checkbox_default = Object.assign(Checkbox$1, { formBinding: { valueProp: "checked" } });
-//#endregion
 export { Checkbox_default as default };
 
 //# sourceMappingURL=Checkbox.mjs.map

package/es/base-ui/Checkbox/CheckboxGroup.d.mts

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

package/es/base-ui/Checkbox/CheckboxGroup.mjs

@@ -3,7 +3,7 @@ import Checkbox_default from "./Checkbox.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
-//#region src/base-ui/Checkbox/CheckboxGroup.tsx
+// src/base-ui/Checkbox/CheckboxGroup.tsx
 const CheckboxGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true, size, shape, textProps, style, ...rest }) => {
 	const items = useMemo(() => options.map((option) => typeof option === "string" ? {
 		label: option,
@@ -31,7 +31,6 @@ const CheckboxGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true,
 	});
 });
 CheckboxGroup$1.displayName = "CheckboxGroup";
-//#endregion
 export { CheckboxGroup$1 as default };
 
 //# sourceMappingURL=CheckboxGroup.mjs.map

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

@@ -1,9 +1,7 @@
-//#region src/base-ui/Checkbox/style.d.ts
 declare const styles: {
   indicator: string;
   label: string;
   root: string;
 };
-//#endregion
 export { styles };
 //# sourceMappingURL=style.d.mts.map

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

@@ -1,6 +1,7 @@
+import { inkCssVar } from "../../styles/inkCssVar.mjs";
 import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
-//#region src/base-ui/Checkbox/style.ts
+// src/base-ui/Checkbox/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	indicator: css`
     display: flex;
@@ -29,7 +30,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     padding: 0;
     border: 1px solid ${cssVar.colorBorderSecondary};
 
-    color: ${cssVar.colorBgLayout};
+    color: ${inkCssVar.colorInkText};
 
     background: ${cssVar.colorBgContainer};
     outline: none;
@@ -46,8 +47,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     &[data-checked],
     &[data-indeterminate] {
-      border-color: var(--jinmi-checkbox-bg, ${cssVar.colorPrimary});
-      background: var(--jinmi-checkbox-bg, ${cssVar.colorPrimary});
+      border-color: var(--jinmi-checkbox-bg, ${inkCssVar.colorInk});
+      background: var(--jinmi-checkbox-bg, ${inkCssVar.colorInk});
     }
 
     &[data-disabled] {
@@ -62,7 +63,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `
 }));
-//#endregion
 export { styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    ${focusRing};\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--jinmi-checkbox-bg, ${cssVar.colorPrimary});\n      background: var(--jinmi-checkbox-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;MAGnC,UAAU;;;;+CAI+B,OAAO,aAAa;6CACtB,OAAO,aAAa;;;;;;sBAM3C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { inkCssVar } from '@/styles/inkCssVar';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${inkCssVar.colorInkText};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    ${focusRing};\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--jinmi-checkbox-bg, ${inkCssVar.colorInk});\n      background: var(--jinmi-checkbox-bg, ${inkCssVar.colorInk});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,UAAU,aAAa;;kBAElB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;MAGnC,UAAU;;;;+CAI+B,UAAU,SAAS;6CACrB,UAAU,SAAS;;;;;;sBAM1C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}

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

@@ -5,7 +5,6 @@ import "../../Text/index.mjs";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
-//#region src/base-ui/Checkbox/type.d.ts
 type CheckboxShape = 'square' | 'circle';
 type BaseCheckboxProps = Omit<ComponentProps<typeof Checkbox.Root>, 'className' | 'style' | 'render' | 'children' | 'onCheckedChange'>;
 interface CheckboxProps extends BaseCheckboxProps {
@@ -47,6 +46,5 @@ interface CheckboxGroupProps extends BaseCheckboxGroupProps, Pick<FlexboxProps,
   style?: CSSProperties;
   textProps?: CheckboxProps['textProps'];
 }
-//#endregion
 export { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape };
 //# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+interface ChipItem {
+  key: string;
+  label: ReactNode;
+}
+interface ChipListProps {
+  /** Rendered after the chips (an inline "add" input). */
+  after?: ReactNode;
+  className?: string;
+  items: ChipItem[];
+  /** Shows a × on each chip. */
+  onRemove?: (key: string) => void;
+  /** Accessible name of the × buttons. Defaults to "Remove". */
+  removeLabel?: string;
+}
+/** Rounded grey chips (opening questions, tags), optionally removable. */
+declare const ChipList: import("react").NamedExoticComponent<ChipListProps>;
+export { ChipItem, ChipListProps, ChipList as default };
+//# sourceMappingURL=ChipList.d.mts.map

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

@@ -0,0 +1,84 @@
+"use client";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cssVar, cx } from "antd-style";
+import { X } from "lucide-react";
+// src/base-ui/ChipList/ChipList.tsx
+const styles = createStaticStyles(({ css }) => ({
+	chip: css`
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    max-width: 100%;
+    height: 32px;
+    padding-block: 0;
+    padding-inline: 12px;
+    border-radius: 999px;
+
+    font-size: 13px;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillTertiary};
+
+    &[data-removable='true'] {
+      padding-inline-end: 6px;
+    }
+  `,
+	label: css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	list: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+  `,
+	remove: css`
+    cursor: pointer;
+
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: transparent;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
+    }
+  `
+}));
+/** Rounded grey chips (opening questions, tags), optionally removable. */
+const ChipList = memo(({ after, className, items, onRemove, removeLabel = "Remove" }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.list, className),
+	children: [items.map((item) => /* @__PURE__ */ jsxs("span", {
+		className: styles.chip,
+		"data-removable": !!onRemove,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.label,
+			children: item.label
+		}), onRemove && /* @__PURE__ */ jsx("button", {
+			"aria-label": removeLabel,
+			className: styles.remove,
+			type: "button",
+			onClick: () => onRemove(item.key),
+			children: /* @__PURE__ */ jsx(X, { size: 12 })
+		})]
+	}, item.key)), after]
+}));
+ChipList.displayName = "ChipList";
+export { ChipList as default };
+
+//# sourceMappingURL=ChipList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChipList.mjs","names":[],"sources":["../../../src/base-ui/ChipList/ChipList.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cssVar, cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nconst styles = createStaticStyles(({ css }) => ({\n  chip: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n\n    max-width: 100%;\n    height: 32px;\n    padding-block: 0;\n    padding-inline: 12px;\n    border-radius: 999px;\n\n    font-size: 13px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n\n    &[data-removable='true'] {\n      padding-inline-end: 6px;\n    }\n  `,\n  label: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  list: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    align-items: center;\n  `,\n  remove: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    border: 0;\n    border-radius: 999px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n}));\n\nexport interface ChipItem {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface ChipListProps {\n  /** Rendered after the chips (an inline \"add\" input). */\n  after?: ReactNode;\n  className?: string;\n  items: ChipItem[];\n  /** Shows a × on each chip. */\n  onRemove?: (key: string) => void;\n  /** Accessible name of the × buttons. Defaults to \"Remove\". */\n  removeLabel?: string;\n}\n\n/** Rounded grey chips (opening questions, tags), optionally removable. */\nconst ChipList = memo<ChipListProps>(\n  ({ after, className, items, onRemove, removeLabel = 'Remove' }) => (\n    <div className={cx(styles.list, className)}>\n      {items.map((item) => (\n        <span className={styles.chip} data-removable={!!onRemove} key={item.key}>\n          <span className={styles.label}>{item.label}</span>\n          {onRemove && (\n            <button\n              aria-label={removeLabel}\n              className={styles.remove}\n              type={'button'}\n              onClick={() => onRemove(item.key)}\n            >\n              <X size={12} />\n            </button>\n          )}\n        </span>\n      ))}\n      {after}\n    </div>\n  ),\n);\n\nChipList.displayName = 'ChipList';\n\nexport default ChipList;\n"],"mappings":";;;;;;AAMA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,MAAM,GAAG;;;;;;;;;;;;aAYE,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;;;;;CAMzC,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;CAMT,QAAQ,GAAG;;;;;;;;;;;;;;aAcA,OAAO,kBAAkB;;;;;eAKvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;AAG9C,EAAE;;AAmBF,MAAM,WAAW,MACd,EAAE,OAAO,WAAW,OAAO,UAAU,cAAc,eAClD,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACG,MAAM,KAAK,SACV,qBAAC,QAAD;EAAM,WAAW,OAAO;EAAM,kBAAgB,CAAC,CAAC;EAAhD,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAQ,UAAA,KAAK;EAAY,CAAA,GAChD,YACC,oBAAC,UAAD;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,MAAM;GACN,eAAe,SAAS,KAAK,GAAG;GAEhC,UAAA,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;EACR,CAAA,CAEN;CAZyD,GAAA,KAAK,GAY9D,CACP,GACA,KACE;AAET,CAAA,CAAA;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,2 @@
+import ChipList, { ChipItem, ChipListProps } from "./ChipList.mjs";
+export { type ChipItem, type ChipListProps, ChipList as default };

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

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

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

@@ -4,7 +4,7 @@ import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Collapsible } from "@base-ui/react/collapsible";
-//#region src/base-ui/Collapsible/Collapsible.tsx
+// src/base-ui/Collapsible/Collapsible.tsx
 const Collapsible$1 = memo(({ open, keepMounted, children, className, contentClassName, contentStyle, style }) => /* @__PURE__ */ jsx(Collapsible.Root, {
 	open,
 	children: /* @__PURE__ */ jsx(Collapsible.Panel, {
@@ -19,7 +19,6 @@ const Collapsible$1 = memo(({ open, keepMounted, children, className, contentCla
 	})
 }));
 Collapsible$1.displayName = "Collapsible";
-//#endregion
 export { Collapsible$1 as default };
 
 //# sourceMappingURL=Collapsible.mjs.map

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

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from "react";
-//#region src/base-ui/Collapsible/type.d.ts
 interface CollapsibleProps {
   children?: ReactNode;
   className?: string;
@@ -9,6 +8,5 @@ interface CollapsibleProps {
   open: boolean;
   style?: CSSProperties;
 }
-//#endregion
 export { CollapsibleProps };
 //# sourceMappingURL=type.d.mts.map

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

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

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

@@ -16,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
 import useMergeState from "use-merge-value";
 import { Pipette } from "lucide-react";
-//#region src/base-ui/ColorPicker/ColorPicker.tsx
+// src/base-ui/ColorPicker/ColorPicker.tsx
 const DEFAULT_COLOR = "#000000";
 const hasEyeDropper = () => typeof window !== "undefined" && "EyeDropper" in window;
 const ColorPicker = memo(({ alpha = false, children, className, defaultValue = DEFAULT_COLOR, disabled, onChange, onChangeComplete, presets, showText, size = "middle", style, value }) => {
@@ -221,7 +221,6 @@ const ColorPicker = memo(({ alpha = false, children, className, defaultValue = D
 	}) })] });
 });
 ColorPicker.displayName = "ColorPicker";
-//#endregion
 export { ColorPicker as default };
 
 //# sourceMappingURL=ColorPicker.mjs.map

package/es/base-ui/ColorPicker/SaturationArea.mjs

@@ -2,7 +2,7 @@
 import { styles } from "./style.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/base-ui/ColorPicker/SaturationArea.tsx
+// src/base-ui/ColorPicker/SaturationArea.tsx
 const clamp = (n) => Math.min(1, Math.max(0, Math.round(n * 100) / 100));
 const SaturationArea = memo(({ hue, label, onChange, onChangeComplete, saturation, value }) => {
 	const areaRef = useRef(null);
@@ -58,7 +58,6 @@ const SaturationArea = memo(({ hue, label, onChange, onChangeComplete, saturatio
 	});
 });
 SaturationArea.displayName = "ColorPickerSaturationArea";
-//#endregion
 export { SaturationArea as default };
 
 //# sourceMappingURL=SaturationArea.mjs.map

package/es/base-ui/ColorPicker/color.mjs

@@ -1,5 +1,5 @@
 import chroma from "chroma-js";
-//#region src/base-ui/ColorPicker/color.ts
+// src/base-ui/ColorPicker/color.ts
 const parseColor = (value, fallbackHue = 0) => {
 	if (!value || !chroma.valid(value)) return {
 		a: 1,
@@ -22,7 +22,6 @@ const normalizeHexInput = (input) => {
 	if (!/^([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(raw)) return null;
 	return `#${raw.toLowerCase()}`;
 };
-//#endregion
 export { formatColor, normalizeHexInput, parseColor };
 
 //# sourceMappingURL=color.mjs.map

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

@@ -1,6 +1,6 @@
 import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
-//#region src/base-ui/ColorPicker/style.ts
+// src/base-ui/ColorPicker/style.ts
 const checker = (color) => `
   background-image:
     linear-gradient(45deg, ${color} 25%, transparent 25%, transparent 75%, ${color} 75%),
@@ -174,7 +174,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     line-height: 1.2;
   `
 }));
-//#endregion
 export { styles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1,6 +1,5 @@
 import { InputSize } from "../Input/type.mjs";
 import { CSSProperties, ReactElement } from "react";
-//#region src/base-ui/ColorPicker/type.d.ts
 interface ColorPickerProps {
   alpha?: boolean;
   children?: ReactElement;
@@ -15,6 +14,5 @@ interface ColorPickerProps {
   style?: CSSProperties;
   value?: string;
 }
-//#endregion
 export { ColorPickerProps };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/ContextMenu/ContextMenuHost.d.mts

@@ -1,5 +1,3 @@
-//#region src/base-ui/ContextMenu/ContextMenuHost.d.ts
 declare const ContextMenuHost: import("react").MemoExoticComponent<() => import("react").JSX.Element | null>;
-//#endregion
 export { ContextMenuHost };
 //# sourceMappingURL=ContextMenuHost.d.mts.map

package/es/base-ui/ContextMenu/ContextMenuHost.mjs

@@ -13,7 +13,7 @@ import { memo, useEffect, useMemo, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { ContextMenu } from "@base-ui/react/context-menu";
-//#region src/base-ui/ContextMenu/ContextMenuHost.tsx
+// src/base-ui/ContextMenu/ContextMenuHost.tsx
 const noAnimationStyles = { "--jinmi-dropdown-animation-duration": "0ms" };
 const ContextMenuHost = memo(() => {
 	const isClient = useIsClient();
@@ -94,7 +94,6 @@ const ContextMenuHost = memo(() => {
 	});
 });
 ContextMenuHost.displayName = "ContextMenuHost";
-//#endregion
 export { ContextMenuHost };
 
 //# sourceMappingURL=ContextMenuHost.mjs.map

package/es/base-ui/ContextMenu/ContextMenuTrigger.d.mts

@@ -2,7 +2,6 @@ import { VirtualListProps } from "../virtual/type.mjs";
 import "../virtual/index.mjs";
 import { ContextMenuItem } from "./type.mjs";
 import React, { HTMLAttributes, MouseEvent, ReactNode } from "react";
-//#region src/base-ui/ContextMenu/ContextMenuTrigger.d.ts
 type ContextMenuTriggerProps = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {
   children: ReactNode;
   /**
@@ -24,6 +23,5 @@ type ContextMenuTriggerProps = Pick<VirtualListProps, 'virtual' | 'listItemHeigh
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
 } & Omit<HTMLAttributes<HTMLElement>, 'onContextMenu' | 'children'>;
 declare const ContextMenuTrigger: React.NamedExoticComponent<ContextMenuTriggerProps>;
-//#endregion
 export { ContextMenuTrigger, ContextMenuTriggerProps };
 //# sourceMappingURL=ContextMenuTrigger.d.mts.map