wimui 0.1.0

package/dist/components/navigation/SpeedDial/SpeedDial.js

@@ -0,0 +1,53 @@
+"use client";
+import { FloatButton as e } from "../../form/FloatButton/FloatButton.js";
+import t from "./speed-dial.module.js";
+import n, { useState as r } from "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/navigation/SpeedDial/SpeedDial.tsx
+var s = n.forwardRef(({ actions: n, icon: s = "PlusIcon", activeIcon: c = "CloseIcon", direction: l = "up", trigger: u = "hover", open: d, onOpenChange: f, className: p, ...m }, h) => {
+	let [g, _] = r(!1), v = d ?? g, y = (e) => {
+		_(e), f?.(e);
+	}, b = () => {
+		u === "hover" && y(!0);
+	}, x = () => {
+		u === "hover" && y(!1);
+	}, S = () => {
+		u === "click" && y(!v);
+	};
+	return /* @__PURE__ */ o("div", {
+		ref: h,
+		className: i("wim-speed-dial", t.root, t[l], v && t.open, p),
+		onMouseEnter: b,
+		onMouseLeave: x,
+		...m,
+		children: [/* @__PURE__ */ a("div", {
+			className: t.actions,
+			children: n.map((n, r) => /* @__PURE__ */ a("div", {
+				className: t.actionWrapper,
+				style: { transitionDelay: v ? `${r * 50}ms` : "0ms" },
+				children: /* @__PURE__ */ a(e, {
+					iconName: n.icon,
+					label: n.label,
+					size: "sm",
+					className: i(t.action, n.className),
+					onClick: () => {
+						n.onClick?.(), u === "click" && y(!1);
+					},
+					position: "static"
+				})
+			}, r))
+		}), /* @__PURE__ */ a(e, {
+			iconName: v ? c : s,
+			variant: "primary",
+			onClick: S,
+			className: t.trigger,
+			position: "static",
+			"aria-expanded": v,
+			"aria-haspopup": "true"
+		})]
+	});
+});
+s.displayName = "SpeedDial";
+//#endregion
+export { s as SpeedDial };

package/dist/components/navigation/SpeedDial/speed-dial.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_5y9zt_3`,t=`_up_5y9zt_10`,n=`_down_5y9zt_13`,r=`_left_5y9zt_16`,i=`_right_5y9zt_19`,a=`_actions_5y9zt_22`,o=`_open_5y9zt_55`,s=`_actionWrapper_5y9zt_61`,c=`_trigger_5y9zt_70`,l={root:e,up:t,down:n,left:r,right:i,actions:a,open:o,actionWrapper:s,trigger:c};exports.actionWrapper=s,exports.actions=a,exports.default=l,exports.down=n,exports.left=r,exports.open=o,exports.right=i,exports.root=e,exports.trigger=c,exports.up=t;

package/dist/components/navigation/SpeedDial/speed-dial.module.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/components/navigation/SpeedDial/speed-dial.module.scss
+var e = "_root_5y9zt_3", t = "_up_5y9zt_10", n = "_down_5y9zt_13", r = "_left_5y9zt_16", i = "_right_5y9zt_19", a = "_actions_5y9zt_22", o = "_open_5y9zt_55", s = "_actionWrapper_5y9zt_61", c = "_trigger_5y9zt_70", l = {
+	root: e,
+	up: t,
+	down: n,
+	left: r,
+	right: i,
+	actions: a,
+	open: o,
+	actionWrapper: s,
+	trigger: c
+};
+//#endregion
+export { s as actionWrapper, a as actions, l as default, n as down, r as left, o as open, i as right, e as root, c as trigger, t as up };

package/dist/components/navigation/Stepper/Stepper.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/check.cjs"),r=require("../../../icon/close.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./stepper.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=(0,o.forwardRef)(({steps:e=[],current:o=0,direction:l=`horizontal`,labelPlacement:u=`horizontal`,intent:d=`process`,className:f,ariaLabel:p,onChange:m,asChild:h,...g},_)=>{let v=h?t.Root:`div`,y=(e,t)=>t||(e<o?`finish`:e===o?d:`wait`),b=(e,t,a)=>a||(t===`finish`?(0,c.jsx)(i.Icon,{component:n.default,size:`sm`}):t===`error`?(0,c.jsx)(i.Icon,{component:r.default,size:`sm`}):(0,c.jsx)(`span`,{children:e+1}));return(0,c.jsx)(`div`,{className:a.default.container,children:(0,c.jsx)(v,{ref:_,className:(0,s.default)(`wim-stepper`,a.default.root,a.default[l],u===`vertical`&&a.default.labelVertical,f),role:m?`tablist`:void 0,"aria-label":p,"aria-orientation":m?l:void 0,onKeyDown:t=>{if(!m)return;let n=Array.from(t.currentTarget.querySelectorAll(`[role="tab"]`)),r=document.activeElement;if(n.indexOf(r)===-1||![`ArrowRight`,`ArrowLeft`,`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(t.key))return;t.preventDefault();let i=n.filter((t,n)=>!e[n]?.disabled),a=i.indexOf(r);if(a===-1)return;let o;o=t.key===`ArrowRight`||t.key===`ArrowDown`?(a+1)%i.length:t.key===`ArrowLeft`||t.key===`ArrowUp`?(a-1+i.length)%i.length:t.key===`Home`?0:i.length-1;let s=i[o];s.focus(),m(n.indexOf(s))},...g,children:e.map((e,t)=>{let n=y(t,e.intent),r=!!m&&!e.disabled;return(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.item,a.default[n],u===`vertical`&&a.default.labelVertical,e.disabled&&a.default.disabled),onClick:()=>r&&m(t),style:{cursor:r?`pointer`:`default`},role:m?`tab`:void 0,"aria-selected":m?t===o:void 0,"aria-disabled":e.disabled?`true`:void 0,"data-testid":`stepper-item`,"data-status":n,tabIndex:m?!e.disabled&&t===o?0:-1:r?0:-1,onKeyDown:e=>{r&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m(t))},children:[(0,c.jsx)(`div`,{className:a.default.line}),(0,c.jsx)(`div`,{className:a.default.iconContainer,children:b(t,n,e.icon)}),(0,c.jsxs)(`div`,{className:a.default.content,children:[(0,c.jsx)(`span`,{className:a.default.title,"data-testid":`stepper-title`,children:e.title}),e.description&&(0,c.jsx)(`span`,{className:a.default.description,children:e.description})]})]},t)})})})});l.displayName=`Stepper`,exports.Stepper=l,exports.default=l;

package/dist/components/navigation/Stepper/Stepper.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type StepperIntent = "wait" | "process" | "finish" | "error";
+export interface Step {
+    /** Title of the step */
+    title: React.ReactNode;
+    /** Description of the step */
+    description?: React.ReactNode;
+    /** Custom icon for the step */
+    icon?: React.ReactNode;
+    /** Explicit workflow intent for this step. If omitted, computed from `current` index. */
+    intent?: StepperIntent;
+    /** Whether the step is disabled */
+    disabled?: boolean;
+}
+export interface StepperProps {
+    /** Array of step configurations */
+    steps: Step[];
+    /** Index of the current active step (0-indexed) */
+    current?: number;
+    /** Direction of the stepper */
+    direction?: "horizontal" | "vertical";
+    /** Placement of the labels */
+    labelPlacement?: "horizontal" | "vertical";
+    /** Workflow intent shown on the current active step (default: "process") */
+    intent?: StepperIntent;
+    /** Additional class names */
+    className?: string;
+    /** Accessibility label for the navigation */
+    ariaLabel?: string;
+    /** Callback function when a step is clicked (if applicable) */
+    onChange?: (current: number) => void;
+    /** Whether to use the Radix Slot pattern */
+    asChild?: boolean;
+}
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/dist/components/navigation/Stepper/Stepper.js

@@ -0,0 +1,87 @@
+"use client";
+import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import t from "../../../icon/check.js";
+import n from "../../../icon/close.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import i from "./stepper.module.js";
+import { forwardRef as a } from "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/navigation/Stepper/Stepper.tsx
+var l = a(({ steps: a = [], current: l = 0, direction: u = "horizontal", labelPlacement: d = "horizontal", intent: f = "process", className: p, ariaLabel: m, onChange: h, asChild: g, ..._ }, v) => {
+	let y = g ? e : "div", b = (e, t) => t || (e < l ? "finish" : e === l ? f : "wait"), x = (e, i, a) => a || (i === "finish" ? /* @__PURE__ */ s(r, {
+		component: t,
+		size: "sm"
+	}) : i === "error" ? /* @__PURE__ */ s(r, {
+		component: n,
+		size: "sm"
+	}) : /* @__PURE__ */ s("span", { children: e + 1 }));
+	return /* @__PURE__ */ s("div", {
+		className: i.container,
+		children: /* @__PURE__ */ s(y, {
+			ref: v,
+			className: o("wim-stepper", i.root, i[u], d === "vertical" && i.labelVertical, p),
+			role: h ? "tablist" : void 0,
+			"aria-label": m,
+			"aria-orientation": h ? u : void 0,
+			onKeyDown: (e) => {
+				if (!h) return;
+				let t = Array.from(e.currentTarget.querySelectorAll("[role=\"tab\"]")), n = document.activeElement;
+				if (t.indexOf(n) === -1 || ![
+					"ArrowRight",
+					"ArrowLeft",
+					"ArrowDown",
+					"ArrowUp",
+					"Home",
+					"End"
+				].includes(e.key)) return;
+				e.preventDefault();
+				let r = t.filter((e, t) => !a[t]?.disabled), i = r.indexOf(n);
+				if (i === -1) return;
+				let o;
+				o = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i + 1) % r.length : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i - 1 + r.length) % r.length : e.key === "Home" ? 0 : r.length - 1;
+				let s = r[o];
+				s.focus(), h(t.indexOf(s));
+			},
+			..._,
+			children: a.map((e, t) => {
+				let n = b(t, e.intent), r = !!h && !e.disabled;
+				return /* @__PURE__ */ c("div", {
+					className: o(i.item, i[n], d === "vertical" && i.labelVertical, e.disabled && i.disabled),
+					onClick: () => r && h(t),
+					style: { cursor: r ? "pointer" : "default" },
+					role: h ? "tab" : void 0,
+					"aria-selected": h ? t === l : void 0,
+					"aria-disabled": e.disabled ? "true" : void 0,
+					"data-testid": "stepper-item",
+					"data-status": n,
+					tabIndex: h ? !e.disabled && t === l ? 0 : -1 : r ? 0 : -1,
+					onKeyDown: (e) => {
+						r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), h(t));
+					},
+					children: [
+						/* @__PURE__ */ s("div", { className: i.line }),
+						/* @__PURE__ */ s("div", {
+							className: i.iconContainer,
+							children: x(t, n, e.icon)
+						}),
+						/* @__PURE__ */ c("div", {
+							className: i.content,
+							children: [/* @__PURE__ */ s("span", {
+								className: i.title,
+								"data-testid": "stepper-title",
+								children: e.title
+							}), e.description && /* @__PURE__ */ s("span", {
+								className: i.description,
+								children: e.description
+							})]
+						})
+					]
+				}, t);
+			})
+		})
+	});
+});
+l.displayName = "Stepper";
+//#endregion
+export { l as Stepper, l as default };

package/dist/components/navigation/Stepper/stepper.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_1fnmw_3`,t=`_root_1fnmw_7`,n=`_horizontal_1fnmw_12`,r=`_vertical_1fnmw_16`,i=`_item_1fnmw_22`,a=`_labelVertical_1fnmw_32`,o=`_line_1fnmw_41`,s=`_finish_1fnmw_44`,c=`_process_1fnmw_48`,l=`_iconContainer_1fnmw_48`,u=`_error_1fnmw_61`,d=`_wait_1fnmw_65`,f=`_title_1fnmw_65`,p=`_content_1fnmw_112`,m=`_description_1fnmw_262`,h={container:e,root:t,horizontal:n,vertical:r,item:i,labelVertical:a,line:o,finish:s,process:c,iconContainer:l,error:u,wait:d,title:f,content:p,description:m};exports.container=e,exports.content=p,exports.default=h,exports.description=m,exports.error=u,exports.finish=s,exports.horizontal=n,exports.iconContainer=l,exports.item=i,exports.labelVertical=a,exports.line=o,exports.process=c,exports.root=t,exports.title=f,exports.vertical=r,exports.wait=d;

package/dist/components/navigation/Stepper/stepper.module.js

@@ -0,0 +1,21 @@
+"use client";
+//#region src/components/navigation/Stepper/stepper.module.scss
+var e = "_container_1fnmw_3", t = "_root_1fnmw_7", n = "_horizontal_1fnmw_12", r = "_vertical_1fnmw_16", i = "_item_1fnmw_22", a = "_labelVertical_1fnmw_32", o = "_line_1fnmw_41", s = "_finish_1fnmw_44", c = "_process_1fnmw_48", l = "_iconContainer_1fnmw_48", u = "_error_1fnmw_61", d = "_wait_1fnmw_65", f = "_title_1fnmw_65", p = "_content_1fnmw_112", m = "_description_1fnmw_262", h = {
+	container: e,
+	root: t,
+	horizontal: n,
+	vertical: r,
+	item: i,
+	labelVertical: a,
+	line: o,
+	finish: s,
+	process: c,
+	iconContainer: l,
+	error: u,
+	wait: d,
+	title: f,
+	content: p,
+	description: m
+};
+//#endregion
+export { e as container, p as content, h as default, m as description, u as error, s as finish, n as horizontal, l as iconContainer, i as item, a as labelVertical, o as line, c as process, t as root, f as title, r as vertical, d as wait };

package/dist/components/navigation/TabBar/TabBar.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("./tab-bar.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=r.default.forwardRef(({className:e,children:t,fixed:r=!0,bordered:o=!0,glass:s=!1,...c},l)=>(0,a.jsx)(`nav`,{ref:l,className:(0,i.default)(`wim-tab-bar`,n.default.root,r&&n.default.fixed,o&&n.default.bordered,s&&n.default.glass,e),...c,children:(0,a.jsx)(`div`,{className:n.default.container,children:t})}));o.displayName=`TabBar`;var s=r.default.forwardRef(({asChild:e=!1,className:r,active:o,icon:s,label:c,badge:l,children:u,...d},f)=>(0,a.jsxs)(e?t.Root:`button`,{ref:f,type:e?void 0:`button`,className:(0,i.default)(n.default.item,o&&n.default.active,r),"aria-pressed":o,...d,children:[l&&(0,a.jsx)(`span`,{className:n.default.badge,children:l}),s&&(0,a.jsx)(`span`,{className:n.default.icon,children:s}),c&&(0,a.jsx)(`span`,{className:n.default.label,children:c}),(0,a.jsx)(t.Slottable,{children:u})]}));s.displayName=`TabBar.Item`;var c=o;c.Item=s,exports.TabBar=c,exports.default=c,exports.TabBarItem=s;

package/dist/components/navigation/TabBar/TabBar.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface TabBarProps extends React.ComponentPropsWithoutRef<"nav"> {
+    /** Fixed position at the bottom of the screen */
+    fixed?: boolean;
+    /** Show top border */
+    bordered?: boolean;
+    /** Glassmorphism effect */
+    glass?: boolean;
+}
+declare const TabBarInner: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLElement>>;
+export interface TabBarItemProps extends React.ComponentPropsWithoutRef<"button"> {
+    /**
+     * If true, the item will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /** Active state */
+    active?: boolean;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Text label */
+    label?: string;
+    /** Badge content (optional) */
+    badge?: React.ReactNode;
+}
+export declare const TabBarItem: React.ForwardRefExoticComponent<TabBarItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabBar: typeof TabBarInner & {
+    Item: typeof TabBarItem;
+};
+export default TabBar;

package/dist/components/navigation/TabBar/TabBar.js

@@ -0,0 +1,44 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import n from "./tab-bar.module.js";
+import r from "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/navigation/TabBar/TabBar.tsx
+var s = r.forwardRef(({ className: e, children: t, fixed: r = !0, bordered: o = !0, glass: s = !1, ...c }, l) => /* @__PURE__ */ a("nav", {
+	ref: l,
+	className: i("wim-tab-bar", n.root, r && n.fixed, o && n.bordered, s && n.glass, e),
+	...c,
+	children: /* @__PURE__ */ a("div", {
+		className: n.container,
+		children: t
+	})
+}));
+s.displayName = "TabBar";
+var c = r.forwardRef(({ asChild: r = !1, className: s, active: c, icon: l, label: u, badge: d, children: f, ...p }, m) => /* @__PURE__ */ o(r ? e : "button", {
+	ref: m,
+	type: r ? void 0 : "button",
+	className: i(n.item, c && n.active, s),
+	"aria-pressed": c,
+	...p,
+	children: [
+		d && /* @__PURE__ */ a("span", {
+			className: n.badge,
+			children: d
+		}),
+		l && /* @__PURE__ */ a("span", {
+			className: n.icon,
+			children: l
+		}),
+		u && /* @__PURE__ */ a("span", {
+			className: n.label,
+			children: u
+		}),
+		/* @__PURE__ */ a(t, { children: f })
+	]
+}));
+c.displayName = "TabBar.Item";
+var l = s;
+l.Item = c;
+//#endregion
+export { l as TabBar, l as default, c as TabBarItem };

package/dist/components/navigation/TabBar/tab-bar.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1qk74_2`,t=`_fixed_1qk74_9`,n=`_bordered_1qk74_14`,r=`_glass_1qk74_17`,i=`_container_1qk74_21`,a=`_item_1qk74_29`,o=`_active_1qk74_47`,s=`_icon_1qk74_50`,c=`_label_1qk74_61`,l=`_badge_1qk74_67`,u={root:e,fixed:t,bordered:n,glass:r,container:i,item:a,active:o,icon:s,label:c,badge:l};exports.active=o,exports.badge=l,exports.bordered=n,exports.container=i,exports.default=u,exports.fixed=t,exports.glass=r,exports.icon=s,exports.item=a,exports.label=c,exports.root=e;

package/dist/components/navigation/TabBar/tab-bar.module.js

@@ -0,0 +1,16 @@
+"use client";
+//#region src/components/navigation/TabBar/tab-bar.module.scss
+var e = "_root_1qk74_2", t = "_fixed_1qk74_9", n = "_bordered_1qk74_14", r = "_glass_1qk74_17", i = "_container_1qk74_21", a = "_item_1qk74_29", o = "_active_1qk74_47", s = "_icon_1qk74_50", c = "_label_1qk74_61", l = "_badge_1qk74_67", u = {
+	root: e,
+	fixed: t,
+	bordered: n,
+	glass: r,
+	container: i,
+	item: a,
+	active: o,
+	icon: s,
+	label: c,
+	badge: l
+};
+//#endregion
+export { o as active, l as badge, n as bordered, i as container, u as default, t as fixed, r as glass, s as icon, a as item, c as label, e as root };

package/dist/components/navigation/TabNavigation/TabNavigation.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("../../../hooks/useMergedRef.cjs"),r=require("../../_internal/useIndicator.cjs"),i=require("./tab-navigation.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=a.default.forwardRef(({className:e,children:t,variant:c=`underline`,align:l=`start`,size:u=`md`,...d},f)=>{let p=(0,a.useRef)(null),{containerRef:m,sliderStyle:h,isReady:g}=r.useIndicator({activeSelector:`.${i.default.active}`,variant:c}),_=n.useMergedRef(p,f,e=>{m&&(m.current=e?.querySelector(`.${i.default.list}`)||null)}),v=e=>{if(![`ArrowLeft`,`ArrowRight`,`ArrowUp`,`ArrowDown`,`Home`,`End`].includes(e.key))return;e.preventDefault();let t=Array.from(e.currentTarget.querySelectorAll(`[role="tab"]:not([aria-disabled="true"])`));if(t.length===0)return;let n=t.indexOf(document.activeElement);if(n===-1)return;let r;r=e.key===`ArrowRight`||e.key===`ArrowDown`?(n+1)%t.length:e.key===`ArrowLeft`||e.key===`ArrowUp`?(n-1+t.length)%t.length:e.key===`Home`?0:t.length-1;let i=t[r];i.focus(),i.click()};return(0,s.jsx)(`nav`,{ref:_,className:(0,o.default)(`wim-tab-navigation`,i.default.root,i.default[c],i.default[l],i.default[u],g&&i.default.ready,e),...d,children:(0,s.jsxs)(`div`,{className:i.default.list,role:`tablist`,tabIndex:0,onKeyDown:v,children:[(0,s.jsx)(`div`,{className:i.default.slider,style:h,"aria-hidden":`true`}),t]})})});c.displayName=`TabNavigation`;var l=a.default.forwardRef(({asChild:e=!1,className:n,children:r,active:a,disabled:c,icon:l,href:u,onClick:d,...f},p)=>(0,s.jsxs)(e?t.Root:`a`,{ref:p,href:e?void 0:u,onClick:e=>{if(c){e.preventDefault();return}d&&(e.preventDefault(),d(e))},className:(0,o.default)(i.default.item,a&&i.default.active,c&&i.default.disabled,n),role:`tab`,"aria-selected":a,"aria-disabled":c,tabIndex:a&&!c?0:-1,...f,children:[l&&(0,s.jsx)(`span`,{className:i.default.icon,children:l}),(0,s.jsx)(t.Slottable,{children:r})]}));l.displayName=`TabNavigation.Item`;var u=c;u.Item=l,exports.TabNavigation=u,exports.default=u,exports.TabNavigationItem=l;

package/dist/components/navigation/TabNavigation/TabNavigation.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export interface TabNavigationProps extends React.ComponentPropsWithoutRef<"nav"> {
+    /** Visual style of the tabs */
+    variant?: "underline" | "pill" | "contained";
+    /** Alignment of the tabs */
+    align?: "start" | "center" | "end" | "justify";
+    /** Size of the tabs */
+    size?: ComponentSizeBasic;
+}
+declare const TabNavigation: React.ForwardRefExoticComponent<TabNavigationProps & React.RefAttributes<HTMLElement>>;
+export interface TabNavigationItemProps extends React.ComponentPropsWithoutRef<"a"> {
+    /**
+     * If true, the item will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /** Active state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Icon element */
+    icon?: React.ReactNode;
+}
+export declare const TabNavigationItem: React.ForwardRefExoticComponent<TabNavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const TabNavigationComponent: typeof TabNavigation & {
+    Item: typeof TabNavigationItem;
+};
+export { TabNavigationComponent as TabNavigation };
+export default TabNavigationComponent;

package/dist/components/navigation/TabNavigation/TabNavigation.js

@@ -0,0 +1,78 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
+import { useIndicator as r } from "../../_internal/useIndicator.js";
+import i from "./tab-navigation.module.js";
+import a, { useRef as o } from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/navigation/TabNavigation/TabNavigation.tsx
+var u = a.forwardRef(({ className: e, children: t, variant: a = "underline", align: u = "start", size: d = "md", ...f }, p) => {
+	let m = o(null), { containerRef: h, sliderStyle: g, isReady: _ } = r({
+		activeSelector: `.${i.active}`,
+		variant: a
+	}), v = n(m, p, (e) => {
+		h && (h.current = e?.querySelector(`.${i.list}`) || null);
+	}), y = (e) => {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"tab\"]:not([aria-disabled=\"true\"])"));
+		if (t.length === 0) return;
+		let n = t.indexOf(document.activeElement);
+		if (n === -1) return;
+		let r;
+		r = e.key === "ArrowRight" || e.key === "ArrowDown" ? (n + 1) % t.length : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (n - 1 + t.length) % t.length : e.key === "Home" ? 0 : t.length - 1;
+		let i = t[r];
+		i.focus(), i.click();
+	};
+	return /* @__PURE__ */ c("nav", {
+		ref: v,
+		className: s("wim-tab-navigation", i.root, i[a], i[u], i[d], _ && i.ready, e),
+		...f,
+		children: /* @__PURE__ */ l("div", {
+			className: i.list,
+			role: "tablist",
+			tabIndex: 0,
+			onKeyDown: y,
+			children: [/* @__PURE__ */ c("div", {
+				className: i.slider,
+				style: g,
+				"aria-hidden": "true"
+			}), t]
+		})
+	});
+});
+u.displayName = "TabNavigation";
+var d = a.forwardRef(({ asChild: n = !1, className: r, children: a, active: o, disabled: u, icon: d, href: f, onClick: p, ...m }, h) => /* @__PURE__ */ l(n ? e : "a", {
+	ref: h,
+	href: n ? void 0 : f,
+	onClick: (e) => {
+		if (u) {
+			e.preventDefault();
+			return;
+		}
+		p && (e.preventDefault(), p(e));
+	},
+	className: s(i.item, o && i.active, u && i.disabled, r),
+	role: "tab",
+	"aria-selected": o,
+	"aria-disabled": u,
+	tabIndex: o && !u ? 0 : -1,
+	...m,
+	children: [d && /* @__PURE__ */ c("span", {
+		className: i.icon,
+		children: d
+	}), /* @__PURE__ */ c(t, { children: a })]
+}));
+d.displayName = "TabNavigation.Item";
+var f = u;
+f.Item = d;
+//#endregion
+export { f as TabNavigation, f as default, d as TabNavigationItem };

package/dist/components/navigation/TabNavigation/tab-navigation.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1nkco_9`,t=`_list_1nkco_19`,n=`_start_1nkco_30`,r=`_center_1nkco_33`,i=`_end_1nkco_36`,a=`_justify_1nkco_39`,o=`_item_1nkco_42`,s=`_sm_1nkco_49`,c=`_md_1nkco_54`,l=`_lg_1nkco_59`,u=`_disabled_1nkco_95`,d=`_icon_1nkco_107`,f=`_underline_1nkco_114`,p=`_slider_1nkco_117`,m=`_ready_1nkco_130`,h=`_active_1nkco_142`,g=`_pill_1nkco_149`,_=`_contained_1nkco_189`,v={root:e,list:t,start:n,center:r,end:i,justify:a,item:o,sm:s,md:c,lg:l,disabled:u,icon:d,underline:f,slider:p,ready:m,active:h,pill:g,contained:_};exports.active=h,exports.center=r,exports.contained=_,exports.default=v,exports.disabled=u,exports.end=i,exports.icon=d,exports.item=o,exports.justify=a,exports.lg=l,exports.list=t,exports.md=c,exports.pill=g,exports.ready=m,exports.root=e,exports.slider=p,exports.sm=s,exports.start=n,exports.underline=f;

package/dist/components/navigation/TabNavigation/tab-navigation.module.js

@@ -0,0 +1,24 @@
+"use client";
+//#region src/components/navigation/TabNavigation/tab-navigation.module.scss
+var e = "_root_1nkco_9", t = "_list_1nkco_19", n = "_start_1nkco_30", r = "_center_1nkco_33", i = "_end_1nkco_36", a = "_justify_1nkco_39", o = "_item_1nkco_42", s = "_sm_1nkco_49", c = "_md_1nkco_54", l = "_lg_1nkco_59", u = "_disabled_1nkco_95", d = "_icon_1nkco_107", f = "_underline_1nkco_114", p = "_slider_1nkco_117", m = "_ready_1nkco_130", h = "_active_1nkco_142", g = "_pill_1nkco_149", _ = "_contained_1nkco_189", v = {
+	root: e,
+	list: t,
+	start: n,
+	center: r,
+	end: i,
+	justify: a,
+	item: o,
+	sm: s,
+	md: c,
+	lg: l,
+	disabled: u,
+	icon: d,
+	underline: f,
+	slider: p,
+	ready: m,
+	active: h,
+	pill: g,
+	contained: _
+};
+//#endregion
+export { h as active, r as center, _ as contained, v as default, u as disabled, i as end, d as icon, o as item, a as justify, l as lg, t as list, c as md, g as pill, m as ready, e as root, p as slider, s as sm, n as start, f as underline };

package/dist/components/navigation/Tabs/Tabs.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("../../../hooks/useMergedRef.cjs"),r=require("../../_internal/useIndicator.cjs"),i=require("./tabs.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.createContext)(null),l=()=>{let e=(0,a.useContext)(c);if(!e)throw Error(`Tabs components must be used within a Tabs`);return e},u=a.default.forwardRef(({asChild:e=!1,defaultValue:n,value:r,onChange:l,orientation:u=`horizontal`,className:d,children:f,...p},m)=>{let[h,g]=(0,a.useState)(n),[_,v]=(0,a.useState)([]),[y,b]=(0,a.useState)([]),x=(0,a.useId)(),S=r!==void 0,C=S?r:h,w=(0,a.useCallback)(e=>{S||g(e),l?.(e)},[S,l]),T=(0,a.useCallback)(e=>{v(t=>t.includes(e)?t:[...t,e])},[]),E=(0,a.useCallback)(e=>{v(t=>t.filter(t=>t!==e))},[]),D=(0,a.useCallback)(e=>{b(t=>t.includes(e)?t:[...t,e])},[]),O=(0,a.useCallback)(e=>{b(t=>t.filter(t=>t!==e))},[]),k=e?t.Root:`div`;return(0,s.jsx)(c.Provider,{value:{value:C,onValueChange:w,orientation:u,id:x,items:_,registerItem:T,unregisterItem:E,panels:y,registerPanel:D,unregisterPanel:O},children:(0,s.jsx)(`div`,{className:i.default.container,children:(0,s.jsx)(k,{ref:m,className:(0,o.default)(`wim-tabs`,i.default.root,i.default[u],d),...p,children:(0,s.jsx)(t.Slottable,{children:f})})})})}),d=a.default.forwardRef(({asChild:e=!1,className:c,children:u,...d},f)=>{let{orientation:p,value:m,items:h,onValueChange:g}=l(),[_,v]=a.default.useState(!1),[y,b]=a.default.useState(0),[x,S]=a.default.useState(0),{containerRef:C,sliderStyle:w,isReady:T}=r.useIndicator({activeSelector:`.${i.default.trigger}.${i.default.active}`,orientation:p,dependence:m}),E=n.useMergedRef(C,f),D=e=>{p!==`vertical`&&(v(!0),b(e.pageX-(C.current?.offsetLeft||0)),S(C.current?.scrollLeft||0))},O=()=>{v(!1)};return(0,s.jsxs)(e?t.Root:`div`,{ref:E,role:`tablist`,"aria-orientation":p,tabIndex:0,className:(0,o.default)(i.default.list,_&&i.default.dragging,T&&i.default.ready,c),onMouseDown:D,onMouseUp:O,onMouseLeave:O,onMouseMove:e=>{if(!_||p===`vertical`)return;e.preventDefault();let t=(e.pageX-(C.current?.offsetLeft||0)-y)*1.5;C.current&&(C.current.scrollLeft=x-t)},onKeyDown:e=>{let t=m?h.indexOf(m):-1,n=-1;if(p===`horizontal`?(e.key===`ArrowRight`&&(n=(t+1)%h.length),e.key===`ArrowLeft`&&(n=(t-1+h.length)%h.length)):(e.key===`ArrowDown`&&(n=(t+1)%h.length),e.key===`ArrowUp`&&(n=(t-1+h.length)%h.length)),e.key===`Home`&&(n=0),e.key===`End`&&(n=h.length-1),n!==-1){e.preventDefault();let t=h[n];t&&(g(t),(C.current?.querySelector(`[data-value="${t}"]`))?.focus())}},...d,children:[(0,s.jsx)(`div`,{className:i.default.slider,style:w,"aria-hidden":`true`}),(0,s.jsx)(t.Slottable,{children:u})]})}),f=a.default.forwardRef(({asChild:e=!1,value:n,disabled:r=!1,className:c,children:u,...d},f)=>{let{value:p,onValueChange:m,id:h,registerItem:g,unregisterItem:_,panels:v}=l(),y=p===n;return a.default.useEffect(()=>(g(n),()=>_(n)),[n,g,_]),(0,s.jsx)(e?t.Root:`button`,{ref:f,type:e?void 0:`button`,role:`tab`,"aria-selected":y,"aria-controls":v.includes(n)?`wim-tabs-${h}-panel-${n}`:void 0,id:`wim-tabs-${h}-tab-${n}`,"data-value":n,disabled:r,tabIndex:y?0:-1,className:(0,o.default)(i.default.trigger,y&&i.default.active,c),onClick:()=>m(n),...d,children:(0,s.jsx)(t.Slottable,{children:u})})}),p=a.default.forwardRef(({asChild:e=!1,value:n,className:r,children:c,...u},d)=>{let{value:f,id:p,registerPanel:m,unregisterPanel:h}=l(),g=f===n;return a.default.useEffect(()=>(m(n),()=>h(n)),[n,m,h]),g?(0,s.jsx)(e?t.Root:`div`,{ref:d,role:`tabpanel`,id:`wim-tabs-${p}-panel-${n}`,"aria-labelledby":`wim-tabs-${p}-tab-${n}`,tabIndex:0,className:(0,o.default)(i.default.content,r),...u,children:(0,s.jsx)(t.Slottable,{children:c})}):null});u.displayName=`Tabs`,d.displayName=`Tabs.List`,f.displayName=`Tabs.Trigger`,p.displayName=`Tabs.Content`;var m=u;m.List=d,m.Trigger=f,m.Content=p,exports.Tabs=m,exports.default=m,exports.TabsContent=p,exports.TabsList=d,exports.TabsTrigger=f;

package/dist/components/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+    /**
+     * If true, the tabs root will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /**
+     * Value of the tab selected initially, for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Controlled value of the selected tab. Use together with onChange.
+     */
+    value?: string;
+    /**
+     * Called with the value of the newly selected tab.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Orientation of the tab list, affecting layout and arrow-key navigation.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export type TabsListProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * If true, the tab list will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+};
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * If true, the tab list will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
+    /**
+     * If true, the trigger will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    value: string;
+}
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabsContentProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * If true, the panel will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    value: string;
+}
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsRoot: typeof Tabs & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+export { TabsRoot as Tabs };
+export default TabsRoot;