agentic-ds-kit 0.1.0 → 0.2.0

package/dist/ui/Chat/Chat.js

@@ -0,0 +1,149 @@
+"use client";
+import { Button as e } from "../Button/Button.js";
+import { Input as t } from "../Input/Input.js";
+import { DropdownMenu as n } from "../DropdownMenu/DropdownMenu.js";
+import { ThinkingAnimation as r } from "../ThinkingAnimation/ThinkingAnimation.js";
+import i from "./Chat.module.js";
+import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ui/Chat/Chat.tsx
+function d({ title: d = "Assistant", status: f, messages: p = [], suggestions: m = [], placeholder: h = "How can we help you?", emptyState: g = "Start a conversation.", isThinking: _ = !1, disabled: v = !1, value: y, defaultValue: b = "", onValueChange: x, onSend: S, onClose: C, closeLabel: w = "Close", menuItems: T = [], menuLabel: E = "More", radius: D = "lg", className: O = "" }) {
+	let [k, A] = c(b), j = s(null), M = o(), N = y ?? k;
+	a(() => {
+		let e = j.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, [_, p.length]);
+	function P(e) {
+		y === void 0 && A(e), x?.(e);
+	}
+	function F(e = N) {
+		let t = e.trim();
+		!t || v || (S?.(t), P(""));
+	}
+	return /* @__PURE__ */ u("section", {
+		className: `${i.panel} ${D === "none" ? i.radiusNone : ""} ${O}`.trim(),
+		"aria-label": d,
+		children: [
+			/* @__PURE__ */ u("header", {
+				className: i.header,
+				children: [/* @__PURE__ */ u("span", {
+					className: i.identity,
+					children: [/* @__PURE__ */ l("span", {
+						className: i.title,
+						children: d
+					}), f ? /* @__PURE__ */ u("span", {
+						className: i.status,
+						children: [/* @__PURE__ */ l("span", {
+							className: i.statusDot,
+							"aria-hidden": "true"
+						}), f]
+					}) : null]
+				}), /* @__PURE__ */ u("div", {
+					className: i.headerActions,
+					children: [T.length > 0 ? /* @__PURE__ */ l(n, {
+						ariaLabel: E,
+						iconStart: "MoreHorizontal",
+						variant: "tertiary",
+						size: "sm",
+						align: "end",
+						groups: [{ items: T.map((e, t) => ({
+							id: e.id ?? `${e.label}-${t}`,
+							label: e.label,
+							danger: e.tone === "danger"
+						})) }],
+						onSelect: (e) => {
+							T.find((t, n) => (t.id ?? `${t.label}-${n}`) === e)?.onSelect?.();
+						}
+					}) : null, C ? /* @__PURE__ */ l(e, {
+						type: "button",
+						variant: "tertiary",
+						size: "sm",
+						iconStart: "X",
+						ariaLabel: w,
+						onClick: C
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				ref: j,
+				className: i.thread,
+				role: "log",
+				"aria-label": "Conversation",
+				"aria-live": "polite",
+				"aria-busy": _,
+				children: [
+					p.length === 0 && !_ ? /* @__PURE__ */ l("p", {
+						className: i.empty,
+						children: g
+					}) : null,
+					p.map((e, t) => {
+						let n = e.role === "user";
+						return /* @__PURE__ */ u("article", {
+							className: `${i.message} ${n ? i.messageUser : i.messageAssistant}`,
+							children: [n ? null : /* @__PURE__ */ l("span", {
+								className: i.mark,
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ u("div", {
+								className: i.body,
+								children: [/* @__PURE__ */ l("p", {
+									className: i.copy,
+									children: e.content
+								}), e.timestamp ? /* @__PURE__ */ l("span", {
+									className: i.timestamp,
+									children: e.timestamp
+								}) : null]
+							})]
+						}, e.id ?? t);
+					}),
+					_ ? /* @__PURE__ */ u("div", {
+						className: `${i.message} ${i.messageAssistant}`,
+						children: [/* @__PURE__ */ l("span", {
+							className: i.mark,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ l(r, {
+							label: "Thinking",
+							size: "md"
+						})]
+					}) : null
+				]
+			}),
+			m.length > 0 ? /* @__PURE__ */ l("div", {
+				className: i.suggestions,
+				"aria-label": "Suggested prompts",
+				children: m.map((t) => /* @__PURE__ */ l(e, {
+					type: "button",
+					variant: "tertiary",
+					size: "sm",
+					disabled: v,
+					onClick: () => F(t),
+					children: t
+				}, t))
+			}) : null,
+			/* @__PURE__ */ u("form", {
+				className: i.composer,
+				onSubmit: (e) => {
+					e.preventDefault(), F();
+				},
+				children: [/* @__PURE__ */ l(t, {
+					id: M,
+					value: N,
+					placeholder: h,
+					ariaLabel: h,
+					disabled: v,
+					onChange: P
+				}), /* @__PURE__ */ l(e, {
+					type: "submit",
+					variant: "primary",
+					size: "md",
+					ariaLabel: "Send",
+					disabled: v || !N.trim(),
+					iconStart: "Send"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { d as Chat };
+
+//# sourceMappingURL=Chat.js.map

package/dist/ui/Chat/Chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","names":[],"sources":["../../../ui/Chat/Chat.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Button } from \"../Button\";\nimport { DropdownMenu } from \"../DropdownMenu\";\nimport { Input } from \"../Input\";\nimport { ThinkingAnimation } from \"../ThinkingAnimation\";\nimport type { ChatProps } from \"./Chat.types\";\nimport styles from \"./Chat.module.css\";\n\nexport type { ChatMessage, ChatMessageRole, ChatMenuItem, ChatProps, ChatRadius } from \"./Chat.types\";\n\nexport function Chat({\n  title = \"Assistant\",\n  status,\n  messages = [],\n  suggestions = [],\n  placeholder = \"How can we help you?\",\n  emptyState = \"Start a conversation.\",\n  isThinking = false,\n  disabled = false,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  onClose,\n  closeLabel = \"Close\",\n  menuItems = [],\n  menuLabel = \"More\",\n  radius = \"lg\",\n  className = \"\",\n}: ChatProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const threadRef = useRef<HTMLDivElement>(null);\n  const inputId = useId();\n  const draft = value ?? internalValue;\n\n  useEffect(() => {\n    const thread = threadRef.current;\n    if (!thread) return;\n    thread.scrollTop = thread.scrollHeight;\n  }, [isThinking, messages.length]);\n\n  function updateDraft(nextValue: string) {\n    if (value === undefined) setInternalValue(nextValue);\n    onValueChange?.(nextValue);\n  }\n\n  function sendMessage(message = draft) {\n    const nextMessage = message.trim();\n    if (!nextMessage || disabled) return;\n    onSend?.(nextMessage);\n    updateDraft(\"\");\n  }\n\n  return (\n    <section\n      className={`${styles.panel} ${radius === \"none\" ? styles.radiusNone : \"\"} ${className}`.trim()}\n      aria-label={title}\n    >\n      <header className={styles.header}>\n        <span className={styles.identity}>\n          <span className={styles.title}>{title}</span>\n          {status ? (\n            <span className={styles.status}>\n              <span className={styles.statusDot} aria-hidden=\"true\" />\n              {status}\n            </span>\n          ) : null}\n        </span>\n        <div className={styles.headerActions}>\n          {menuItems.length > 0 ? (\n            <DropdownMenu\n              ariaLabel={menuLabel}\n              iconStart=\"MoreHorizontal\"\n              variant=\"tertiary\"\n              size=\"sm\"\n              align=\"end\"\n              groups={[\n                {\n                  items: menuItems.map((item, index) => ({\n                    id: item.id ?? `${item.label}-${index}`,\n                    label: item.label,\n                    danger: item.tone === \"danger\",\n                  })),\n                },\n              ]}\n              onSelect={(id) => {\n                const item = menuItems.find((entry, index) => (entry.id ?? `${entry.label}-${index}`) === id);\n                item?.onSelect?.();\n              }}\n            />\n          ) : null}\n          {onClose ? (\n            <Button type=\"button\" variant=\"tertiary\" size=\"sm\" iconStart=\"X\" ariaLabel={closeLabel} onClick={onClose} />\n          ) : null}\n        </div>\n      </header>\n\n      <div\n        ref={threadRef}\n        className={styles.thread}\n        role=\"log\"\n        aria-label=\"Conversation\"\n        aria-live=\"polite\"\n        aria-busy={isThinking}\n      >\n        {messages.length === 0 && !isThinking ? <p className={styles.empty}>{emptyState}</p> : null}\n        {messages.map((message, index) => {\n          const isUser = message.role === \"user\";\n          return (\n            <article\n              key={message.id ?? index}\n              className={`${styles.message} ${isUser ? styles.messageUser : styles.messageAssistant}`}\n            >\n              {isUser ? null : <span className={styles.mark} aria-hidden=\"true\" />}\n              <div className={styles.body}>\n                <p className={styles.copy}>{message.content}</p>\n                {message.timestamp ? <span className={styles.timestamp}>{message.timestamp}</span> : null}\n              </div>\n            </article>\n          );\n        })}\n        {isThinking ? (\n          <div className={`${styles.message} ${styles.messageAssistant}`}>\n            <span className={styles.mark} aria-hidden=\"true\" />\n            <ThinkingAnimation label=\"Thinking\" size=\"md\" />\n          </div>\n        ) : null}\n      </div>\n\n      {suggestions.length > 0 ? (\n        <div className={styles.suggestions} aria-label=\"Suggested prompts\">\n          {suggestions.map((suggestion) => (\n            <Button\n              key={suggestion}\n              type=\"button\"\n              variant=\"tertiary\"\n              size=\"sm\"\n              disabled={disabled}\n              onClick={() => sendMessage(suggestion)}\n            >\n              {suggestion}\n            </Button>\n          ))}\n        </div>\n      ) : null}\n\n      <form\n        className={styles.composer}\n        onSubmit={(event) => {\n          event.preventDefault();\n          sendMessage();\n        }}\n      >\n        <Input\n          id={inputId}\n          value={draft}\n          placeholder={placeholder}\n          ariaLabel={placeholder}\n          disabled={disabled}\n          onChange={updateDraft}\n        />\n        <Button\n          type=\"submit\"\n          variant=\"primary\"\n          size=\"md\"\n          ariaLabel=\"Send\"\n          disabled={disabled || !draft.trim()}\n          iconStart=\"Send\"\n        />\n      </form>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/Chat/Chat.module.css

@@ -1,4 +1,4 @@
-.panel {
+._panel_all2p_1 {
   box-sizing: border-box;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto auto;
@@ -13,13 +13,13 @@
   color: var(--text-primary);
 }
 
-.radiusNone {
+._radiusNone_all2p_16 {
   border-radius: var(--radius-0);
   border-block-width: 0;
   border-inline-end-width: 0;
 }
 
-.header {
+._header_all2p_22 {
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -27,14 +27,14 @@
   background: var(--fill-brand-subtle);
 }
 
-.identity {
+._identity_all2p_30 {
   flex: 1;
   display: grid;
   gap: var(--space-1);
   min-width: 0;
 }
 
-.title {
+._title_all2p_37 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-label);
@@ -42,7 +42,7 @@
   color: var(--text-primary);
 }
 
-.status {
+._status_all2p_45 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
@@ -51,21 +51,21 @@
   color: var(--text-secondary);
 }
 
-.statusDot {
+._statusDot_all2p_54 {
   width: var(--space-1);
   height: var(--space-1);
   border-radius: var(--radius-full);
   background: var(--status-success);
 }
 
-.headerActions {
+._headerActions_all2p_61 {
   display: flex;
   flex: none;
   align-items: center;
   gap: var(--space-1);
 }
 
-.thread {
+._thread_all2p_68 {
   display: grid;
   align-content: start;
   gap: var(--space-4);
@@ -74,28 +74,28 @@
   overflow-y: auto;
 }
 
-.empty {
+._empty_all2p_77 {
   margin: 0;
   color: var(--text-muted);
   font-family: var(--font-sans);
   font-size: var(--type-size-body-sm);
 }
 
-.message {
+._message_all2p_84 {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
 }
 
-.messageUser {
+._messageUser_all2p_90 {
   justify-content: flex-end;
 }
 
-.messageAssistant {
+._messageAssistant_all2p_94 {
   justify-content: flex-start;
 }
 
-.mark {
+._mark_all2p_98 {
   flex: none;
   width: var(--space-5);
   height: var(--space-5);
@@ -103,14 +103,14 @@
   background: var(--fill-brand);
 }
 
-.body {
+._body_all2p_106 {
   display: grid;
   gap: var(--space-1);
   min-width: 0;
   max-width: 85%;
 }
 
-.copy {
+._copy_all2p_113 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-body-sm);
@@ -118,28 +118,28 @@
   color: var(--text-primary);
 }
 
-.messageUser .copy {
+._messageUser_all2p_90 ._copy_all2p_113 {
   text-align: right;
 }
 
-.timestamp {
+._timestamp_all2p_125 {
   font-family: var(--font-sans);
   font-size: var(--type-size-caption);
   color: var(--text-muted);
 }
 
-.messageUser .timestamp {
+._messageUser_all2p_90 ._timestamp_all2p_125 {
   text-align: right;
 }
 
-.suggestions {
+._suggestions_all2p_135 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
   padding: 0 var(--space-4) var(--space-3);
 }
 
-.composer {
+._composer_all2p_142 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--space-2);

package/dist/ui/Chat/Chat.module.js

@@ -0,0 +1,27 @@
+import "./Chat.module.css";
+//#region ui/Chat/Chat.module.css
+var e = "_panel_all2p_1", t = "_radiusNone_all2p_16", n = "_header_all2p_22", r = "_identity_all2p_30", i = "_title_all2p_37", a = "_status_all2p_45", o = "_statusDot_all2p_54", s = "_headerActions_all2p_61", c = "_thread_all2p_68", l = "_empty_all2p_77", u = "_message_all2p_84", d = "_messageUser_all2p_90", f = "_messageAssistant_all2p_94", p = "_mark_all2p_98", m = "_body_all2p_106", h = "_copy_all2p_113", g = "_timestamp_all2p_125", _ = "_suggestions_all2p_135", v = "_composer_all2p_142", y = {
+	panel: e,
+	radiusNone: t,
+	header: n,
+	identity: r,
+	title: i,
+	status: a,
+	statusDot: o,
+	headerActions: s,
+	thread: c,
+	empty: l,
+	message: u,
+	messageUser: d,
+	messageAssistant: f,
+	mark: p,
+	body: m,
+	copy: h,
+	timestamp: g,
+	suggestions: _,
+	composer: v
+};
+//#endregion
+export { m as body, v as composer, h as copy, y as default, l as empty, n as header, s as headerActions, r as identity, p as mark, u as message, f as messageAssistant, d as messageUser, e as panel, t as radiusNone, a as status, o as statusDot, _ as suggestions, c as thread, g as timestamp, i as title };
+
+//# sourceMappingURL=Chat.module.js.map

package/dist/ui/Chat/Chat.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.module.js","names":[],"sources":["../../../ui/Chat/Chat.module.css"],"sourcesContent":[".panel {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto auto;\n  width: 100%;\n  min-block-size: 32rem;\n  block-size: 100%;\n  max-block-size: 100%;\n  overflow: hidden;\n  border: var(--border-width-thin) solid var(--border-faint);\n  border-radius: var(--radius-surface-lg);\n  background: var(--surface-card);\n  color: var(--text-primary);\n}\n\n.radiusNone {\n  border-radius: var(--radius-0);\n  border-block-width: 0;\n  border-inline-end-width: 0;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-brand-subtle);\n}\n\n.identity {\n  flex: 1;\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-label);\n  font-weight: var(--type-weight-heading);\n  color: var(--text-primary);\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-caption);\n  color: var(--text-secondary);\n}\n\n.statusDot {\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: var(--radius-full);\n  background: var(--status-success);\n}\n\n.headerActions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n}\n\n.thread {\n  display: grid;\n  align-content: start;\n  gap: var(--space-4);\n  min-block-size: 0;\n  padding: var(--space-4);\n  overflow-y: auto;\n}\n\n.empty {\n  margin: 0;\n  color: var(--text-muted);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n}\n\n.message {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n}\n\n.messageUser {\n  justify-content: flex-end;\n}\n\n.messageAssistant {\n  justify-content: flex-start;\n}\n\n.mark {\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  border-radius: var(--radius-full);\n  background: var(--fill-brand);\n}\n\n.body {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n  max-width: 85%;\n}\n\n.copy {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  line-height: var(--type-line-body);\n  color: var(--text-primary);\n}\n\n.messageUser .copy {\n  text-align: right;\n}\n\n.timestamp {\n  font-family: var(--font-sans);\n  font-size: var(--type-size-caption);\n  color: var(--text-muted);\n}\n\n.messageUser .timestamp {\n  text-align: right;\n}\n\n.suggestions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  padding: 0 var(--space-4) var(--space-3);\n}\n\n.composer {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: var(--space-2);\n  align-items: center;\n  padding: var(--space-3) var(--space-4) var(--space-4);\n  border-top: var(--border-width-thin) solid var(--border-faint);\n}\n"],"mappings":""}

package/dist/ui/Chat/Chat.types.d.ts

@@ -0,0 +1,35 @@
+export type ChatMessageRole = "user" | "assistant";
+export interface ChatMessage {
+    id?: string;
+    role: ChatMessageRole;
+    content: string;
+    timestamp?: string;
+}
+export interface ChatMenuItem {
+    id?: string;
+    label: string;
+    tone?: "default" | "danger";
+    onSelect?: () => void;
+}
+export type ChatRadius = "lg" | "none";
+export interface ChatProps {
+    title?: string;
+    status?: string;
+    messages?: ChatMessage[];
+    suggestions?: string[];
+    placeholder?: string;
+    emptyState?: string;
+    isThinking?: boolean;
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onSend?: (message: string) => void;
+    onClose?: () => void;
+    closeLabel?: string;
+    menuItems?: ChatMenuItem[];
+    menuLabel?: string;
+    /** `lg` is the standalone card. `none` squares the panel and drops the outer block/end borders so Chat can sit flush in a workspace rail. */
+    radius?: ChatRadius;
+    className?: string;
+}

package/dist/ui/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export { Chat } from './Chat';
+export type { ChatMessage, ChatMessageRole, ChatMenuItem, ChatProps, ChatRadius } from './Chat.types';

package/dist/ui/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './Checkbox.types';
+export type { CheckboxProps, CheckboxSize } from './Checkbox.types';
+export declare function Checkbox({ id, label, ariaLabel, size, disabled, error, checked, defaultChecked, indeterminate, onChange, name, }: CheckboxProps): import("react").JSX.Element;

package/dist/ui/Checkbox/Checkbox.js

@@ -0,0 +1,64 @@
+"use client";
+import e from "./Checkbox.module.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { Check as i, Minus as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ui/Checkbox/Checkbox.tsx
+var c = {
+	sm: 12,
+	md: 14,
+	lg: 16
+};
+function l({ id: l, label: u, ariaLabel: d, size: f = "md", disabled: p = !1, error: m = !1, checked: h, defaultChecked: g = !1, indeterminate: _ = !1, onChange: v, name: y }) {
+	let b = n(null), x = typeof h == "boolean", [S, C] = r(g), w = x ? h : S, T = c[f];
+	return t(() => {
+		let e = b.current;
+		e && (e.indeterminate = !!_);
+	}, [_]), /* @__PURE__ */ s("label", {
+		className: `${e.label} ${e[f]}`,
+		htmlFor: l,
+		"data-disabled": p || void 0,
+		"data-error": m || void 0,
+		children: [
+			/* @__PURE__ */ o("input", {
+				ref: b,
+				className: e.input,
+				type: "checkbox",
+				id: l,
+				name: y,
+				disabled: p,
+				checked: x ? h : void 0,
+				defaultChecked: x ? void 0 : g,
+				onChange: (e) => {
+					x || C(e.target.checked), v?.(e.target.checked);
+				},
+				"aria-label": u ? void 0 : d,
+				"aria-invalid": m || void 0,
+				"aria-checked": _ ? "mixed" : void 0
+			}),
+			/* @__PURE__ */ o("span", {
+				className: e.box,
+				"aria-hidden": !0,
+				children: _ ? /* @__PURE__ */ o(a, {
+					className: e.icon,
+					size: T,
+					strokeWidth: 2.5,
+					color: "currentColor"
+				}) : w ? /* @__PURE__ */ o(i, {
+					className: e.icon,
+					size: T,
+					strokeWidth: 2.5,
+					color: "currentColor"
+				}) : null
+			}),
+			u ? /* @__PURE__ */ o("span", {
+				className: e.text,
+				children: u
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/ui/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../ui/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport type { CheckboxProps } from \"./Checkbox.types\";\nimport styles from \"./Checkbox.module.css\";\n\nexport type { CheckboxProps, CheckboxSize } from \"./Checkbox.types\";\n\nconst ICON_SIZE = { sm: 12, md: 14, lg: 16 } as const;\n\nexport function Checkbox({\n  id,\n  label,\n  ariaLabel,\n  size = \"md\",\n  disabled = false,\n  error = false,\n  checked,\n  defaultChecked = false,\n  indeterminate = false,\n  onChange,\n  name,\n}: CheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isControlled = typeof checked === \"boolean\";\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);\n  const isChecked = isControlled ? checked : uncontrolledChecked;\n  const iconPx = ICON_SIZE[size];\n\n  useEffect(() => {\n    const el = inputRef.current;\n    if (el) el.indeterminate = Boolean(indeterminate);\n  }, [indeterminate]);\n\n  return (\n    <label\n      className={`${styles.label} ${styles[size]}`}\n      htmlFor={id}\n      data-disabled={disabled || undefined}\n      data-error={error || undefined}\n    >\n      <input\n        ref={inputRef}\n        className={styles.input}\n        type=\"checkbox\"\n        id={id}\n        name={name}\n        disabled={disabled}\n        checked={isControlled ? checked : undefined}\n        defaultChecked={isControlled ? undefined : defaultChecked}\n        onChange={(event) => {\n          if (!isControlled) setUncontrolledChecked(event.target.checked);\n          onChange?.(event.target.checked);\n        }}\n        aria-label={label ? undefined : ariaLabel}\n        aria-invalid={error || undefined}\n        aria-checked={indeterminate ? \"mixed\" : undefined}\n      />\n      <span className={styles.box} aria-hidden>\n        {indeterminate ? (\n          <Minus className={styles.icon} size={iconPx} strokeWidth={2.5} color=\"currentColor\" />\n        ) : isChecked ? (\n          <Check className={styles.icon} size={iconPx} strokeWidth={2.5} color=\"currentColor\" />\n        ) : null}\n      </span>\n      {label ? <span className={styles.text}>{label}</span> : null}\n    </label>\n  );\n}\n"],"mappings":";;;;;;AASA,IAAM,IAAY;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;AAE3C,SAAgB,EAAS,EACvB,OACA,UACA,cACA,UAAO,MACP,cAAW,IACX,WAAQ,IACR,YACA,oBAAiB,IACjB,mBAAgB,IAChB,aACA,WACgB;CAChB,IAAM,IAAW,EAAyB,IAAI,GACxC,IAAe,OAAO,KAAY,WAClC,CAAC,GAAqB,KAA0B,EAAS,CAAc,GACvE,IAAY,IAAe,IAAU,GACrC,IAAS,EAAU;CAOzB,OALA,QAAgB;EACd,IAAM,IAAK,EAAS;EACpB,AAAI,MAAI,EAAG,gBAAgB,EAAQ;CACrC,GAAG,CAAC,CAAa,CAAC,GAGhB,kBAAC,SAAD;EACE,WAAW,GAAG,EAAO,MAAM,GAAG,EAAO;EACrC,SAAS;EACT,iBAAe,KAAY,KAAA;EAC3B,cAAY,KAAS,KAAA;EAJvB,UAAA;GAME,kBAAC,SAAD;IACE,KAAK;IACL,WAAW,EAAO;IAClB,MAAK;IACD;IACE;IACI;IACV,SAAS,IAAe,IAAU,KAAA;IAClC,gBAAgB,IAAe,KAAA,IAAY;IAC3C,WAAW,MAAU;KAEnB,AADK,KAAc,EAAuB,EAAM,OAAO,OAAO,GAC9D,IAAW,EAAM,OAAO,OAAO;IACjC;IACA,cAAY,IAAQ,KAAA,IAAY;IAChC,gBAAc,KAAS,KAAA;IACvB,gBAAc,IAAgB,UAAU,KAAA;GACzC,CAAA;GACD,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAK,eAAA;IAC1B,UAAA,IACC,kBAAC,GAAD;KAAO,WAAW,EAAO;KAAM,MAAM;KAAQ,aAAa;KAAK,OAAM;IAAgB,CAAA,IACnF,IACF,kBAAC,GAAD;KAAO,WAAW,EAAO;KAAM,MAAM;KAAQ,aAAa;KAAK,OAAM;IAAgB,CAAA,IACnF;GACA,CAAA;GACL,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAO,UAAA;GAAY,CAAA,IAAI;EACnD;;AAEX"}

package/{ui → dist/ui}/Checkbox/Checkbox.module.css

@@ -1,4 +1,4 @@
-.label {
+._label_9u2a2_1 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -9,12 +9,12 @@
   color: var(--text-primary);
 }
 
-.label[data-disabled] {
+._label_9u2a2_1[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.input {
+._input_9u2a2_17 {
   appearance: none;
   position: absolute;
   left: 0;
@@ -26,11 +26,11 @@
   z-index: 1;
 }
 
-.label[data-disabled] .input {
+._label_9u2a2_1[data-disabled] ._input_9u2a2_17 {
   cursor: not-allowed;
 }
 
-.box {
+._box_9u2a2_33 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -47,7 +47,7 @@
     color var(--motion-interaction-duration) var(--motion-interaction-easing);
 }
 
-.icon {
+._icon_9u2a2_50 {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -61,75 +61,75 @@
     opacity var(--motion-interaction-duration) var(--motion-interaction-easing);
 }
 
-.sm {
+._sm_9u2a2_64 {
   font-size: var(--type-size-caption);
 }
 
-.md {
+._md_9u2a2_68 {
   font-size: var(--type-size-body-sm);
 }
 
-.lg {
+._lg_9u2a2_72 {
   font-size: var(--type-size-body);
 }
 
-.sm .input,
-.sm .box {
+._sm_9u2a2_64 ._input_9u2a2_17,
+._sm_9u2a2_64 ._box_9u2a2_33 {
   width: 1rem;
   height: 1rem;
 }
 
-.md .input,
-.md .box {
+._md_9u2a2_68 ._input_9u2a2_17,
+._md_9u2a2_68 ._box_9u2a2_33 {
   width: 1.15rem;
   height: 1.15rem;
 }
 
-.lg .input,
-.lg .box {
+._lg_9u2a2_72 ._input_9u2a2_17,
+._lg_9u2a2_72 ._box_9u2a2_33 {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.input:checked + .box,
-.input:indeterminate + .box {
+._input_9u2a2_17:checked + ._box_9u2a2_33,
+._input_9u2a2_17:indeterminate + ._box_9u2a2_33 {
   background-color: var(--action-primary);
   border-color: var(--action-primary);
 }
 
-.input:checked + .box .icon,
-.input:indeterminate + .box .icon {
+._input_9u2a2_17:checked + ._box_9u2a2_33 ._icon_9u2a2_50,
+._input_9u2a2_17:indeterminate + ._box_9u2a2_33 ._icon_9u2a2_50 {
   transform: scale(1);
   opacity: 1;
 }
 
-.label[data-error] .box {
+._label_9u2a2_1[data-error] ._box_9u2a2_33 {
   border-color: var(--status-danger);
 }
 
-.label[data-error] .input:checked + .box,
-.label[data-error] .input:indeterminate + .box {
+._label_9u2a2_1[data-error] ._input_9u2a2_17:checked + ._box_9u2a2_33,
+._label_9u2a2_1[data-error] ._input_9u2a2_17:indeterminate + ._box_9u2a2_33 {
   background-color: var(--action-primary);
   border-color: var(--status-danger);
 }
 
-.input:focus-visible + .box {
+._input_9u2a2_17:focus-visible + ._box_9u2a2_33 {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.text {
+._text_9u2a2_121 {
   line-height: var(--type-line-body);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .box,
-  .icon {
+  ._box_9u2a2_33,
+  ._icon_9u2a2_50 {
     transition: none;
   }
 
-  .input:checked + .box .icon,
-  .input:indeterminate + .box .icon {
+  ._input_9u2a2_17:checked + ._box_9u2a2_33 ._icon_9u2a2_50,
+  ._input_9u2a2_17:indeterminate + ._box_9u2a2_33 ._icon_9u2a2_50 {
     transform: none;
   }
 }

package/dist/ui/Checkbox/Checkbox.module.js

@@ -0,0 +1,16 @@
+import "./Checkbox.module.css";
+//#region ui/Checkbox/Checkbox.module.css
+var e = "_label_9u2a2_1", t = "_input_9u2a2_17", n = "_box_9u2a2_33", r = "_icon_9u2a2_50", i = "_sm_9u2a2_64", a = "_md_9u2a2_68", o = "_lg_9u2a2_72", s = "_text_9u2a2_121", c = {
+	label: e,
+	input: t,
+	box: n,
+	icon: r,
+	sm: i,
+	md: a,
+	lg: o,
+	text: s
+};
+//#endregion
+export { n as box, c as default, r as icon, t as input, e as label, o as lg, a as md, i as sm, s as text };
+
+//# sourceMappingURL=Checkbox.module.js.map

package/dist/ui/Checkbox/Checkbox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.js","names":[],"sources":["../../../ui/Checkbox/Checkbox.module.css"],"sourcesContent":[".label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  cursor: pointer;\n  font-family: var(--font-sans);\n  font-weight: var(--type-weight-body);\n  color: var(--text-primary);\n}\n\n.label[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.input {\n  appearance: none;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.label[data-disabled] .input {\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border: var(--border-width-thin) solid var(--border-strong);\n  border-radius: var(--radius-control-sm);\n  background-color: var(--surface-card);\n  color: var(--action-on-primary);\n  transition:\n    border-color var(--motion-interaction-duration) var(--motion-interaction-easing),\n    background var(--motion-interaction-duration) var(--motion-interaction-easing),\n    color var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.icon {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  padding: 0.12rem;\n  transform-origin: center;\n  transform: scale(0);\n  opacity: 0;\n  transition:\n    transform var(--motion-expand-duration) var(--motion-ease-spring),\n    opacity var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.sm {\n  font-size: var(--type-size-caption);\n}\n\n.md {\n  font-size: var(--type-size-body-sm);\n}\n\n.lg {\n  font-size: var(--type-size-body);\n}\n\n.sm .input,\n.sm .box {\n  width: 1rem;\n  height: 1rem;\n}\n\n.md .input,\n.md .box {\n  width: 1.15rem;\n  height: 1.15rem;\n}\n\n.lg .input,\n.lg .box {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.input:checked + .box,\n.input:indeterminate + .box {\n  background-color: var(--action-primary);\n  border-color: var(--action-primary);\n}\n\n.input:checked + .box .icon,\n.input:indeterminate + .box .icon {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.label[data-error] .box {\n  border-color: var(--status-danger);\n}\n\n.label[data-error] .input:checked + .box,\n.label[data-error] .input:indeterminate + .box {\n  background-color: var(--action-primary);\n  border-color: var(--status-danger);\n}\n\n.input:focus-visible + .box {\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n.text {\n  line-height: var(--type-line-body);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .box,\n  .icon {\n    transition: none;\n  }\n\n  .input:checked + .box .icon,\n  .input:indeterminate + .box .icon {\n    transform: none;\n  }\n}\n"],"mappings":""}

package/dist/ui/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,14 @@
+export type CheckboxSize = "sm" | "md" | "lg";
+export interface CheckboxProps {
+    id: string;
+    label?: string;
+    ariaLabel?: string;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    name?: string;
+}

package/dist/ui/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox.types';

package/dist/ui/Collapsible/Collapsible.d.ts

@@ -0,0 +1,3 @@
+import { CollapsibleProps } from './Collapsible.types';
+export type { CollapsibleProps } from './Collapsible.types';
+export declare function Collapsible({ trigger, children, defaultOpen, open: openProp, onOpenChange, }: CollapsibleProps): import("react").JSX.Element;