wimui 0.1.0

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

@@ -0,0 +1,84 @@
+import { default as React } from 'react';
+export interface AppShellProps extends Omit<React.ComponentPropsWithoutRef<"div">, "size"> {
+    /** Header component */
+    header?: React.ReactNode;
+    /** Sidebar component */
+    sidebar?: React.ReactNode;
+    /** Footer component */
+    footer?: React.ReactNode;
+    /** Navbar component (mobile bottom navigation) */
+    navbar?: React.ReactNode;
+    /** Add padding to main content */
+    padding?: boolean;
+    /** Center main content horizontally */
+    centered?: boolean;
+    /** Maximum width for centered content */
+    maxWidth?: number | string;
+}
+/**
+ * アプリケーション全体のレイアウトを構成するルートコンポーネント。
+ *
+ * ## 使い方
+ * ### 1. Composition API（推奨）
+ * サブコンポーネント（`AppShell.Header`, `AppShell.Sidebar` など）を
+ * `children` として渡す方法。柔軟なカスタマイズが可能。
+ *
+ * ```tsx
+ * <AppShell>
+ *   <AppShell.Header>...</AppShell.Header>
+ *   <AppShell.Sidebar>...</AppShell.Sidebar>
+ *   <AppShell.Main>...</AppShell.Main>
+ * </AppShell>
+ * ```
+ *
+ * ### 2. Props API（シンプルなケース向け）
+ * `header`, `sidebar`, `footer`, `navbar` を props として渡す方法。
+ * ただし、サイドバーを使う場合は Composition API を推奨。
+ *
+ * ```tsx
+ * <AppShell header={<Header />} sidebar={<Sidebar />}>
+ *   <main>...</main>
+ * </AppShell>
+ * ```
+ *
+ * @note Props API で `sidebar` を渡した場合、`--with-sidebar` クラスが自動付与されます。
+ *       Composition API で `AppShell.Sidebar` を使う場合は、
+ *       親 `AppShell` に `sidebar` prop として何かを渡すか、
+ *       `AppShell.Body` を使って手動でレイアウトを構成してください。
+ */
+export declare const AppShellRoot: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
+export interface AppShellMainProps extends Omit<React.ComponentPropsWithoutRef<"main">, "size"> {
+    /** Add padding to content */
+    padding?: boolean;
+    /** Center content horizontally */
+    centered?: boolean;
+}
+/**
+ * Composition API でメインコンテンツ領域を定義するサブコンポーネント。
+ * Props API の `AppShellRoot` 内蔵 `<main>` と同等の機能を提供します。
+ */
+export declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
+export type AppShellBodyProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * サイドバーとメインコンテンツを横並びにするラッパー。
+ * Composition API でサイドバーを使う場合に使用します。
+ */
+export declare const AppShellBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type AppShellHeaderProps = React.ComponentPropsWithoutRef<"div">;
+export declare const AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type AppShellSidebarProps = React.ComponentPropsWithoutRef<"div">;
+export declare const AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type AppShellFooterProps = React.ComponentPropsWithoutRef<"div">;
+export declare const AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type AppShellNavbarProps = React.ComponentPropsWithoutRef<"div">;
+export declare const AppShellNavbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AppShellComponent: typeof AppShellRoot & {
+    Main: typeof AppShellMain;
+    Body: typeof AppShellBody;
+    Header: typeof AppShellHeader;
+    Sidebar: typeof AppShellSidebar;
+    Footer: typeof AppShellFooter;
+    Navbar: typeof AppShellNavbar;
+};
+export { AppShellComponent as AppShell };
+export default AppShellComponent;

package/dist/components/layout/AppShell/AppShell.js

@@ -0,0 +1,94 @@
+"use client";
+import e from "./appshell.module.js";
+import t from "react";
+import n from "classnames";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/layout/AppShell/AppShell.tsx
+var a = t.forwardRef(({ className: t, children: a, header: o, sidebar: s, footer: c, navbar: l, padding: u = !0, centered: d, maxWidth: f, ...p }, m) => {
+	let h = f ? { "--wim-appshell-max-width": typeof f == "number" ? `${f}px` : f } : void 0;
+	return /* @__PURE__ */ i("div", {
+		ref: m,
+		className: n("wim-app-shell", e.root, !!s && e.withSidebar, !!l && e.withNavbar, t),
+		style: h,
+		...p,
+		children: [
+			o && /* @__PURE__ */ r("div", {
+				className: e.header,
+				children: o
+			}),
+			/* @__PURE__ */ i("div", {
+				className: e.body,
+				children: [s && /* @__PURE__ */ r("div", {
+					className: e.sidebar,
+					children: s
+				}), /* @__PURE__ */ r("main", {
+					className: n(e.main, u && e.padded, d && e.centered),
+					tabIndex: 0,
+					children: d ? /* @__PURE__ */ r("div", {
+						className: e.content,
+						children: a
+					}) : a
+				})]
+			}),
+			l && /* @__PURE__ */ r("div", {
+				className: e.navbar,
+				children: l
+			}),
+			c && /* @__PURE__ */ r("div", {
+				className: e.footer,
+				children: c
+			})
+		]
+	});
+});
+a.displayName = "AppShell";
+var o = t.forwardRef(({ className: t, children: i, padding: a = !0, centered: o, ...s }, c) => /* @__PURE__ */ r("main", {
+	ref: c,
+	className: n(e.main, a && e.padded, o && e.centered, t),
+	tabIndex: 0,
+	...s,
+	children: o ? /* @__PURE__ */ r("div", {
+		className: e.content,
+		children: i
+	}) : i
+}));
+o.displayName = "AppShell.Main";
+var s = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ r("div", {
+	ref: o,
+	className: n(e.body, t),
+	...a,
+	children: i
+}));
+s.displayName = "AppShell.Body";
+var c = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ r("div", {
+	ref: o,
+	className: n(e.header, t),
+	...a,
+	children: i
+}));
+c.displayName = "AppShell.Header";
+var l = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ r("div", {
+	ref: o,
+	className: n(e.sidebar, t),
+	...a,
+	children: i
+}));
+l.displayName = "AppShell.Sidebar";
+var u = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ r("div", {
+	ref: o,
+	className: n(e.footer, t),
+	...a,
+	children: i
+}));
+u.displayName = "AppShell.Footer";
+var d = t.forwardRef(({ className: t, children: i, ...a }, o) => /* @__PURE__ */ r("div", {
+	ref: o,
+	className: n(e.navbar, t),
+	...a,
+	children: i
+}));
+d.displayName = "AppShell.Navbar";
+var f = a;
+f.Main = o, f.Body = s, f.Header = c, f.Sidebar = l, f.Footer = u, f.Navbar = d;
+//#endregion
+export { f as AppShell, f as default, s as AppShellBody, u as AppShellFooter, c as AppShellHeader, o as AppShellMain, d as AppShellNavbar, a as AppShellRoot, l as AppShellSidebar };

package/dist/components/layout/AppShell/appshell.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1o2ew_4`,t=`_withNavbar_1o2ew_12`,n=`_main_1o2ew_12`,r=`_header_1o2ew_15`,i=`_body_1o2ew_19`,a=`_sidebar_1o2ew_25`,o=`_padded_1o2ew_34`,s=`_centered_1o2ew_37`,c=`_content_1o2ew_42`,l=`_footer_1o2ew_46`,u=`_navbar_1o2ew_50`,d={root:e,withNavbar:t,main:n,header:r,body:i,sidebar:a,padded:o,centered:s,content:c,footer:l,navbar:u};exports.body=i,exports.centered=s,exports.content=c,exports.default=d,exports.footer=l,exports.header=r,exports.main=n,exports.navbar=u,exports.padded=o,exports.root=e,exports.sidebar=a,exports.withNavbar=t;

package/dist/components/layout/AppShell/appshell.module.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/components/layout/AppShell/appshell.module.scss
+var e = "_root_1o2ew_4", t = "_withNavbar_1o2ew_12", n = "_main_1o2ew_12", r = "_header_1o2ew_15", i = "_body_1o2ew_19", a = "_sidebar_1o2ew_25", o = "_padded_1o2ew_34", s = "_centered_1o2ew_37", c = "_content_1o2ew_42", l = "_footer_1o2ew_46", u = "_navbar_1o2ew_50", d = {
+	root: e,
+	withNavbar: t,
+	main: n,
+	header: r,
+	body: i,
+	sidebar: a,
+	padded: o,
+	centered: s,
+	content: c,
+	footer: l,
+	navbar: u
+};
+//#endregion
+export { i as body, s as centered, c as content, d as default, l as footer, r as header, n as main, u as navbar, o as padded, e as root, a as sidebar, t as withNavbar };

package/dist/components/layout/AspectRatio/AspectRatio.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./aspect-ratio.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(({ratio:e=1,children:n,className:a,style:o,...s},c)=>(0,i.jsx)(`div`,{ref:c,className:(0,r.default)(`wim-aspect-ratio`,t.default.root,a),style:{"--wim-aspect-ratio":e,...o},...s,children:(0,i.jsx)(`div`,{className:t.default.inner,children:n})}));a.displayName=`AspectRatio`,exports.AspectRatio=a;

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type AspectRatioProps = React.ComponentPropsWithoutRef<"div"> & {
+    /** Aspect ratio (e.g. 16 / 9, 1, 4 / 3) */
+    ratio?: number;
+    /** Child content */
+    children: React.ReactNode;
+};
+/**
+ * `AspectRatio` is a container that displays content while maintaining a given aspect ratio.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Aspect ratio (e.g. 16 / 9, 1, 4 / 3) */
+    ratio?: number;
+    /** Child content */
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/AspectRatio/AspectRatio.js

@@ -0,0 +1,22 @@
+"use client";
+import e from "./aspect-ratio.module.js";
+import t from "react";
+import n from "classnames";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/layout/AspectRatio/AspectRatio.tsx
+var i = t.forwardRef(({ ratio: t = 1, children: i, className: a, style: o, ...s }, c) => /* @__PURE__ */ r("div", {
+	ref: c,
+	className: n("wim-aspect-ratio", e.root, a),
+	style: {
+		"--wim-aspect-ratio": t,
+		...o
+	},
+	...s,
+	children: /* @__PURE__ */ r("div", {
+		className: e.inner,
+		children: i
+	})
+}));
+i.displayName = "AspectRatio";
+//#endregion
+export { i as AspectRatio };

package/dist/components/layout/AspectRatio/aspect-ratio.module.cjs

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

package/dist/components/layout/AspectRatio/aspect-ratio.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/layout/AspectRatio/aspect-ratio.module.scss
+var e = "_root_9f9rz_3", t = "_inner_9f9rz_9", n = {
+	root: e,
+	inner: t
+};
+//#endregion
+export { n as default, t as inner, e as root };

package/dist/components/layout/BentoGrid/BentoGrid.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./bento-grid.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=({className:e,children:n,...a})=>(0,i.jsx)(`div`,{className:t.default.container,children:(0,i.jsx)(`div`,{className:(0,r.default)(`wim-bento-grid`,t.default.root,e),...a,children:n})});a.displayName=`BentoGrid`;var o=({className:e,title:n,description:a,header:o,icon:s,...c})=>(0,i.jsxs)(`div`,{className:(0,r.default)(t.default.item,e),...c,children:[o&&(0,i.jsx)(`div`,{className:t.default.itemHeader,children:o}),(0,i.jsxs)(`div`,{className:t.default.itemContent,children:[s&&(0,i.jsx)(`div`,{className:t.default.itemIcon,children:s}),(0,i.jsxs)(`div`,{className:t.default.itemText,children:[n&&(0,i.jsx)(`div`,{className:t.default.itemTitle,children:n}),a&&(0,i.jsx)(`div`,{className:t.default.itemDescription,children:a})]})]})]});o.displayName=`BentoGridItem`,exports.BentoGrid=a,exports.BentoGridItem=o;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+type BentoGridProps = React.ComponentPropsWithoutRef<"div"> & {
+    /** Grid items (typically BentoGrid.Item elements) */
+    children?: React.ReactNode;
+};
+export declare const BentoGrid: {
+    ({ className, children, ...props }: BentoGridProps): React.JSX.Element;
+    displayName: string;
+};
+export type BentoGridItemProps = React.ComponentPropsWithoutRef<"div"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    header?: React.ReactNode;
+    icon?: React.ReactNode;
+};
+export declare const BentoGridItem: {
+    ({ className, title, description, header, icon, ...props }: BentoGridItemProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/layout/BentoGrid/BentoGrid.js

@@ -0,0 +1,41 @@
+"use client";
+import e from "./bento-grid.module.js";
+import "react";
+import t from "classnames";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/layout/BentoGrid/BentoGrid.tsx
+var i = ({ className: r, children: i, ...a }) => /* @__PURE__ */ n("div", {
+	className: e.container,
+	children: /* @__PURE__ */ n("div", {
+		className: t("wim-bento-grid", e.root, r),
+		...a,
+		children: i
+	})
+});
+i.displayName = "BentoGrid";
+var a = ({ className: i, title: a, description: o, header: s, icon: c, ...l }) => /* @__PURE__ */ r("div", {
+	className: t(e.item, i),
+	...l,
+	children: [s && /* @__PURE__ */ n("div", {
+		className: e.itemHeader,
+		children: s
+	}), /* @__PURE__ */ r("div", {
+		className: e.itemContent,
+		children: [c && /* @__PURE__ */ n("div", {
+			className: e.itemIcon,
+			children: c
+		}), /* @__PURE__ */ r("div", {
+			className: e.itemText,
+			children: [a && /* @__PURE__ */ n("div", {
+				className: e.itemTitle,
+				children: a
+			}), o && /* @__PURE__ */ n("div", {
+				className: e.itemDescription,
+				children: o
+			})]
+		})]
+	})]
+});
+a.displayName = "BentoGridItem";
+//#endregion
+export { i as BentoGrid, a as BentoGridItem };

package/dist/components/layout/BentoGrid/bento-grid.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_c14j6_3`,t=`_root_c14j6_8`,n=`_item_c14j6_22`,r=`_itemHeader_c14j6_36`,i=`_itemContent_c14j6_44`,a=`_itemIcon_c14j6_49`,o=`_itemText_c14j6_52`,s=`_itemTitle_c14j6_56`,c=`_itemDescription_c14j6_61`,l={container:e,root:t,item:n,itemHeader:r,itemContent:i,itemIcon:a,itemText:o,itemTitle:s,itemDescription:c};exports.container=e,exports.default=l,exports.item=n,exports.itemContent=i,exports.itemDescription=c,exports.itemHeader=r,exports.itemIcon=a,exports.itemText=o,exports.itemTitle=s,exports.root=t;

package/dist/components/layout/BentoGrid/bento-grid.module.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/components/layout/BentoGrid/bento-grid.module.scss
+var e = "_container_c14j6_3", t = "_root_c14j6_8", n = "_item_c14j6_22", r = "_itemHeader_c14j6_36", i = "_itemContent_c14j6_44", a = "_itemIcon_c14j6_49", o = "_itemText_c14j6_52", s = "_itemTitle_c14j6_56", c = "_itemDescription_c14j6_61", l = {
+	container: e,
+	root: t,
+	item: n,
+	itemHeader: r,
+	itemContent: i,
+	itemIcon: a,
+	itemText: o,
+	itemTitle: s,
+	itemDescription: c
+};
+//#endregion
+export { e as container, l as default, n as item, i as itemContent, c as itemDescription, r as itemHeader, a as itemIcon, o as itemText, s as itemTitle, t as root };

package/dist/components/layout/Box/Box.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("../../../utilities/style-utils.cjs"),r=require("../Grid/grid-utils.cjs"),i=require("./box.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(({as:e,asChild:a=!1,p:c,pt:l,pr:u,pb:d,pl:f,px:p,py:m,m:h,mt:g,mr:_,mb:v,ml:y,mx:b,my:x,bg:S,color:C,w,h:T,radius:E,shadow:D,display:O,position:k,style:A,className:j,children:M,...N},P)=>{let F=a?t.Root:e||`div`,I=r.generateResponsiveVars(w,`--wim-box-w`,e=>n.getSpacingValue(e)||``),L=r.generateResponsiveVars(T,`--wim-box-h`,e=>n.getSpacingValue(e)||``),R={paddingTop:n.getSpacingValue(l??m??c),paddingRight:n.getSpacingValue(u??p??c),paddingBottom:n.getSpacingValue(d??m??c),paddingLeft:n.getSpacingValue(f??p??c),marginTop:n.getSpacingValue(g??x??h),marginRight:n.getSpacingValue(_??b??h),marginBottom:n.getSpacingValue(v??x??h),marginLeft:n.getSpacingValue(y??b??h),backgroundColor:n.getColorValue(S),color:n.getColorValue(C),width:typeof w==`object`?`var(--wim-box-w)`:n.getSpacingValue(w),height:typeof T==`object`?`var(--wim-box-h)`:n.getSpacingValue(T),borderRadius:n.getRadiusValue(E),boxShadow:n.getShadowValue(D),display:O,position:k,...I,...L,...A};return(0,s.jsx)(F,{ref:P,className:(0,o.default)(`wim-box`,i.default.root,typeof w==`object`&&!!w&&i.default.responsiveW,typeof T==`object`&&!!T&&i.default.responsiveH,j),style:R,...N,children:M})});c.displayName=`Box`,exports.Box=c;

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

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { WimColor, WimSpacing, WimRadius, WimShadow } from '../../../types/tokens';
+import { ResponsiveProp } from '../../layout/Grid/grid-utils';
+export type BoxProps<C extends React.ElementType = "div"> = {
+    /** The component used for the root node. Either a string to use a HTML element or a component. */
+    as?: C;
+    /**
+     * If true, the box will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /** Padding */
+    p?: number | WimSpacing;
+    /** Padding top */
+    pt?: number | WimSpacing;
+    /** Padding right */
+    pr?: number | WimSpacing;
+    /** Padding bottom */
+    pb?: number | WimSpacing;
+    /** Padding left */
+    pl?: number | WimSpacing;
+    /** Padding horizontal */
+    px?: number | WimSpacing;
+    /** Padding vertical */
+    py?: number | WimSpacing;
+    /** Margin */
+    m?: number | WimSpacing;
+    /** Margin top */
+    mt?: number | WimSpacing;
+    /** Margin right */
+    mr?: number | WimSpacing;
+    /** Margin bottom */
+    mb?: number | WimSpacing;
+    /** Margin left */
+    ml?: number | WimSpacing;
+    /** Margin horizontal */
+    mx?: number | WimSpacing;
+    /** Margin vertical */
+    my?: number | WimSpacing;
+    /** Background color */
+    bg?: WimColor;
+    /** Text color */
+    color?: WimColor;
+    /** Width */
+    w?: ResponsiveProp<number | string>;
+    /** Height */
+    h?: ResponsiveProp<number | string>;
+    /** Border radius */
+    radius?: number | WimRadius;
+    /** Box shadow */
+    shadow?: WimShadow;
+    /** Display */
+    display?: React.CSSProperties["display"];
+    /** Position */
+    position?: React.CSSProperties["position"];
+} & React.ComponentPropsWithoutRef<C>;
+/**
+ * Box is the most basic layout component.
+ * It provides a way to style a div (or any other element) with common CSS properties as props.
+ */
+export interface BoxComponent {
+    <C extends React.ElementType = "div">(props: BoxProps<C> & {
+        ref?: React.Ref<any>;
+    }): React.ReactElement | null;
+    displayName?: string;
+}
+export declare const Box: BoxComponent;

package/dist/components/layout/Box/Box.js

@@ -0,0 +1,42 @@
+"use client";
+import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { getColorValue as t, getRadiusValue as n, getShadowValue as r, getSpacingValue as i } from "../../../utilities/style-utils.js";
+import { generateResponsiveVars as a } from "../Grid/grid-utils.js";
+import o from "./box.module.js";
+import s from "react";
+import c from "classnames";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/layout/Box/Box.tsx
+var u = s.forwardRef(({ as: s, asChild: u = !1, p: d, pt: f, pr: p, pb: m, pl: h, px: g, py: _, m: v, mt: y, mr: b, mb: x, ml: S, mx: C, my: w, bg: T, color: E, w: D, h: O, radius: k, shadow: A, display: j, position: M, style: N, className: P, children: F, ...I }, L) => {
+	let R = u ? e : s || "div", z = a(D, "--wim-box-w", (e) => i(e) || ""), B = a(O, "--wim-box-h", (e) => i(e) || ""), V = {
+		paddingTop: i(f ?? _ ?? d),
+		paddingRight: i(p ?? g ?? d),
+		paddingBottom: i(m ?? _ ?? d),
+		paddingLeft: i(h ?? g ?? d),
+		marginTop: i(y ?? w ?? v),
+		marginRight: i(b ?? C ?? v),
+		marginBottom: i(x ?? w ?? v),
+		marginLeft: i(S ?? C ?? v),
+		backgroundColor: t(T),
+		color: t(E),
+		width: typeof D == "object" ? "var(--wim-box-w)" : i(D),
+		height: typeof O == "object" ? "var(--wim-box-h)" : i(O),
+		borderRadius: n(k),
+		boxShadow: r(A),
+		display: j,
+		position: M,
+		...z,
+		...B,
+		...N
+	};
+	return /* @__PURE__ */ l(R, {
+		ref: L,
+		className: c("wim-box", o.root, typeof D == "object" && !!D && o.responsiveW, typeof O == "object" && !!O && o.responsiveH, P),
+		style: V,
+		...I,
+		children: F
+	});
+});
+u.displayName = "Box";
+//#endregion
+export { u as Box };

package/dist/components/layout/Box/box.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_14m10_3`,t=`_responsiveW_14m10_18`,n=`_responsiveH_14m10_39`,r={root:e,responsiveW:t,responsiveH:n};exports.default=r,exports.responsiveH=n,exports.responsiveW=t,exports.root=e;

package/dist/components/layout/Box/box.module.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/layout/Box/box.module.scss
+var e = "_root_14m10_3", t = "_responsiveW_14m10_18", n = "_responsiveH_14m10_39", r = {
+	root: e,
+	responsiveW: t,
+	responsiveH: n
+};
+//#endregion
+export { r as default, n as responsiveH, t as responsiveW, e as root };

package/dist/components/layout/Center/Center.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Box/Box.cjs"),n=require("./center.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(({inline:e=!1,style:r,className:o,children:s,...c},l)=>(0,a.jsx)(t.Box,{ref:l,display:e?`inline-flex`:`flex`,className:(0,i.default)(`wim-center`,n.default.root,o),style:{alignItems:`center`,justifyContent:`center`,...r},...c,children:s}));o.displayName=`Center`,exports.Center=o;

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BoxProps } from '../../layout/Box/Box';
+export type CenterProps = Omit<BoxProps, "as"> & {
+    /** Whether to use inline-flex */
+    inline?: boolean;
+};
+/**
+ * Center component is used to center its children vertically and horizontally.
+ */
+export declare const Center: React.ForwardRefExoticComponent<Omit<BoxProps, "as"> & {
+    /** Whether to use inline-flex */
+    inline?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Center/Center.js

@@ -0,0 +1,22 @@
+"use client";
+import { Box as e } from "../Box/Box.js";
+import t from "./center.module.js";
+import n from "react";
+import r from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/Center/Center.tsx
+var a = n.forwardRef(({ inline: n = !1, style: a, className: o, children: s, ...c }, l) => /* @__PURE__ */ i(e, {
+	ref: l,
+	display: n ? "inline-flex" : "flex",
+	className: r("wim-center", t.root, o),
+	style: {
+		alignItems: "center",
+		justifyContent: "center",
+		...a
+	},
+	...c,
+	children: s
+}));
+a.displayName = "Center";
+//#endregion
+export { a as Center };

package/dist/components/layout/Center/center.module.cjs

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

package/dist/components/layout/Center/center.module.js

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

package/dist/components/layout/Container/Container.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Box/Box.cjs"),n=require("./container.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={xs:`540px`,sm:`720px`,md:`960px`,lg:`1140px`,xl:`1320px`},s=r.default.forwardRef(({size:e=`lg`,fluid:r=!1,style:s,className:c,children:l,...u},d)=>{let f=r?`100%`:o[e]||(typeof e==`number`?`${e}px`:e);return(0,a.jsx)(t.Box,{ref:d,className:(0,i.default)(`wim-container`,n.default.root,c),mx:`auto`,w:`100%`,style:{maxWidth:f,...s},...u,children:l})});s.displayName=`Container`,exports.Container=s;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { BoxProps } from '../../layout/Box/Box';
+export type ContainerProps = Omit<BoxProps, "as"> & {
+    /** Container max-width */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | number | string;
+    /** Whether the container should be fluid (100% width) */
+    fluid?: boolean;
+};
+/**
+ * Container component is used to center content horizontally and limit its maximum width.
+ */
+export declare const Container: React.ForwardRefExoticComponent<Omit<BoxProps, "as"> & {
+    /** Container max-width */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | number | string;
+    /** Whether the container should be fluid (100% width) */
+    fluid?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Container/Container.js

@@ -0,0 +1,31 @@
+"use client";
+import { Box as e } from "../Box/Box.js";
+import t from "./container.module.js";
+import n from "react";
+import r from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/Container/Container.tsx
+var a = {
+	xs: "540px",
+	sm: "720px",
+	md: "960px",
+	lg: "1140px",
+	xl: "1320px"
+}, o = n.forwardRef(({ size: n = "lg", fluid: o = !1, style: s, className: c, children: l, ...u }, d) => {
+	let f = o ? "100%" : a[n] || (typeof n == "number" ? `${n}px` : n);
+	return /* @__PURE__ */ i(e, {
+		ref: d,
+		className: r("wim-container", t.root, c),
+		mx: "auto",
+		w: "100%",
+		style: {
+			maxWidth: f,
+			...s
+		},
+		...u,
+		children: l
+	});
+});
+o.displayName = "Container";
+//#endregion
+export { o as Container };

package/dist/components/layout/Container/container.module.cjs

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

package/dist/components/layout/Container/container.module.js

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

package/dist/components/layout/Dashboard/Dashboard.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/close-small.cjs"),r=require("../../../icon/edit.cjs"),i=require("../../../icon/plus.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("../../data-display/Card/Card.cjs"),s=require("../../form/Button/Button.cjs"),c=require("./dashboard.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=(0,l.createContext)(null),p=()=>{let e=(0,l.useContext)(f);if(!e)throw Error(`Dashboard subcomponents must be used within Dashboard`);return e},m=l.default.forwardRef(({widgets:e,editable:n,defaultEditable:o=!1,onEditChange:p,onRemove:m,onAdd:g,columns:_=3,gap:v=`md`,showEditToggle:y=!0,label:b,className:x,style:S,children:C,...w},T)=>{let{t:E}=t.useWimTranslation(`components`),D=n!==void 0,[O,k]=(0,l.useState)(o),A=D?n:O,j=(0,l.useCallback)(()=>{let e=!A;D||k(e),p?.(e)},[A,D,p]),M={"--dashboard-columns":_,...S},N=(0,l.useMemo)(()=>({editable:A??!1,onRemove:m}),[A,m]);return(0,d.jsx)(f.Provider,{value:N,children:(0,d.jsxs)(`div`,{ref:T,className:(0,u.default)(`wim-dashboard`,c.default.root,x),"aria-label":b??E(`dashboard_widget.label`),...w,children:[y&&(0,d.jsxs)(`div`,{className:c.default.header,children:[b&&(0,d.jsx)(`h2`,{className:c.default.heading,children:b}),(0,d.jsx)(s.Button,{size:`sm`,variant:A?`solid`:`outline`,intent:`default`,className:(0,u.default)(c.default.editToggle,{[c.default.editActive]:A}),onClick:j,"aria-pressed":A,"aria-label":E(A?`dashboard_widget.exit_edit`:`dashboard_widget.enter_edit`),icon:(0,d.jsx)(a.Icon,{component:r.default,size:`sm`}),children:E(A?`dashboard_widget.exit_edit`:`dashboard_widget.enter_edit`)})]}),(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.grid,c.default[`gap-${v}`]),style:M,role:`region`,"aria-label":E(`dashboard_widget.grid_label`),children:[e?e.map(e=>(0,d.jsx)(h,{widget:e},e.id)):C,A&&g&&(0,d.jsx)(s.Button,{asChild:!0,className:c.default.addButton,onClick:g,"aria-label":E(`dashboard_widget.add_widget`),children:(0,d.jsxs)(`button`,{type:`button`,children:[(0,d.jsx)(a.Icon,{component:i.default,size:`md`}),(0,d.jsx)(`span`,{children:E(`dashboard_widget.add_widget`)})]})})]})]})})});m.displayName=`Dashboard`;var h=({widget:e,className:r,...i})=>{let{editable:l,onRemove:f}=p(),{t:m}=t.useWimTranslation(`components`),{id:h,title:g,description:_,content:v,span:y=1,rowSpan:b=1}=e;return(0,d.jsxs)(o.Card,{variant:`outline`,padding:`md`,radius:`md`,className:(0,u.default)(c.default.widget,c.default[`span-${y}`],c.default[`row-${b}`],{[c.default.editMode]:l},r),style:{"--widget-span":y,"--widget-row-span":b},...i,children:[(0,d.jsxs)(`div`,{className:c.default.widgetHeader,children:[(0,d.jsxs)(`div`,{className:c.default.widgetMeta,children:[(0,d.jsx)(`h3`,{className:c.default.widgetTitle,children:g}),_&&(0,d.jsx)(`p`,{className:c.default.widgetDescription,children:_})]}),l&&f&&(0,d.jsx)(s.Button,{size:`sm`,variant:`ghost`,intent:`danger`,className:c.default.removeButton,onClick:()=>f(h),"aria-label":m(`dashboard_widget.remove_widget`,{title:g}),icon:(0,d.jsx)(a.Icon,{component:n.default,size:`sm`})})]}),(0,d.jsx)(`div`,{className:c.default.widgetContent,children:v})]})};h.displayName=`DashboardWidgetCard`,exports.Dashboard=m,exports.DashboardWidgetCard=h;