wimui 0.1.0

package/dist/components/layout/ScrollArea/ScrollArea.js

@@ -0,0 +1,23 @@
+"use client";
+import e from "./scroll-area.module.js";
+import "react";
+import t from "classnames";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/layout/ScrollArea/ScrollArea.tsx
+var r = ({ text: r, children: i, scrollAxis: a = "y", maxHeight: o = "10rem", style: s, className: c, ...l }) => {
+	let u = {
+		maxHeight: o,
+		overflowX: a === "x" || a === "both" ? "auto" : "hidden",
+		overflowY: a === "y" || a === "both" ? "auto" : "hidden",
+		...s
+	};
+	return /* @__PURE__ */ n("div", {
+		className: t("wim-scroll-area", e.root, c),
+		style: u,
+		tabIndex: 0,
+		...l,
+		children: i || r
+	});
+};
+//#endregion
+export { r as ScrollArea };

package/dist/components/layout/ScrollArea/scroll-area.module.cjs

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

package/dist/components/layout/ScrollArea/scroll-area.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/layout/ScrollArea/scroll-area.module.scss
+var e = "_root_1e3p7_1", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/layout/Sidebar/Sidebar.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./sidebar.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=n.default.forwardRef(({className:e,children:n,fixed:a,collapsed:o,width:s=260,bordered:c=!0,responsive:l=!0,mobileOpen:u,onOverlayClick:d,...f},p)=>{let m={"--wim-sidebar-width":typeof s==`number`?`${s}px`:s};return(0,i.jsxs)(i.Fragment,{children:[l&&u&&(0,i.jsx)(`div`,{className:t.default.overlay,onClick:d,"aria-hidden":`true`}),(0,i.jsx)(`aside`,{ref:p,style:m,className:(0,r.default)(`wim-sidebar`,t.default.root,a&&t.default.fixed,o&&t.default.collapsed,c&&t.default.bordered,l&&t.default.responsive,u&&t.default[`mobile-open`],e),"data-collapsed":o,...f,children:(0,i.jsx)(`div`,{className:t.default.container,children:n})})]})});a.displayName=`Sidebar`;var o=n.default.forwardRef(({className:e,children:n,...a},o)=>(0,i.jsx)(`div`,{ref:o,className:(0,r.default)(t.default.header,e),...a,children:n}));o.displayName=`Sidebar.Header`;var s=n.default.forwardRef(({className:e,children:n,...a},o)=>(0,i.jsx)(`div`,{ref:o,className:(0,r.default)(t.default.content,e),...a,children:n}));s.displayName=`Sidebar.Content`;var c=n.default.forwardRef(({className:e,children:n,...a},o)=>(0,i.jsx)(`div`,{ref:o,className:(0,r.default)(t.default.footer,e),...a,children:n}));c.displayName=`Sidebar.Footer`;var l=n.default.forwardRef(({className:e,children:n,active:a,disabled:o,icon:s,...c},l)=>(0,i.jsxs)(`div`,{ref:l,className:(0,r.default)(t.default.item,a&&t.default.active,o&&t.default.disabled,e),...c,children:[s&&(0,i.jsx)(`span`,{className:t.default.itemIcon,children:s}),(0,i.jsx)(`span`,{className:t.default.itemText,children:n})]}));l.displayName=`Sidebar.Item`;var u=a;u.Header=o,u.Content=s,u.Footer=c,u.Item=l,exports.Sidebar=u,exports.default=u,exports.SidebarContent=s,exports.SidebarFooter=c,exports.SidebarHeader=o,exports.SidebarItem=l;

package/dist/components/layout/Sidebar/Sidebar.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface SidebarProps extends React.ComponentPropsWithoutRef<"aside"> {
+    /** Fixed position */
+    fixed?: boolean;
+    /** Collapsed state */
+    collapsed?: boolean;
+    /** Width when expanded */
+    width?: number | string;
+    /** Border at the right */
+    bordered?: boolean;
+    /** Enable responsive behavior (mobile drawer) */
+    responsive?: boolean;
+    /** Mobile drawer open state */
+    mobileOpen?: boolean;
+    /** Callback when overlay is clicked */
+    onOverlayClick?: () => void;
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+export type SidebarHeaderProps = React.ComponentPropsWithoutRef<"div">;
+export declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SidebarContentProps = React.ComponentPropsWithoutRef<"div">;
+export declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SidebarFooterProps = React.ComponentPropsWithoutRef<"div">;
+export declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarItemProps extends React.ComponentPropsWithoutRef<"div"> {
+    active?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarComponent: typeof Sidebar & {
+    Header: typeof SidebarHeader;
+    Content: typeof SidebarContent;
+    Footer: typeof SidebarFooter;
+    Item: typeof SidebarItem;
+};
+export { SidebarComponent as Sidebar };
+export default SidebarComponent;

package/dist/components/layout/Sidebar/Sidebar.js

@@ -0,0 +1,63 @@
+"use client";
+import e from "./sidebar.module.js";
+import t from "react";
+import n from "classnames";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/layout/Sidebar/Sidebar.tsx
+var o = t.forwardRef(({ className: t, children: o, fixed: s, collapsed: c, width: l = 260, bordered: u = !0, responsive: d = !0, mobileOpen: f, onOverlayClick: p, ...m }, h) => {
+	let g = { "--wim-sidebar-width": typeof l == "number" ? `${l}px` : l };
+	return /* @__PURE__ */ a(r, { children: [d && f && /* @__PURE__ */ i("div", {
+		className: e.overlay,
+		onClick: p,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ i("aside", {
+		ref: h,
+		style: g,
+		className: n("wim-sidebar", e.root, s && e.fixed, c && e.collapsed, u && e.bordered, d && e.responsive, f && e["mobile-open"], t),
+		"data-collapsed": c,
+		...m,
+		children: /* @__PURE__ */ i("div", {
+			className: e.container,
+			children: o
+		})
+	})] });
+});
+o.displayName = "Sidebar";
+var s = t.forwardRef(({ className: t, children: r, ...a }, o) => /* @__PURE__ */ i("div", {
+	ref: o,
+	className: n(e.header, t),
+	...a,
+	children: r
+}));
+s.displayName = "Sidebar.Header";
+var c = t.forwardRef(({ className: t, children: r, ...a }, o) => /* @__PURE__ */ i("div", {
+	ref: o,
+	className: n(e.content, t),
+	...a,
+	children: r
+}));
+c.displayName = "Sidebar.Content";
+var l = t.forwardRef(({ className: t, children: r, ...a }, o) => /* @__PURE__ */ i("div", {
+	ref: o,
+	className: n(e.footer, t),
+	...a,
+	children: r
+}));
+l.displayName = "Sidebar.Footer";
+var u = t.forwardRef(({ className: t, children: r, active: o, disabled: s, icon: c, ...l }, u) => /* @__PURE__ */ a("div", {
+	ref: u,
+	className: n(e.item, o && e.active, s && e.disabled, t),
+	...l,
+	children: [c && /* @__PURE__ */ i("span", {
+		className: e.itemIcon,
+		children: c
+	}), /* @__PURE__ */ i("span", {
+		className: e.itemText,
+		children: r
+	})]
+}));
+u.displayName = "Sidebar.Item";
+var d = o;
+d.Header = s, d.Content = c, d.Footer = l, d.Item = u;
+//#endregion
+export { d as Sidebar, d as default, c as SidebarContent, l as SidebarFooter, s as SidebarHeader, u as SidebarItem };

package/dist/components/layout/Sidebar/sidebar.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_overlay_fzhwx_3`,t=`_root_fzhwx_11`,n=`_fixed_fzhwx_19`,r=`_collapsed_fzhwx_26`,i=`_itemText_fzhwx_29`,a=`_bordered_fzhwx_32`,o=`_responsive_fzhwx_36`,s=`_container_fzhwx_48`,c=`_header_fzhwx_54`,l=`_content_fzhwx_59`,u=`_footer_fzhwx_65`,d=`_item_fzhwx_29`,f=`_active_fzhwx_81`,p=`_disabled_fzhwx_86`,m=`_itemIcon_fzhwx_93`,h={overlay:e,root:t,fixed:n,collapsed:r,itemText:i,bordered:a,responsive:o,"mobile-open":`_mobile-open_fzhwx_43`,container:s,header:c,content:l,footer:u,item:d,active:f,disabled:p,itemIcon:m};exports.active=f,exports.bordered=a,exports.collapsed=r,exports.container=s,exports.content=l,exports.default=h,exports.disabled=p,exports.fixed=n,exports.footer=u,exports.header=c,exports.item=d,exports.itemIcon=m,exports.itemText=i,exports.overlay=e,exports.responsive=o,exports.root=t;

package/dist/components/layout/Sidebar/sidebar.module.js

@@ -0,0 +1,22 @@
+"use client";
+//#region src/components/layout/Sidebar/sidebar.module.scss
+var e = "_overlay_fzhwx_3", t = "_root_fzhwx_11", n = "_fixed_fzhwx_19", r = "_collapsed_fzhwx_26", i = "_itemText_fzhwx_29", a = "_bordered_fzhwx_32", o = "_responsive_fzhwx_36", s = "_container_fzhwx_48", c = "_header_fzhwx_54", l = "_content_fzhwx_59", u = "_footer_fzhwx_65", d = "_item_fzhwx_29", f = "_active_fzhwx_81", p = "_disabled_fzhwx_86", m = "_itemIcon_fzhwx_93", h = {
+	overlay: e,
+	root: t,
+	fixed: n,
+	collapsed: r,
+	itemText: i,
+	bordered: a,
+	responsive: o,
+	"mobile-open": "_mobile-open_fzhwx_43",
+	container: s,
+	header: c,
+	content: l,
+	footer: u,
+	item: d,
+	active: f,
+	disabled: p,
+	itemIcon: m
+};
+//#endregion
+export { f as active, a as bordered, r as collapsed, s as container, l as content, h as default, p as disabled, n as fixed, u as footer, c as header, d as item, m as itemIcon, i as itemText, e as overlay, o as responsive, t as root };

package/dist/components/layout/SimpleGrid/SimpleGrid.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utilities/style-utils.cjs"),n=require("../Grid/grid-utils.cjs"),r=require("./simple-grid.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({cols:e=1,spacing:i=16,verticalSpacing:s,minChildWidth:c,className:l,style:u,children:d,...f},p)=>{let m=n.generateResponsiveVars(e,`--wim-simple-grid-cols`,e=>`repeat(${e}, minmax(0, 1fr))`),h={display:`grid`,gap:t.getSpacingValue(i),rowGap:t.getSpacingValue(s??i),gridTemplateColumns:c?`repeat(auto-fill, minmax(${typeof c==`number`?`${c}px`:c}, 1fr))`:void 0,...m,...u};return(0,o.jsx)(`div`,{className:r.default.container,children:(0,o.jsx)(`div`,{ref:p,className:(0,a.default)(`wim-simple-grid`,r.default.root,l),style:h,...f,children:d})})});s.displayName=`SimpleGrid`,exports.SimpleGrid=s;

package/dist/components/layout/SimpleGrid/SimpleGrid.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ResponsiveProp } from '../../layout/Grid/grid-utils';
+export declare const SimpleGrid: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Number of columns (or a responsive object per breakpoint) */
+    cols?: ResponsiveProp<number>;
+    /** Spacing between cells */
+    spacing?: number | string;
+    /** Vertical spacing between rows (defaults to `spacing`) */
+    verticalSpacing?: number | string;
+    /** Minimum width of each child; columns wrap automatically to fit */
+    minChildWidth?: number | string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/SimpleGrid/SimpleGrid.js

@@ -0,0 +1,31 @@
+"use client";
+import { getSpacingValue as e } from "../../../utilities/style-utils.js";
+import { generateResponsiveVars as t } from "../Grid/grid-utils.js";
+import n from "./simple-grid.module.js";
+import r from "react";
+import i from "classnames";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/layout/SimpleGrid/SimpleGrid.tsx
+var o = r.forwardRef(({ cols: r = 1, spacing: o = 16, verticalSpacing: s, minChildWidth: c, className: l, style: u, children: d, ...f }, p) => {
+	let m = t(r, "--wim-simple-grid-cols", (e) => `repeat(${e}, minmax(0, 1fr))`), h = {
+		display: "grid",
+		gap: e(o),
+		rowGap: e(s ?? o),
+		gridTemplateColumns: c ? `repeat(auto-fill, minmax(${typeof c == "number" ? `${c}px` : c}, 1fr))` : void 0,
+		...m,
+		...u
+	};
+	return /* @__PURE__ */ a("div", {
+		className: n.container,
+		children: /* @__PURE__ */ a("div", {
+			ref: p,
+			className: i("wim-simple-grid", n.root, l),
+			style: h,
+			...f,
+			children: d
+		})
+	});
+});
+o.displayName = "SimpleGrid";
+//#endregion
+export { o as SimpleGrid };

package/dist/components/layout/SimpleGrid/simple-grid.module.cjs

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

package/dist/components/layout/SimpleGrid/simple-grid.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/layout/SimpleGrid/simple-grid.module.scss
+var e = "_container_1foy8_4", t = "_root_1foy8_8", n = {
+	container: e,
+	root: t
+};
+//#endregion
+export { e as container, n as default, t as root };

package/dist/components/layout/Splitter/Splitter.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("./splitter.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(o);if(!e)throw Error(`Splitter components must be used within Splitter`);return e},c=({orientation:e=`horizontal`,className:t,children:s,...c})=>{let d=(0,r.useRef)(null),f=(0,r.useMemo)(()=>r.default.Children.toArray(s),[s]),p=(0,r.useMemo)(()=>f.filter(e=>e.type===l),[f]),[m,h]=(0,r.useState)([]),[g,_]=(0,r.useState)(0);if(p.length!==g){_(p.length);let e=p.map(e=>e.props.defaultSize??100/(p.length||1)),t=e.reduce((e,t)=>e+t,0)||1;h(e.map(e=>e/t*100))}let[v,y]=(0,r.useState)(null),b=(0,r.useCallback)((e,t)=>{y(e),t.preventDefault()},[]),x=(0,r.useCallback)(t=>{if(v===null||!d.current)return;let n=d.current.getBoundingClientRect(),r=e===`horizontal`?n.width:n.height,i=e===`horizontal`?n.left:n.top,a=((`touches`in t?e===`horizontal`?t.touches[0].clientX:t.touches[0].clientY:e===`horizontal`?t.clientX:t.clientY)-i)/r*100;h(e=>{let t=[...e],n=0;for(let t=0;t<v;t++)n+=e[t];let r=e[v]+e[v+1],i=a-n,o=p[v],s=p[v+1],c=o.props.minSize??0,l=o.props.maxSize??100,u=s.props.minSize??0,d=s.props.maxSize??100;i=Math.max(c,Math.min(i,l));let f=r-i;return f<u?(f=u,i=r-f):f>d&&(f=d,i=r-f),t[v]=i,t[v+1]=f,t})},[v,e,p]),S=(0,r.useCallback)(()=>{y(null)},[]);(0,r.useEffect)(()=>{if(v!==null)return window.addEventListener(`mousemove`,x),window.addEventListener(`mouseup`,S),window.addEventListener(`touchmove`,x,{passive:!1}),window.addEventListener(`touchend`,S),()=>{window.removeEventListener(`mousemove`,x),window.removeEventListener(`mouseup`,S),window.removeEventListener(`touchmove`,x),window.removeEventListener(`touchend`,S)}},[v,x,S]);let C=0,w=0,T=f.map(e=>{if(e.type===l){let t=C++;return r.default.cloneElement(e,{size:m[t]})}if(e.type===u){let t=w++,n=Math.round(m.slice(0,t+1).reduce((e,t)=>e+t,0));return r.default.cloneElement(e,{index:t,active:v===t,"aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":100})}return e});return(0,a.jsx)(o.Provider,{value:{orientation:e,onResizeStart:b},children:(0,a.jsx)(`div`,{ref:d,className:(0,i.default)(`wim-splitter`,n.default.root,n.default[e],v!==null&&n.default.resizing,t),"data-testid":`splitter-root`,...c,children:T})})},l=({defaultSize:e,minSize:t,maxSize:r,size:o,style:s,className:c,children:l,...u})=>(0,a.jsx)(`div`,{className:(0,i.default)(n.default.panel,c),"data-testid":`splitter-panel`,style:{...s,flex:o===void 0?`1 1 0%`:`0 0 ${o}%`},tabIndex:0,...u,children:l});l.displayName=`Splitter.Panel`;var u=({index:e,active:r,className:o,ariaLabel:c,...l})=>{let{t:u}=t.useWimTranslation(`common`),d=c??u(`a11y.resize_panel`),{onResizeStart:f,orientation:p}=s();return(0,a.jsx)(`div`,{role:`separator`,"aria-orientation":p,"aria-label":d,tabIndex:0,className:(0,i.default)(n.default.handle,r&&n.default.active,o),"data-testid":`splitter-handle`,onMouseDown:t=>e!==void 0&&f(e,t),onTouchStart:t=>e!==void 0&&f(e,t),onKeyDown:e=>{(e.key===`ArrowLeft`||e.key===`ArrowUp`||e.key===`ArrowRight`||e.key===`ArrowDown`)&&e.preventDefault()},...l})};u.displayName=`Splitter.Handle`,c.displayName=`Splitter`;var d=c;d.Panel=l,d.Handle=u,exports.Splitter=d,exports.default=d;

package/dist/components/layout/Splitter/Splitter.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export interface SplitterProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** The orientation of the splitter. */
+    orientation?: "horizontal" | "vertical";
+    /** The components to render within the splitter. Usually a combination of `Splitter.Panel` and `Splitter.Handle`. */
+    children: React.ReactNode;
+}
+/**
+ * Splitter component that allows resizing of multiple panels.
+ * Supports both mouse and touch events.
+ */
+declare const Splitter: {
+    ({ orientation, className, children, ...props }: SplitterProps): React.JSX.Element;
+    displayName: string;
+};
+export interface SplitterPanelProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** The default size of the panel in percentage. */
+    defaultSize?: number;
+    /** The minimum size of the panel in percentage. */
+    minSize?: number;
+    /** The maximum size of the panel in percentage. */
+    maxSize?: number;
+    /** @internal Injected size from parent Splitter. */
+    size?: number;
+}
+declare const SplitterPanel: {
+    ({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, size, style, className, children, ...props }: SplitterPanelProps): React.JSX.Element;
+    displayName: string;
+};
+export interface SplitterHandleProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** @internal Injected index from parent Splitter. */
+    index?: number;
+    /** @internal Injected active state from parent Splitter. */
+    active?: boolean;
+    /** Accessible label for the resize handle */
+    ariaLabel?: string;
+}
+declare const SplitterHandle: {
+    ({ index, active, className, ariaLabel, ...props }: SplitterHandleProps): React.JSX.Element;
+    displayName: string;
+};
+declare const SplitterRoot: typeof Splitter & {
+    Panel: typeof SplitterPanel;
+    Handle: typeof SplitterHandle;
+};
+export { SplitterRoot as Splitter };
+export default SplitterRoot;

package/dist/components/layout/Splitter/Splitter.js

@@ -0,0 +1,111 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "./splitter.module.js";
+import n, { createContext as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/layout/Splitter/Splitter.tsx
+var f = r(null), p = () => {
+	let e = a(f);
+	if (!e) throw Error("Splitter components must be used within Splitter");
+	return e;
+}, m = ({ orientation: e = "horizontal", className: r, children: a, ...p }) => {
+	let m = c(null), _ = s(() => n.Children.toArray(a), [a]), v = s(() => _.filter((e) => e.type === h), [_]), [y, b] = l([]), [x, S] = l(0);
+	if (v.length !== x) {
+		S(v.length);
+		let e = v.map((e) => e.props.defaultSize ?? 100 / (v.length || 1)), t = e.reduce((e, t) => e + t, 0) || 1;
+		b(e.map((e) => e / t * 100));
+	}
+	let [C, w] = l(null), T = i((e, t) => {
+		w(e), t.preventDefault();
+	}, []), E = i((t) => {
+		if (C === null || !m.current) return;
+		let n = m.current.getBoundingClientRect(), r = e === "horizontal" ? n.width : n.height, i = e === "horizontal" ? n.left : n.top, a = (("touches" in t ? e === "horizontal" ? t.touches[0].clientX : t.touches[0].clientY : e === "horizontal" ? t.clientX : t.clientY) - i) / r * 100;
+		b((e) => {
+			let t = [...e], n = 0;
+			for (let t = 0; t < C; t++) n += e[t];
+			let r = e[C] + e[C + 1], i = a - n, o = v[C], s = v[C + 1], c = o.props.minSize ?? 0, l = o.props.maxSize ?? 100, u = s.props.minSize ?? 0, d = s.props.maxSize ?? 100;
+			i = Math.max(c, Math.min(i, l));
+			let f = r - i;
+			return f < u ? (f = u, i = r - f) : f > d && (f = d, i = r - f), t[C] = i, t[C + 1] = f, t;
+		});
+	}, [
+		C,
+		e,
+		v
+	]), D = i(() => {
+		w(null);
+	}, []);
+	o(() => {
+		if (C !== null) return window.addEventListener("mousemove", E), window.addEventListener("mouseup", D), window.addEventListener("touchmove", E, { passive: !1 }), window.addEventListener("touchend", D), () => {
+			window.removeEventListener("mousemove", E), window.removeEventListener("mouseup", D), window.removeEventListener("touchmove", E), window.removeEventListener("touchend", D);
+		};
+	}, [
+		C,
+		E,
+		D
+	]);
+	let O = 0, k = 0, A = _.map((e) => {
+		if (e.type === h) {
+			let t = O++;
+			return n.cloneElement(e, { size: y[t] });
+		}
+		if (e.type === g) {
+			let t = k++, r = Math.round(y.slice(0, t + 1).reduce((e, t) => e + t, 0));
+			return n.cloneElement(e, {
+				index: t,
+				active: C === t,
+				"aria-valuenow": r,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100
+			});
+		}
+		return e;
+	});
+	return /* @__PURE__ */ d(f.Provider, {
+		value: {
+			orientation: e,
+			onResizeStart: T
+		},
+		children: /* @__PURE__ */ d("div", {
+			ref: m,
+			className: u("wim-splitter", t.root, t[e], C !== null && t.resizing, r),
+			"data-testid": "splitter-root",
+			...p,
+			children: A
+		})
+	});
+}, h = ({ defaultSize: e, minSize: n, maxSize: r, size: i, style: a, className: o, children: s, ...c }) => /* @__PURE__ */ d("div", {
+	className: u(t.panel, o),
+	"data-testid": "splitter-panel",
+	style: {
+		...a,
+		flex: i === void 0 ? "1 1 0%" : `0 0 ${i}%`
+	},
+	tabIndex: 0,
+	...c,
+	children: s
+});
+h.displayName = "Splitter.Panel";
+var g = ({ index: n, active: r, className: i, ariaLabel: a, ...o }) => {
+	let { t: s } = e("common"), c = a ?? s("a11y.resize_panel"), { onResizeStart: l, orientation: f } = p();
+	return /* @__PURE__ */ d("div", {
+		role: "separator",
+		"aria-orientation": f,
+		"aria-label": c,
+		tabIndex: 0,
+		className: u(t.handle, r && t.active, i),
+		"data-testid": "splitter-handle",
+		onMouseDown: (e) => n !== void 0 && l(n, e),
+		onTouchStart: (e) => n !== void 0 && l(n, e),
+		onKeyDown: (e) => {
+			(e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowRight" || e.key === "ArrowDown") && e.preventDefault();
+		},
+		...o
+	});
+};
+g.displayName = "Splitter.Handle", m.displayName = "Splitter";
+var _ = m;
+_.Panel = h, _.Handle = g;
+//#endregion
+export { _ as Splitter, _ as default };

package/dist/components/layout/Splitter/splitter.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_jltff_2`,t=`_horizontal_jltff_8`,n=`_vertical_jltff_11`,r=`_resizing_jltff_14`,i=`_panel_jltff_22`,a=`_handle_jltff_29`,o=`_active_jltff_42`,s={root:e,horizontal:t,vertical:n,resizing:r,panel:i,handle:a,active:o};exports.active=o,exports.default=s,exports.handle=a,exports.horizontal=t,exports.panel=i,exports.resizing=r,exports.root=e,exports.vertical=n;

package/dist/components/layout/Splitter/splitter.module.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/layout/Splitter/splitter.module.scss
+var e = "_root_jltff_2", t = "_horizontal_jltff_8", n = "_vertical_jltff_11", r = "_resizing_jltff_14", i = "_panel_jltff_22", a = "_handle_jltff_29", o = "_active_jltff_42", s = {
+	root: e,
+	horizontal: t,
+	vertical: n,
+	resizing: r,
+	panel: i,
+	handle: a,
+	active: o
+};
+//#endregion
+export { o as active, s as default, a as handle, t as horizontal, i as panel, r as resizing, e as root, n as vertical };

package/dist/components/layout/Stack/Stack.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Box/Box.cjs"),n=require("./stack.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=e=>e===`start`?`flex-start`:e===`end`?`flex-end`:e,s=e=>e===`start`?`flex-start`:e===`end`?`flex-end`:e===`between`?`space-between`:e===`around`?`space-around`:e===`evenly`?`space-evenly`:e,c=r.default.forwardRef(({asChild:e=!1,direction:r=`column`,gap:c=`md`,align:l,justify:u,wrap:d,style:f,className:p,children:m,...h},g)=>{let _=e=>typeof e==`number`?`${e}px`:typeof e==`string`&&[`3xs`,`2xs`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`,`6xl`,`7xl`].includes(e)?`var(--wim-spacing-${e})`:e?String(e):void 0,v=(e=>{if(e===void 0)return{};if(typeof e==`string`)return{"--wim-stack-dir":e};let t={"--wim-stack-dir":e.base||`column`};return e.sm&&(t[`--wim-stack-dir-sm`]=e.sm),e.md&&(t[`--wim-stack-dir-md`]=e.md),e.lg&&(t[`--wim-stack-dir-lg`]=e.lg),e.xl&&(t[`--wim-stack-dir-xl`]=e.xl),t})(r);return(0,a.jsx)(t.Box,{asChild:e,ref:g,display:`flex`,className:(0,i.default)(`wim-stack`,n.default.root,p),style:{flexDirection:`var(--wim-stack-dir)`,gap:_(c),alignItems:o(l),justifyContent:s(u),flexWrap:typeof d==`boolean`?d?`wrap`:`nowrap`:d,...v,...f},...h,children:m})});c.displayName=`Stack`,exports.Stack=c;

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { BoxProps } from '../../layout/Box/Box';
+import { ResponsiveProp } from '../../layout/Grid/grid-utils';
+export type StackProps = Omit<BoxProps, "as"> & {
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+    /** Gap between children. Can be a number (px) or a spacing token (e.g., 'sm', 'md', 'lg'). */
+    gap?: number | string;
+    /** Stack direction */
+    direction?: ResponsiveProp<"row" | "column">;
+    /** Align-items */
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | React.CSSProperties["alignItems"];
+    /** Justify-content */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | React.CSSProperties["justifyContent"];
+    /** Whether children should wrap */
+    wrap?: boolean | React.CSSProperties["flexWrap"];
+};
+/**
+ * Stack component is used to distribute space between elements in a vertical or horizontal layout.
+ */
+export declare const Stack: React.ForwardRefExoticComponent<Omit<BoxProps, "as"> & {
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+    /** Gap between children. Can be a number (px) or a spacing token (e.g., 'sm', 'md', 'lg'). */
+    gap?: number | string;
+    /** Stack direction */
+    direction?: ResponsiveProp<"row" | "column">;
+    /** Align-items */
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | React.CSSProperties["alignItems"];
+    /** Justify-content */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | React.CSSProperties["justifyContent"];
+    /** Whether children should wrap */
+    wrap?: boolean | React.CSSProperties["flexWrap"];
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,49 @@
+"use client";
+import { Box as e } from "../Box/Box.js";
+import t from "./stack.module.js";
+import n from "react";
+import r from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/Stack/Stack.tsx
+var a = (e) => e === "start" ? "flex-start" : e === "end" ? "flex-end" : e, o = (e) => e === "start" ? "flex-start" : e === "end" ? "flex-end" : e === "between" ? "space-between" : e === "around" ? "space-around" : e === "evenly" ? "space-evenly" : e, s = n.forwardRef(({ asChild: n = !1, direction: s = "column", gap: c = "md", align: l, justify: u, wrap: d, style: f, className: p, children: m, ...h }, g) => {
+	let _ = (e) => typeof e == "number" ? `${e}px` : typeof e == "string" && [
+		"3xs",
+		"2xs",
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"2xl",
+		"3xl",
+		"4xl",
+		"5xl",
+		"6xl",
+		"7xl"
+	].includes(e) ? `var(--wim-spacing-${e})` : e ? String(e) : void 0, v = ((e) => {
+		if (e === void 0) return {};
+		if (typeof e == "string") return { "--wim-stack-dir": e };
+		let t = { "--wim-stack-dir": e.base || "column" };
+		return e.sm && (t["--wim-stack-dir-sm"] = e.sm), e.md && (t["--wim-stack-dir-md"] = e.md), e.lg && (t["--wim-stack-dir-lg"] = e.lg), e.xl && (t["--wim-stack-dir-xl"] = e.xl), t;
+	})(s);
+	return /* @__PURE__ */ i(e, {
+		asChild: n,
+		ref: g,
+		display: "flex",
+		className: r("wim-stack", t.root, p),
+		style: {
+			flexDirection: "var(--wim-stack-dir)",
+			gap: _(c),
+			alignItems: a(l),
+			justifyContent: o(u),
+			flexWrap: typeof d == "boolean" ? d ? "wrap" : "nowrap" : d,
+			...v,
+			...f
+		},
+		...h,
+		children: m
+	});
+});
+s.displayName = "Stack";
+//#endregion
+export { s as Stack };

package/dist/components/layout/Stack/stack.module.cjs

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

package/dist/components/layout/Stack/stack.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/layout/Stack/stack.module.scss
+var e = "_root_1in0p_4", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/layout/Toolbar/Toolbar.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("./toolbar.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,s=r.default.forwardRef(({asChild:e=!1,size:s=`md`,orientation:c=`horizontal`,className:l,children:u,onKeyDown:d,...f},p)=>{let m=(0,r.useRef)(null),h=(0,r.useCallback)(e=>{m.current=e,typeof p==`function`?p(e):p&&(p.current=e)},[p]);return(0,a.jsx)(e?t.Root:`div`,{ref:h,role:`toolbar`,"aria-orientation":c,"data-size":s,"data-orientation":c,className:(0,i.default)(`wim-toolbar`,n.default.root,n.default[`size-${s}`],n.default[c],l),onKeyDown:e=>{if(d?.(e),e.defaultPrevented)return;let t=m.current;if(!t)return;let n=Array.from(t.querySelectorAll(o)).filter(e=>!e.closest(`[aria-hidden="true"]`)&&t.contains(e));if(n.length===0)return;let r=n.indexOf(document.activeElement);if(r<0)return;let i=c===`horizontal`,a=i?`ArrowRight`:`ArrowDown`,s=i?`ArrowLeft`:`ArrowUp`,l=r;if(e.key===a)e.preventDefault(),l=(r+1)%n.length;else if(e.key===s)e.preventDefault(),l=(r-1+n.length)%n.length;else if(e.key===`Home`)e.preventDefault(),l=0;else if(e.key===`End`)e.preventDefault(),l=n.length-1;else return;n[l]?.focus()},...f,children:u})});s.displayName=`Toolbar`;var c=r.default.forwardRef(({asChild:e=!1,className:r,children:o,...s},c)=>(0,a.jsx)(e?t.Root:`div`,{ref:c,role:`group`,className:(0,i.default)(n.default.group,r),...s,children:o}));c.displayName=`Toolbar.Group`;var l=r.default.forwardRef(({className:e,...t},r)=>(0,a.jsx)(`div`,{ref:r,role:`separator`,"aria-hidden":`true`,className:(0,i.default)(n.default.separator,e),...t}));l.displayName=`Toolbar.Separator`;var u=s;u.Group=c,u.Separator=l,exports.Toolbar=u,exports.default=u,exports.ToolbarGroup=c,exports.ToolbarSeparator=l;

package/dist/components/layout/Toolbar/Toolbar.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type ToolbarProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * If true, the component will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /**
+     * Visual density for padding and gap. Cascades to `--wim-toolbar-*` CSS variables.
+     * @default "md"
+     */
+    size?: ComponentSizeBasic;
+    /**
+     * Layout axis of the toolbar.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+};
+export type ToolbarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * If true, the group will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+};
+/**
+ * Logical cluster of related toolbar controls (`role="group"`).
+ */
+export declare const ToolbarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * If true, the group will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export type ToolbarSeparatorProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Visual separator between toolbar groups. Orientation follows the parent toolbar.
+ */
+export declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ToolbarComponent extends React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>> {
+    Group: typeof ToolbarGroup;
+    Separator: typeof ToolbarSeparator;
+}
+export declare const Toolbar: ToolbarComponent;
+export default Toolbar;

package/dist/components/layout/Toolbar/Toolbar.js

@@ -0,0 +1,59 @@
+"use client";
+import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import t from "./toolbar.module.js";
+import n, { useCallback as r, useRef as i } from "react";
+import a from "classnames";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/layout/Toolbar/Toolbar.tsx
+var s = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", c = n.forwardRef(({ asChild: n = !1, size: c = "md", orientation: l = "horizontal", className: u, children: d, onKeyDown: f, ...p }, m) => {
+	let h = i(null), g = r((e) => {
+		h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+	}, [m]);
+	return /* @__PURE__ */ o(n ? e : "div", {
+		ref: g,
+		role: "toolbar",
+		"aria-orientation": l,
+		"data-size": c,
+		"data-orientation": l,
+		className: a("wim-toolbar", t.root, t[`size-${c}`], t[l], u),
+		onKeyDown: (e) => {
+			if (f?.(e), e.defaultPrevented) return;
+			let t = h.current;
+			if (!t) return;
+			let n = Array.from(t.querySelectorAll(s)).filter((e) => !e.closest("[aria-hidden=\"true\"]") && t.contains(e));
+			if (n.length === 0) return;
+			let r = n.indexOf(document.activeElement);
+			if (r < 0) return;
+			let i = l === "horizontal", a = i ? "ArrowRight" : "ArrowDown", o = i ? "ArrowLeft" : "ArrowUp", c = r;
+			if (e.key === a) e.preventDefault(), c = (r + 1) % n.length;
+			else if (e.key === o) e.preventDefault(), c = (r - 1 + n.length) % n.length;
+			else if (e.key === "Home") e.preventDefault(), c = 0;
+			else if (e.key === "End") e.preventDefault(), c = n.length - 1;
+			else return;
+			n[c]?.focus();
+		},
+		...p,
+		children: d
+	});
+});
+c.displayName = "Toolbar";
+var l = n.forwardRef(({ asChild: n = !1, className: r, children: i, ...s }, c) => /* @__PURE__ */ o(n ? e : "div", {
+	ref: c,
+	role: "group",
+	className: a(t.group, r),
+	...s,
+	children: i
+}));
+l.displayName = "Toolbar.Group";
+var u = n.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ o("div", {
+	ref: r,
+	role: "separator",
+	"aria-hidden": "true",
+	className: a(t.separator, e),
+	...n
+}));
+u.displayName = "Toolbar.Separator";
+var d = c;
+d.Group = l, d.Separator = u;
+//#endregion
+export { d as Toolbar, d as default, l as ToolbarGroup, u as ToolbarSeparator };