@g4rcez/components 4.1.3 → 5.0.0

package/dist/components/display/stats.js

@@ -1,16 +1,30 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { c as d } from "../../dom-CyQHY7ID.js";
-const i = (r) => /* @__PURE__ */ a("div", { className: "divide-y divide-card-border rounded-card border border-card-border bg-card-background shadow-shadow-card", children: [
-  /* @__PURE__ */ a("header", { className: "flex items-start gap-4 p-6", children: [
-    /* @__PURE__ */ e("div", { className: d("flex aspect-square size-10 items-center justify-center rounded-card bg-primary p-8", r.iconContainer), children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r.Icon, { className: "aspect-square size-10 text-primary-foreground" }) }) }),
-    /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ e("header", { children: /* @__PURE__ */ e("h3", { className: "text-base leading-none", children: r.title }) }),
-      /* @__PURE__ */ e("p", { className: "text-4xl font-semibold", children: r.children })
-    ] })
-  ] }),
-  r.footer ? /* @__PURE__ */ e("footer", { className: "px-6 py-2", children: r.footer }) : null
-] });
-export {
-  i as Stats
-};
-//# sourceMappingURL=stats.js.map
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/display/stats.tsx
+var r = (r) => /* @__PURE__ */ n("div", {
+	className: "divide-y divide-card-border overflow-hidden rounded-stats-radius border border-card-border bg-card-background shadow-shadow-card",
+	children: [/* @__PURE__ */ n("header", {
+		className: "flex items-stretch gap-stats-gap",
+		children: [/* @__PURE__ */ t("div", {
+			className: e("flex shrink-0 items-center justify-center bg-primary p-stats-icon-p", r.iconContainer),
+			children: /* @__PURE__ */ t(r.Icon, { className: "aspect-square size-stats-icon-size text-primary-foreground" })
+		}), /* @__PURE__ */ n("div", {
+			className: "flex flex-col justify-center gap-stats-inner-gap py-stats-p pr-stats-p",
+			children: [/* @__PURE__ */ t("h3", {
+				className: "text-typography-base leading-none",
+				children: r.title
+			}), /* @__PURE__ */ t("p", {
+				className: "text-stats-value-text font-semibold",
+				children: r.children
+			})]
+		})]
+	}), r.footer ? /* @__PURE__ */ t("footer", {
+		className: "px-stats-footer-px py-stats-footer-py",
+		children: r.footer
+	}) : null]
+});
+//#endregion
+export { r as Stats };
+
+//# sourceMappingURL=stats.js.map

package/dist/components/display/stats.js.map

@@ -1 +1 @@
-{"version":3,"file":"stats.js","sources":["../../../src/components/display/stats.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Label } from \"../../types\";\n\nexport type StatsProps = {\n    title: Label;\n    iconContainer?: string;\n    footer?: React.ReactElement;\n    Icon: React.FC<{ className: string }>;\n};\n\nexport const Stats = (props: React.PropsWithChildren<StatsProps>) => {\n    return (\n        <div className=\"divide-y divide-card-border rounded-card border border-card-border bg-card-background shadow-shadow-card\">\n            <header className=\"flex items-start gap-4 p-6\">\n                <div className={css(\"flex aspect-square size-10 items-center justify-center rounded-card bg-primary p-8\", props.iconContainer)}>\n                    <div>\n                        <props.Icon className=\"aspect-square size-10 text-primary-foreground\" />\n                    </div>\n                </div>\n                <div className=\"flex flex-col gap-1\">\n                    <header>\n                        <h3 className=\"text-base leading-none\">{props.title}</h3>\n                    </header>\n                    <p className=\"text-4xl font-semibold\">{props.children}</p>\n                </div>\n            </header>\n            {props.footer ? <footer className=\"px-6 py-2\">{props.footer}</footer> : null}\n        </div>\n    );\n};\n"],"names":["Stats","props","jsxs","jsx","css"],"mappings":";;AAWO,MAAMA,IAAQ,CAACC,MAEd,gBAAAC,EAAC,OAAA,EAAI,WAAU,4GACX,UAAA;AAAA,EAAA,gBAAAA,EAAC,UAAA,EAAO,WAAU,8BACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAWC,EAAI,sFAAsFH,EAAM,aAAa,GACzH,UAAA,gBAAAE,EAAC,OAAA,EACG,UAAA,gBAAAA,EAACF,EAAM,MAAN,EAAW,WAAU,gDAAA,CAAgD,GAC1E,GACJ;AAAA,IACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,YACG,UAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAF,EAAM,OAAM,EAAA,CACxD;AAAA,MACA,gBAAAE,EAAC,KAAA,EAAE,WAAU,0BAA0B,YAAM,SAAA,CAAS;AAAA,IAAA,EAAA,CAC1D;AAAA,EAAA,GACJ;AAAA,EACCF,EAAM,SAAS,gBAAAE,EAAC,UAAA,EAAO,WAAU,aAAa,UAAAF,EAAM,QAAO,IAAY;AAAA,GAC5E;"}
+{"version":3,"file":"stats.js","names":[],"sources":["../../../src/components/display/stats.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Label } from \"../../types\";\n\nexport type StatsProps = {\n    title: Label;\n    iconContainer?: string;\n    footer?: React.ReactElement;\n    Icon: React.FC<{ className: string }>;\n};\n\nexport const Stats = (props: React.PropsWithChildren<StatsProps>) => {\n    return (\n        <div className=\"divide-y divide-card-border overflow-hidden rounded-stats-radius border border-card-border bg-card-background shadow-shadow-card\">\n            <header className=\"flex items-stretch gap-stats-gap\">\n                <div className={css(\"flex shrink-0 items-center justify-center bg-primary p-stats-icon-p\", props.iconContainer)}>\n                    <props.Icon className=\"aspect-square size-stats-icon-size text-primary-foreground\" />\n                </div>\n                <div className=\"flex flex-col justify-center gap-stats-inner-gap py-stats-p pr-stats-p\">\n                    <h3 className=\"text-typography-base leading-none\">{props.title}</h3>\n                    <p className=\"text-stats-value-text font-semibold\">{props.children}</p>\n                </div>\n            </header>\n            {props.footer ? <footer className=\"px-stats-footer-px py-stats-footer-py\">{props.footer}</footer> : null}\n        </div>\n    );\n};\n"],"mappings":";;;;AAWA,IAAa,KAAS,MAEd,kBAAC,OAAD;CAAK,WAAU;WAAf,CACI,kBAAC,UAAD;EAAQ,WAAU;YAAlB,CACI,kBAAC,OAAD;GAAK,WAAW,EAAI,uEAAuE,EAAM,aAAa;aAC1G,kBAAC,EAAM,MAAP,EAAY,WAAU,6DAA8D,CAAA;EACnF,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,MAAD;IAAI,WAAU;cAAqC,EAAM;GAAU,CAAA,GACnE,kBAAC,KAAD;IAAG,WAAU;cAAuC,EAAM;GAAY,CAAA,CACrE;IACD;KACP,EAAM,SAAS,kBAAC,UAAD;EAAQ,WAAU;YAAyC,EAAM;CAAe,CAAA,IAAI,IACnG"}

package/dist/components/display/tabs.js

@@ -1,12 +1,3 @@
-import "react/jsx-runtime";
-import "react";
-import "../../dom-CyQHY7ID.js";
-import { a as T, T as b } from "../../tabs-B0g7YtQv.js";
-import "../../use-stable-ref-CYh-YkID.js";
-import "../../polymorph-B5n9fs_K.js";
-import "./card.js";
-export {
-  T as Tab,
-  b as Tabs
-};
-//# sourceMappingURL=tabs.js.map
+"use client";
+import { n as e, t } from "../../tabs-Ciy0l9OF.js";
+export { t as Tab, e as Tabs };

package/dist/components/display/timeline.js

@@ -1,29 +1,48 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { c as n } from "../../dom-CyQHY7ID.js";
-import { P as r } from "../../polymorph-B5n9fs_K.js";
-const l = (t) => /* @__PURE__ */ a("li", { "data-component": "timeline-item", className: "relative pb-12", role: "listitem", children: [
-  /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border" }),
-  /* @__PURE__ */ i("div", { className: "relative flex items-stretch justify-start space-x-3", children: t.children })
-] });
-l.Icon = function(e) {
-  return /* @__PURE__ */ i(
-    "header",
-    {
-      ...e,
-      className: n("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-warn-foreground", e.className),
-      children: e.children
-    }
-  );
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { t } from "../../polymorph-BLXhrn9n.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/timeline.tsx
+var i = (e) => /* @__PURE__ */ r("li", {
+	"data-component": "timeline-item",
+	className: "relative pb-timeline-item-pb",
+	role: "listitem",
+	children: [/* @__PURE__ */ n("span", {
+		"aria-hidden": "true",
+		className: "absolute left-timeline-connector-left top-timeline-connector-top -ml-px h-full w-timeline-connector-w bg-card-border"
+	}), /* @__PURE__ */ n("div", {
+		className: "relative flex items-stretch justify-start space-x-3",
+		children: e.children
+	})]
+});
+i.Icon = function(t) {
+	return /* @__PURE__ */ n("header", {
+		...t,
+		className: e("flex size-timeline-icon-size items-center justify-center rounded-full bg-primary p-timeline-icon-p text-warn-foreground", t.className),
+		children: t.children
+	});
+}, i.Body = function(r) {
+	return /* @__PURE__ */ n(t, {
+		...r,
+		className: e("min-w-0 flex-1", r.className),
+		children: r.children
+	});
+}, i.Right = function(e) {
+	return /* @__PURE__ */ n("footer", {
+		className: "flex gap-timeline-right-gap self-stretch px-timeline-right-px align-baseline",
+		children: /* @__PURE__ */ n(t, {
+			...e,
+			type: "button"
+		})
+	});
 };
-l.Body = function(e) {
-  return /* @__PURE__ */ i(r, { ...e, className: n("min-w-0 flex-1", e.className), children: e.children });
-};
-l.Right = function(e) {
-  return /* @__PURE__ */ i("footer", { className: "flex gap-6 self-stretch px-4 align-baseline", children: /* @__PURE__ */ i(r, { ...e, type: "button" }) });
-};
-const o = (t) => /* @__PURE__ */ i("ul", { "data-component": "timeline", role: "list", className: "flow-root [&>li:last-child>span[aria-hidden=true]]:hidden", children: t.children });
-export {
-  o as Timeline,
-  l as TimelineItem
-};
-//# sourceMappingURL=timeline.js.map
+var a = (e) => /* @__PURE__ */ n("ul", {
+	"data-component": "timeline",
+	role: "list",
+	className: "flow-root [&>li:last-child>span[aria-hidden=true]]:hidden",
+	children: e.children
+});
+//#endregion
+export { a as Timeline, i as TimelineItem };
+
+//# sourceMappingURL=timeline.js.map

package/dist/components/display/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../src/components/display/timeline.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType, PropsWithChildren } from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\n\nexport const TimelineItem = (props: PropsWithChildren) => (\n    <li data-component=\"timeline-item\" className=\"relative pb-12\" role=\"listitem\">\n        <span aria-hidden=\"true\" className=\"absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border\" />\n        <div className=\"relative flex items-stretch justify-start space-x-3\">{props.children}</div>\n    </li>\n);\n\nTimelineItem.Icon = function TimelineIcon(props: PropsWithChildren<ComponentProps<\"header\">>) {\n    return (\n        <header\n            {...props}\n            className={css(\"flex size-12 items-center justify-center rounded-full bg-primary p-2 text-warn-foreground\", props.className)}\n        >\n            {props.children}\n        </header>\n    );\n};\n\nTimelineItem.Body = function TimelineItemBody<T extends ElementType = \"section\">(props: PropsWithChildren<PolymorphicProps<object, T>>) {\n    return (\n        <Polymorph {...props} className={css(\"min-w-0 flex-1\", props.className)}>\n            {props.children}\n        </Polymorph>\n    );\n};\n\nTimelineItem.Right = function TimelineItemRight<T extends ElementType = \"button\">(props: PolymorphicProps<object, T>) {\n    return (\n        <footer className=\"flex gap-6 self-stretch px-4 align-baseline\">\n            <Polymorph {...props} type=\"button\" />\n        </footer>\n    );\n};\n\nexport const Timeline = (props: PropsWithChildren) => (\n    <ul data-component=\"timeline\" role=\"list\" className=\"flow-root [&>li:last-child>span[aria-hidden=true]]:hidden\">\n        {props.children}\n    </ul>\n);\n"],"names":["TimelineItem","props","jsxs","jsx","css","Polymorph","Timeline"],"mappings":";;;AAIO,MAAMA,IAAe,CAACC,MACzB,gBAAAC,EAAC,MAAA,EAAG,kBAAe,iBAAgB,WAAU,kBAAiB,MAAK,YAC/D,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,4DAA2D;AAAA,EAC9F,gBAAAA,EAAC,OAAA,EAAI,WAAU,uDAAuD,YAAM,SAAA,CAAS;AAAA,EAAA,CACzF;AAGJH,EAAa,OAAO,SAAsBC,GAAoD;AAC1F,SACI,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,WAAWG,EAAI,6FAA6FH,EAAM,SAAS;AAAA,MAE1H,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEAD,EAAa,OAAO,SAA6DC,GAAuD;AACpI,SACI,gBAAAE,EAACE,GAAA,EAAW,GAAGJ,GAAO,WAAWG,EAAI,kBAAkBH,EAAM,SAAS,GACjE,UAAAA,EAAM,SAAA,CACX;AAER;AAEAD,EAAa,QAAQ,SAA6DC,GAAoC;AAClH,SACI,gBAAAE,EAAC,UAAA,EAAO,WAAU,+CACd,UAAA,gBAAAA,EAACE,KAAW,GAAGJ,GAAO,MAAK,SAAA,CAAS,EAAA,CACxC;AAER;AAEO,MAAMK,IAAW,CAACL,MACrB,gBAAAE,EAAC,MAAA,EAAG,kBAAe,YAAW,MAAK,QAAO,WAAU,6DAC/C,UAAAF,EAAM,SAAA,CACX;"}
+{"version":3,"file":"timeline.js","names":[],"sources":["../../../src/components/display/timeline.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType, PropsWithChildren } from \"react\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\n\nexport const TimelineItem = (props: PropsWithChildren) => (\n    <li data-component=\"timeline-item\" className=\"relative pb-timeline-item-pb\" role=\"listitem\">\n        <span\n            aria-hidden=\"true\"\n            className=\"absolute left-timeline-connector-left top-timeline-connector-top -ml-px h-full w-timeline-connector-w bg-card-border\"\n        />\n        <div className=\"relative flex items-stretch justify-start space-x-3\">{props.children}</div>\n    </li>\n);\n\nTimelineItem.Icon = function TimelineIcon(props: PropsWithChildren<ComponentProps<\"header\">>) {\n    return (\n        <header\n            {...props}\n            className={css(\n                \"flex size-timeline-icon-size items-center justify-center rounded-full bg-primary p-timeline-icon-p text-warn-foreground\",\n                props.className\n            )}\n        >\n            {props.children}\n        </header>\n    );\n};\n\nTimelineItem.Body = function TimelineItemBody<T extends ElementType = \"section\">(props: PropsWithChildren<PolymorphicProps<object, T>>) {\n    return (\n        <Polymorph {...props} className={css(\"min-w-0 flex-1\", props.className)}>\n            {props.children}\n        </Polymorph>\n    );\n};\n\nTimelineItem.Right = function TimelineItemRight<T extends ElementType = \"button\">(props: PolymorphicProps<object, T>) {\n    return (\n        <footer className=\"flex gap-timeline-right-gap self-stretch px-timeline-right-px align-baseline\">\n            <Polymorph {...props} type=\"button\" />\n        </footer>\n    );\n};\n\nexport const Timeline = (props: PropsWithChildren) => (\n    <ul data-component=\"timeline\" role=\"list\" className=\"flow-root [&>li:last-child>span[aria-hidden=true]]:hidden\">\n        {props.children}\n    </ul>\n);\n"],"mappings":";;;;;AAIA,IAAa,KAAgB,MACzB,kBAAC,MAAD;CAAI,kBAAe;CAAgB,WAAU;CAA+B,MAAK;WAAjF,CACI,kBAAC,QAAD;EACI,eAAY;EACZ,WAAU;CACb,CAAA,GACD,kBAAC,OAAD;EAAK,WAAU;YAAuD,EAAM;CAAc,CAAA,CAC1F;;AAGR,EAAa,OAAO,SAAsB,GAAoD;CAC1F,OACI,kBAAC,UAAD;EACI,GAAI;EACJ,WAAW,EACP,2HACA,EAAM,SACV;YAEC,EAAM;CACH,CAAA;AAEhB,GAEA,EAAa,OAAO,SAA6D,GAAuD;CACpI,OACI,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW,EAAI,kBAAkB,EAAM,SAAS;YACjE,EAAM;CACA,CAAA;AAEnB,GAEA,EAAa,QAAQ,SAA6D,GAAoC;CAClH,OACI,kBAAC,UAAD;EAAQ,WAAU;YACd,kBAAC,GAAD;GAAW,GAAI;GAAO,MAAK;EAAU,CAAA;CACjC,CAAA;AAEhB;AAEA,IAAa,KAAY,MACrB,kBAAC,MAAD;CAAI,kBAAe;CAAW,MAAK;CAAO,WAAU;WAC/C,EAAM;AACP,CAAA"}

package/dist/components/floating/dropdown.js

@@ -1,66 +1,77 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { o as v, f as x, s as y, a as R, u as D, b as N, n as P, v as j, j as p, d as C, c as I, F as M, m as O, e as S } from "../../floating-ui.react-M2PGXLDp.js";
-import { useId as A, useState as E, useEffect as H, useRef as T, useMemo as z, Fragment as U } from "react";
-const B = (e) => {
-  const a = A(), [o, n] = E(e.open);
-  H(() => n(e.open), [e.open]);
-  const i = T(null), u = z(
-    () => [
-      v(10),
-      x({ fallbackAxisSideDirection: "end" }),
-      y(),
-      R({
-        padding: 5,
-        element: i
-      })
-    ],
-    [e.arrow]
-  ), { refs: l, floatingStyles: f, context: t } = D({
-    open: o,
-    middleware: u,
-    transform: !0,
-    whileElementsMounted: N,
-    onOpenChange: (r, k) => {
-      const d = k?.relatedTarget;
-      d && d.dataset.floating === "true" && !r || (n(r), e.onChange?.(r));
-    }
-  }), g = P(t), m = j(t, { enabled: e.hover ?? !1 }), h = p(t), b = C(t, { role: "dialog" }), { getReferenceProps: F, getFloatingProps: w } = I([g, h, b, m]);
-  return /* @__PURE__ */ c(U, { children: [
-    /* @__PURE__ */ s(
-      "button",
-      {
-        ref: l.setReference,
-        ...F(e.buttonProps),
-        type: "button",
-        children: e.trigger
-      }
-    ),
-    o && /* @__PURE__ */ s(M, { preserveTabOrder: !0, id: `${a}-portal`, children: /* @__PURE__ */ s(O, { guards: !0, restoreFocus: !0, returnFocus: !0, visuallyHiddenDismiss: !0, context: t, modal: !1, children: /* @__PURE__ */ c(
-      "div",
-      {
-        className: "relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating",
-        ref: l.setFloating,
-        "aria-labelledby": a,
-        style: f,
-        ...w(),
-        children: [
-          /* @__PURE__ */ s(
-            S,
-            {
-              ref: i,
-              context: t,
-              strokeWidth: 0.1,
-              className: "fill-floating-background stroke-floating-border"
-            }
-          ),
-          /* @__PURE__ */ s("header", { className: "mb-2", children: /* @__PURE__ */ s("h3", { id: a, className: "text-left text-2xl font-medium leading-snug tracking-wide", children: e.title }) }),
-          e.children
-        ]
-      }
-    ) }) })
-  ] });
+"use client";
+import { A as e, D as t, E as n, O as r, _ as i, d as a, f as o, l as s, n as c, o as l, t as u, v as d, w as f, x as p } from "../../floating-ui.react-CwXtBJ_y.js";
+import { Fragment as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/floating/dropdown.tsx
+var S = (S) => {
+	let C = g(), [w, T] = y(S.open);
+	h(() => T(S.open), [S.open]);
+	let E = v(null), { refs: D, floatingStyles: O, context: k } = o({
+		open: w,
+		middleware: _(() => [
+			t(10),
+			n({ fallbackAxisSideDirection: "end" }),
+			r(),
+			f({
+				padding: 5,
+				element: E
+			})
+		], []),
+		transform: !0,
+		whileElementsMounted: e,
+		onOpenChange: (e, t) => {
+			let n = t?.relatedTarget;
+			n && n.dataset.floating === "true" && !e || (T(e), S.onChange?.(e));
+		}
+	}), A = s(k), j = i(k, { enabled: S.hover ?? !1 }), { getReferenceProps: M, getFloatingProps: N } = d([
+		A,
+		a(k),
+		p(k, { role: "dialog" }),
+		j
+	]);
+	return /* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b("button", {
+		ref: D.setReference,
+		...M(S.buttonProps),
+		type: "button",
+		children: S.trigger
+	}), w && /* @__PURE__ */ b(l, {
+		preserveTabOrder: !0,
+		id: `${C}-portal`,
+		children: /* @__PURE__ */ b(c, {
+			guards: !0,
+			restoreFocus: !0,
+			returnFocus: !0,
+			visuallyHiddenDismiss: !0,
+			context: k,
+			modal: !1,
+			children: /* @__PURE__ */ x("div", {
+				className: "relative isolate z-floating rounded-dropdown-radius border border-floating-border bg-floating-background p-dropdown-p shadow-shadow-floating",
+				ref: D.setFloating,
+				"aria-labelledby": C,
+				style: O,
+				...N(),
+				children: [
+					/* @__PURE__ */ b(u, {
+						ref: E,
+						context: k,
+						strokeWidth: .1,
+						className: "fill-floating-background stroke-floating-border"
+					}),
+					/* @__PURE__ */ b("header", {
+						className: "mb-dropdown-header-mb",
+						children: /* @__PURE__ */ b("h3", {
+							id: C,
+							className: "text-left text-typography-2xl font-medium leading-snug tracking-wide",
+							children: S.title
+						})
+					}),
+					S.children
+				]
+			})
+		})
+	})] });
 };
-export {
-  B as Dropdown
-};
-//# sourceMappingURL=dropdown.js.map
+//#endregion
+export { S as Dropdown };
+
+//# sourceMappingURL=dropdown.js.map

package/dist/components/floating/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/floating/dropdown.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { Fragment, PropsWithChildren, useEffect, useId, useMemo, useRef, useState } from \"react\";\n\ntype DropdownProps = {\n    open?: boolean;\n    arrow?: boolean;\n    hover?: boolean;\n    returnFocus?: boolean;\n    restoreFocus?: boolean;\n    buttonProps?: React.HTMLProps<\"button\">;\n    onChange?: (nextValue: boolean) => void;\n    trigger: React.ReactElement | React.ReactNode;\n    title?: React.ReactNode | React.ReactElement | string;\n};\n\nexport const Dropdown = (props: PropsWithChildren<DropdownProps>) => {\n    const headingId = useId();\n    const [open, setOpen] = useState(props.open);\n    useEffect(() => setOpen(props.open), [props.open]);\n    const arrowRef = useRef(null);\n    const middleware = useMemo(\n        () => [\n            offset(10),\n            flip({ fallbackAxisSideDirection: \"end\" }),\n            shift(),\n            arrow({\n                padding: 5,\n                element: arrowRef,\n            }),\n        ],\n        [props.arrow]\n    );\n    const { refs, floatingStyles, context } = useFloating({\n        open,\n        middleware,\n        transform: true,\n        whileElementsMounted: autoUpdate,\n        onOpenChange: (nextValue, event) => {\n            const element = (event as FocusEvent | undefined)?.relatedTarget as HTMLElement | null;\n            if (element) {\n                if (element.dataset.floating === \"true\" && !nextValue) return;\n            }\n            setOpen(nextValue);\n            props.onChange?.(nextValue);\n        },\n    });\n\n    const click = useClick(context);\n    const hover = useHover(context, { enabled: props.hover ?? false });\n    const dismiss = useDismiss(context);\n    const role = useRole(context, { role: \"dialog\" });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n\n    return (\n        <Fragment>\n            <button\n                ref={refs.setReference}\n                {...(getReferenceProps(props.buttonProps as unknown as React.HTMLProps<Element>) as React.HTMLProps<HTMLButtonElement>)}\n                type=\"button\"\n            >\n                {props.trigger}\n            </button>\n            {open && (\n                <FloatingPortal preserveTabOrder id={`${headingId}-portal`}>\n                    <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>\n                        <div\n                            className=\"relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating\"\n                            ref={refs.setFloating}\n                            aria-labelledby={headingId}\n                            style={floatingStyles as unknown as React.CSSProperties}\n                            {...getFloatingProps()}\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-floating-background stroke-floating-border\"\n                            />\n                            <header className=\"mb-2\">\n                                <h3 id={headingId} className=\"text-left text-2xl font-medium leading-snug tracking-wide\">\n                                    {props.title}\n                                </h3>\n                            </header>\n                            {props.children}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Fragment>\n    );\n};\n"],"names":["Dropdown","props","headingId","useId","open","setOpen","useState","useEffect","arrowRef","useRef","middleware","useMemo","offset","flip","shift","arrow","refs","floatingStyles","context","useFloating","autoUpdate","nextValue","event","element","click","useClick","hover","useHover","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","Fragment","jsx","FloatingPortal","FloatingFocusManager","jsxs","FloatingArrow"],"mappings":";;;AA+BO,MAAMA,IAAW,CAACC,MAA4C;AACjE,QAAMC,IAAYC,EAAA,GACZ,CAACC,GAAMC,CAAO,IAAIC,EAASL,EAAM,IAAI;AAC3C,EAAAM,EAAU,MAAMF,EAAQJ,EAAM,IAAI,GAAG,CAACA,EAAM,IAAI,CAAC;AACjD,QAAMO,IAAWC,EAAO,IAAI,GACtBC,IAAaC;AAAA,IACf,MAAM;AAAA,MACFC,EAAO,EAAE;AAAA,MACTC,EAAK,EAAE,2BAA2B,OAAO;AAAA,MACzCC,EAAA;AAAA,MACAC,EAAM;AAAA,QACF,SAAS;AAAA,QACT,SAASP;AAAA,MAAA,CACZ;AAAA,IAAA;AAAA,IAEL,CAACP,EAAM,KAAK;AAAA,EAAA,GAEV,EAAE,MAAAe,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,IAClD,MAAAf;AAAA,IACA,YAAAM;AAAA,IACA,WAAW;AAAA,IACX,sBAAsBU;AAAA,IACtB,cAAc,CAACC,GAAWC,MAAU;AAChC,YAAMC,IAAWD,GAAkC;AACnD,MAAIC,KACIA,EAAQ,QAAQ,aAAa,UAAU,CAACF,MAEhDhB,EAAQgB,CAAS,GACjBpB,EAAM,WAAWoB,CAAS;AAAA,IAAA;AAAA,EAC9B,CACH,GAEKG,IAAQC,EAASP,CAAO,GACxBQ,IAAQC,EAAST,GAAS,EAAE,SAASjB,EAAM,SAAS,IAAO,GAC3D2B,IAAUC,EAAWX,CAAO,GAC5BY,IAAOC,EAAQb,GAAS,EAAE,MAAM,UAAU,GAE1C,EAAE,mBAAAc,GAAmB,kBAAAC,EAAA,IAAqBC,EAAgB,CAACV,GAAOI,GAASE,GAAMJ,CAAK,CAAC;AAE7F,2BACKS,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKpB,EAAK;AAAA,QACT,GAAIgB,EAAkB/B,EAAM,WAAkD;AAAA,QAC/E,MAAK;AAAA,QAEJ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAEVG,uBACIiC,GAAA,EAAe,kBAAgB,IAAC,IAAI,GAAGnC,CAAS,WAC7C,UAAA,gBAAAkC,EAACE,KAAqB,QAAM,IAAC,cAAc,IAAM,aAAa,IAAM,uBAAqB,IAAC,SAAApB,GAAkB,OAAO,IAC/G,UAAA,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,KAAKvB,EAAK;AAAA,QACV,mBAAiBd;AAAA,QACjB,OAAOe;AAAA,QACN,GAAGgB,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,KAAKhC;AAAA,cACL,SAAAU;AAAA,cACA,aAAa;AAAA,cACb,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAkB,EAAC,UAAA,EAAO,WAAU,QACd,UAAA,gBAAAA,EAAC,MAAA,EAAG,IAAIlC,GAAW,WAAU,6DACxB,UAAAD,EAAM,MAAA,CACX,GACJ;AAAA,UACCA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEf,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../src/components/floating/dropdown.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { Fragment, PropsWithChildren, useEffect, useId, useMemo, useRef, useState } from \"react\";\n\ntype DropdownProps = {\n    open?: boolean;\n    arrow?: boolean;\n    hover?: boolean;\n    returnFocus?: boolean;\n    restoreFocus?: boolean;\n    buttonProps?: React.HTMLProps<\"button\">;\n    onChange?: (nextValue: boolean) => void;\n    trigger: React.ReactElement | React.ReactNode;\n    title?: React.ReactNode | React.ReactElement | string;\n};\n\nexport const Dropdown = (props: PropsWithChildren<DropdownProps>) => {\n    const headingId = useId();\n    const [open, setOpen] = useState(props.open);\n    useEffect(() => setOpen(props.open), [props.open]);\n    const arrowRef = useRef(null);\n    const middleware = useMemo(\n        () => [\n            offset(10),\n            flip({ fallbackAxisSideDirection: \"end\" }),\n            shift(),\n            arrow({\n                padding: 5,\n                element: arrowRef,\n            }),\n        ],\n        []\n    );\n    const { refs, floatingStyles, context } = useFloating({\n        open,\n        middleware,\n        transform: true,\n        whileElementsMounted: autoUpdate,\n        onOpenChange: (nextValue, event) => {\n            const element = (event as FocusEvent | undefined)?.relatedTarget as HTMLElement | null;\n            if (element) {\n                if (element.dataset.floating === \"true\" && !nextValue) return;\n            }\n            setOpen(nextValue);\n            props.onChange?.(nextValue);\n        },\n    });\n\n    const click = useClick(context);\n    const hover = useHover(context, { enabled: props.hover ?? false });\n    const dismiss = useDismiss(context);\n    const role = useRole(context, { role: \"dialog\" });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role, hover]);\n\n    return (\n        <Fragment>\n            <button\n                ref={refs.setReference}\n                {...(getReferenceProps(props.buttonProps as unknown as React.HTMLProps<Element>) as React.HTMLProps<HTMLButtonElement>)}\n                type=\"button\"\n            >\n                {props.trigger}\n            </button>\n            {open && (\n                <FloatingPortal preserveTabOrder id={`${headingId}-portal`}>\n                    <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>\n                        <div\n                            className=\"relative isolate z-floating rounded-dropdown-radius border border-floating-border bg-floating-background p-dropdown-p shadow-shadow-floating\"\n                            ref={refs.setFloating}\n                            aria-labelledby={headingId}\n                            style={floatingStyles as unknown as React.CSSProperties}\n                            {...getFloatingProps()}\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-floating-background stroke-floating-border\"\n                            />\n                            <header className=\"mb-dropdown-header-mb\">\n                                <h3 id={headingId} className=\"text-left text-typography-2xl font-medium leading-snug tracking-wide\">\n                                    {props.title}\n                                </h3>\n                            </header>\n                            {props.children}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Fragment>\n    );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAY,MAA4C;CACjE,IAAM,IAAY,EAAM,GAClB,CAAC,GAAM,KAAW,EAAS,EAAM,IAAI;CAC3C,QAAgB,EAAQ,EAAM,IAAI,GAAG,CAAC,EAAM,IAAI,CAAC;CACjD,IAAM,IAAW,EAAO,IAAI,GAatB,EAAE,SAAM,mBAAgB,eAAY,EAAY;EAClD;EACA,YAde,QACT;GACF,EAAO,EAAE;GACT,EAAK,EAAE,2BAA2B,MAAM,CAAC;GACzC,EAAM;GACN,EAAM;IACF,SAAS;IACT,SAAS;GACb,CAAC;EACL,GACA,CAAC,CAID;EACA,WAAW;EACX,sBAAsB;EACtB,eAAe,GAAW,MAAU;GAChC,IAAM,IAAW,GAAkC;GAC/C,KACI,EAAQ,QAAQ,aAAa,UAAU,CAAC,MAEhD,EAAQ,CAAS,GACjB,EAAM,WAAW,CAAS;EAC9B;CACJ,CAAC,GAEK,IAAQ,EAAS,CAAO,GACxB,IAAQ,EAAS,GAAS,EAAE,SAAS,EAAM,SAAS,GAAM,CAAC,GAI3D,EAAE,sBAAmB,wBAAqB,EAAgB;EAAC;EAHjD,EAAW,CAG6C;EAF3D,EAAQ,GAAS,EAAE,MAAM,SAAS,CAEkC;EAAM;CAAK,CAAC;CAE7F,OACI,kBAAC,GAAD,EAAA,UAAA,CACI,kBAAC,UAAD;EACI,KAAK,EAAK;EACV,GAAK,EAAkB,EAAM,WAAkD;EAC/E,MAAK;YAEJ,EAAM;CACH,CAAA,GACP,KACG,kBAAC,GAAD;EAAgB,kBAAA;EAAiB,IAAI,GAAG,EAAU;YAC9C,kBAAC,GAAD;GAAsB,QAAA;GAAO,cAAc;GAAM,aAAa;GAAM,uBAAA;GAA+B;GAAS,OAAO;aAC/G,kBAAC,OAAD;IACI,WAAU;IACV,KAAK,EAAK;IACV,mBAAiB;IACjB,OAAO;IACP,GAAI,EAAiB;cALzB;KAOI,kBAAC,GAAD;MACI,KAAK;MACI;MACT,aAAa;MACb,WAAU;KACb,CAAA;KACD,kBAAC,UAAD;MAAQ,WAAU;gBACd,kBAAC,MAAD;OAAI,IAAI;OAAW,WAAU;iBACxB,EAAM;MACP,CAAA;KACA,CAAA;KACP,EAAM;IACN;;EACa,CAAA;CACV,CAAA,CAEd,EAAA,CAAA;AAElB"}

package/dist/components/floating/expand.js

@@ -1,41 +1,63 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { u as F, n as I, d as y, j as x, c as P, F as b, m as j } from "../../floating-ui.react-M2PGXLDp.js";
-import { useRef as v, useId as O, useState as R, useEffect as k } from "react";
-import { Button as C } from "../core/button.js";
-import { m as r, A as w } from "../../proxy-BZcQiBrp.js";
-const z = (e) => {
-  const l = v(null), n = O(), a = `${n}:wrapper`, u = `${n}:title`, [i, o] = R(e.open ?? !1);
-  k(() => {
-    o(e.open ?? !1);
-  }, [e.open]);
-  const { context: s, refs: c } = F({
-    transform: !0,
-    open: i !== null,
-    nodeId: n,
-    onOpenChange: o,
-    strategy: "absolute"
-  }), d = I(s, { enabled: !(e.disabled ?? !1) }), m = y(s, { role: "dialog" }), f = x(s, {
-    escapeKey: !0,
-    referencePress: !0,
-    outsidePress: !0
-  }), { getFloatingProps: g, getReferenceProps: p } = P([d, m, f]);
-  return /* @__PURE__ */ h("div", { className: "relative inline-flex items-center justify-center", ref: l, children: [
-    /* @__PURE__ */ t(
-      C,
-      {
-        ...p(e),
-        as: r.button,
-        layoutId: a,
-        ref: c.setReference,
-        size: "small",
-        onClick: () => o(!0),
-        children: /* @__PURE__ */ t(r.span, { layoutId: u, children: e.trigger })
-      }
-    ),
-    /* @__PURE__ */ t(w, { children: i ? /* @__PURE__ */ t(b, { root: l, children: /* @__PURE__ */ t(j, { visuallyHiddenDismiss: !0, modal: !0, closeOnFocusOut: !0, context: s, children: /* @__PURE__ */ t(r.div, { ...g(), ref: c.setFloating, layoutId: a, className: "absolute -left-1/4 -top-3/4", children: e.children }) }) }) : null })
-  ] });
+"use client";
+import { r as e, t } from "../../proxy-Drpz0Avo.js";
+import { d as n, f as r, l as i, n as a, o, v as s, x as c } from "../../floating-ui.react-CwXtBJ_y.js";
+import { Button as l } from "../core/button.js";
+import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/floating/expand.tsx
+var g = (g) => {
+	let _ = f(null), v = d(), y = `${v}:wrapper`, b = `${v}:title`, [x, S] = p(g.open ?? !1);
+	u(() => {
+		S(g.open ?? !1);
+	}, [g.open]);
+	let { context: C, refs: w } = r({
+		transform: !0,
+		open: x !== null,
+		nodeId: v,
+		onOpenChange: S,
+		strategy: "absolute"
+	}), { getFloatingProps: T, getReferenceProps: E } = s([
+		i(C, { enabled: !(g.disabled ?? !1) }),
+		c(C, { role: "dialog" }),
+		n(C, {
+			escapeKey: !0,
+			referencePress: !0,
+			outsidePress: !0
+		})
+	]);
+	return /* @__PURE__ */ h("div", {
+		className: "relative inline-flex items-center justify-center",
+		ref: _,
+		children: [/* @__PURE__ */ m(l, {
+			...E(g),
+			as: t.button,
+			layoutId: y,
+			ref: w.setReference,
+			size: "small",
+			onClick: () => S(!0),
+			children: /* @__PURE__ */ m(t.span, {
+				layoutId: b,
+				children: g.trigger
+			})
+		}), /* @__PURE__ */ m(e, { children: x ? /* @__PURE__ */ m(o, {
+			root: _,
+			children: /* @__PURE__ */ m(a, {
+				visuallyHiddenDismiss: !0,
+				modal: !0,
+				closeOnFocusOut: !0,
+				context: C,
+				children: /* @__PURE__ */ m(t.div, {
+					...T(),
+					ref: w.setFloating,
+					layoutId: y,
+					className: "absolute -left-1/4 -top-3/4",
+					children: g.children
+				})
+			})
+		}) : null })]
+	});
 };
-export {
-  z as Expand
-};
-//# sourceMappingURL=expand.js.map
+//#endregion
+export { g as Expand };
+
+//# sourceMappingURL=expand.js.map

package/dist/components/floating/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../src/components/floating/expand.tsx"],"sourcesContent":["\"use client\";\nimport { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from \"@floating-ui/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { PropsWithChildren, useEffect, useId, useRef, useState } from \"react\";\nimport { Label, Override } from \"../../types\";\nimport { Button, ButtonProps } from \"../core/button\";\n\nexport type ExpandProps = Override<\n    ButtonProps<typeof motion.button>,\n    {\n        trigger: Label;\n        open?: boolean;\n        disabled?: boolean;\n    }\n>;\n\nexport const Expand = (props: PropsWithChildren<ExpandProps>) => {\n    const root = useRef<HTMLDivElement | null>(null);\n    const id = useId();\n    const wrapperId = `${id}:wrapper`;\n    const titleId = `${id}:title`;\n\n    const [open, setOpen] = useState(props.open ?? false);\n    useEffect(() => {\n        setOpen(props.open ?? false);\n    }, [props.open]);\n    const { context, refs } = useFloating({\n        transform: true,\n        open: open !== null,\n        nodeId: id,\n        onOpenChange: setOpen,\n        strategy: \"absolute\",\n    });\n    const click = useClick(context, { enabled: !(props.disabled ?? false) });\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);\n\n    return (\n        <div className=\"relative inline-flex items-center justify-center\" ref={root}>\n            <Button\n                {...getReferenceProps(props as never)}\n                as={motion.button}\n                layoutId={wrapperId}\n                ref={refs.setReference}\n                size=\"small\"\n                onClick={() => setOpen(true)}\n            >\n                <motion.span layoutId={titleId}>{props.trigger}</motion.span>\n            </Button>\n            <AnimatePresence>\n                {open ? (\n                    <FloatingPortal root={root}>\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div {...getFloatingProps()} ref={refs.setFloating} layoutId={wrapperId} className=\"absolute -left-1/4 -top-3/4\">\n                                {props.children}\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                ) : null}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":["Expand","props","root","useRef","id","useId","wrapperId","titleId","open","setOpen","useState","useEffect","context","refs","useFloating","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","getReferenceProps","useInteractions","jsxs","jsx","Button","motion","AnimatePresence","FloatingPortal","FloatingFocusManager"],"mappings":";;;;;AAgBO,MAAMA,IAAS,CAACC,MAA0C;AAC7D,QAAMC,IAAOC,EAA8B,IAAI,GACzCC,IAAKC,EAAA,GACLC,IAAY,GAAGF,CAAE,YACjBG,IAAU,GAAGH,CAAE,UAEf,CAACI,GAAMC,CAAO,IAAIC,EAAST,EAAM,QAAQ,EAAK;AACpD,EAAAU,EAAU,MAAM;AACZ,IAAAF,EAAQR,EAAM,QAAQ,EAAK;AAAA,EAAA,GAC5B,CAACA,EAAM,IAAI,CAAC;AACf,QAAM,EAAE,SAAAW,GAAS,MAAAC,EAAA,IAASC,EAAY;AAAA,IAClC,WAAW;AAAA,IACX,MAAMN,MAAS;AAAA,IACf,QAAQJ;AAAA,IACR,cAAcK;AAAA,IACd,UAAU;AAAA,EAAA,CACb,GACKM,IAAQC,EAASJ,GAAS,EAAE,SAAS,EAAEX,EAAM,YAAY,KAAQ,GACjEgB,IAAOC,EAAQN,GAAS,EAAE,MAAM,UAAU,GAC1CO,IAAUC,EAAWR,GAAS;AAAA,IAChC,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB,GACK,EAAE,kBAAAS,GAAkB,mBAAAC,MAAsBC,EAAgB,CAACR,GAAOE,GAAME,CAAO,CAAC;AAEtF,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAU,oDAAmD,KAAKtB,GACnE,UAAA;AAAA,IAAA,gBAAAuB;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGJ,EAAkBrB,CAAc;AAAA,QACpC,IAAI0B,EAAO;AAAA,QACX,UAAUrB;AAAA,QACV,KAAKO,EAAK;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAMJ,EAAQ,EAAI;AAAA,QAE3B,4BAACkB,EAAO,MAAP,EAAY,UAAUpB,GAAU,YAAM,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnD,gBAAAkB,EAACG,GAAA,EACI,UAAApB,IACG,gBAAAiB,EAACI,KAAe,MAAA3B,GACZ,UAAA,gBAAAuB,EAACK,GAAA,EAAqB,uBAAqB,IAAC,OAAK,IAAC,iBAAe,IAAC,SAAAlB,GAC9D,UAAA,gBAAAa,EAACE,EAAO,KAAP,EAAY,GAAGN,EAAA,GAAoB,KAAKR,EAAK,aAAa,UAAUP,GAAW,WAAU,+BACrF,UAAAL,EAAM,SAAA,CACX,EAAA,CACJ,GACJ,IACA,KAAA,CACR;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"expand.js","names":[],"sources":["../../../src/components/floating/expand.tsx"],"sourcesContent":["\"use client\";\nimport { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from \"@floating-ui/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { PropsWithChildren, useEffect, useId, useRef, useState } from \"react\";\nimport { Label, Override } from \"../../types\";\nimport { Button, ButtonProps } from \"../core/button\";\n\nexport type ExpandProps = Override<\n    ButtonProps<typeof motion.button>,\n    {\n        trigger: Label;\n        open?: boolean;\n        disabled?: boolean;\n    }\n>;\n\nexport const Expand = (props: PropsWithChildren<ExpandProps>) => {\n    const root = useRef<HTMLDivElement | null>(null);\n    const id = useId();\n    const wrapperId = `${id}:wrapper`;\n    const titleId = `${id}:title`;\n\n    const [open, setOpen] = useState(props.open ?? false);\n    useEffect(() => {\n        setOpen(props.open ?? false);\n    }, [props.open]);\n    const { context, refs } = useFloating({\n        transform: true,\n        open: open !== null,\n        nodeId: id,\n        onOpenChange: setOpen,\n        strategy: \"absolute\",\n    });\n    const click = useClick(context, { enabled: !(props.disabled ?? false) });\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps, getReferenceProps } = useInteractions([click, role, dismiss]);\n\n    return (\n        <div className=\"relative inline-flex items-center justify-center\" ref={root}>\n            <Button\n                {...getReferenceProps(props as never)}\n                as={motion.button}\n                layoutId={wrapperId}\n                ref={refs.setReference}\n                size=\"small\"\n                onClick={() => setOpen(true)}\n            >\n                <motion.span layoutId={titleId}>{props.trigger}</motion.span>\n            </Button>\n            <AnimatePresence>\n                {open ? (\n                    <FloatingPortal root={root}>\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div {...getFloatingProps()} ref={refs.setFloating} layoutId={wrapperId} className=\"absolute -left-1/4 -top-3/4\">\n                                {props.children}\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingPortal>\n                ) : null}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AAgBA,IAAa,KAAU,MAA0C;CAC7D,IAAM,IAAO,EAA8B,IAAI,GACzC,IAAK,EAAM,GACX,IAAY,GAAG,EAAG,WAClB,IAAU,GAAG,EAAG,SAEhB,CAAC,GAAM,KAAW,EAAS,EAAM,QAAQ,EAAK;CACpD,QAAgB;EACZ,EAAQ,EAAM,QAAQ,EAAK;CAC/B,GAAG,CAAC,EAAM,IAAI,CAAC;CACf,IAAM,EAAE,YAAS,YAAS,EAAY;EAClC,WAAW;EACX,MAAM,MAAS;EACf,QAAQ;EACR,cAAc;EACd,UAAU;CACd,CAAC,GAQK,EAAE,qBAAkB,yBAAsB,EAAgB;EAPlD,EAAS,GAAS,EAAE,SAAS,EAAE,EAAM,YAAY,IAAO,CAOL;EANpD,EAAQ,GAAS,EAAE,MAAM,SAAS,CAMyB;EALxD,EAAW,GAAS;GAChC,WAAW;GACX,gBAAgB;GAChB,cAAc;EAClB,CAC8E;CAAO,CAAC;CAEtF,OACI,kBAAC,OAAD;EAAK,WAAU;EAAmD,KAAK;YAAvE,CACI,kBAAC,GAAD;GACI,GAAI,EAAkB,CAAc;GACpC,IAAI,EAAO;GACX,UAAU;GACV,KAAK,EAAK;GACV,MAAK;GACL,eAAe,EAAQ,EAAI;aAE3B,kBAAC,EAAO,MAAR;IAAa,UAAU;cAAU,EAAM;GAAqB,CAAA;EACxD,CAAA,GACR,kBAAC,GAAD,EAAA,UACK,IACG,kBAAC,GAAD;GAAsB;aAClB,kBAAC,GAAD;IAAsB,uBAAA;IAAsB,OAAA;IAAM,iBAAA;IAAyB;cACvE,kBAAC,EAAO,KAAR;KAAY,GAAI,EAAiB;KAAG,KAAK,EAAK;KAAa,UAAU;KAAW,WAAU;eACrF,EAAM;IACC,CAAA;GACM,CAAA;EACV,CAAA,IAChB,KACS,CAAA,CAChB;;AAEb"}