@malilion/block-ui-react 0.2.0 → 0.4.0

package/dist/components/feedback/Drawer/Drawer.js

@@ -0,0 +1,78 @@
+import { cx } from "../../../utils/cx.js";
+import { usePortalContainer } from "../../../provider/context.js";
+import { mergeRefs } from "../../../utils/refs.js";
+import { useFocusTrap } from "../../../hooks/useFocusTrap.js";
+import { useScrollLock } from "../../../hooks/useScrollLock.js";
+import Drawer_module_default from "./Drawer.module.js";
+import { forwardRef, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { CloseIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/Drawer/Drawer.tsx
+/**
+* Panel that slides in from an edge (inventory, settings, mobile menu). Modal
+* like `BlockModal`: focus trap, Escape, overlay click and focus restoration.
+*/
+var Drawer = forwardRef(function Drawer({ open, onClose, title, children, footer, side = "right", size = "md", closeOnOverlayClick = true, closeOnEscape = true, initialFocusRef, className, ...rest }, ref) {
+	const container = usePortalContainer();
+	const panelRef = useRef(null);
+	const titleId = useId();
+	useFocusTrap(panelRef, open && container !== null, { initialFocus: initialFocusRef });
+	useScrollLock(open);
+	if (!open || !container) return null;
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && closeOnEscape) {
+			event.stopPropagation();
+			onClose();
+		}
+	};
+	const handleOverlayClick = (event) => {
+		if (closeOnOverlayClick && event.target === event.currentTarget) onClose();
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		className: Drawer_module_default.overlay,
+		"data-side": side,
+		onMouseDown: handleOverlayClick,
+		onKeyDown: handleKeyDown,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: mergeRefs(panelRef, ref),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			"data-side": side,
+			"data-size": size,
+			className: cx(Drawer_module_default.drawer, className),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: Drawer_module_default.header,
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: Drawer_module_default.title,
+						children: title
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: Drawer_module_default.close,
+						"aria-label": "Close",
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: Drawer_module_default.body,
+					children
+				}),
+				footer ? /* @__PURE__ */ jsx("div", {
+					className: Drawer_module_default.footer,
+					children: footer
+				}) : null
+			]
+		})
+	}), container);
+});
+//#endregion
+export { Drawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/feedback/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["styles"],"sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["import { CloseIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, useRef, type KeyboardEvent, type MouseEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport styles from \"./Drawer.module.css\";\nimport type { DrawerProps } from \"./Drawer.types\";\n\n/**\n * Panel that slides in from an edge (inventory, settings, mobile menu). Modal\n * like `BlockModal`: focus trap, Escape, overlay click and focus restoration.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  {\n    open,\n    onClose,\n    title,\n    children,\n    footer,\n    side = \"right\",\n    size = \"md\",\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    initialFocusRef,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const container = usePortalContainer();\n  const panelRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  useFocusTrap(panelRef, open && container !== null, { initialFocus: initialFocusRef });\n  useScrollLock(open);\n\n  if (!open || !container) return null;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\" && closeOnEscape) {\n      event.stopPropagation();\n      onClose();\n    }\n  };\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && event.target === event.currentTarget) onClose();\n  };\n\n  return createPortal(\n    <div\n      role=\"presentation\"\n      className={styles.overlay}\n      data-side={side}\n      onMouseDown={handleOverlayClick}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        ref={mergeRefs(panelRef, ref)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        data-side={side}\n        data-size={size}\n        className={cx(styles.drawer, className)}\n        {...rest}\n      >\n        <div className={styles.header}>\n          <h2 id={titleId} className={styles.title}>\n            {title}\n          </h2>\n          <button type=\"button\" className={styles.close} aria-label=\"Close\" onClick={onClose}>\n            <CloseIcon size={16} />\n          </button>\n        </div>\n        <div className={styles.body}>{children}</div>\n        {footer ? <div className={styles.footer}>{footer}</div> : null}\n      </div>\n    </div>,\n    container,\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAa,SAAS,WAAwC,SAAS,OACrE,EACE,MACA,SACA,OACA,UACA,QACA,OAAO,SACP,OAAO,MACP,sBAAsB,MACtB,gBAAgB,MAChB,iBACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,mBAAmB;CACrC,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,UAAU,MAAM;CAEtB,aAAa,UAAU,QAAQ,cAAc,MAAM,EAAE,cAAc,gBAAgB,CAAC;CACpF,cAAc,IAAI;CAElB,IAAI,CAAC,QAAQ,CAAC,WAAW,OAAO;CAEhC,MAAM,iBAAiB,UAAyC;EAC9D,IAAI,MAAM,QAAQ,YAAY,eAAe;GAC3C,MAAM,gBAAgB;GACtB,QAAQ;EACV;CACF;CAEA,MAAM,sBAAsB,UAAsC;EAChE,IAAI,uBAAuB,MAAM,WAAW,MAAM,eAAe,QAAQ;CAC3E;CAEA,OAAO,aACL,oBAAC,OAAD;EACE,MAAK;EACL,WAAWA,sBAAO;EAClB,aAAW;EACX,aAAa;EACb,WAAW;EAEX,UAAA,qBAAC,OAAD;GACE,KAAK,UAAU,UAAU,GAAG;GAC5B,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,UAAU;GACV,aAAW;GACX,aAAW;GACX,WAAW,GAAGA,sBAAO,QAAQ,SAAS;GACtC,GAAI;GATN,UAAA;IAWE,qBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAvB,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAWA,sBAAO;MAChC,UAAA;KACC,CAAA,GACJ,oBAAC,UAAD;MAAQ,MAAK;MAAS,WAAWA,sBAAO;MAAO,cAAW;MAAQ,SAAS;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;KAChB,CAAA,CACL;;IACL,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;IAAc,CAAA;IAC3C,SAAS,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAS,UAAA;IAAY,CAAA,IAAI;GACvD;;CACF,CAAA,GACL,SACF;AACF,CAAC"}

package/dist/components/feedback/Drawer/Drawer.module.js

@@ -0,0 +1,25 @@
+//#region src/components/feedback/Drawer/Drawer.module.css
+var overlay = "block-overlay-MaF41";
+var drawer = "block-drawer-aWDC6";
+var header = "block-header-FheCx";
+var title = "block-title-4QE9I";
+var close = "block-close-fdVrq";
+var body = "block-body-aFN-w";
+var footer = "block-footer-m9z0P";
+var Drawer_module_default = {
+	overlay,
+	"block-drawer-fade": "block-block-drawer-fade-4rcmM",
+	drawer,
+	"block-drawer-in-right": "block-block-drawer-in-right-Krar9",
+	"block-drawer-in-left": "block-block-drawer-in-left-EnlSn",
+	"block-drawer-in-bottom": "block-block-drawer-in-bottom-yyZ8z",
+	header,
+	title,
+	close,
+	body,
+	footer
+};
+//#endregion
+export { body, close, Drawer_module_default as default, drawer, footer, header, overlay, title };
+
+//# sourceMappingURL=Drawer.module.js.map

package/dist/components/feedback/Drawer/Drawer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.js","names":[],"sources":["../../../../src/components/feedback/Drawer/Drawer.module.css"],"sourcesContent":[".overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--block-z-modal);\n  display: flex;\n  justify-content: flex-end;\n  background-color: var(--block-overlay);\n  animation: block-drawer-fade var(--block-duration-fast) steps(3, end);\n}\n\n.overlay[data-side=\"left\"] {\n  justify-content: flex-start;\n}\n\n.overlay[data-side=\"bottom\"] {\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.drawer {\n  --drawer-size: 360px;\n  display: flex;\n  flex-direction: column;\n  width: min(var(--drawer-size), 100%);\n  height: 100%;\n  color: var(--block-text);\n  background-color: var(--block-surface);\n  background-image:\n    linear-gradient(\n      color-mix(in srgb, var(--block-surface) 88%, transparent),\n      color-mix(in srgb, var(--block-surface) 88%, transparent)\n    ),\n    var(--block-texture);\n  background-size:\n    auto,\n    64px 64px;\n  border-left: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n  outline: none;\n  animation: block-drawer-in-right var(--block-duration-normal) steps(4, end);\n}\n\n.drawer[data-size=\"sm\"] {\n  --drawer-size: 280px;\n}\n\n.drawer[data-size=\"lg\"] {\n  --drawer-size: 520px;\n}\n\n.drawer[data-side=\"left\"] {\n  border-left: 0;\n  border-right: var(--block-border-width) solid var(--block-border);\n  animation-name: block-drawer-in-left;\n}\n\n.drawer[data-side=\"bottom\"] {\n  --drawer-size: 50dvh;\n  width: 100%;\n  height: min(var(--drawer-size), 100%);\n  border-left: 0;\n  border-top: var(--block-border-width) solid var(--block-border);\n  animation-name: block-drawer-in-bottom;\n}\n\n.drawer[data-side=\"bottom\"][data-size=\"sm\"] {\n  --drawer-size: 33dvh;\n}\n\n.drawer[data-side=\"bottom\"][data-size=\"lg\"] {\n  --drawer-size: 80dvh;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--block-space-2);\n  margin: 3px 3px 0;\n  padding: var(--block-space-2) var(--block-space-3);\n  background-color: var(--block-surface-header);\n  border-bottom: var(--block-border-width-thin) solid var(--block-border);\n}\n\n.title {\n  flex: 1;\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-lg);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n}\n\n.close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  color: var(--block-text);\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n  cursor: pointer;\n}\n\n.close:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.body {\n  flex: 1;\n  min-height: 0;\n  padding: var(--block-space-4);\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--block-space-2);\n  padding: var(--block-space-3) var(--block-space-4);\n  border-top: var(--block-border-width-thin) solid var(--block-border);\n}\n\n@keyframes block-drawer-fade {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes block-drawer-in-right {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes block-drawer-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes block-drawer-in-bottom {\n  from {\n    transform: translateY(100%);\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Drawer/Drawer.types.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode, RefObject } from "react";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    /** Called on Escape, overlay click or the close button. */
+    onClose: () => void;
+    title: ReactNode;
+    children?: ReactNode;
+    /** Action row pinned to the bottom. */
+    footer?: ReactNode;
+    /** Edge the drawer slides from. @default "right" */
+    side?: "left" | "right" | "bottom";
+    /** Width (or height for `bottom`). @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default true */
+    closeOnOverlayClick?: boolean;
+    /** @default true */
+    closeOnEscape?: boolean;
+    /** Element focused when the drawer opens. Defaults to the first focusable element. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+}
+//# sourceMappingURL=Drawer.types.d.ts.map

package/dist/components/feedback/Drawer/Drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,IAAI,EAAE,OAAO,CAAC;IACd,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oBAAoB;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sFAAsF;IACtF,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACjD"}

package/dist/components/feedback/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer } from "./Drawer";
+export type { DrawerProps } from "./Drawer.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/feedback/EmptyState/EmptyState.d.ts

@@ -0,0 +1,4 @@
+import type { EmptyStateProps } from "./EmptyState.types";
+/** Placeholder for an empty list or search: icon, title, description and an action. */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/feedback/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,uFAAuF;AACvF,eAAO,MAAM,UAAU,4GAcrB,CAAC"}

package/dist/components/feedback/EmptyState/EmptyState.js

@@ -0,0 +1,35 @@
+import { cx } from "../../../utils/cx.js";
+import EmptyState_module_default from "./EmptyState.module.js";
+import { createElement, forwardRef } from "react";
+import { ChestIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/EmptyState/EmptyState.tsx
+/** Placeholder for an empty list or search: icon, title, description and an action. */
+var EmptyState = forwardRef(function EmptyState({ title, description, icon, action, headingLevel = 3, size = "md", className, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-size": size,
+		className: cx(EmptyState_module_default.empty, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: EmptyState_module_default.icon,
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(ChestIcon, { size: size === "sm" ? 32 : 48 })
+			}),
+			createElement(`h${headingLevel}`, { className: EmptyState_module_default.title }, title),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: EmptyState_module_default.description,
+				children: description
+			}) : null,
+			action ? /* @__PURE__ */ jsx("div", {
+				className: EmptyState_module_default.action,
+				children: action
+			}) : null
+		]
+	});
+});
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/feedback/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["styles"],"sources":["../../../../src/components/feedback/EmptyState/EmptyState.tsx"],"sourcesContent":["import { ChestIcon } from \"@malilion/block-ui-icons\";\nimport { createElement, forwardRef } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./EmptyState.module.css\";\nimport type { EmptyStateProps } from \"./EmptyState.types\";\n\n/** Placeholder for an empty list or search: icon, title, description and an action. */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title, description, icon, action, headingLevel = 3, size = \"md\", className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} data-size={size} className={cx(styles.empty, className)} {...rest}>\n      <span className={styles.icon} aria-hidden=\"true\">\n        {icon ?? <ChestIcon size={size === \"sm\" ? 32 : 48} />}\n      </span>\n      {createElement(`h${headingLevel}`, { className: styles.title }, title)}\n      {description ? <p className={styles.description}>{description}</p> : null}\n      {action ? <div className={styles.action}>{action}</div> : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAOA,IAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,OAAO,aAAa,MAAM,QAAQ,eAAe,GAAG,OAAO,MAAM,WAAW,GAAG,QACjF,KACA;CACA,OACE,qBAAC,OAAD;EAAU;EAAK,aAAW;EAAM,WAAW,GAAGA,0BAAO,OAAO,SAAS;EAAG,GAAI;EAA5E,UAAA;GACE,oBAAC,QAAD;IAAM,WAAWA,0BAAO;IAAM,eAAY;IACvC,UAAA,QAAQ,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,KAAK,GAAK,CAAA;GAChD,CAAA;GACL,cAAc,IAAI,gBAAgB,EAAE,WAAWA,0BAAO,MAAM,GAAG,KAAK;GACpE,cAAc,oBAAC,KAAD;IAAG,WAAWA,0BAAO;IAAc,UAAA;GAAe,CAAA,IAAI;GACpE,SAAS,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAS,UAAA;GAAY,CAAA,IAAI;EACvD;;AAET,CAAC"}

package/dist/components/feedback/EmptyState/EmptyState.module.js

@@ -0,0 +1,17 @@
+//#region src/components/feedback/EmptyState/EmptyState.module.css
+var empty = "block-empty-CypAE";
+var icon = "block-icon-RT29d";
+var title = "block-title-gsp4I";
+var description = "block-description-es-JM";
+var action = "block-action-TqLZE";
+var EmptyState_module_default = {
+	empty,
+	icon,
+	title,
+	description,
+	action
+};
+//#endregion
+export { action, EmptyState_module_default as default, description, empty, icon, title };
+
+//# sourceMappingURL=EmptyState.module.js.map

package/dist/components/feedback/EmptyState/EmptyState.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.module.js","names":[],"sources":["../../../../src/components/feedback/EmptyState/EmptyState.module.css"],"sourcesContent":[".empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-2);\n  width: 100%;\n  padding: var(--block-space-8) var(--block-space-4);\n  text-align: center;\n  color: var(--block-text);\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) dashed var(--block-border);\n}\n\n.empty[data-size=\"sm\"] {\n  padding: var(--block-space-4) var(--block-space-3);\n}\n\n.icon {\n  display: inline-flex;\n  opacity: 0.6;\n  filter: grayscale(0.5);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  font-weight: var(--block-font-weight-bold);\n  letter-spacing: var(--block-letter-spacing-wide);\n  text-transform: uppercase;\n  text-shadow: var(--block-shadow-text);\n}\n\n.empty[data-size=\"sm\"] .title {\n  font-size: var(--block-font-size-sm);\n}\n\n.description {\n  max-width: 42ch;\n  margin: 0;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-muted);\n}\n\n.action {\n  margin-top: var(--block-space-2);\n}\n"],"mappings":""}

package/dist/components/feedback/EmptyState/EmptyState.types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Pixel icon above the title. Defaults to an empty chest. */
+    icon?: ReactNode;
+    /** Call to action, usually a `BlockButton`. */
+    action?: ReactNode;
+    /** Heading level of the title. @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** @default "md" */
+    size?: "sm" | "md";
+}
+//# sourceMappingURL=EmptyState.types.d.ts.map

package/dist/components/feedback/EmptyState/EmptyState.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.types.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/EmptyState/EmptyState.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB"}

package/dist/components/feedback/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps } from "./EmptyState.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/feedback/Modal/BlockModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockModal.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Modal/BlockModal.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D;;;GAGG;AACH,eAAO,MAAM,UAAU,4GAiGrB,CAAC"}
+{"version":3,"file":"BlockModal.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Modal/BlockModal.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,4GAwFrB,CAAC"}

package/dist/components/feedback/Modal/BlockModal.js

@@ -2,13 +2,13 @@ import { cx } from "../../../utils/cx.js";
 import { usePortalContainer } from "../../../provider/context.js";
 import { mergeRefs } from "../../../utils/refs.js";
 import { useFocusTrap } from "../../../hooks/useFocusTrap.js";
+import { useScrollLock } from "../../../hooks/useScrollLock.js";
 import BlockModal_module_default from "./BlockModal.module.js";
-import { forwardRef, useEffect, useId, useRef } from "react";
+import { forwardRef, useId, useRef } from "react";
 import { createPortal } from "react-dom";
 import { CloseIcon } from "@malilion/block-ui-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/Modal/BlockModal.tsx
-var openModals = 0;
 /**
 * Accessible modal dialog: focus trap, `Escape` to close, overlay, focus
 * restoration and `aria-modal` dialog semantics (PRD §45).
@@ -19,16 +19,7 @@ var BlockModal = forwardRef(function BlockModal({ open, onClose, title, descript
 	const titleId = useId();
 	const descriptionId = useId();
 	useFocusTrap(dialogRef, open && container !== null, { initialFocus: initialFocusRef });
-	useEffect(() => {
-		if (!open) return void 0;
-		openModals += 1;
-		const previous = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			openModals -= 1;
-			if (openModals === 0) document.body.style.overflow = previous;
-		};
-	}, [open]);
+	useScrollLock(open);
 	if (!open || !container) return null;
 	const handleKeyDown = (event) => {
 		if (event.key === "Escape" && closeOnEscape) {

package/dist/components/feedback/Modal/BlockModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockModal.js","names":["styles"],"sources":["../../../../src/components/feedback/Modal/BlockModal.tsx"],"sourcesContent":["import { CloseIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useEffect, useId, useRef, type KeyboardEvent, type MouseEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport styles from \"./BlockModal.module.css\";\nimport type { BlockModalProps } from \"./BlockModal.types\";\n\nlet openModals = 0;\n\n/**\n * Accessible modal dialog: focus trap, `Escape` to close, overlay, focus\n * restoration and `aria-modal` dialog semantics (PRD §45).\n */\nexport const BlockModal = forwardRef<HTMLDivElement, BlockModalProps>(function BlockModal(\n  {\n    open,\n    onClose,\n    title,\n    description,\n    children,\n    footer,\n    size = \"md\",\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    hideCloseButton = false,\n    initialFocusRef,\n    role = \"dialog\",\n    icon,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const container = usePortalContainer();\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  useFocusTrap(dialogRef, open && container !== null, { initialFocus: initialFocusRef });\n\n  useEffect(() => {\n    if (!open) return undefined;\n    openModals += 1;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      openModals -= 1;\n      if (openModals === 0) document.body.style.overflow = previous;\n    };\n  }, [open]);\n\n  if (!open || !container) return null;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\" && closeOnEscape) {\n      event.stopPropagation();\n      onClose();\n    }\n  };\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && event.target === event.currentTarget) onClose();\n  };\n\n  return createPortal(\n    <div\n      role=\"presentation\"\n      className={styles.overlay}\n      onMouseDown={handleOverlayClick}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        ref={mergeRefs(dialogRef, ref)}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        data-size={size}\n        className={cx(styles.dialog, className)}\n        {...rest}\n      >\n        <div className={styles.header}>\n          <h2 id={titleId} className={styles.title}>\n            {title}\n          </h2>\n          {hideCloseButton ? null : (\n            <button type=\"button\" className={styles.close} aria-label=\"Close\" onClick={onClose}>\n              <CloseIcon size={16} />\n            </button>\n          )}\n        </div>\n        <div className={styles.body}>\n          {icon ? (\n            <div className={styles.icon} aria-hidden=\"true\">\n              {icon}\n            </div>\n          ) : null}\n          {description ? (\n            <div id={descriptionId} className={styles.description}>\n              {description}\n            </div>\n          ) : null}\n          {children}\n        </div>\n        {footer ? <div className={styles.footer}>{footer}</div> : null}\n      </div>\n    </div>,\n    container,\n  );\n});\n"],"mappings":";;;;;;;;;;AAUA,IAAI,aAAa;;;;;AAMjB,IAAa,aAAa,WAA4C,SAAS,WAC7E,EACE,MACA,SACA,OACA,aACA,UACA,QACA,OAAO,MACP,sBAAsB,MACtB,gBAAgB,MAChB,kBAAkB,OAClB,iBACA,OAAO,UACP,MACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,mBAAmB;CACrC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAE5B,aAAa,WAAW,QAAQ,cAAc,MAAM,EAAE,cAAc,gBAAgB,CAAC;CAErF,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,cAAc;EACd,MAAM,WAAW,SAAS,KAAK,MAAM;EACrC,SAAS,KAAK,MAAM,WAAW;EAC/B,aAAa;GACX,cAAc;GACd,IAAI,eAAe,GAAG,SAAS,KAAK,MAAM,WAAW;EACvD;CACF,GAAG,CAAC,IAAI,CAAC;CAET,IAAI,CAAC,QAAQ,CAAC,WAAW,OAAO;CAEhC,MAAM,iBAAiB,UAAyC;EAC9D,IAAI,MAAM,QAAQ,YAAY,eAAe;GAC3C,MAAM,gBAAgB;GACtB,QAAQ;EACV;CACF;CAEA,MAAM,sBAAsB,UAAsC;EAChE,IAAI,uBAAuB,MAAM,WAAW,MAAM,eAAe,QAAQ;CAC3E;CAEA,OAAO,aACL,oBAAC,OAAD;EACE,MAAK;EACL,WAAWA,0BAAO;EAClB,aAAa;EACb,WAAW;EAEX,UAAA,qBAAC,OAAD;GACE,KAAK,UAAU,WAAW,GAAG;GACvB;GACN,cAAW;GACX,mBAAiB;GACjB,oBAAkB,cAAc,gBAAgB,KAAA;GAChD,UAAU;GACV,aAAW;GACX,WAAW,GAAGA,0BAAO,QAAQ,SAAS;GACtC,GAAI;GATN,UAAA;IAWE,qBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAvB,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAWA,0BAAO;MAChC,UAAA;KACC,CAAA,GACH,kBAAkB,OACjB,oBAAC,UAAD;MAAQ,MAAK;MAAS,WAAWA,0BAAO;MAAO,cAAW;MAAQ,SAAS;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;KAChB,CAAA,CAEP;;IACL,qBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAvB,UAAA;MACG,OACC,oBAAC,OAAD;OAAK,WAAWA,0BAAO;OAAM,eAAY;OACtC,UAAA;MACE,CAAA,IACH;MACH,cACC,oBAAC,OAAD;OAAK,IAAI;OAAe,WAAWA,0BAAO;OACvC,UAAA;MACE,CAAA,IACH;MACH;KACE;;IACJ,SAAS,oBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAS,UAAA;IAAY,CAAA,IAAI;GACvD;;CACF,CAAA,GACL,SACF;AACF,CAAC"}
+{"version":3,"file":"BlockModal.js","names":["styles"],"sources":["../../../../src/components/feedback/Modal/BlockModal.tsx"],"sourcesContent":["import { CloseIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId, useRef, type KeyboardEvent, type MouseEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { usePortalContainer } from \"../../../provider/context\";\nimport { cx } from \"../../../utils/cx\";\nimport { mergeRefs } from \"../../../utils/refs\";\nimport styles from \"./BlockModal.module.css\";\nimport type { BlockModalProps } from \"./BlockModal.types\";\n\n/**\n * Accessible modal dialog: focus trap, `Escape` to close, overlay, focus\n * restoration and `aria-modal` dialog semantics (PRD §45).\n */\nexport const BlockModal = forwardRef<HTMLDivElement, BlockModalProps>(function BlockModal(\n  {\n    open,\n    onClose,\n    title,\n    description,\n    children,\n    footer,\n    size = \"md\",\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    hideCloseButton = false,\n    initialFocusRef,\n    role = \"dialog\",\n    icon,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const container = usePortalContainer();\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  useFocusTrap(dialogRef, open && container !== null, { initialFocus: initialFocusRef });\n\n  useScrollLock(open);\n\n  if (!open || !container) return null;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\" && closeOnEscape) {\n      event.stopPropagation();\n      onClose();\n    }\n  };\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && event.target === event.currentTarget) onClose();\n  };\n\n  return createPortal(\n    <div\n      role=\"presentation\"\n      className={styles.overlay}\n      onMouseDown={handleOverlayClick}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        ref={mergeRefs(dialogRef, ref)}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        data-size={size}\n        className={cx(styles.dialog, className)}\n        {...rest}\n      >\n        <div className={styles.header}>\n          <h2 id={titleId} className={styles.title}>\n            {title}\n          </h2>\n          {hideCloseButton ? null : (\n            <button type=\"button\" className={styles.close} aria-label=\"Close\" onClick={onClose}>\n              <CloseIcon size={16} />\n            </button>\n          )}\n        </div>\n        <div className={styles.body}>\n          {icon ? (\n            <div className={styles.icon} aria-hidden=\"true\">\n              {icon}\n            </div>\n          ) : null}\n          {description ? (\n            <div id={descriptionId} className={styles.description}>\n              {description}\n            </div>\n          ) : null}\n          {children}\n        </div>\n        {footer ? <div className={styles.footer}>{footer}</div> : null}\n      </div>\n    </div>,\n    container,\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAa,aAAa,WAA4C,SAAS,WAC7E,EACE,MACA,SACA,OACA,aACA,UACA,QACA,OAAO,MACP,sBAAsB,MACtB,gBAAgB,MAChB,kBAAkB,OAClB,iBACA,OAAO,UACP,MACA,WACA,GAAG,QAEL,KACA;CACA,MAAM,YAAY,mBAAmB;CACrC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;CAE5B,aAAa,WAAW,QAAQ,cAAc,MAAM,EAAE,cAAc,gBAAgB,CAAC;CAErF,cAAc,IAAI;CAElB,IAAI,CAAC,QAAQ,CAAC,WAAW,OAAO;CAEhC,MAAM,iBAAiB,UAAyC;EAC9D,IAAI,MAAM,QAAQ,YAAY,eAAe;GAC3C,MAAM,gBAAgB;GACtB,QAAQ;EACV;CACF;CAEA,MAAM,sBAAsB,UAAsC;EAChE,IAAI,uBAAuB,MAAM,WAAW,MAAM,eAAe,QAAQ;CAC3E;CAEA,OAAO,aACL,oBAAC,OAAD;EACE,MAAK;EACL,WAAWA,0BAAO;EAClB,aAAa;EACb,WAAW;EAEX,UAAA,qBAAC,OAAD;GACE,KAAK,UAAU,WAAW,GAAG;GACvB;GACN,cAAW;GACX,mBAAiB;GACjB,oBAAkB,cAAc,gBAAgB,KAAA;GAChD,UAAU;GACV,aAAW;GACX,WAAW,GAAGA,0BAAO,QAAQ,SAAS;GACtC,GAAI;GATN,UAAA;IAWE,qBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAvB,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAWA,0BAAO;MAChC,UAAA;KACC,CAAA,GACH,kBAAkB,OACjB,oBAAC,UAAD;MAAQ,MAAK;MAAS,WAAWA,0BAAO;MAAO,cAAW;MAAQ,SAAS;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;KAChB,CAAA,CAEP;;IACL,qBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAvB,UAAA;MACG,OACC,oBAAC,OAAD;OAAK,WAAWA,0BAAO;OAAM,eAAY;OACtC,UAAA;MACE,CAAA,IACH;MACH,cACC,oBAAC,OAAD;OAAK,IAAI;OAAe,WAAWA,0BAAO;OACvC,UAAA;MACE,CAAA,IACH;MACH;KACE;;IACJ,SAAS,oBAAC,OAAD;KAAK,WAAWA,0BAAO;KAAS,UAAA;IAAY,CAAA,IAAI;GACvD;;CACF,CAAA,GACL,SACF;AACF,CAAC"}

package/dist/components/feedback/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonProps } from "./Skeleton.types";
+/**
+ * Pixel placeholder shown while content loads. Decorative (`aria-hidden`):
+ * mark the loading container with `aria-busy` and announce loading separately.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/feedback/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,QAAQ,2GA6BnB,CAAC"}

package/dist/components/feedback/Skeleton/Skeleton.js

@@ -0,0 +1,33 @@
+import { cx } from "../../../utils/cx.js";
+import Skeleton_module_default from "./Skeleton.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/Skeleton/Skeleton.tsx
+/**
+* Pixel placeholder shown while content loads. Decorative (`aria-hidden`):
+* mark the loading container with `aria-busy` and announce loading separately.
+*/
+var Skeleton = forwardRef(function Skeleton({ variant = "text", lines = 1, width, height, className, style, ...rest }, ref) {
+	const sizing = {
+		...width ? { "--block-skeleton-width": width } : null,
+		...height ? { "--block-skeleton-height": height } : null,
+		...style
+	};
+	const count = variant === "text" ? Math.max(1, Math.floor(lines)) : 1;
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": "true",
+		"data-variant": variant,
+		className: cx(Skeleton_module_default.skeleton, className),
+		style: sizing,
+		...rest,
+		children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("span", {
+			className: Skeleton_module_default.bone,
+			"data-last": count > 1 && index === count - 1 || void 0
+		}, index))
+	});
+});
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/feedback/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["styles"],"sources":["../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./Skeleton.module.css\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\n/**\n * Pixel placeholder shown while content loads. Decorative (`aria-hidden`):\n * mark the loading container with `aria-busy` and announce loading separately.\n */\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(\n  { variant = \"text\", lines = 1, width, height, className, style, ...rest },\n  ref,\n) {\n  const sizing = {\n    ...(width ? { \"--block-skeleton-width\": width } : null),\n    ...(height ? { \"--block-skeleton-height\": height } : null),\n    ...style,\n  } as CSSProperties;\n  const count = variant === \"text\" ? Math.max(1, Math.floor(lines)) : 1;\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-variant={variant}\n      className={cx(styles.skeleton, className)}\n      style={sizing}\n      {...rest}\n    >\n      {Array.from({ length: count }, (_, index) => (\n        <span\n          key={index}\n          className={styles.bone}\n          data-last={(count > 1 && index === count - 1) || undefined}\n        />\n      ))}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,WAAW,WAA2C,SAAS,SAC1E,EAAE,UAAU,QAAQ,QAAQ,GAAG,OAAO,QAAQ,WAAW,OAAO,GAAG,QACnE,KACA;CACA,MAAM,SAAS;EACb,GAAI,QAAQ,EAAE,0BAA0B,MAAM,IAAI;EAClD,GAAI,SAAS,EAAE,2BAA2B,OAAO,IAAI;EACrD,GAAG;CACL;CACA,MAAM,QAAQ,YAAY,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,IAAI;CAEpE,OACE,oBAAC,QAAD;EACO;EACL,eAAY;EACZ,gBAAc;EACd,WAAW,GAAGA,wBAAO,UAAU,SAAS;EACxC,OAAO;EACP,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,QAAD;GAEE,WAAWA,wBAAO;GAClB,aAAY,QAAQ,KAAK,UAAU,QAAQ,KAAM,KAAA;EAClD,GAHM,KAGN,CACF;CACG,CAAA;AAEV,CAAC"}

package/dist/components/feedback/Skeleton/Skeleton.module.js

@@ -0,0 +1,12 @@
+//#region src/components/feedback/Skeleton/Skeleton.module.css
+var skeleton = "block-skeleton-iGMZW";
+var bone = "block-bone-cYRm-";
+var Skeleton_module_default = {
+	skeleton,
+	bone,
+	"block-skeleton-sweep": "block-block-skeleton-sweep-8kYA1"
+};
+//#endregion
+export { bone, Skeleton_module_default as default, skeleton };
+
+//# sourceMappingURL=Skeleton.module.js.map

package/dist/components/feedback/Skeleton/Skeleton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.js","names":[],"sources":["../../../../src/components/feedback/Skeleton/Skeleton.module.css"],"sourcesContent":[".skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-2);\n  width: var(--block-skeleton-width, 100%);\n  max-width: 100%;\n}\n\n.bone {\n  display: block;\n  height: 12px;\n  background-color: var(--block-slot);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0 40%,\n    color-mix(in srgb, var(--block-text) 12%, transparent) 40% 60%,\n    transparent 60%\n  );\n  background-size: 300% 100%;\n  border: var(--block-border-width-thin) solid var(--block-border);\n  animation: block-skeleton-sweep 1.2s steps(8, end) infinite;\n}\n\n.bone[data-last] {\n  width: 60%;\n}\n\n.skeleton[data-variant=\"block\"] .bone {\n  height: var(--block-skeleton-height, 96px);\n}\n\n.skeleton[data-variant=\"slot\"] {\n  width: var(--block-skeleton-width, var(--block-size-slot-md));\n}\n\n.skeleton[data-variant=\"slot\"] .bone {\n  aspect-ratio: 1;\n  height: auto;\n  box-shadow: var(--block-shadow-inset);\n}\n\n.skeleton[data-variant=\"avatar\"] {\n  width: var(--block-skeleton-width, 48px);\n}\n\n.skeleton[data-variant=\"avatar\"] .bone {\n  aspect-ratio: 1;\n  height: auto;\n}\n\n/* A stepped highlight sweep; reduced motion stops it (base.css). */\n@keyframes block-skeleton-sweep {\n  from {\n    background-position: 100% 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+export declare const skeletonVariants: readonly ["text", "block", "slot", "avatar"];
+export type SkeletonVariant = (typeof skeletonVariants)[number];
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    /** `text` lines, a `block` rectangle, an inventory `slot` or a square `avatar`. @default "text" */
+    variant?: SkeletonVariant;
+    /** Number of lines for `text` (the last one is shorter). @default 1 */
+    lines?: number;
+    /** CSS width, e.g. `"200px"` or `"60%"`. */
+    width?: string;
+    /** CSS height for `block`, e.g. `"120px"`. */
+    height?: string;
+}
+//# sourceMappingURL=Skeleton.types.d.ts.map

package/dist/components/feedback/Skeleton/Skeleton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8CAA+C,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,mGAAmG;IACnG,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/feedback/Skeleton/Skeleton.types.js

@@ -0,0 +1,11 @@
+//#region src/components/feedback/Skeleton/Skeleton.types.ts
+var skeletonVariants = [
+	"text",
+	"block",
+	"slot",
+	"avatar"
+];
+//#endregion
+export { skeletonVariants };
+
+//# sourceMappingURL=Skeleton.types.js.map

package/dist/components/feedback/Skeleton/Skeleton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.js","names":[],"sources":["../../../../src/components/feedback/Skeleton/Skeleton.types.ts"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nexport const skeletonVariants = [\"text\", \"block\", \"slot\", \"avatar\"] as const;\n\nexport type SkeletonVariant = (typeof skeletonVariants)[number];\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {\n  /** `text` lines, a `block` rectangle, an inventory `slot` or a square `avatar`. @default \"text\" */\n  variant?: SkeletonVariant;\n  /** Number of lines for `text` (the last one is shorter). @default 1 */\n  lines?: number;\n  /** CSS width, e.g. `\"200px\"` or `\"60%\"`. */\n  width?: string;\n  /** CSS height for `block`, e.g. `\"120px\"`. */\n  height?: string;\n}\n"],"mappings":";AAEA,IAAa,mBAAmB;CAAC;CAAQ;CAAS;CAAQ;AAAQ"}

package/dist/components/feedback/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { Skeleton } from "./Skeleton";
+export { skeletonVariants } from "./Skeleton.types";
+export type { SkeletonProps, SkeletonVariant } from "./Skeleton.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/feedback/index.d.ts

@@ -4,4 +4,7 @@ export * from "./Modal";
 export * from "./ConfirmDialog";
 export * from "./Progress";
 export * from "./Loading";
+export * from "./Drawer";
+export * from "./EmptyState";
+export * from "./Skeleton";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/components/forms/NumberInput/NumberInput.d.ts

@@ -0,0 +1,8 @@
+import type { NumberInputProps } from "./NumberInput.types";
+/**
+ * Number field with − / + buttons, following the WAI-ARIA spinbutton pattern:
+ * ↑ / ↓ step, Page Up / Down step ×10, Home / End jump to min / max. Values are
+ * clamped and rounded when committed (step, Enter or blur).
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/components/forms/NumberInput/NumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;GAIG;AACH,eAAO,MAAM,WAAW,+GAmItB,CAAC"}

package/dist/components/forms/NumberInput/NumberInput.js

@@ -0,0 +1,122 @@
+import { cx } from "../../../utils/cx.js";
+import { Field } from "../Field/Field.js";
+import control_module_default from "../Field/control.module.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import NumberInput_module_default from "./NumberInput.module.js";
+import { normalizeNumber, parseNumber, stepPrecision } from "./NumberInput.utils.js";
+import { forwardRef, useState } from "react";
+import { MinusIcon, PlusIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/NumberInput/NumberInput.tsx
+/**
+* Number field with − / + buttons, following the WAI-ARIA spinbutton pattern:
+* ↑ / ↓ step, Page Up / Down step ×10, Home / End jump to min / max. Values are
+* clamped and rounded when committed (step, Enter or blur).
+*/
+var NumberInput = forwardRef(function NumberInput({ id, label, error, success, helperText, value, defaultValue = null, onValueChange, min, max, step = 1, disabled, required, className, wrapperClassName, onBlur, onKeyDown, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState(null);
+	const precision = stepPrecision(step);
+	const format = (n) => n === null ? "" : n.toFixed(precision);
+	const commit = (next) => {
+		const normalized = next === null ? null : normalizeNumber(next, {
+			min,
+			max,
+			step
+		});
+		setDraft(null);
+		if (normalized !== current) setCurrent(normalized);
+	};
+	const base = () => {
+		return (draft !== null ? parseNumber(draft) : current) ?? min ?? 0;
+	};
+	const stepBy = (amount) => {
+		if (disabled) return;
+		commit(base() + amount);
+	};
+	const atMin = current !== null && min !== void 0 && current <= min;
+	const atMax = current !== null && max !== void 0 && current >= max;
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		let handled = true;
+		if (event.key === "ArrowUp") stepBy(step);
+		else if (event.key === "ArrowDown") stepBy(-step);
+		else if (event.key === "PageUp") stepBy(step * 10);
+		else if (event.key === "PageDown") stepBy(-step * 10);
+		else if (event.key === "Home" && min !== void 0) commit(min);
+		else if (event.key === "End" && max !== void 0) commit(max);
+		else if (event.key === "Enter" && draft !== null) commit(parseNumber(draft));
+		else handled = false;
+		if (handled) event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx(Field, {
+		id,
+		label,
+		error,
+		success,
+		helperText,
+		disabled,
+		required,
+		className: wrapperClassName,
+		children: ({ inputId, describedBy, invalid }) => /* @__PURE__ */ jsxs("div", {
+			className: NumberInput_module_default.wrapper,
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Decrease",
+					"aria-controls": inputId,
+					disabled: disabled || atMin,
+					className: NumberInput_module_default.button,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => stepBy(-step),
+					children: /* @__PURE__ */ jsx(MinusIcon, { size: 16 })
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref,
+					id: inputId,
+					type: "text",
+					role: "spinbutton",
+					inputMode: precision > 0 || min !== void 0 && min < 0 ? "decimal" : "numeric",
+					autoComplete: "off",
+					value: draft ?? format(current),
+					"aria-valuenow": current ?? void 0,
+					"aria-valuemin": min,
+					"aria-valuemax": max,
+					disabled,
+					required,
+					"aria-invalid": invalid || void 0,
+					"aria-describedby": cx(describedBy, ariaDescribedBy) || void 0,
+					className: cx(control_module_default.control, NumberInput_module_default.input, className),
+					onChange: (event) => setDraft(event.target.value),
+					onBlur: (event) => {
+						if (draft !== null) commit(parseNumber(draft));
+						onBlur?.(event);
+					},
+					onKeyDown: handleKeyDown,
+					...rest
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Increase",
+					"aria-controls": inputId,
+					disabled: disabled || atMax,
+					className: NumberInput_module_default.button,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => stepBy(step),
+					children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=NumberInput.js.map