@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/Checkbox/Checkbox.module.js

@@ -0,0 +1,9 @@
+// src/components/Checkbox/Checkbox.module.css
+var e = "onyx-box-OCPee", t = "onyx-check-4HYWn", n = "onyx-dash-5Dkdl", r = {
+	box: e,
+	check: t,
+	dash: n
+};
+export { e as box, t as check, n as dash, r as default };
+
+//# sourceMappingURL=Checkbox.module.js.map

package/dist/components/Checkbox/Checkbox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.js","names":["box","check","dash","Checkbox_module_default"],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".box {\n  border-radius: var(--radius-sm);\n}\n\n.check,\n.dash {\n  grid-area: 1 / 1;\n  width: 80%;\n  height: 80%;\n  stroke-width: 3;\n  visibility: hidden;\n}\n\n:checked:not(:indeterminate) + .box .check,\n:indeterminate + .box .dash {\n  visibility: visible;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps, ChoiceSize } from './Checkbox.js';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLElement> {
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Space around the line, along its cross axis.
+     * @default 'md'
+     */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Hides the line from assistive technology when it only decorates and does not separate
+     * sections of content.
+     * @default false
+     */
+    decorative?: boolean;
+}
+/** Line that separates content, announced as a separator unless decorative. */
+export declare const Divider: import('react').ForwardRefExoticComponent<DividerProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Divider.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Divider/Divider.tsx
+var i = n(function({ orientation: n = "horizontal", spacing: i = "md", decorative: a = !1, className: o, ...s }, c) {
+	let l = e(t.divider, t[n], t[i], o);
+	return n === "horizontal" ? /* @__PURE__ */ r("hr", {
+		ref: c,
+		role: a ? "none" : void 0,
+		className: l,
+		...s
+	}) : /* @__PURE__ */ r("div", {
+		ref: c,
+		role: a ? "none" : "separator",
+		"aria-orientation": a ? void 0 : "vertical",
+		className: l,
+		...s
+	});
+});
+export { i as Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["styles","Divider_module_default","Divider","forwardRef","props","classes","cn","orientation","spacing","className","decorative"],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type Ref } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Divider.module.css';\n\nexport interface DividerProps extends HTMLAttributes<HTMLElement> {\n  /** @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Space around the line, along its cross axis.\n   * @default 'md'\n   */\n  spacing?: 'none' | 'sm' | 'md' | 'lg';\n  /**\n   * Hides the line from assistive technology when it only decorates and does not separate\n   * sections of content.\n   * @default false\n   */\n  decorative?: boolean;\n}\n\n/** Line that separates content, announced as a separator unless decorative. */\nexport const Divider = forwardRef<HTMLElement, DividerProps>(function Divider(\n  { orientation = 'horizontal', spacing = 'md', decorative = false, className, ...props },\n  ref,\n) {\n  const classes = cn(styles.divider, styles[orientation], styles[spacing], className);\n\n  if (orientation === 'horizontal') {\n    return (\n      <hr\n        ref={ref as Ref<HTMLHRElement>}\n        role={decorative ? 'none' : undefined}\n        className={classes}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={ref as Ref<HTMLDivElement>}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={decorative ? undefined : 'vertical'}\n      className={classes}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAqBA,IAAaE,IAAUC,EAAsC,SAC3D,EAAE,iBAAc,cAAc,aAAU,MAAM,gBAAa,IAAO,cAAW,GAAGC,KAChF,GACA;CACA,IAAMC,IAAUC,EAAGN,EAAO,SAASA,EAAOO,IAAcP,EAAOQ,IAAUC,CAAS;CAalF,OAXIF,MAAgB,eAEhB,kBAAC,MAAD;EACO;EACL,MAAMG,IAAa,SAAS,KAAA;EAC5B,WAAWL;EACX,GAAID;CACL,CAAA,IAKH,kBAAC,OAAD;EACO;EACL,MAAMM,IAAa,SAAS;EAC5B,oBAAkBA,IAAa,KAAA,IAAY;EAC3C,WAAWL;EACX,GAAID;CACL,CAAA;AAEL,CAAC"}

package/dist/components/Divider/Divider.module.js

@@ -0,0 +1,12 @@
+// src/components/Divider/Divider.module.css
+var e = "onyx-divider-KSGsi", t = "onyx-horizontal-pZ05Y", n = "onyx-vertical-p-jD4", r = "onyx-sm-6hSBB", i = "onyx-md-qfZah", a = "onyx-lg-Azo4z", o = {
+	divider: e,
+	horizontal: t,
+	vertical: n,
+	sm: r,
+	md: i,
+	lg: a
+};
+export { o as default, e as divider, t as horizontal, a as lg, i as md, r as sm, n as vertical };
+
+//# sourceMappingURL=Divider.module.js.map

package/dist/components/Divider/Divider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.js","names":["divider","horizontal","vertical","sm","md","lg","Divider_module_default"],"sources":["../../../src/components/Divider/Divider.module.css"],"sourcesContent":[".divider {\n  flex-shrink: 0;\n  margin: 0;\n  background-color: var(--color-border);\n  border: 0;\n}\n\n.horizontal {\n  align-self: stretch;\n  height: var(--border-width-thin);\n}\n\n.vertical {\n  align-self: stretch;\n  width: var(--border-width-thin);\n  min-height: 1em;\n}\n\n.horizontal.sm {\n  margin-block: var(--space-2);\n}\n\n.horizontal.md {\n  margin-block: var(--space-4);\n}\n\n.horizontal.lg {\n  margin-block: var(--space-8);\n}\n\n.vertical.sm {\n  margin-inline: var(--space-2);\n}\n\n.vertical.md {\n  margin-inline: var(--space-4);\n}\n\n.vertical.lg {\n  margin-inline: var(--space-8);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider.js';
+export type { DividerProps } from './Divider.js';

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

@@ -0,0 +1,18 @@
+import { DialogOptions } from '../Modal/DialogSurface.js';
+import { DialogStateProps } from '../Modal/Modal.js';
+export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+export interface DrawerProps extends DialogOptions, DialogStateProps {
+    /**
+     * Edge the drawer slides in from. `start` and `end` follow the writing direction.
+     * @default 'end'
+     */
+    placement?: DrawerPlacement;
+    /** Width, or height for `top` and `bottom`. @default 'sm' */
+    size?: DrawerSize;
+}
+/**
+ * Dialog attached to an edge of the screen, for navigation, filters or details. Behaves like
+ * `Modal`: focus is trapped, the page stops scrolling and focus returns on close.
+ */
+export declare const Drawer: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { DialogSurface as t } from "../Modal/DialogSurface.js";
+import { useDialogState as n } from "../Modal/Modal.js";
+import r from "./Drawer.module.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Drawer/Drawer.tsx
+var c = i(function({ open: i, defaultOpen: c, onOpenChange: l, trigger: u, placement: d = "end", size: f = "sm", ...p }, m) {
+	let { isOpen: h, close: g, triggerElement: _ } = n({
+		open: i,
+		defaultOpen: c,
+		onOpenChange: l,
+		trigger: u
+	});
+	return /* @__PURE__ */ s(a, { children: [_, /* @__PURE__ */ o(t, {
+		ref: m,
+		open: h,
+		onClose: g,
+		rootClassName: e(r.root, r[d]),
+		panelClassName: e(r.panel, r[f]),
+		...p
+	})] });
+});
+export { c as Drawer };
+
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["_Fragment","styles","Drawer_module_default","Drawer","forwardRef","props","useDialogState","Fragment","triggerElement","DialogSurface","isOpen","close","cn","placement","size"],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport { DialogSurface, type DialogOptions } from '../Modal/DialogSurface';\nimport { useDialogState, type DialogStateProps } from '../Modal/Modal';\nimport styles from './Drawer.module.css';\n\nexport type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\nexport interface DrawerProps extends DialogOptions, DialogStateProps {\n  /**\n   * Edge the drawer slides in from. `start` and `end` follow the writing direction.\n   * @default 'end'\n   */\n  placement?: DrawerPlacement;\n  /** Width, or height for `top` and `bottom`. @default 'sm' */\n  size?: DrawerSize;\n}\n\n/**\n * Dialog attached to an edge of the screen, for navigation, filters or details. Behaves like\n * `Modal`: focus is trapped, the page stops scrolling and focus returns on close.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  { open, defaultOpen, onOpenChange, trigger, placement = 'end', size = 'sm', ...props },\n  ref,\n) {\n  const { isOpen, close, triggerElement } = useDialogState({\n    open,\n    defaultOpen,\n    onOpenChange,\n    trigger,\n  });\n\n  return (\n    <>\n      {triggerElement}\n      <DialogSurface\n        ref={ref}\n        open={isOpen}\n        onClose={close}\n        rootClassName={cn(styles.root, styles[placement])}\n        panelClassName={cn(styles.panel, styles[size])}\n        {...props}\n      />\n    </>\n  );\n});\n"],"mappings":";;;;;;;;AAuBA,IAAaG,IAASC,EAAwC,SAC5D,EAAE,SAAM,gBAAa,iBAAc,YAAS,eAAY,OAAO,UAAO,MAAM,GAAGC,KAC/E,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,sBAAmBC,EAAe;EACvD;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,kBAAAN,GAAA,EAAA,UAAA,CACGQ,GACD,kBAACC,GAAD;EACO;EACL,MAAMC;EACN,SAASC;EACT,eAAeC,EAAGX,EAAO,MAAMA,EAAOY,EAAU;EAChD,gBAAgBD,EAAGX,EAAO,OAAOA,EAAOa,EAAK;EAC7C,GAAIT;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC"}

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

@@ -0,0 +1,17 @@
+// src/components/Drawer/Drawer.module.css
+var e = "onyx-root-guW1o", t = "onyx-panel-wUX0N", n = "onyx-drawer-in-2TCEt", r = "onyx-start-MS4bt", i = "onyx-end-aJxa5", a = "onyx-top-7rGCn", o = "onyx-bottom-zd-25", s = "onyx-sm-AQ96e", c = "onyx-md--2Ihw", l = "onyx-lg-gWSe1", u = "onyx-full-Dbag5", d = {
+	root: e,
+	panel: t,
+	drawerIn: n,
+	start: r,
+	end: i,
+	top: a,
+	bottom: o,
+	sm: s,
+	md: c,
+	lg: l,
+	full: u
+};
+export { o as bottom, d as default, n as drawerIn, i as end, u as full, l as lg, c as md, t as panel, e as root, s as sm, r as start, a as top };
+
+//# sourceMappingURL=Drawer.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.js","names":["root","panel","drawerIn","start","end","top","bottom","sm","md","lg","full","Drawer_module_default"],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":[".root {\n  --drawer-size: var(--size-overlay-sm);\n  --drawer-from: translate(100%, 0);\n}\n\n.panel {\n  animation: drawer-in var(--duration-slow) var(--easing-enter);\n}\n\n.start {\n  justify-content: flex-start;\n  --drawer-from: translate(-100%, 0);\n}\n\n.end {\n  justify-content: flex-end;\n}\n\n.top {\n  flex-direction: column;\n  justify-content: flex-start;\n  --drawer-from: translate(0, -100%);\n}\n\n.bottom {\n  flex-direction: column;\n  justify-content: flex-end;\n  --drawer-from: translate(0, 100%);\n}\n\n:dir(rtl) .start {\n  --drawer-from: translate(100%, 0);\n}\n\n:dir(rtl) .end {\n  --drawer-from: translate(-100%, 0);\n}\n\n:is(.start, .end) .panel {\n  width: min(var(--drawer-size), 100%);\n  height: 100%;\n}\n\n:is(.top, .bottom) .panel {\n  width: 100%;\n  height: min(var(--drawer-size), 100%);\n}\n\n.start .panel {\n  border-start-end-radius: var(--radius-xl);\n  border-end-end-radius: var(--radius-xl);\n}\n\n.end .panel {\n  border-start-start-radius: var(--radius-xl);\n  border-end-start-radius: var(--radius-xl);\n}\n\n.top .panel {\n  border-end-start-radius: var(--radius-xl);\n  border-end-end-radius: var(--radius-xl);\n}\n\n.bottom .panel {\n  border-start-start-radius: var(--radius-xl);\n  border-start-end-radius: var(--radius-xl);\n}\n\n.sm {\n  --drawer-size: var(--size-overlay-sm);\n}\n\n.md {\n  --drawer-size: var(--size-overlay-md);\n}\n\n.lg {\n  --drawer-size: var(--size-overlay-lg);\n}\n\n.full {\n  --drawer-size: 100%;\n}\n\n.full.panel {\n  border-radius: 0;\n}\n\n@keyframes drawer-in {\n  from {\n    transform: var(--drawer-from);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer.js';
+export type { DrawerPlacement, DrawerProps, DrawerSize } from './Drawer.js';

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,65 @@
+import { ButtonHTMLAttributes, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import { Placement } from '../../utils/floating.js';
+type TriggerProps = {
+    id?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+};
+export type DropdownMenuPlacement = Placement;
+export interface DropdownMenuProps {
+    /** Button that opens the menu. It must accept a ref. */
+    trigger: ReactElement<TriggerProps>;
+    /** `DropdownMenuItem`, `DropdownMenuGroup` and `DropdownMenuSeparator` elements. */
+    children: ReactNode;
+    /** @default 'bottom-start' */
+    placement?: DropdownMenuPlacement;
+    /** Open state, for a controlled menu. */
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Gap between the trigger and the menu, in pixels.
+     * @default 4
+     */
+    offset?: number;
+    /** Class of the menu panel. */
+    className?: string;
+}
+/**
+ * Menu of actions opened by a button, following the ARIA menu button pattern: arrow keys,
+ * Home/End and typing a label move between items, Enter or Space runs one, Escape closes and
+ * returns focus to the button.
+ */
+export declare function DropdownMenu({ trigger, children, placement, open: openProp, defaultOpen, onOpenChange, offset, className, }: DropdownMenuProps): import('react').JSX.Element;
+export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Called when the item is chosen with a click, Enter or Space. */
+    onSelect?: () => void;
+    /** Icon shown before the label. */
+    icon?: ReactNode;
+    /** Keyboard shortcut shown after the label, for reference only. */
+    shortcut?: string;
+    /** Styles the item as a destructive action. @default false */
+    destructive?: boolean;
+    /**
+     * Keeps the item focusable but prevents choosing it, as the menu pattern recommends.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Closes the menu after the item is chosen.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+}
+/** Action inside a `DropdownMenu`. */
+export declare const DropdownMenuItem: import('react').ForwardRefExoticComponent<DropdownMenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export interface DropdownMenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visible heading of the group, which also names it. */
+    label: ReactNode;
+}
+/** Labelled set of related items. */
+export declare const DropdownMenuGroup: import('react').ForwardRefExoticComponent<DropdownMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+/** Line between groups of items. */
+export declare const DropdownMenuSeparator: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,159 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { mergeRefs as n } from "../../utils/mergeRefs.js";
+import { useClickOutside as r } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as i } from "../../hooks/useEscapeKey.js";
+import { refocusIfLost as a } from "../../utils/refocusIfLost.js";
+import { Portal as o } from "../Portal/Portal.js";
+import { useTimeout as s } from "../../hooks/useTimeout.js";
+import { useFloatingLayer as c } from "../../utils/floating.js";
+import { getElementRef as l } from "../../utils/getElementRef.js";
+import u from "./DropdownMenu.module.js";
+import { cloneElement as d, createContext as f, forwardRef as p, isValidElement as m, useContext as h, useEffect as g, useId as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+// src/components/DropdownMenu/DropdownMenu.tsx
+var w = f(null), T = "[role=\"menuitem\"]";
+function E(e) {
+	return e ? [...e.querySelectorAll(T)] : [];
+}
+function D(e, t, n) {
+	let r = [...e.slice(t + 1), ...e.slice(0, t + 1)], i = (e) => (t) => t.textContent?.trim().toLowerCase().startsWith(e), a = [...n].every((e) => e === n[0]);
+	return r.find(i(n)) ?? (a ? r.find(i(n[0])) : void 0);
+}
+function O({ trigger: f, children: p, placement: h = "bottom-start", open: T, defaultOpen: O = !1, onOpenChange: k, offset: A = 4, className: j }) {
+	let M = _(), N = f.props.id ?? `${M}-trigger`, P = `${M}-menu`, [F, I] = b(null), L = y(null), R = y(""), z = s(), [B, V] = b("first"), [H, U] = e({
+		value: T,
+		defaultValue: O,
+		onChange: k
+	}), { setReference: W, setFloating: G, floatingStyles: K } = c({
+		open: H,
+		placement: h,
+		gap: A
+	}), q = l(f), J = v(() => n(W, q, I), [W, q]), Y = v(() => n(G, L), [G]);
+	g(() => {
+		if (!H) return;
+		let e = E(L.current);
+		(B === "first" ? e[0] : e.at(-1))?.focus({ preventScroll: !0 });
+	}, [H, B]);
+	let X = (e = !0) => {
+		U(!1), e && F?.focus();
+	};
+	i(() => X(), { enabled: H }), r([L, { current: F }], () => {
+		X(!1), a(F);
+	}, { enabled: H });
+	let Z = (e) => {
+		V(e), U(!0);
+	}, Q = m(f) ? d(f, {
+		ref: J,
+		id: N,
+		"aria-haspopup": "menu",
+		"aria-expanded": H,
+		"aria-controls": H ? P : void 0,
+		onClick: (e) => {
+			f.props.onClick?.(e), !e.defaultPrevented && (H ? U(!1) : Z("first"));
+		},
+		onKeyDown: (e) => {
+			f.props.onKeyDown?.(e), (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), Z(e.key === "ArrowDown" ? "first" : "last"));
+		}
+	}) : f;
+	return /* @__PURE__ */ C(x, { children: [Q, H && /* @__PURE__ */ S(o, { children: /* @__PURE__ */ S("div", {
+		ref: Y,
+		id: P,
+		role: "menu",
+		"aria-labelledby": N,
+		"aria-orientation": "vertical",
+		tabIndex: -1,
+		className: t(u.menu, j),
+		style: K,
+		onKeyDown: (e) => {
+			let t = E(L.current), n = t.indexOf(document.activeElement), r = (e) => t.at(e % t.length)?.focus();
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), r(n + 1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), r(n <= 0 ? -1 : n - 1);
+					break;
+				case "Home":
+					e.preventDefault(), r(0);
+					break;
+				case "End":
+					e.preventDefault(), r(-1);
+					break;
+				case "Tab":
+					X();
+					break;
+				default:
+					if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " " && R.current === "") return;
+					e.preventDefault(), R.current += e.key.toLowerCase(), z.set(() => {
+						R.current = "";
+					}, 500), D(t, n, R.current)?.focus();
+			}
+		},
+		children: /* @__PURE__ */ S(w.Provider, {
+			value: { close: X },
+			children: p
+		})
+	}) })] });
+}
+var k = p(function({ onSelect: e, icon: n, shortcut: r, destructive: i = !1, disabled: a = !1, closeOnSelect: o = !0, className: s, children: c, onClick: l, onPointerMove: d, ...f }, p) {
+	let m = h(w);
+	if (!m) throw Error("DropdownMenuItem must be rendered inside a DropdownMenu.");
+	return /* @__PURE__ */ C("button", {
+		ref: p,
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-disabled": a || void 0,
+		className: t(u.item, i && u.destructive, s),
+		onClick: (t) => {
+			l?.(t), !(a || t.defaultPrevented) && (e?.(), o && m.close());
+		},
+		onPointerMove: (e) => {
+			d?.(e), e.pointerType !== "touch" && e.currentTarget.focus();
+		},
+		...f,
+		children: [
+			n && /* @__PURE__ */ S("span", {
+				className: u.icon,
+				"aria-hidden": "true",
+				children: n
+			}),
+			/* @__PURE__ */ S("span", {
+				className: u.label,
+				children: c
+			}),
+			r && /* @__PURE__ */ S("kbd", {
+				className: u.shortcut,
+				"aria-hidden": "true",
+				children: r
+			})
+		]
+	});
+}), A = p(function({ label: e, className: n, children: r, ...i }, a) {
+	let o = _();
+	return /* @__PURE__ */ C("div", {
+		ref: a,
+		role: "group",
+		"aria-labelledby": o,
+		className: t(u.group, n),
+		...i,
+		children: [/* @__PURE__ */ S("div", {
+			id: o,
+			role: "presentation",
+			className: u.groupLabel,
+			children: e
+		}), r]
+	});
+}), j = p(function({ className: e, ...n }, r) {
+	return /* @__PURE__ */ S("div", {
+		ref: r,
+		role: "separator",
+		className: t(u.separator, e),
+		...n
+	});
+});
+export { O as DropdownMenu, A as DropdownMenuGroup, k as DropdownMenuItem, j as DropdownMenuSeparator };
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":["_Fragment","styles","DropdownMenu_module_default","MenuContext","createContext","itemSelector","getItems","menu","findByText","ordered","items","from","startsWith","item","text","repeated","search","char","DropdownMenu","openProp","id","useId","triggerId","trigger","menuId","triggerNode","setTriggerNode","useState","useRef","typeahead","clearTypeahead","useTimeout","focusOnOpen","setFocusOnOpen","open","setOpen","useControllableState","defaultOpen","onOpenChange","useFloatingLayer","offset","triggerElementRef","getElementRef","attachTrigger","useMemo","mergeRefs","setReference","attachMenu","setFloating","close","returnFocus","useEscapeKey","useClickOutside","refocusIfLost","openWith","target","triggerElement","isValidElement","cloneElement","event","Fragment","Portal","cn","className","floatingStyles","index","focusAt","next","DropdownMenuItem","forwardRef","props","useContext","disabled","destructive","onClick","onSelect","closeOnSelect","onPointerMove","icon","shortcut","DropdownMenuGroup","labelId","label","children","DropdownMenuSeparator"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import {\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useClickOutside } from '@/hooks/useClickOutside';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { useEscapeKey } from '@/hooks/useEscapeKey';\nimport { useTimeout } from '@/hooks/useTimeout';\nimport { cn } from '@/utils/cn';\nimport { useFloatingLayer, type Placement } from '@/utils/floating';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { refocusIfLost } from '@/utils/refocusIfLost';\nimport { Portal } from '../Portal';\nimport styles from './DropdownMenu.module.css';\n\ninterface MenuContextValue {\n  close: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\ntype TriggerProps = {\n  id?: string;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n};\n\nexport type DropdownMenuPlacement = Placement;\n\nexport interface DropdownMenuProps {\n  /** Button that opens the menu. It must accept a ref. */\n  trigger: ReactElement<TriggerProps>;\n  /** `DropdownMenuItem`, `DropdownMenuGroup` and `DropdownMenuSeparator` elements. */\n  children: ReactNode;\n  /** @default 'bottom-start' */\n  placement?: DropdownMenuPlacement;\n  /** Open state, for a controlled menu. */\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Gap between the trigger and the menu, in pixels.\n   * @default 4\n   */\n  offset?: number;\n  /** Class of the menu panel. */\n  className?: string;\n}\n\nconst itemSelector = '[role=\"menuitem\"]';\n\nfunction getItems(menu: HTMLElement | null) {\n  return menu ? [...menu.querySelectorAll<HTMLElement>(itemSelector)] : [];\n}\n\nfunction findByText(items: HTMLElement[], from: number, search: string) {\n  const ordered = [...items.slice(from + 1), ...items.slice(0, from + 1)];\n  const startsWith = (text: string) => (item: HTMLElement) =>\n    item.textContent?.trim().toLowerCase().startsWith(text);\n  const repeated = [...search].every((char) => char === search[0]);\n\n  return (\n    ordered.find(startsWith(search)) ??\n    (repeated ? ordered.find(startsWith(search[0]!)) : undefined)\n  );\n}\n\n/**\n * Menu of actions opened by a button, following the ARIA menu button pattern: arrow keys,\n * Home/End and typing a label move between items, Enter or Space runs one, Escape closes and\n * returns focus to the button.\n */\nexport function DropdownMenu({\n  trigger,\n  children,\n  placement = 'bottom-start',\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  offset = 4,\n  className,\n}: DropdownMenuProps) {\n  const id = useId();\n  const triggerId = trigger.props.id ?? `${id}-trigger`;\n  const menuId = `${id}-menu`;\n  const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n  const menu = useRef<HTMLDivElement>(null);\n  const typeahead = useRef('');\n  const clearTypeahead = useTimeout();\n  const [focusOnOpen, setFocusOnOpen] = useState<'first' | 'last'>('first');\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const { setReference, setFloating, floatingStyles } = useFloatingLayer({\n    open,\n    placement,\n    gap: offset,\n  });\n  const triggerElementRef = getElementRef<HTMLElement>(trigger);\n  const attachTrigger = useMemo(\n    () => mergeRefs<HTMLElement>(setReference, triggerElementRef, setTriggerNode),\n    [setReference, triggerElementRef],\n  );\n  const attachMenu = useMemo(() => mergeRefs(setFloating, menu), [setFloating]);\n\n  useEffect(() => {\n    if (!open) return;\n    const items = getItems(menu.current);\n    (focusOnOpen === 'first' ? items[0] : items.at(-1))?.focus({ preventScroll: true });\n  }, [open, focusOnOpen]);\n\n  const close = (returnFocus = true) => {\n    setOpen(false);\n    if (returnFocus) triggerNode?.focus();\n  };\n\n  useEscapeKey(() => close(), { enabled: open });\n  useClickOutside(\n    [menu, { current: triggerNode }],\n    () => {\n      close(false);\n      refocusIfLost(triggerNode);\n    },\n    { enabled: open },\n  );\n\n  const openWith = (target: 'first' | 'last') => {\n    setFocusOnOpen(target);\n    setOpen(true);\n  };\n\n  const triggerElement = isValidElement(trigger)\n    ? cloneElement(trigger, {\n        ref: attachTrigger,\n        id: triggerId,\n        'aria-haspopup': 'menu',\n        'aria-expanded': open,\n        'aria-controls': open ? menuId : undefined,\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          trigger.props.onClick?.(event);\n          if (event.defaultPrevented) return;\n          if (open) setOpen(false);\n          else openWith('first');\n        },\n        onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n          trigger.props.onKeyDown?.(event);\n          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            openWith(event.key === 'ArrowDown' ? 'first' : 'last');\n          }\n        },\n      } as object)\n    : trigger;\n\n  const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const items = getItems(menu.current);\n    const index = items.indexOf(document.activeElement as HTMLElement);\n    const focusAt = (next: number) => items.at(next % items.length)?.focus();\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        focusAt(index + 1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        focusAt(index <= 0 ? -1 : index - 1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        focusAt(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        focusAt(-1);\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;\n        if (event.key === ' ' && typeahead.current === '') return;\n        event.preventDefault();\n        typeahead.current += event.key.toLowerCase();\n        clearTypeahead.set(() => {\n          typeahead.current = '';\n        }, 500);\n        findByText(items, index, typeahead.current)?.focus();\n    }\n  };\n\n  return (\n    <>\n      {triggerElement}\n      {open && (\n        <Portal>\n          <div\n            ref={attachMenu}\n            id={menuId}\n            role=\"menu\"\n            aria-labelledby={triggerId}\n            aria-orientation=\"vertical\"\n            tabIndex={-1}\n            className={cn(styles.menu, className)}\n            style={floatingStyles}\n            onKeyDown={onMenuKeyDown}\n          >\n            <MenuContext.Provider value={{ close }}>{children}</MenuContext.Provider>\n          </div>\n        </Portal>\n      )}\n    </>\n  );\n}\n\nexport interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Called when the item is chosen with a click, Enter or Space. */\n  onSelect?: () => void;\n  /** Icon shown before the label. */\n  icon?: ReactNode;\n  /** Keyboard shortcut shown after the label, for reference only. */\n  shortcut?: string;\n  /** Styles the item as a destructive action. @default false */\n  destructive?: boolean;\n  /**\n   * Keeps the item focusable but prevents choosing it, as the menu pattern recommends.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Closes the menu after the item is chosen.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n}\n\n/** Action inside a `DropdownMenu`. */\nexport const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(\n  function DropdownMenuItem(\n    {\n      onSelect,\n      icon,\n      shortcut,\n      destructive = false,\n      disabled = false,\n      closeOnSelect = true,\n      className,\n      children,\n      onClick,\n      onPointerMove,\n      ...props\n    },\n    ref,\n  ) {\n    const menu = useContext(MenuContext);\n    if (!menu) throw new Error('DropdownMenuItem must be rendered inside a DropdownMenu.');\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"menuitem\"\n        tabIndex={-1}\n        aria-disabled={disabled || undefined}\n        className={cn(styles.item, destructive && styles.destructive, className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (disabled || event.defaultPrevented) return;\n          onSelect?.();\n          if (closeOnSelect) menu.close();\n        }}\n        onPointerMove={(event) => {\n          onPointerMove?.(event);\n          if (event.pointerType !== 'touch') event.currentTarget.focus();\n        }}\n        {...props}\n      >\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className={styles.label}>{children}</span>\n        {shortcut && (\n          <kbd className={styles.shortcut} aria-hidden=\"true\">\n            {shortcut}\n          </kbd>\n        )}\n      </button>\n    );\n  },\n);\n\nexport interface DropdownMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visible heading of the group, which also names it. */\n  label: ReactNode;\n}\n\n/** Labelled set of related items. */\nexport const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(\n  function DropdownMenuGroup({ label, className, children, ...props }, ref) {\n    const labelId = useId();\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-labelledby={labelId}\n        className={cn(styles.group, className)}\n        {...props}\n      >\n        <div id={labelId} role=\"presentation\" className={styles.groupLabel}>\n          {label}\n        </div>\n        {children}\n      </div>\n    );\n  },\n);\n\n/** Line between groups of items. */\nexport const DropdownMenuSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function DropdownMenuSeparator({ className, ...props }, ref) {\n    return (\n      <div ref={ref} role=\"separator\" className={cn(styles.separator, className)} {...props} />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/DropdownMenu/DropdownMenu.module.js

@@ -0,0 +1,16 @@
+// src/components/DropdownMenu/DropdownMenu.module.css
+var e = "onyx-menu--RiRW", t = "onyx-menu-in-1KJYp", n = "onyx-item-T-QPZ", r = "onyx-destructive-3XWwH", i = "onyx-icon-zOP3d", a = "onyx-label-6yP76", o = "onyx-shortcut-NBjlt", s = "onyx-group-CHr24", c = "onyx-groupLabel-FVGET", l = "onyx-separator-RimQa", u = {
+	menu: e,
+	menuIn: t,
+	item: n,
+	destructive: r,
+	icon: i,
+	label: a,
+	shortcut: o,
+	group: s,
+	groupLabel: c,
+	separator: l
+};
+export { u as default, r as destructive, s as group, c as groupLabel, i as icon, n as item, a as label, e as menu, t as menuIn, l as separator, o as shortcut };
+
+//# sourceMappingURL=DropdownMenu.module.js.map

package/dist/components/DropdownMenu/DropdownMenu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.module.js","names":["menu","menuIn","item","destructive","icon","label","shortcut","group","groupLabel","separator","DropdownMenu_module_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.module.css"],"sourcesContent":[".menu {\n  z-index: var(--z-index-dropdown);\n  display: flex;\n  flex-direction: column;\n  min-width: var(--size-menu);\n  max-width: var(--size-overlay-sm);\n  padding: var(--space-1);\n  overflow-y: auto;\n  font-size: var(--font-size-sm);\n  color: var(--color-text);\n  background-color: var(--color-surface-raised);\n  border: var(--border-width-thin) solid var(--color-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  outline: none;\n  animation: menu-in var(--duration-fast) var(--easing-enter);\n}\n\n.item {\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n  width: 100%;\n  min-height: var(--size-control-sm);\n  padding: var(--space-1) var(--space-2);\n  font: inherit;\n  color: inherit;\n  text-align: start;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-md);\n  outline: none;\n}\n\n.item:focus {\n  background-color: var(--color-state-hover);\n}\n\n.item:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-ring-width) * -1);\n}\n\n.item:active:not([aria-disabled='true']) {\n  background-color: var(--color-state-active);\n}\n\n.item[aria-disabled='true'] {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.destructive:not([aria-disabled='true']) {\n  color: var(--color-danger-text);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  font-size: var(--size-icon-sm);\n  color: var(--color-text-muted);\n}\n\n.destructive .icon {\n  color: inherit;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n}\n\n.shortcut {\n  margin-inline-start: var(--space-4);\n  font-family: inherit;\n  font-size: var(--font-size-xs);\n  color: var(--color-text-muted);\n  letter-spacing: var(--letter-spacing-wide);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.groupLabel {\n  padding: var(--space-2) var(--space-2) var(--space-1);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  color: var(--color-text-muted);\n}\n\n.separator {\n  height: var(--border-width-thin);\n  margin: var(--space-1) calc(var(--space-1) * -1);\n  background-color: var(--color-border);\n}\n\n@keyframes menu-in {\n  from {\n    opacity: 0;\n    scale: 0.96;\n  }\n}\n\n@media (pointer: coarse) {\n  .item {\n    min-height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, } from './DropdownMenu.js';
+export type { DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuPlacement, DropdownMenuProps, } from './DropdownMenu.js';

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Short statement of what is missing, such as "No projects yet". */
+    title: ReactNode;
+    /** What the user can do about it. */
+    description?: ReactNode;
+    /** Illustration or icon shown above the title. It is decorative. */
+    icon?: ReactNode;
+    /** Primary way forward, usually a `Button`. */
+    action?: ReactNode;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /**
+     * Level of the title heading. Match it to the outline of the page.
+     * @default 3
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/** Placeholder for a list, table or page that has no content yet or no results. */
+export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./EmptyState.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/EmptyState/EmptyState.tsx
+var a = n(function({ title: n, description: a, icon: o, action: s, size: c = "md", headingLevel: l = 3, className: u, ...d }, f) {
+	let p = `h${l}`;
+	return /* @__PURE__ */ i("div", {
+		ref: f,
+		className: e(t.emptyState, t[c], u),
+		...d,
+		children: [
+			o && /* @__PURE__ */ r("div", {
+				className: t.icon,
+				"aria-hidden": "true",
+				children: o
+			}),
+			/* @__PURE__ */ r(p, {
+				className: t.title,
+				children: n
+			}),
+			a && /* @__PURE__ */ r("p", {
+				className: t.description,
+				children: a
+			}),
+			s && /* @__PURE__ */ r("div", {
+				className: t.action,
+				children: s
+			})
+		]
+	});
+});
+export { a as EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["styles","EmptyState_module_default","EmptyState","forwardRef","props","Title","headingLevel","cn","size","className","icon","title","description","action"],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './EmptyState.module.css';\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Short statement of what is missing, such as \"No projects yet\". */\n  title: ReactNode;\n  /** What the user can do about it. */\n  description?: ReactNode;\n  /** Illustration or icon shown above the title. It is decorative. */\n  icon?: ReactNode;\n  /** Primary way forward, usually a `Button`. */\n  action?: ReactNode;\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n  /**\n   * Level of the title heading. Match it to the outline of the page.\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\n/** Placeholder for a list, table or page that has no content yet or no results. */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title, description, icon, action, size = 'md', headingLevel = 3, className, ...props },\n  ref,\n) {\n  const Title = `h${headingLevel}` as const;\n\n  return (\n    <div ref={ref} className={cn(styles.emptyState, styles[size], className)} {...props}>\n      {icon && (\n        <div className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </div>\n      )}\n      <Title className={styles.title}>{title}</Title>\n      {description && <p className={styles.description}>{description}</p>}\n      {action && <div className={styles.action}>{action}</div>}\n    </div>\n  );\n});\n"],"mappings":";;;;;;AAuBA,IAAaE,IAAaC,EAA4C,SACpE,EAAE,UAAO,gBAAa,SAAM,WAAQ,UAAO,MAAM,kBAAe,GAAG,cAAW,GAAGC,KACjF,GACA;CACA,IAAMC,IAAQ,IAAIC;CAElB,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGP,EAAO,YAAYA,EAAOQ,IAAOC,CAAS;EAAG,GAAIL;EAA9E,UAAA;GACGM,KACC,kBAAC,OAAD;IAAK,WAAWV,EAAO;IAAM,eAAY;IACtC,UAAAU;GACE,CAAA;GAEP,kBAACL,GAAD;IAAO,WAAWL,EAAO;IAAQ,UAAAW;GAAa,CAAA;GAC7CC,KAAe,kBAAC,KAAD;IAAG,WAAWZ,EAAO;IAAc,UAAAY;GAAe,CAAA;GACjEC,KAAU,kBAAC,OAAD;IAAK,WAAWb,EAAO;IAAS,UAAAa;GAAY,CAAA;EACpD;;AAET,CAAC"}

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

@@ -0,0 +1,12 @@
+// src/components/EmptyState/EmptyState.module.css
+var e = "onyx-emptyState-OlmHA", t = "onyx-sm-bnLtD", n = "onyx-icon-qVCyh", r = "onyx-title-xPfUf", i = "onyx-description-oWwH1", a = "onyx-action-dqxw1", o = {
+	emptyState: e,
+	sm: t,
+	icon: n,
+	title: r,
+	description: i,
+	action: a
+};
+export { a as action, o as default, i as description, e as emptyState, n as icon, t as sm, r as title };
+
+//# sourceMappingURL=EmptyState.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.module.js","names":["emptyState","sm","icon","title","description","action","EmptyState_module_default"],"sources":["../../../src/components/EmptyState/EmptyState.module.css"],"sourcesContent":[".emptyState {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  align-items: center;\n  margin-inline: auto;\n  max-width: var(--size-overlay-md);\n  padding: var(--space-12) var(--space-6);\n  text-align: center;\n}\n\n.sm {\n  padding: var(--space-6) var(--space-4);\n}\n\n.icon {\n  display: grid;\n  place-items: center;\n  width: var(--space-12);\n  height: var(--space-12);\n  margin-bottom: var(--space-2);\n  font-size: var(--size-icon-lg);\n  color: var(--color-text-muted);\n  background-color: var(--color-bg-muted);\n  border-radius: var(--radius-full);\n}\n\n.sm .icon {\n  width: var(--size-control-md);\n  height: var(--size-control-md);\n  font-size: var(--size-icon-md);\n}\n\n.title {\n  margin: 0;\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-snug);\n  color: var(--color-text);\n}\n\n.sm .title {\n  font-size: var(--font-size-md);\n}\n\n.description {\n  margin: 0;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  color: var(--color-text-muted);\n  text-wrap: pretty;\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  justify-content: center;\n  margin-top: var(--space-4);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps } from './EmptyState.js';

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visible caption, rendered as the `<label>` of the control. */
+    label: ReactNode;
+    /** Hint shown below the control and linked with `aria-describedby`. */
+    helperText?: ReactNode;
+    /** Error message. Marks the control as invalid and is linked with `aria-describedby`. */
+    error?: ReactNode;
+    /** Marks the control as required and shows a marker next to the label. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Keeps the label for assistive technology only. */
+    hideLabel?: boolean;
+    /** Id of the control. Generated when omitted. */
+    controlId?: string;
+    /** One `Input`, `Textarea`, `Select` or `Slider`, which picks up the field's id and state. */
+    children: ReactNode;
+}
+/**
+ * Wraps a form control with its label, helper text and error message, and wires them up with
+ * `htmlFor`, `aria-describedby` and `aria-invalid`.
+ */
+export declare const FormField: import('react').ForwardRefExoticComponent<FormFieldProps & import('react').RefAttributes<HTMLDivElement>>;