wimui 0.1.0

package/dist/components/data-display/FAQSection/FAQSection.js

@@ -0,0 +1,42 @@
+"use client";
+import { Text as e } from "../../typography/Text/Text.js";
+import { Accordion as t } from "../Accordion/Accordion.js";
+import { Title as n } from "../../typography/Title/Title.js";
+import r from "./faq-section.module.js";
+import "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/data-display/FAQSection/FAQSection.tsx
+var s = ({ items: s, title: c, description: l, layout: u = "top", accordionProps: d, className: f }) => {
+	let p = !!(c || l);
+	return /* @__PURE__ */ o("section", {
+		className: i("wim-faq-section", r.root, r[`layout-${u}`], f),
+		children: [p && /* @__PURE__ */ o("div", {
+			className: r.header,
+			children: [c && /* @__PURE__ */ a(n, {
+				tag: "h2",
+				size: "xl",
+				className: r.title,
+				children: c
+			}), l && /* @__PURE__ */ a(e, {
+				content: l,
+				color: "text-secondary",
+				className: r.description
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: r.content,
+			children: /* @__PURE__ */ a(t, {
+				type: "multiple",
+				collapsible: !0,
+				...d,
+				className: i(r.accordion, d?.className),
+				children: s.map((e, n) => /* @__PURE__ */ o(t.Item, {
+					value: `faq-item-${n}`,
+					children: [/* @__PURE__ */ a(t.Trigger, { children: e.question }), /* @__PURE__ */ a(t.Content, { children: e.answer })]
+				}, n))
+			})
+		})]
+	});
+};
+//#endregion
+export { s as FAQSection };

package/dist/components/data-display/FAQSection/faq-section.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1qger_4`,t=`_header_1qger_15`,n=`_content_1qger_21`,r=`_title_1qger_28`,i=`_description_1qger_31`,a={root:e,"layout-left":`_layout-left_1qger_11`,header:t,content:n,title:r,description:i};exports.content=n,exports.default=a,exports.description=i,exports.header=t,exports.root=e,exports.title=r;

package/dist/components/data-display/FAQSection/faq-section.module.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/data-display/FAQSection/faq-section.module.scss
+var e = "_root_1qger_4", t = "_header_1qger_15", n = "_content_1qger_21", r = "_title_1qger_28", i = "_description_1qger_31", a = {
+	root: e,
+	"layout-left": "_layout-left_1qger_11",
+	header: t,
+	content: n,
+	title: r,
+	description: i
+};
+//#endregion
+export { n as content, a as default, i as description, t as header, e as root, r as title };

package/dist/components/data-display/InfiniteScroll/InfiniteScroll.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./infinite-scroll.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({children:e,hasMore:a=!1,loading:o=!1,onLoadMore:s,loader:c,threshold:l=250,className:u,container:d})=>{let f=(0,n.useRef)(null),p=(0,n.useCallback)(e=>{let[t]=e;t.isIntersecting&&a&&s()},[a,s]);return(0,n.useEffect)(()=>{let e={root:d?.current||null,rootMargin:`0px 0px ${l}px 0px`,threshold:0},t=new IntersectionObserver(p,e),n=f.current;return n&&t.observe(n),()=>{n&&t.unobserve(n)}},[p,d,l]),(0,i.jsxs)(`div`,{className:(0,r.default)(`wim-infinite-scroll`,t.default.root,u),children:[e,o&&(0,i.jsx)(`div`,{role:`status`,className:t.default.loading,children:c}),a&&(0,i.jsx)(`div`,{ref:f,className:t.default.loader})]})};exports.InfiniteScroll=a;

package/dist/components/data-display/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface InfiniteScrollProps {
+    /** Content to display. */
+    children: React.ReactNode;
+    /** Whether there is more data to load. */
+    hasMore?: boolean;
+    /** Whether data is currently loading. */
+    loading?: boolean;
+    /** Callback to load the next batch of data. */
+    onLoadMore: () => void;
+    /** Element shown while loading. */
+    loader?: React.ReactNode;
+    /** Scroll threshold (px). onLoadMore is called when the scroll position gets this close to the bottom. */
+    threshold?: number;
+    /** Additional class names. */
+    className?: string;
+    /** Target whose scroll events are observed (defaults to window). */
+    container?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * Infinite-scroll component that automatically loads content when the user
+ * reaches the bottom of the page.
+ */
+export declare const InfiniteScroll: ({ children, hasMore, loading, onLoadMore, loader, threshold, className, container, }: InfiniteScrollProps) => React.JSX.Element;

package/dist/components/data-display/InfiniteScroll/InfiniteScroll.js

@@ -0,0 +1,42 @@
+"use client";
+import e from "./infinite-scroll.module.js";
+import { useCallback as t, useEffect as n, useRef as r } from "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/data-display/InfiniteScroll/InfiniteScroll.tsx
+var s = ({ children: s, hasMore: c = !1, loading: l = !1, onLoadMore: u, loader: d, threshold: f = 250, className: p, container: m }) => {
+	let h = r(null), g = t((e) => {
+		let [t] = e;
+		t.isIntersecting && c && u();
+	}, [c, u]);
+	return n(() => {
+		let e = {
+			root: m?.current || null,
+			rootMargin: `0px 0px ${f}px 0px`,
+			threshold: 0
+		}, t = new IntersectionObserver(g, e), n = h.current;
+		return n && t.observe(n), () => {
+			n && t.unobserve(n);
+		};
+	}, [
+		g,
+		m,
+		f
+	]), /* @__PURE__ */ o("div", {
+		className: i("wim-infinite-scroll", e.root, p),
+		children: [
+			s,
+			l && /* @__PURE__ */ a("div", {
+				role: "status",
+				className: e.loading,
+				children: d
+			}),
+			c && /* @__PURE__ */ a("div", {
+				ref: h,
+				className: e.loader
+			})
+		]
+	});
+};
+//#endregion
+export { s as InfiniteScroll };

package/dist/components/data-display/InfiniteScroll/infinite-scroll.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_m60k5_2`,t=`_loader_m60k5_5`,n={root:e,loader:t};exports.default=n,exports.loader=t,exports.root=e;

package/dist/components/data-display/InfiniteScroll/infinite-scroll.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/data-display/InfiniteScroll/infinite-scroll.module.scss
+var e = "_root_m60k5_2", t = "_loader_m60k5_5", n = {
+	root: e,
+	loader: t
+};
+//#endregion
+export { n as default, t as loader, e as root };

package/dist/components/data-display/JsonDiffViewer/JsonDiffViewer.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../ai/CodeDiffViewer/CodeDiffViewer.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e,t){try{return JSON.stringify(e,null,t)??`null`}catch{return String(e)}}var o=n.default.forwardRef(({before:e,after:o,indent:s=2,...c},l)=>(0,i.jsx)(t.CodeDiffViewer,{ref:l,before:(0,n.useMemo)(()=>a(e,s),[e,s]),after:(0,n.useMemo)(()=>a(o,s),[o,s]),language:`json`,...c,className:(0,r.default)(`wim-json-diff-viewer`,c.className)}));o.displayName=`JsonDiffViewer`,exports.JsonDiffViewer=o;

package/dist/components/data-display/JsonDiffViewer/JsonDiffViewer.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { DiffView, CodeDiffViewerProps } from '../../ai/CodeDiffViewer/CodeDiffViewer';
+export interface JsonDiffViewerProps extends Omit<CodeDiffViewerProps, "before" | "after" | "language"> {
+    /** JSON value before the change */
+    before: unknown;
+    /** JSON value after the change */
+    after: unknown;
+    /** Indentation spaces for JSON.stringify (default: 2) */
+    indent?: number;
+    /** Display mode inherited from CodeDiffViewer */
+    view?: DiffView;
+}
+/**
+ * JsonDiffViewer compares two JSON values side-by-side or in unified form.
+ * Delegates rendering to CodeDiffViewer with language="json".
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const JsonDiffViewer: React.ForwardRefExoticComponent<JsonDiffViewerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/JsonDiffViewer/JsonDiffViewer.js

@@ -0,0 +1,24 @@
+"use client";
+import { CodeDiffViewer as e } from "../../ai/CodeDiffViewer/CodeDiffViewer.js";
+import t, { useMemo as n } from "react";
+import r from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/data-display/JsonDiffViewer/JsonDiffViewer.tsx
+function a(e, t) {
+	try {
+		return JSON.stringify(e, null, t) ?? "null";
+	} catch {
+		return String(e);
+	}
+}
+var o = t.forwardRef(({ before: t, after: o, indent: s = 2, ...c }, l) => /* @__PURE__ */ i(e, {
+	ref: l,
+	before: n(() => a(t, s), [t, s]),
+	after: n(() => a(o, s), [o, s]),
+	language: "json",
+	...c,
+	className: r("wim-json-diff-viewer", c.className)
+}));
+o.displayName = "JsonDiffViewer";
+//#endregion
+export { o as JsonDiffViewer };

package/dist/components/data-display/JsonViewer/JsonViewer.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/chevron-down.cjs"),r=require("../../../icon/chevron-right.cjs"),i=require("../../../icon/plus.cjs"),a=require("../../../icon/trash.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("../../form/IconButton/IconButton.cjs"),c=require("./json-viewer.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=(e,t,n)=>{if(t.length===0)return n;let[r,...i]=t;if(Array.isArray(e)){let t=[...e];return t[r]=f(e[r],i,n),t}else if(typeof e==`object`&&e)return{...e,[r]:f(e[r],i,n)};return e},p=(e,t)=>{if(t.length===0)return e;let[n,...r]=t;if(t.length===1){if(Array.isArray(e))return e.filter((e,t)=>t!==n);if(typeof e==`object`&&e){let t={...e};return delete t[n],t}return e}if(Array.isArray(e)){let t=[...e];return t[n]=p(e[n],r),t}else if(typeof e==`object`&&e)return{...e,[n]:p(e[n],r)};return e},m=(e,t,n)=>{if(t.length===0)return Array.isArray(e)?[...e,``]:typeof e==`object`&&e?{...e,[n||`new_key`]:``}:e;let[r,...i]=t;if(Array.isArray(e)){let t=[...e];return t[r]=m(e[r],i,n),t}else if(typeof e==`object`&&e)return{...e,[r]:m(e[r],i,n)};return e},h=({value:e,onSave:t,className:n})=>{let[r,i]=(0,l.useState)(!1),[a,o]=(0,l.useState)(String(e)),s=l.default.useRef(null);l.default.useEffect(()=>{r&&s.current&&s.current.focus()},[r]);let f=()=>{i(!1);let n=a;typeof e==`number`&&(n=Number(a)),typeof e==`boolean`&&(n=a===`true`),a===`null`&&(n=null),t(n)};return r?(0,d.jsx)(`input`,{ref:s,className:c.default.input,value:a,onChange:e=>o(e.target.value),onBlur:f,onKeyDown:e=>{e.key===`Enter`&&f(),e.key===`Escape`&&i(!1)}}):(0,d.jsx)(`span`,{role:`button`,tabIndex:0,className:(0,u.default)(c.default.value,n,c.default.editable),onClick:()=>i(!0),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),i(!0))},children:typeof e==`string`?`"${e}"`:String(e)})},g=({label:e,value:s,depth:f,currentDepth:p,path:m,editable:_,onUpdate:v,onDelete:y,onAdd:b})=>{let{t:x}=t.useWimTranslation(),[S,C]=(0,l.useState)(p<f),w=typeof s==`object`&&!!s,T=Array.isArray(s),E=()=>C(!S),D=()=>_?(0,d.jsxs)(`div`,{className:c.default.actions,children:[w&&(0,d.jsx)(`button`,{type:`button`,className:c.default.nodeAction,onClick:e=>{e.stopPropagation(),b(m)},title:x(`jsonViewer.addItem`),"aria-label":x(`jsonViewer.addItem`),children:(0,d.jsx)(o.Icon,{component:i.default,size:`xs`})}),p>0&&(0,d.jsx)(`button`,{type:`button`,className:(0,u.default)(c.default.nodeAction,c.default.delete),onClick:e=>{e.stopPropagation(),y(m)},title:x(`jsonViewer.deleteItem`),"aria-label":x(`jsonViewer.deleteItem`),children:(0,d.jsx)(o.Icon,{component:a.default,size:`xs`})})]}):null;if(!w)return(0,d.jsxs)(`div`,{className:c.default.node,children:[e&&(0,d.jsxs)(`span`,{className:c.default.key,children:[e,`:`]}),_?(0,d.jsx)(h,{value:s,onSave:e=>v(m,e),className:c.default[s===null?`null`:typeof s]}):(0,d.jsx)(`span`,{className:(0,u.default)(c.default.value,c.default[s===null?`null`:typeof s]),children:typeof s==`string`?`"${s}"`:String(s)}),D()]});let O=T?s.length===0:Object.keys(s).length===0;return(0,d.jsxs)(`div`,{className:c.default.node,children:[(0,d.jsxs)(`div`,{className:c.default.headerRow,children:[(0,d.jsxs)(`div`,{role:`button`,tabIndex:O?-1:0,className:(0,u.default)(c.default.header,!O&&c.default.collapsible),onClick:O?void 0:E,onKeyDown:e=>{!O&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),E())},children:[!O&&(0,d.jsx)(o.Icon,{component:S?n.default:r.default,size:`sm`,className:c.default.toggle}),e&&(0,d.jsxs)(`span`,{className:c.default.key,children:[e,`:`]}),(0,d.jsx)(`span`,{className:c.default.bracket,children:T?`[`:`{`}),!S&&!O&&(0,d.jsx)(`span`,{className:c.default.ellipsis,children:`...`}),!S&&(0,d.jsx)(`span`,{className:c.default.bracket,children:T?`]`:`}`}),S&&(0,d.jsx)(`span`,{className:c.default.count,children:T?`${s.length} items`:`${Object.keys(s).length} keys`})]}),D()]}),S&&!O&&(0,d.jsx)(`div`,{className:c.default.children,children:T?s.map((e,t)=>(0,d.jsx)(g,{value:e,depth:f,currentDepth:p+1,path:[...m,t],editable:_,onUpdate:v,onDelete:y,onAdd:b},t)):Object.entries(s).map(([e,t])=>(0,d.jsx)(g,{label:e,value:t,depth:f,currentDepth:p+1,path:[...m,e],editable:_,onUpdate:v,onDelete:y,onAdd:b},e))}),S&&(0,d.jsx)(`div`,{className:c.default.footer,children:(0,d.jsx)(`span`,{className:c.default.bracket,children:T?`]`:`}`})})]})},_=l.default.forwardRef(({data:e,expandDepth:n=1,showCopy:r=!0,showToolbar:i=!0,editable:a=!1,onChange:o,className:h,..._},v)=>{let{t:y}=t.useWimTranslation(),[b,x]=(0,l.useState)(e),[S,C]=(0,l.useState)(e),w=(0,l.useId)();e!==S&&(x(e),C(e));let T=(0,l.useCallback)((e,t)=>{x(n=>{let r=f(n,e,t);return o?.(r),r})},[o]),E=(0,l.useCallback)(e=>{x(t=>{let n=p(t,e);return o?.(n),n})},[o]),D=(0,l.useCallback)(e=>{x(t=>{let n=m(t,e);return o?.(n),n})},[o]),O=()=>{navigator.clipboard.writeText(JSON.stringify(b,null,2))};return(0,d.jsxs)(`div`,{ref:v,className:(0,u.default)(`wim-json-viewer`,c.default.root,h),"aria-labelledby":i?w:void 0,..._,children:[i&&(0,d.jsxs)(`div`,{className:c.default.toolbar,children:[(0,d.jsx)(`span`,{id:w,className:c.default.title,children:y(a?`jsonViewer.edit`:`jsonViewer.title`)}),r&&(0,d.jsx)(s.IconButton,{iconName:`CopyIcon`,variant:`ghost`,size:`sm`,onClick:O,"aria-label":y(`jsonViewer.copy`)})]}),(0,d.jsx)(`div`,{className:c.default.tree,children:(0,d.jsx)(g,{value:b,depth:n,currentDepth:0,path:[],editable:a,onUpdate:T,onDelete:E,onAdd:D})})]})});_.displayName=`JsonViewer`,exports.JsonViewer=_;

package/dist/components/data-display/JsonViewer/JsonViewer.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface JsonViewerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The JSON data to display */
+    data: unknown;
+    /** Initial depth to expand */
+    expandDepth?: number;
+    /** If true, show copy button */
+    showCopy?: boolean;
+    /** If true, show toolbar */
+    showToolbar?: boolean;
+    /** If true, the data can be edited inline */
+    editable?: boolean;
+    /** Callback when data changes */
+    onChange?: (data: unknown) => void;
+}
+/**
+ * JsonViewer component displays JSON data in a recursive, interactive tree format.
+ * Supports inline editing when `editable` is true.
+ */
+export declare const JsonViewer: React.ForwardRefExoticComponent<JsonViewerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/JsonViewer/JsonViewer.js

@@ -0,0 +1,265 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/chevron-down.js";
+import n from "../../../icon/chevron-right.js";
+import r from "../../../icon/plus.js";
+import i from "../../../icon/trash.js";
+import { Icon as a } from "../../media/Icon/Icon.js";
+import { IconButton as o } from "../../form/IconButton/IconButton.js";
+import s from "./json-viewer.module.js";
+import c, { useCallback as l, useId as u, useState as d } from "react";
+import f from "classnames";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/data-display/JsonViewer/JsonViewer.tsx
+var h = (e, t, n) => {
+	if (t.length === 0) return n;
+	let [r, ...i] = t;
+	if (Array.isArray(e)) {
+		let t = [...e];
+		return t[r] = h(e[r], i, n), t;
+	} else if (typeof e == "object" && e) return {
+		...e,
+		[r]: h(e[r], i, n)
+	};
+	return e;
+}, g = (e, t) => {
+	if (t.length === 0) return e;
+	let [n, ...r] = t;
+	if (t.length === 1) {
+		if (Array.isArray(e)) return e.filter((e, t) => t !== n);
+		if (typeof e == "object" && e) {
+			let t = { ...e };
+			return delete t[n], t;
+		}
+		return e;
+	}
+	if (Array.isArray(e)) {
+		let t = [...e];
+		return t[n] = g(e[n], r), t;
+	} else if (typeof e == "object" && e) return {
+		...e,
+		[n]: g(e[n], r)
+	};
+	return e;
+}, _ = (e, t, n) => {
+	if (t.length === 0) return Array.isArray(e) ? [...e, ""] : typeof e == "object" && e ? {
+		...e,
+		[n || "new_key"]: ""
+	} : e;
+	let [r, ...i] = t;
+	if (Array.isArray(e)) {
+		let t = [...e];
+		return t[r] = _(e[r], i, n), t;
+	} else if (typeof e == "object" && e) return {
+		...e,
+		[r]: _(e[r], i, n)
+	};
+	return e;
+}, v = ({ value: e, onSave: t, className: n }) => {
+	let [r, i] = d(!1), [a, o] = d(String(e)), l = c.useRef(null);
+	c.useEffect(() => {
+		r && l.current && l.current.focus();
+	}, [r]);
+	let u = () => {
+		i(!1);
+		let n = a;
+		typeof e == "number" && (n = Number(a)), typeof e == "boolean" && (n = a === "true"), a === "null" && (n = null), t(n);
+	};
+	return r ? /* @__PURE__ */ p("input", {
+		ref: l,
+		className: s.input,
+		value: a,
+		onChange: (e) => o(e.target.value),
+		onBlur: u,
+		onKeyDown: (e) => {
+			e.key === "Enter" && u(), e.key === "Escape" && i(!1);
+		}
+	}) : /* @__PURE__ */ p("span", {
+		role: "button",
+		tabIndex: 0,
+		className: f(s.value, n, s.editable),
+		onClick: () => i(!0),
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(!0));
+		},
+		children: typeof e == "string" ? `"${e}"` : String(e)
+	});
+}, y = ({ label: o, value: c, depth: l, currentDepth: u, path: h, editable: g, onUpdate: _, onDelete: b, onAdd: x }) => {
+	let { t: S } = e(), [C, w] = d(u < l), T = typeof c == "object" && !!c, E = Array.isArray(c), D = () => w(!C), O = () => g ? /* @__PURE__ */ m("div", {
+		className: s.actions,
+		children: [T && /* @__PURE__ */ p("button", {
+			type: "button",
+			className: s.nodeAction,
+			onClick: (e) => {
+				e.stopPropagation(), x(h);
+			},
+			title: S("jsonViewer.addItem"),
+			"aria-label": S("jsonViewer.addItem"),
+			children: /* @__PURE__ */ p(a, {
+				component: r,
+				size: "xs"
+			})
+		}), u > 0 && /* @__PURE__ */ p("button", {
+			type: "button",
+			className: f(s.nodeAction, s.delete),
+			onClick: (e) => {
+				e.stopPropagation(), b(h);
+			},
+			title: S("jsonViewer.deleteItem"),
+			"aria-label": S("jsonViewer.deleteItem"),
+			children: /* @__PURE__ */ p(a, {
+				component: i,
+				size: "xs"
+			})
+		})]
+	}) : null;
+	if (!T) return /* @__PURE__ */ m("div", {
+		className: s.node,
+		children: [
+			o && /* @__PURE__ */ m("span", {
+				className: s.key,
+				children: [o, ":"]
+			}),
+			g ? /* @__PURE__ */ p(v, {
+				value: c,
+				onSave: (e) => _(h, e),
+				className: s[c === null ? "null" : typeof c]
+			}) : /* @__PURE__ */ p("span", {
+				className: f(s.value, s[c === null ? "null" : typeof c]),
+				children: typeof c == "string" ? `"${c}"` : String(c)
+			}),
+			O()
+		]
+	});
+	let k = E ? c.length === 0 : Object.keys(c).length === 0;
+	return /* @__PURE__ */ m("div", {
+		className: s.node,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: s.headerRow,
+				children: [/* @__PURE__ */ m("div", {
+					role: "button",
+					tabIndex: k ? -1 : 0,
+					className: f(s.header, !k && s.collapsible),
+					onClick: k ? void 0 : D,
+					onKeyDown: (e) => {
+						!k && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+					},
+					children: [
+						!k && /* @__PURE__ */ p(a, {
+							component: C ? t : n,
+							size: "sm",
+							className: s.toggle
+						}),
+						o && /* @__PURE__ */ m("span", {
+							className: s.key,
+							children: [o, ":"]
+						}),
+						/* @__PURE__ */ p("span", {
+							className: s.bracket,
+							children: E ? "[" : "{"
+						}),
+						!C && !k && /* @__PURE__ */ p("span", {
+							className: s.ellipsis,
+							children: "..."
+						}),
+						!C && /* @__PURE__ */ p("span", {
+							className: s.bracket,
+							children: E ? "]" : "}"
+						}),
+						C && /* @__PURE__ */ p("span", {
+							className: s.count,
+							children: E ? `${c.length} items` : `${Object.keys(c).length} keys`
+						})
+					]
+				}), O()]
+			}),
+			C && !k && /* @__PURE__ */ p("div", {
+				className: s.children,
+				children: E ? c.map((e, t) => /* @__PURE__ */ p(y, {
+					value: e,
+					depth: l,
+					currentDepth: u + 1,
+					path: [...h, t],
+					editable: g,
+					onUpdate: _,
+					onDelete: b,
+					onAdd: x
+				}, t)) : Object.entries(c).map(([e, t]) => /* @__PURE__ */ p(y, {
+					label: e,
+					value: t,
+					depth: l,
+					currentDepth: u + 1,
+					path: [...h, e],
+					editable: g,
+					onUpdate: _,
+					onDelete: b,
+					onAdd: x
+				}, e))
+			}),
+			C && /* @__PURE__ */ p("div", {
+				className: s.footer,
+				children: /* @__PURE__ */ p("span", {
+					className: s.bracket,
+					children: E ? "]" : "}"
+				})
+			})
+		]
+	});
+}, b = c.forwardRef(({ data: t, expandDepth: n = 1, showCopy: r = !0, showToolbar: i = !0, editable: a = !1, onChange: c, className: v, ...b }, x) => {
+	let { t: S } = e(), [C, w] = d(t), [T, E] = d(t), D = u();
+	t !== T && (w(t), E(t));
+	let O = l((e, t) => {
+		w((n) => {
+			let r = h(n, e, t);
+			return c?.(r), r;
+		});
+	}, [c]), k = l((e) => {
+		w((t) => {
+			let n = g(t, e);
+			return c?.(n), n;
+		});
+	}, [c]), A = l((e) => {
+		w((t) => {
+			let n = _(t, e);
+			return c?.(n), n;
+		});
+	}, [c]), j = () => {
+		navigator.clipboard.writeText(JSON.stringify(C, null, 2));
+	};
+	return /* @__PURE__ */ m("div", {
+		ref: x,
+		className: f("wim-json-viewer", s.root, v),
+		"aria-labelledby": i ? D : void 0,
+		...b,
+		children: [i && /* @__PURE__ */ m("div", {
+			className: s.toolbar,
+			children: [/* @__PURE__ */ p("span", {
+				id: D,
+				className: s.title,
+				children: S(a ? "jsonViewer.edit" : "jsonViewer.title")
+			}), r && /* @__PURE__ */ p(o, {
+				iconName: "CopyIcon",
+				variant: "ghost",
+				size: "sm",
+				onClick: j,
+				"aria-label": S("jsonViewer.copy")
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: s.tree,
+			children: /* @__PURE__ */ p(y, {
+				value: C,
+				depth: n,
+				currentDepth: 0,
+				path: [],
+				editable: a,
+				onUpdate: O,
+				onDelete: k,
+				onAdd: A
+			})
+		})]
+	});
+});
+b.displayName = "JsonViewer";
+//#endregion
+export { b as JsonViewer };

package/dist/components/data-display/JsonViewer/json-viewer.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_xnml7_3`,t=`_toolbar_xnml7_12`,n=`_title_xnml7_20`,r=`_tree_xnml7_27`,i=`_node_xnml7_32`,a=`_actions_xnml7_38`,o=`_headerRow_xnml7_38`,s=`_header_xnml7_38`,c=`_collapsible_xnml7_52`,l=`_toggle_xnml7_55`,u=`_nodeAction_xnml7_66`,d=`_input_xnml7_86`,f=`_keyInput_xnml7_97`,p=`_children_xnml7_104`,m=`_footer_xnml7_108`,h=`_key_xnml7_97`,g=`_value_xnml7_115`,_=`_string_xnml7_115`,v=`_number_xnml7_118`,y=`_boolean_xnml7_121`,b=`_bracket_xnml7_127`,x=`_count_xnml7_131`,S=`_ellipsis_xnml7_136`,C={root:e,toolbar:t,title:n,tree:r,node:i,actions:a,headerRow:o,header:s,collapsible:c,toggle:l,nodeAction:u,delete:`_delete_xnml7_82`,input:d,keyInput:f,children:p,footer:m,key:h,value:g,string:_,number:v,boolean:y,null:`_null_xnml7_124`,bracket:b,count:x,ellipsis:S};exports.actions=a,exports.boolean=y,exports.bracket=b,exports.children=p,exports.collapsible=c,exports.count=x,exports.default=C,exports.ellipsis=S,exports.footer=m,exports.header=s,exports.headerRow=o,exports.input=d,exports.key=h,exports.keyInput=f,exports.node=i,exports.nodeAction=u,exports.number=v,exports.root=e,exports.string=_,exports.title=n,exports.toggle=l,exports.toolbar=t,exports.tree=r,exports.value=g;

package/dist/components/data-display/JsonViewer/json-viewer.module.js

@@ -0,0 +1,31 @@
+"use client";
+//#region src/components/data-display/JsonViewer/json-viewer.module.scss
+var e = "_root_xnml7_3", t = "_toolbar_xnml7_12", n = "_title_xnml7_20", r = "_tree_xnml7_27", i = "_node_xnml7_32", a = "_actions_xnml7_38", o = "_headerRow_xnml7_38", s = "_header_xnml7_38", c = "_collapsible_xnml7_52", l = "_toggle_xnml7_55", u = "_nodeAction_xnml7_66", d = "_input_xnml7_86", f = "_keyInput_xnml7_97", p = "_children_xnml7_104", m = "_footer_xnml7_108", h = "_key_xnml7_97", g = "_value_xnml7_115", _ = "_string_xnml7_115", v = "_number_xnml7_118", y = "_boolean_xnml7_121", b = "_bracket_xnml7_127", x = "_count_xnml7_131", S = "_ellipsis_xnml7_136", C = {
+	root: e,
+	toolbar: t,
+	title: n,
+	tree: r,
+	node: i,
+	actions: a,
+	headerRow: o,
+	header: s,
+	collapsible: c,
+	toggle: l,
+	nodeAction: u,
+	delete: "_delete_xnml7_82",
+	input: d,
+	keyInput: f,
+	children: p,
+	footer: m,
+	key: h,
+	value: g,
+	string: _,
+	number: v,
+	boolean: y,
+	null: "_null_xnml7_124",
+	bracket: b,
+	count: x,
+	ellipsis: S
+};
+//#endregion
+export { a as actions, y as boolean, b as bracket, p as children, c as collapsible, x as count, C as default, S as ellipsis, m as footer, s as header, o as headerRow, d as input, h as key, f as keyInput, i as node, u as nodeAction, v as number, e as root, _ as string, n as title, l as toggle, t as toolbar, r as tree, g as value };

package/dist/components/data-display/Kanban/Kanban.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/more-horizontal.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./kanban.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.forwardRef)(({columns:e,onMove:n,onCardMove:r,className:c,forceMobileUI:u=!1,children:d,asChild:p=!1,...h},g)=>{let[_,v]=(0,a.useState)(null),[y,b]=(0,a.useState)(null),[x,S]=(0,a.useState)(null),C=n||r,w=(e,t,n)=>{v({itemId:t,columnId:n}),e.dataTransfer.setData(`text/plain`,`${n}:${t}`),e.dataTransfer.effectAllowed=`move`},T=(e,t)=>{e.preventDefault(),b(t)},E=(e,t)=>{e.preventDefault(),b(null);let[n,r]=e.dataTransfer.getData(`text/plain`).split(`:`);C?.(r,n,t),v(null)},D=(e,t,n)=>{C?.(e,t,n),S(null)},O=a.default.useMemo(()=>{if(e)return e;let t=[];return a.default.Children.forEach(d,e=>{if(a.default.isValidElement(e)){let n=e.props;typeof n.id==`string`&&typeof n.title==`string`&&t.push({id:n.id,title:n.title,items:[]})}}),t},[d,e]),k=()=>d||(e?e.map(e=>(0,s.jsx)(m,{id:e.id,title:e.title,cardCount:e.items.length,children:e.items.map(e=>(0,s.jsx)(f,{id:e.id,children:e.content},e.id))},e.id)):null),A=p?t.Root:`div`;return(0,s.jsx)(l.Provider,{value:{draggedItem:_,dragOverColumn:y,setDragOverColumn:b,handleDragStart:w,handleDragOver:T,handleDrop:E,handleMobileMove:D,activeMobileMenu:x,setActiveMobileMenu:S,columns:O},children:(0,s.jsx)(A,{...h,ref:g,className:(0,o.default)(`wim-kanban`,i.default.root,u&&i.default.touch,c),role:`region`,"aria-label":`Kanban Board`,children:(0,s.jsx)(t.Slottable,{children:k()})})})}),l=a.default.createContext(null),u=()=>{let e=a.default.useContext(l);if(!e)throw Error(`Kanban compound components must be used within Kanban`);return e},d=({id:e,title:t,cardCount:n,children:r,className:a})=>{let{dragOverColumn:c,handleDragOver:l,handleDrop:d,setDragOverColumn:f}=u();return(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.column,{[i.default.dragOver]:c===e},a),onDragOver:t=>l(t,e),onDrop:t=>d(t,e),onDragLeave:()=>f(null),children:[(0,s.jsxs)(`div`,{className:i.default.columnHeader,children:[(0,s.jsx)(`div`,{className:i.default.columnTitle,children:t}),n!==void 0&&(0,s.jsx)(`div`,{className:i.default.columnCount,"aria-label":`${n} cards`,children:n})]}),(0,s.jsx)(`div`,{className:i.default.columnBody,children:r})]})},f=({id:e,children:t,disabled:c,className:l})=>{let{draggedItem:d,handleDragStart:f,handleMobileMove:m,activeMobileMenu:h,setActiveMobileMenu:g,columns:_}=u(),v=a.default.useContext(p);return(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.card,{[i.default.dragging]:d?.itemId===e,[i.default.disabled]:c},l),draggable:!c,onDragStart:t=>v&&f(t,e,v),children:[(0,s.jsx)(`div`,{className:i.default.cardContent,children:t}),(0,s.jsxs)(`div`,{className:i.default.cardMove,children:[(0,s.jsx)(`button`,{type:`button`,className:i.default.cardMoveBtn,onClick:()=>g(h===e?null:e),"aria-label":`Move card`,disabled:c,children:(0,s.jsx)(r.Icon,{component:n.default,size:`sm`})}),h===e&&(0,s.jsx)(`div`,{className:i.default.cardMoveMenu,role:`listbox`,"aria-label":`Move to column`,children:_.filter(e=>e.id!==v).map(t=>(0,s.jsx)(`button`,{type:`button`,className:i.default.cardMoveOption,onClick:()=>v&&m(e,v,t.id),role:`option`,"aria-selected":!1,children:t.title},t.id))})]})]})},p=a.default.createContext(null),m=e=>(0,s.jsx)(p.Provider,{value:e.id,children:(0,s.jsx)(d,{...e})}),h=c;h.Column=m,h.Card=f,c.displayName=`Kanban`,h.displayName=`KanbanBoard`,d.displayName=`KanbanColumn`,f.displayName=`KanbanCard`,m.displayName=`KanbanColumnWrapper`,exports.Kanban=c,exports.KanbanBoard=h,exports.default=h,exports.KanbanCard=f,exports.KanbanColumn=d;

package/dist/components/data-display/Kanban/Kanban.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export interface KanbanItem {
+    id: string;
+    content: React.ReactNode;
+}
+export interface KanbanColumnData {
+    id: string;
+    title: string;
+    items: KanbanItem[];
+}
+export interface KanbanProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onMove"> {
+    /** Kanban column data (for prop-driven usage). */
+    columns?: KanbanColumnData[];
+    /** Callback when a card is moved. */
+    onMove?: (itemId: string, fromColumnId: string, toColumnId: string) => void;
+    /** Callback when a card is moved (legacy / alternative name). */
+    onCardMove?: (itemId: string, fromColumnId: string, toColumnId: string) => void;
+    /** Whether to force the touch-device UI. */
+    forceMobileUI?: boolean;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * Kanban board component suited for project management and similar use cases.
+ */
+export declare const Kanban: React.ForwardRefExoticComponent<KanbanProps & React.RefAttributes<HTMLDivElement>>;
+interface KanbanColumnProps {
+    id: string;
+    title: string;
+    cardCount?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const KanbanColumn: {
+    ({ id, title, cardCount, children, className, }: KanbanColumnProps): React.JSX.Element;
+    displayName: string;
+};
+interface KanbanCardProps {
+    id: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const KanbanCard: {
+    ({ id, children, disabled, className, }: KanbanCardProps): React.JSX.Element;
+    displayName: string;
+};
+declare const KanbanColumnWrapper: {
+    (props: KanbanColumnProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const KanbanBoard: typeof Kanban & {
+    Column: typeof KanbanColumnWrapper;
+    Card: typeof KanbanCard;
+};
+export default KanbanBoard;