@g4rcez/components 4.1.3 → 5.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/components/display/alert.tsx"],"sourcesContent":["\"use client\";\nimport { cva } from \"class-variance-authority\";\nimport { AnimatePresence, HTMLMotionProps, motion, type Variants, type Transition } from \"motion/react\";\nimport { CheckCircleIcon, InfoIcon, WarningIcon, XIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport { CvaVariants } from \"../../types\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\n\nconst variants = {\n    true: { opacity: 1, height: \"auto\" },\n    false: { opacity: [0.7, 0.3, 0], height: 0 },\n} satisfies Variants;\n\nconst transition: Transition = {\n    type: \"tween\",\n    duration: 0.7,\n    ease: [0.04, 0.62, 0.23, 0.98],\n};\n\ntype CollapseProps = HTMLMotionProps<\"section\"> & { open: boolean };\n\nexport const Collapse = (props: PropsWithChildren<CollapseProps>) => (\n    <motion.div\n        {...(props as unknown as HTMLMotionProps<\"div\">)}\n        layout\n        layoutRoot\n        layoutScroll\n        initial={false}\n        variants={variants}\n        exit={variants.false}\n        transition={transition}\n        aria-hidden={!props.open}\n        data-component=\"collapse\"\n        animate={props.open.toString()}\n        className={css(\"aria-hidden:pointer-events-none\", props.className)}\n    >\n        {props.children}\n    </motion.div>\n);\n\nconst themeVariants = {\n    theme: {\n        primary: \"bg-alert-primary-bg text-alert-primary-text border-alert-primary-border\",\n        danger: \"bg-alert-danger-bg text-alert-danger-text border-alert-danger-border\",\n        info: \"bg-alert-info-bg text-alert-info-text border-alert-info-border\",\n        success: \"bg-alert-success-bg text-alert-success-text border-alert-success-border\",\n        secondary: \"bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border\",\n        warn: \"bg-alert-warn-bg text-alert-warn-text border-alert-warn-border\",\n        neutral: \"bg-transparent border border-card-border text-alert-primary-text\",\n    },\n};\n\nconst alertVariants = cva(\"relative block w-full rounded-lg border p-4 text-sm\", {\n    variants: themeVariants,\n    defaultVariants: { theme: \"neutral\" },\n});\n\nexport type AlertProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    CvaVariants<typeof themeVariants> &\n        Partial<{\n            open?: boolean;\n            container: string;\n            Icon: React.ReactElement;\n            onClose: (nextState: boolean) => void;\n        }>,\n    T\n>;\n\nexport const Alert: <T extends React.ElementType = \"div\">(props: AlertProps<T>) => React.ReactNode = forwardRef(function Alert(\n    { className, theme, Icon, onClose, open = true, ...props }: AlertProps,\n    ref: React.Ref<\"div\">\n) {\n    const t = useTranslations();\n    const close = () => onClose?.(false);\n    const liveRole = theme === \"danger\" || theme === \"warn\" ? \"alert\" : \"status\";\n\n    return (\n        <AnimatePresence presenceAffectsLayout propagate mode=\"sync\">\n            {open ? (\n                <motion.div\n                    data-open={!!open}\n                    aria-hidden={!open}\n                    data-component=\"alert\"\n                    className={css(\"isolate w-full\", open ? \"pointer-events-auto\" : \"pointer-events-none\")}\n                >\n                    <Collapse data-open={!!open} open={!!open}>\n                        <Polymorph\n                            {...props}\n                            ref={ref}\n                            role={liveRole}\n                            data-theme={theme}\n                            as={props.as || \"div\"}\n                            className={css(alertVariants({ theme }), className)}\n                        >\n                            <div className=\"grid grid-cols-[auto_1fr] gap-base\">\n                                {onClose !== undefined && open ? (\n                                    <button\n                                        type=\"button\"\n                                        onClick={close}\n                                        aria-label={t.closeButton}\n                                        className=\"absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger\"\n                                    >\n                                        <XIcon size={20} aria-hidden=\"true\" />\n                                    </button>\n                                ) : null}\n                                <div className={css(\"flex items-center gap-2\", props.title ? \"\" : \"w-fit\")}>\n                                    {!Icon && theme === \"success\" ? <CheckCircleIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {!Icon && theme === \"info\" ? <InfoIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {!Icon && theme === \"danger\" ? <WarningIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {Icon}\n                                </div>\n                                {props.title ? <h4 className=\"tracking-3 col-start-2 text-balance text-lg font-semibold\">{props.title}</h4> : null}\n                                <div className=\"col-start-2 w-full\">{props.children}</div>\n                            </div>\n                        </Polymorph>\n                    </Collapse>\n                </motion.div>\n            ) : null}\n        </AnimatePresence>\n    );\n}) as never;\n"],"names":["variants","transition","Collapse","props","jsx","motion","css","themeVariants","alertVariants","cva","Alert","forwardRef","className","theme","Icon","onClose","open","ref","t","useTranslations","close","liveRole","AnimatePresence","Polymorph","jsxs","XIcon","CheckCircleIcon","InfoIcon","WarningIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/display/alert.tsx"],"sourcesContent":["\"use client\";\nimport { cva } from \"class-variance-authority\";\nimport { AnimatePresence, HTMLMotionProps, motion, type Variants, type Transition } from \"motion/react\";\nimport { CheckCircleIcon, InfoIcon, WarningIcon, XIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport { CvaVariants } from \"../../types\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\n\nconst variants = {\n    true: { opacity: 1, height: \"auto\" },\n    false: { opacity: [0.7, 0.3, 0], height: 0 },\n} satisfies Variants;\n\nconst transition: Transition = {\n    type: \"tween\",\n    duration: 0.7,\n    ease: [0.04, 0.62, 0.23, 0.98],\n};\n\ntype CollapseProps = HTMLMotionProps<\"section\"> & { open: boolean };\n\nexport const Collapse = (props: PropsWithChildren<CollapseProps>) => (\n    <motion.div\n        {...(props as unknown as HTMLMotionProps<\"div\">)}\n        layout\n        layoutRoot\n        layoutScroll\n        initial={false}\n        variants={variants}\n        exit={variants.false}\n        transition={transition}\n        aria-hidden={!props.open}\n        data-component=\"collapse\"\n        animate={props.open.toString()}\n        className={css(\"aria-hidden:pointer-events-none\", props.className)}\n    >\n        {props.children}\n    </motion.div>\n);\n\nconst themeVariants = {\n    theme: {\n        primary: \"bg-alert-primary-bg text-alert-primary-text border-alert-primary-border\",\n        danger: \"bg-alert-danger-bg text-alert-danger-text border-alert-danger-border\",\n        info: \"bg-alert-info-bg text-alert-info-text border-alert-info-border\",\n        success: \"bg-alert-success-bg text-alert-success-text border-alert-success-border\",\n        secondary: \"bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border\",\n        warn: \"bg-alert-warn-bg text-alert-warn-text border-alert-warn-border\",\n        neutral: \"bg-transparent border border-card-border text-alert-primary-text\",\n    },\n};\n\nconst alertVariants = cva(\"text-typography-sm relative block w-full rounded-alert-radius border p-alert-p\", {\n    variants: themeVariants,\n    defaultVariants: { theme: \"neutral\" },\n});\n\nexport type AlertProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    CvaVariants<typeof themeVariants> &\n        Partial<{\n            open?: boolean;\n            container: string;\n            Icon: React.ReactElement;\n            onClose: (nextState: boolean) => void;\n        }>,\n    T\n>;\n\nexport const Alert: <T extends React.ElementType = \"div\">(props: AlertProps<T>) => React.ReactNode = forwardRef(function Alert(\n    { className, theme, Icon, onClose, open = true, ...props }: AlertProps,\n    ref: React.Ref<\"div\">\n) {\n    const t = useTranslations();\n    const close = () => onClose?.(false);\n    const liveRole = theme === \"danger\" || theme === \"warn\" ? \"alert\" : \"status\";\n\n    return (\n        <AnimatePresence presenceAffectsLayout propagate mode=\"sync\">\n            {open ? (\n                <motion.div\n                    data-open={!!open}\n                    aria-hidden={!open}\n                    data-component=\"alert\"\n                    className={css(\"isolate w-full\", open ? \"pointer-events-auto\" : \"pointer-events-none\")}\n                >\n                    <Collapse data-open={!!open} open={!!open}>\n                        <Polymorph\n                            {...props}\n                            ref={ref}\n                            role={liveRole}\n                            data-theme={theme}\n                            as={props.as || \"div\"}\n                            className={css(alertVariants({ theme }), className)}\n                        >\n                            <div className=\"flex flex-col gap-alert-gap\">\n                                {onClose !== undefined && open ? (\n                                    <button\n                                        type=\"button\"\n                                        onClick={close}\n                                        aria-label={t.closeButton}\n                                        className=\"absolute right-alert-close-right top-alert-close-top text-foreground transition-colors duration-300 ease-in-out hover:text-danger\"\n                                    >\n                                        <XIcon size={20} aria-hidden=\"true\" />\n                                    </button>\n                                ) : null}\n                                <div className=\"flex items-center gap-alert-gap\">\n                                    {!Icon && theme === \"success\" ? <CheckCircleIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {!Icon && theme === \"info\" ? <InfoIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {!Icon && theme === \"danger\" ? <WarningIcon aria-hidden=\"true\" size={20} /> : null}\n                                    {Icon}\n                                    {props.title ? (\n                                        <h4 className=\"tracking-3 text-typography-lg text-balance font-semibold\">{props.title}</h4>\n                                    ) : (\n                                        <div className=\"w-full\">{props.children}</div>\n                                    )}\n                                </div>\n                                {props.title ? <div className=\"w-full\">{props.children}</div> : null}\n                            </div>\n                        </Polymorph>\n                    </Collapse>\n                </motion.div>\n            ) : null}\n        </AnimatePresence>\n    );\n}) as never;\n"],"mappings":";;;;;;;;;;;;;AAUA,IAAM,IAAW;CACb,MAAM;EAAE,SAAS;EAAG,QAAQ;CAAO;CACnC,OAAO;EAAE,SAAS;GAAC;GAAK;GAAK;EAAC;EAAG,QAAQ;CAAE;AAC/C,GAEM,IAAyB;CAC3B,MAAM;CACN,UAAU;CACV,MAAM;EAAC;EAAM;EAAM;EAAM;CAAI;AACjC,GAIa,KAAY,MACrB,kBAAC,EAAO,KAAR;CACI,GAAK;CACL,QAAA;CACA,YAAA;CACA,cAAA;CACA,SAAS;CACC;CACV,MAAM,EAAS;CACH;CACZ,eAAa,CAAC,EAAM;CACpB,kBAAe;CACf,SAAS,EAAM,KAAK,SAAS;CAC7B,WAAW,EAAI,mCAAmC,EAAM,SAAS;WAEhE,EAAM;AACC,CAAA,GAeV,IAAgB,EAAI,kFAAkF;CACxG,UAAU,EAZV,OAAO;EACH,SAAS;EACT,QAAQ;EACR,MAAM;EACN,SAAS;EACT,WAAW;EACX,MAAM;EACN,SAAS;CACb,EAIU;CACV,iBAAiB,EAAE,OAAO,UAAU;AACxC,CAAC,GAaY,IAAwF,EAAW,SAC5G,EAAE,cAAW,UAAO,SAAM,YAAS,UAAO,IAAM,GAAG,KACnD,GACF;CACE,IAAM,IAAI,EAAgB,GACpB,UAAc,IAAU,EAAK,GAC7B,IAAW,MAAU,YAAY,MAAU,SAAS,UAAU;CAEpE,OACI,kBAAC,GAAD;EAAiB,uBAAA;EAAsB,WAAA;EAAU,MAAK;YACjD,IACG,kBAAC,EAAO,KAAR;GACI,aAAW,CAAC,CAAC;GACb,eAAa,CAAC;GACd,kBAAe;GACf,WAAW,EAAI,kBAAkB,IAAO,wBAAwB,qBAAqB;aAErF,kBAAC,GAAD;IAAU,aAAW,CAAC,CAAC;IAAM,MAAM,CAAC,CAAC;cACjC,kBAAC,GAAD;KACI,GAAI;KACC;KACL,MAAM;KACN,cAAY;KACZ,IAAI,EAAM,MAAM;KAChB,WAAW,EAAI,EAAc,EAAE,SAAM,CAAC,GAAG,CAAS;eAElD,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACK,MAAY,KAAA,KAAa,IACtB,kBAAC,UAAD;QACI,MAAK;QACL,SAAS;QACT,cAAY,EAAE;QACd,WAAU;kBAEV,kBAAC,GAAD;SAAO,MAAM;SAAI,eAAY;QAAQ,CAAA;OACjC,CAAA,IACR;OACJ,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACK,CAAC,KAAQ,MAAU,YAAY,kBAAC,GAAD;UAAiB,eAAY;UAAO,MAAM;SAAK,CAAA,IAAI;SAClF,CAAC,KAAQ,MAAU,SAAS,kBAAC,GAAD;UAAU,eAAY;UAAO,MAAM;SAAK,CAAA,IAAI;SACxE,CAAC,KAAQ,MAAU,WAAW,kBAAC,GAAD;UAAa,eAAY;UAAO,MAAM;SAAK,CAAA,IAAI;SAC7E;SACA,EAAM,QACH,kBAAC,MAAD;UAAI,WAAU;oBAA4D,EAAM;SAAU,CAAA,IAE1F,kBAAC,OAAD;UAAK,WAAU;oBAAU,EAAM;SAAc,CAAA;QAEhD;;OACJ,EAAM,QAAQ,kBAAC,OAAD;QAAK,WAAU;kBAAU,EAAM;OAAc,CAAA,IAAI;MAC/D;;IACE,CAAA;GACL,CAAA;EACF,CAAA,IACZ;CACS,CAAA;AAEzB,CAAC"}

package/dist/components/display/calendar.js

@@ -1,15 +1,3 @@
-import "react/jsx-runtime";
-import { C as n } from "../../calendar-BJMHRoy2.js";
-import "../../CaretRight.es-0-M8D9y8.js";
-import "react";
-import "../../dom-CyQHY7ID.js";
-import "../../input-_MVxmIpu.js";
-import "../../index-BJ1ayTam.js";
-import "../../use-translations-DSltA7H_.js";
-import "../../fns-C7Dt27Qd.js";
-import "../../proxy-BZcQiBrp.js";
-import "../../index-0YMC-_Lt.js";
-export {
-  n as Calendar
-};
-//# sourceMappingURL=calendar.js.map
+"use client";
+import { t as e } from "../../calendar-PCCZDUIL.js";
+export { e as Calendar };

package/dist/components/display/card.js

@@ -1,84 +1,75 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { e as x } from "../../Info.es-CrZKs4q4.js";
-import { c, I as u } from "../../dom-CyQHY7ID.js";
-import { P as h } from "../../polymorph-B5n9fs_K.js";
-import { a as s } from "../../skeleton-BjJobYYf.js";
-const f = ({
-  title: a,
-  loading: t,
-  children: r,
-  as: n,
-  header: l = null,
-  container: o = "",
-  titleClassName: m = "",
-  ...d
-}) => /* @__PURE__ */ i(
-  h,
-  {
-    ...d,
-    as: n || "div",
-    "data-component": "card",
-    className: c("flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", o),
-    children: [
-      a ? /* @__PURE__ */ e(
-        "header",
-        {
-          "data-component": "card-title",
-          className: c("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", m),
-          children: a
-        }
-      ) : l,
-      /* @__PURE__ */ e("div", { "data-component": "card-body", className: c("min-w-full px-6", d.className), children: t ? /* @__PURE__ */ i("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e(s, { className: "w-full" }),
-        /* @__PURE__ */ e(s, { className: "w-8/12" }),
-        /* @__PURE__ */ e(s, { className: "w-10/12" }),
-        /* @__PURE__ */ e(s, { className: "w-1/2" })
-      ] }) : r })
-    ]
-  }
-);
-f.Title = ({ as: a, titleTag: t, navTag: r, children: n, ...l }) => {
-  const o = a || "div", m = t || "h2", d = r || "nav";
-  return /* @__PURE__ */ i(
-    o,
-    {
-      ...l,
-      title: u.string(l.title) ? l.title : void 0,
-      className: c("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", l.className),
-      children: [
-        /* @__PURE__ */ e(m, { className: "font-semibold", children: l.title }),
-        n ? /* @__PURE__ */ e(d, { className: "gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end", children: n }) : null
-      ]
-    }
-  );
+import { p as e, t } from "../../dom-Bn4wY_Zx.js";
+import { t as n } from "../../polymorph-BLXhrn9n.js";
+import { t as r } from "../../Info.es-Dvln8pws.js";
+import { t as i } from "../../skeleton-CBYEq3lM.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/display/card.tsx
+var s = ({ title: e, loading: r, children: s, as: c, header: l = null, container: u = "", titleClassName: d = "", ...f }) => /* @__PURE__ */ o(n, {
+	...f,
+	as: c || "div",
+	"data-component": "card",
+	className: t("flex w-full flex-col gap-card-gap rounded-card-radius border border-card-border bg-card-background py-card-padding-y shadow-shadow-card", u),
+	children: [e ? /* @__PURE__ */ a("header", {
+		"data-component": "card-title",
+		className: t("mb-card-title-mb w-full border-b border-card-border px-card-padding-x pb-card-title-pb text-typography-xl font-medium", d),
+		children: e
+	}) : l, /* @__PURE__ */ a("div", {
+		"data-component": "card-body",
+		className: t("min-w-full px-card-padding-x", f.className),
+		children: r ? /* @__PURE__ */ o("div", {
+			className: "flex flex-col gap-card-gap",
+			children: [
+				/* @__PURE__ */ a(i, { className: "w-full" }),
+				/* @__PURE__ */ a(i, { className: "w-8/12" }),
+				/* @__PURE__ */ a(i, { className: "w-10/12" }),
+				/* @__PURE__ */ a(i, { className: "w-1/2" })
+			]
+		}) : s
+	})]
+});
+s.Title = ({ as: n, titleTag: r, navTag: i, children: s, ...c }) => {
+	let l = n || "div", u = r || "h2", d = i || "nav";
+	return /* @__PURE__ */ o(l, {
+		...c,
+		title: e.string(c.title) ? c.title : void 0,
+		className: t("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", c.className),
+		children: [/* @__PURE__ */ a(u, {
+			className: "font-semibold",
+			children: c.title
+		}), s ? /* @__PURE__ */ a(d, {
+			className: "gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end",
+			children: s
+		}) : null]
+	});
 };
-const p = (a) => {
-  const t = a.interactive ?? !0, r = a.Icon ?? x;
-  return /* @__PURE__ */ e(f, { ...a, title: null, loading: void 0, container: "px-0 py-0", className: "flex items-center gap-4 px-0", children: /* @__PURE__ */ i(
-    "div",
-    {
-      className: `flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${t ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`,
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: c(
-              "flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground",
-              a.mark
-            ),
-            children: /* @__PURE__ */ e(r, { size: 48 })
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: "flex flex-col justify-center gap-2 py-2", children: [
-          /* @__PURE__ */ e("p", { className: "text-lg", children: a.title }),
-          a.loading ? /* @__PURE__ */ e(s, { className: "h-10" }) : /* @__PURE__ */ e("p", { className: "text-4xl font-bold tracking-wide", children: a.value })
-        ] })
-      ]
-    }
-  ) });
+var c = (e) => {
+	let n = e.interactive ?? !0, c = e.Icon ?? r;
+	return /* @__PURE__ */ a(s, {
+		...e,
+		title: null,
+		loading: void 0,
+		container: "px-0 py-0",
+		className: "flex items-center gap-card-gap px-0",
+		children: /* @__PURE__ */ o("div", {
+			className: `flex w-full items-center gap-card-gap rounded-card-radius px-0 lg:px-0 ${n ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`,
+			children: [/* @__PURE__ */ a("div", {
+				className: t("flex self-stretch w-card-stats-icon-col-w items-center justify-center rounded-l-card-radius bg-primary p-card-stats-icon-col-p text-primary-foreground", e.mark),
+				children: /* @__PURE__ */ a(c, { size: 48 })
+			}), /* @__PURE__ */ o("div", {
+				className: "flex flex-col justify-center gap-card-stats-content-gap py-card-stats-content-py",
+				children: [/* @__PURE__ */ a("p", {
+					className: "text-typography-lg",
+					children: e.title
+				}), e.loading ? /* @__PURE__ */ a(i, { className: "h-10" }) : /* @__PURE__ */ a("p", {
+					className: "text-card-title-text font-bold tracking-wide",
+					children: e.value
+				})]
+			})]
+		})
+	});
 };
-export {
-  f as Card,
-  p as StatsCard
-};
-//# sourceMappingURL=card.js.map
+//#endregion
+export { s as Card, c as StatsCard };
+
+//# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/components/display/card.tsx"],"sourcesContent":["import { InfoIcon, type Icon } from \"@phosphor-icons/react\";\nimport React, { type PropsWithChildren } from \"react\";\nimport { Is } from \"sidekicker\";\nimport { css } from \"../../lib/dom\";\nimport { Label } from \"../../types\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\nimport { Skeleton } from \"./skeleton\";\n\nexport type CardProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    {\n        title?: Label;\n        loading?: boolean;\n        container?: string;\n        titleClassName?: string;\n        header?: React.ReactElement | null;\n    },\n    T\n>;\n\nexport const Card = <T extends React.ElementType = \"div\">({\n    title,\n    loading,\n    children,\n    as,\n    header = null,\n    container = \"\",\n    titleClassName = \"\",\n    ...props\n}: PropsWithChildren<CardProps<T>>) => (\n    <Polymorph\n        {...props}\n        as={as || \"div\"}\n        data-component=\"card\"\n        className={css(\"flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card\", container)}\n    >\n        {title ? (\n            <header\n                data-component=\"card-title\"\n                className={css(\"mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium\", titleClassName)}\n            >\n                {title}\n            </header>\n        ) : (\n            header\n        )}\n        <div data-component=\"card-body\" className={css(\"min-w-full px-6\", props.className)}>\n            {loading ? (\n                <div className=\"flex flex-col gap-4\">\n                    <Skeleton className=\"w-full\" />\n                    <Skeleton className=\"w-8/12\" />\n                    <Skeleton className=\"w-10/12\" />\n                    <Skeleton className=\"w-1/2\" />\n                </div>\n            ) : (\n                children\n            )}\n        </div>\n    </Polymorph>\n);\n\nexport type CardHeaderTitleProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    {\n        navTag?: React.ElementType;\n        titleTag?: React.ElementType;\n        title: React.ReactElement | string;\n    },\n    T\n>;\n\nCard.Title = ({ as, titleTag, navTag, children, ...props }: PropsWithChildren<CardHeaderTitleProps>) => {\n    const Component = (as || \"div\") as React.ElementType;\n    const Title = (titleTag || \"h2\") as React.ElementType;\n    const Nav = (navTag || \"nav\") as React.ElementType;\n    return (\n        <Component\n            {...props}\n            title={Is.string(props.title) ? props.title : undefined}\n            className={css(\"flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center\", props.className)}\n        >\n            <Title className=\"font-semibold\">{props.title}</Title>\n            {children ? (\n                <Nav className=\"gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end\">{children}</Nav>\n            ) : null}\n        </Component>\n    );\n};\n\nexport type StatsCardProps = CardProps<React.ElementType> & {\n    Icon?: Icon;\n    title: string;\n    value: Label;\n    mark?: string;\n    interactive?: boolean;\n};\n\nexport const StatsCard = (props: StatsCardProps) => {\n    const interactive = props.interactive ?? true;\n    const Icon = props.Icon ?? InfoIcon;\n    return (\n        <Card {...props} title={null} loading={undefined} container=\"px-0 py-0\" className=\"flex items-center gap-4 px-0\">\n            <div\n                className={`flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? \"transition-colors duration-300 ease-linear hover:bg-primary-hover/10\" : \"\"}`}\n            >\n                <div\n                    className={css(\n                        \"flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground\",\n                        props.mark\n                    )}\n                >\n                    {<Icon size={48} />}\n                </div>\n                <div className=\"flex flex-col justify-center gap-2 py-2\">\n                    <p className=\"text-lg\">{props.title}</p>\n                    {props.loading ? <Skeleton className=\"h-10\" /> : <p className=\"text-4xl font-bold tracking-wide\">{props.value}</p>}\n                </div>\n            </div>\n        </Card>\n    );\n};\n"],"names":["Card","title","loading","children","as","header","container","titleClassName","props","jsxs","Polymorph","css","jsx","Skeleton","titleTag","navTag","Component","Title","Nav","Is","StatsCard","interactive","Icon","InfoIcon"],"mappings":"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"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/display/card.tsx"],"sourcesContent":["import { InfoIcon, type Icon } from \"@phosphor-icons/react\";\nimport React, { type PropsWithChildren } from \"react\";\nimport { Is } from \"sidekicker\";\nimport { css } from \"../../lib/dom\";\nimport { Label } from \"../../types\";\nimport { Polymorph, PolymorphicProps } from \"../core/polymorph\";\nimport { Skeleton } from \"./skeleton\";\n\nexport type CardProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    {\n        title?: Label;\n        loading?: boolean;\n        container?: string;\n        titleClassName?: string;\n        header?: React.ReactElement | null;\n    },\n    T\n>;\n\nexport const Card = <T extends React.ElementType = \"div\">({\n    title,\n    loading,\n    children,\n    as,\n    header = null,\n    container = \"\",\n    titleClassName = \"\",\n    ...props\n}: PropsWithChildren<CardProps<T>>) => (\n    <Polymorph\n        {...props}\n        as={as || \"div\"}\n        data-component=\"card\"\n        className={css(\n            \"flex w-full flex-col gap-card-gap rounded-card-radius border border-card-border bg-card-background py-card-padding-y shadow-shadow-card\",\n            container\n        )}\n    >\n        {title ? (\n            <header\n                data-component=\"card-title\"\n                className={css(\n                    \"mb-card-title-mb w-full border-b border-card-border px-card-padding-x pb-card-title-pb text-typography-xl font-medium\",\n                    titleClassName\n                )}\n            >\n                {title}\n            </header>\n        ) : (\n            header\n        )}\n        <div data-component=\"card-body\" className={css(\"min-w-full px-card-padding-x\", props.className)}>\n            {loading ? (\n                <div className=\"flex flex-col gap-card-gap\">\n                    <Skeleton className=\"w-full\" />\n                    <Skeleton className=\"w-8/12\" />\n                    <Skeleton className=\"w-10/12\" />\n                    <Skeleton className=\"w-1/2\" />\n                </div>\n            ) : (\n                children\n            )}\n        </div>\n    </Polymorph>\n);\n\nexport type CardHeaderTitleProps<T extends React.ElementType = \"div\"> = PolymorphicProps<\n    {\n        navTag?: React.ElementType;\n        titleTag?: React.ElementType;\n        title: React.ReactElement | string;\n    },\n    T\n>;\n\nCard.Title = ({ as, titleTag, navTag, children, ...props }: PropsWithChildren<CardHeaderTitleProps>) => {\n    const Component = (as || \"div\") as React.ElementType;\n    const Title = (titleTag || \"h2\") as React.ElementType;\n    const Nav = (navTag || \"nav\") as React.ElementType;\n    return (\n        <Component\n            {...props}\n            title={Is.string(props.title) ? props.title : undefined}\n            className={css(\"flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center\", props.className)}\n        >\n            <Title className=\"font-semibold\">{props.title}</Title>\n            {children ? (\n                <Nav className=\"gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end\">{children}</Nav>\n            ) : null}\n        </Component>\n    );\n};\n\nexport type StatsCardProps = CardProps<React.ElementType> & {\n    Icon?: Icon;\n    title: string;\n    value: Label;\n    mark?: string;\n    interactive?: boolean;\n};\n\nexport const StatsCard = (props: StatsCardProps) => {\n    const interactive = props.interactive ?? true;\n    const Icon = props.Icon ?? InfoIcon;\n    return (\n        <Card {...props} title={null} loading={undefined} container=\"px-0 py-0\" className=\"flex items-center gap-card-gap px-0\">\n            <div\n                className={`flex w-full items-center gap-card-gap rounded-card-radius px-0 lg:px-0 ${interactive ? \"transition-colors duration-300 ease-linear hover:bg-primary-hover/10\" : \"\"}`}\n            >\n                <div\n                    className={css(\n                        \"flex self-stretch w-card-stats-icon-col-w items-center justify-center rounded-l-card-radius bg-primary p-card-stats-icon-col-p text-primary-foreground\",\n                        props.mark\n                    )}\n                >\n                    {<Icon size={48} />}\n                </div>\n                <div className=\"flex flex-col justify-center gap-card-stats-content-gap py-card-stats-content-py\">\n                    <p className=\"text-typography-lg\">{props.title}</p>\n                    {props.loading ? <Skeleton className=\"h-10\" /> : <p className=\"text-card-title-text font-bold tracking-wide\">{props.value}</p>}\n                </div>\n            </div>\n        </Card>\n    );\n};\n"],"mappings":";;;;;;;AAmBA,IAAa,KAA6C,EACtD,UACA,YACA,aACA,OACA,YAAS,MACT,eAAY,IACZ,oBAAiB,IACjB,GAAG,QAEH,kBAAC,GAAD;CACI,GAAI;CACJ,IAAI,KAAM;CACV,kBAAe;CACf,WAAW,EACP,2IACA,CACJ;WAPJ,CASK,IACG,kBAAC,UAAD;EACI,kBAAe;EACf,WAAW,EACP,yHACA,CACJ;YAEC;CACG,CAAA,IAER,GAEJ,kBAAC,OAAD;EAAK,kBAAe;EAAY,WAAW,EAAI,gCAAgC,EAAM,SAAS;YACzF,IACG,kBAAC,OAAD;GAAK,WAAU;aAAf;IACI,kBAAC,GAAD,EAAU,WAAU,SAAU,CAAA;IAC9B,kBAAC,GAAD,EAAU,WAAU,SAAU,CAAA;IAC9B,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;IAC/B,kBAAC,GAAD,EAAU,WAAU,QAAS,CAAA;GAC5B;OAEL;CAEH,CAAA,CACE;;AAYf,EAAK,SAAS,EAAE,OAAI,aAAU,WAAQ,aAAU,GAAG,QAAqD;CACpG,IAAM,IAAa,KAAM,OACnB,IAAS,KAAY,MACrB,IAAO,KAAU;CACvB,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,OAAO,EAAG,OAAO,EAAM,KAAK,IAAI,EAAM,QAAQ,KAAA;EAC9C,WAAW,EAAI,mGAAmG,EAAM,SAAS;YAHrI,CAKI,kBAAC,GAAD;GAAO,WAAU;aAAiB,EAAM;EAAa,CAAA,GACpD,IACG,kBAAC,GAAD;GAAK,WAAU;GAA+F;EAAc,CAAA,IAC5H,IACG;;AAEnB;AAUA,IAAa,KAAa,MAA0B;CAChD,IAAM,IAAc,EAAM,eAAe,IACnC,IAAO,EAAM,QAAQ;CAC3B,OACI,kBAAC,GAAD;EAAM,GAAI;EAAO,OAAO;EAAM,SAAS,KAAA;EAAW,WAAU;EAAY,WAAU;YAC9E,kBAAC,OAAD;GACI,WAAW,0EAA0E,IAAc,yEAAyE;aADhL,CAGI,kBAAC,OAAD;IACI,WAAW,EACP,0JACA,EAAM,IACV;cAEC,kBAAC,GAAD,EAAM,MAAM,GAAK,CAAA;GACjB,CAAA,GACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAM;IAAS,CAAA,GACjD,EAAM,UAAU,kBAAC,GAAD,EAAU,WAAU,OAAQ,CAAA,IAAI,kBAAC,KAAD;KAAG,WAAU;eAAgD,EAAM;IAAS,CAAA,CAC5H;KACJ;;CACH,CAAA;AAEd"}

package/dist/components/display/list.js

@@ -1,93 +1,153 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { u as w, n as F, d as k, j as C, c as I, F as j, l as A, m as O } from "../../floating-ui.react-M2PGXLDp.js";
-import { e as P } from "../../X.es-BJ1O93El.js";
-import $, { useState as L, useId as M, useCallback as z, Fragment as m } from "react";
-import { m as s, A as S } from "../../proxy-BZcQiBrp.js";
-import { M as D } from "../../index-0YMC-_Lt.js";
-const _ = ({ item: t, context: l, setter: i, get: c, refs: a }) => /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(D, { reducedMotion: "user", transition: { type: "spring", damping: 30, stiffness: 350 }, children: /* @__PURE__ */ r(S, { mode: "wait", presenceAffectsLayout: !0, children: [
-  t ? /* @__PURE__ */ e(
-    s.div,
-    {
-      exit: { opacity: 0 },
-      animate: { opacity: 1 },
-      initial: { opacity: 0 },
-      transition: { type: "tween", duration: 0.15, ease: "easeOut" },
-      className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"
-    },
-    "overlay"
-  ) : null,
-  t ? /* @__PURE__ */ e(A, { lockScroll: !0, className: "absolute inset-0 z-floating flex items-center justify-center", children: /* @__PURE__ */ e(O, { visuallyHiddenDismiss: !0, modal: !0, closeOnFocusOut: !0, context: l, children: /* @__PURE__ */ r(
-    s.div,
-    {
-      layout: !0,
-      layoutId: `item-${t.id}`,
-      initial: { opacity: 0.6, scale: 0.98 },
-      animate: { opacity: 1, scale: 1 },
-      exit: { opacity: 0, scale: 0.98 },
-      className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card",
-      ref: a.setFloating,
-      ...c(),
-      children: [
-        /* @__PURE__ */ e("nav", { className: "absolute right-4 top-1 lg:right-2", children: /* @__PURE__ */ e(
-          "button",
-          {
-            type: "button",
-            onClick: i,
-            className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger",
-            children: /* @__PURE__ */ e(P, {})
-          }
-        ) }),
-        /* @__PURE__ */ r(s.header, { layout: !0, className: "flex w-full flex-wrap items-center justify-between gap-2", children: [
-          /* @__PURE__ */ e("h3", { className: "min-w-full text-balance text-2xl font-medium", children: t.title }),
-          /* @__PURE__ */ e("p", { className: "text-sm leading-snug text-secondary", children: t.description })
-        ] }),
-        /* @__PURE__ */ e(s.div, { layout: !0, children: t.children })
-      ]
-    }
-  ) }) }, "card") : null
-] }) }) }), G = (t) => {
-  const [l, i] = L(null), c = M(), { context: a, refs: h } = w({
-    open: l !== null,
-    transform: !0,
-    onOpenChange: (d) => d ? void 0 : i(null)
-  }), f = F(a), y = k(a, { role: "dialog" }), g = C(a, { escapeKey: !0, referencePress: !0, outsidePress: !0 }), { getFloatingProps: x } = I([f, y, g]), v = z(() => {
-    i(null);
-  }, []), b = $.Children.toArray(t.children);
-  return /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ e(_, { refs: h, context: a, get: x, item: l, setter: v }),
-    /* @__PURE__ */ e("ul", { role: "list", children: b.map((d, N) => {
-      const n = d.props, o = `${c}-${N}`, u = () => i({ ...n, id: o }), p = n.leading;
-      return /* @__PURE__ */ e(
-        s.li,
-        {
-          layout: !0,
-          layoutId: `item-${o}`,
-          className: "border-b border-card-border py-2 last:border-transparent",
-          children: /* @__PURE__ */ e(s.div, { layoutId: `toast-${o}`, className: "relative", children: /* @__PURE__ */ e("div", { className: "relative flex items-start space-x-3", children: /* @__PURE__ */ r(m, { children: [
-            n.avatar ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "relative px-1", children: /* @__PURE__ */ e("button", { onClick: u, className: "flex size-10 items-center justify-center ring-primary", children: n.avatar }) }) }) : null,
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 py-1 text-foreground", children: /* @__PURE__ */ r("div", { className: "flex flex-row flex-nowrap justify-between gap-4", children: [
-              /* @__PURE__ */ r(
-                "button",
-                {
-                  onClick: u,
-                  className: "cursor-pointer text-left transition-all ease-out hover:text-primary",
-                  children: [
-                    /* @__PURE__ */ e("h3", { children: n.title }),
-                    /* @__PURE__ */ e("p", { className: "text-sm leading-snug text-secondary", children: n.description })
-                  ]
-                }
-              ),
-              p ? /* @__PURE__ */ e(p, { open: u }) : null
-            ] }) })
-          ] }) }) })
-        },
-        o
-      );
-    }) })
-  ] });
-}, J = (t) => /* @__PURE__ */ e(m, { children: t.children });
-export {
-  G as AnimatedList,
-  J as AnimatedListItem
-};
-//# sourceMappingURL=list.js.map
+"use client";
+import { r as e, t } from "../../proxy-BcJ_5Dwq.js";
+import { t as n } from "../../X.es-Cjq2a_OA.js";
+import { a as r, d as i, f as a, l as o, n as s, o as c, v as l, x as u } from "../../floating-ui.react-CwXtBJ_y.js";
+import { t as d } from "../../MotionConfig-DKKYqBH2.js";
+import f, { Fragment as p, useCallback as m, useId as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/display/list.tsx
+var y = ({ item: i, context: a, setter: o, get: l, refs: u }) => /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(d, {
+	reducedMotion: "user",
+	transition: {
+		type: "spring",
+		damping: 30,
+		stiffness: 350
+	},
+	children: /* @__PURE__ */ v(e, {
+		mode: "wait",
+		presenceAffectsLayout: !0,
+		children: [i ? /* @__PURE__ */ _(t.div, {
+			exit: { opacity: 0 },
+			animate: { opacity: 1 },
+			initial: { opacity: 0 },
+			transition: {
+				type: "tween",
+				duration: .15,
+				ease: "easeOut"
+			},
+			className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"
+		}, "overlay") : null, i ? /* @__PURE__ */ _(r, {
+			lockScroll: !0,
+			className: "absolute inset-0 z-floating flex items-center justify-center",
+			children: /* @__PURE__ */ _(s, {
+				visuallyHiddenDismiss: !0,
+				modal: !0,
+				closeOnFocusOut: !0,
+				context: a,
+				children: /* @__PURE__ */ v(t.div, {
+					layout: !0,
+					layoutId: `item-${i.id}`,
+					initial: {
+						opacity: .6,
+						scale: .98
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					exit: {
+						opacity: 0,
+						scale: .98
+					},
+					className: "relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card",
+					ref: u.setFloating,
+					...l(),
+					children: [
+						/* @__PURE__ */ _("nav", {
+							className: "absolute right-4 top-1 lg:right-2",
+							children: /* @__PURE__ */ _("button", {
+								type: "button",
+								onClick: o,
+								className: "p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger",
+								children: /* @__PURE__ */ _(n, {})
+							})
+						}),
+						/* @__PURE__ */ v(t.header, {
+							layout: !0,
+							className: "flex w-full flex-wrap items-center justify-between gap-list-header-gap",
+							children: [/* @__PURE__ */ _("h3", {
+								className: "min-w-full text-balance text-list-title-text font-medium",
+								children: i.title
+							}), /* @__PURE__ */ _("p", {
+								className: "text-typography-sm leading-snug text-secondary",
+								children: i.description
+							})]
+						}),
+						/* @__PURE__ */ _(t.div, {
+							layout: !0,
+							children: i.children
+						})
+					]
+				})
+			})
+		}, "card") : null]
+	})
+}) }), b = (e) => {
+	let [n, r] = g(null), s = h(), { context: c, refs: d } = a({
+		open: n !== null,
+		transform: !0,
+		onOpenChange: (e) => e ? void 0 : r(null)
+	}), { getFloatingProps: b } = l([
+		o(c),
+		u(c, { role: "dialog" }),
+		i(c, {
+			escapeKey: !0,
+			referencePress: !0,
+			outsidePress: !0
+		})
+	]), x = m(() => {
+		r(null);
+	}, []), S = f.Children.toArray(e.children);
+	return /* @__PURE__ */ v(p, { children: [/* @__PURE__ */ _(y, {
+		refs: d,
+		context: c,
+		get: b,
+		item: n,
+		setter: x
+	}), /* @__PURE__ */ _("ul", {
+		role: "list",
+		children: S.map((e, n) => {
+			let i = e.props, a = `${s}-${n}`, o = () => r({
+				...i,
+				id: a
+			}), c = i.leading;
+			return /* @__PURE__ */ _(t.li, {
+				layout: !0,
+				layoutId: `item-${a}`,
+				className: "border-b border-card-border py-list-item-py last:border-transparent",
+				children: /* @__PURE__ */ _(t.div, {
+					layoutId: `toast-${a}`,
+					className: "relative",
+					children: /* @__PURE__ */ _("div", {
+						className: "relative flex items-start space-x-3",
+						children: /* @__PURE__ */ v(p, { children: [i.avatar ? /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _("div", {
+							className: "relative px-list-avatar-px",
+							children: /* @__PURE__ */ _("button", {
+								onClick: o,
+								className: "flex size-10 items-center justify-center ring-primary",
+								children: i.avatar
+							})
+						}) }) : null, /* @__PURE__ */ _("div", {
+							className: "min-w-0 flex-1 py-list-body-py text-foreground",
+							children: /* @__PURE__ */ v("div", {
+								className: "flex flex-row flex-nowrap justify-between gap-list-item-gap",
+								children: [/* @__PURE__ */ v("button", {
+									onClick: o,
+									className: "cursor-pointer text-left transition-all ease-out hover:text-primary",
+									children: [/* @__PURE__ */ _("h3", { children: i.title }), /* @__PURE__ */ _("p", {
+										className: "text-typography-sm leading-snug text-secondary",
+										children: i.description
+									})]
+								}), c ? /* @__PURE__ */ _(c, { open: o }) : null]
+							})
+						})] })
+					})
+				})
+			}, a);
+		})
+	})] });
+}, x = (e) => /* @__PURE__ */ _(p, { children: e.children });
+//#endregion
+export { b as AnimatedList, x as AnimatedListItem };
+
+//# sourceMappingURL=list.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: (node: HTMLElement | null) => void };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => (\n    <FloatingPortal>\n        <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n            <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                {item ? (\n                    <motion.div\n                        key=\"overlay\"\n                        exit={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        initial={{ opacity: 0 }}\n                        transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                        className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                    />\n                ) : null}\n                {item ? (\n                    <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div\n                                layout\n                                layoutId={`item-${item.id}`}\n                                initial={{ opacity: 0.6, scale: 0.98 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.98 }}\n                                className=\"relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card\"\n                                ref={refs.setFloating}\n                                {...get()}\n                            >\n                                <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                    <button\n                                        type=\"button\"\n                                        onClick={setter}\n                                        className=\"p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                    >\n                                        <XIcon />\n                                    </button>\n                                </nav>\n                                <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-2\">\n                                    <h3 className=\"min-w-full text-balance text-2xl font-medium\">{item.title}</h3>\n                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                </motion.header>\n                                <motion.div layout>{item.children}</motion.div>\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingOverlay>\n                ) : null}\n            </AnimatePresence>\n        </MotionConfig>\n    </FloatingPortal>\n);\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });\n    const { getFloatingProps } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item = (x as React.ReactElement<AnimatedItemProps>).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-2 last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-1\">\n                                                    <button onClick={setter} className=\"flex size-10 items-center justify-center ring-primary\">\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-1 text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-4\">\n                                                <button\n                                                    onClick={setter}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"names":["FloatItem","item","context","setter","get","refs","jsx","FloatingPortal","MotionConfig","jsxs","AnimatePresence","motion","FloatingOverlay","FloatingFocusManager","XIcon","AnimatedList","props","selected","setSelected","useState","id","useId","useFloating","open","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","useInteractions","clear","useCallback","items","React","Fragment","x","index","innerId","Leading","AnimatedListItem"],"mappings":";;;;;;AAqCA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,SAAAC,GAAS,QAAAC,GAAQ,KAAAC,GAAK,MAAAC,EAAA,MAC7C,gBAAAC,EAACC,GAAA,EACG,UAAA,gBAAAD,EAACE,GAAA,EAAa,eAAc,QAAO,YAAY,EAAE,MAAM,UAAU,SAAS,IAAI,WAAW,OACrF,UAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,QAAO,uBAAqB,IAC7C,UAAA;AAAA,EAAAT,IACG,gBAAAK;AAAA,IAACK,EAAO;AAAA,IAAP;AAAA,MAEG,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,YAAY,EAAE,MAAM,SAAS,UAAU,MAAM,MAAM,UAAA;AAAA,MACnD,WAAU;AAAA,IAAA;AAAA,IALN;AAAA,EAAA,IAOR;AAAA,EACHV,IACG,gBAAAK,EAACM,GAAA,EAA2B,YAAU,IAAC,WAAU,gEAC7C,UAAA,gBAAAN,EAACO,GAAA,EAAqB,uBAAqB,IAAC,OAAK,IAAC,iBAAe,IAAC,SAAAX,GAC9D,UAAA,gBAAAO;AAAA,IAACE,EAAO;AAAA,IAAP;AAAA,MACG,QAAM;AAAA,MACN,UAAU,QAAQV,EAAK,EAAE;AAAA,MACzB,SAAS,EAAE,SAAS,KAAK,OAAO,KAAA;AAAA,MAChC,SAAS,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,MAC9B,MAAM,EAAE,SAAS,GAAG,OAAO,KAAA;AAAA,MAC3B,WAAU;AAAA,MACV,KAAKI,EAAK;AAAA,MACT,GAAGD,EAAA;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,qCACX,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,SAASH;AAAA,YACT,WAAU;AAAA,YAEV,4BAACW,GAAA,CAAA,CAAM;AAAA,UAAA;AAAA,QAAA,GAEf;AAAA,0BACCH,EAAO,QAAP,EAAc,QAAM,IAAC,WAAU,4DAC5B,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAA,EAAG,WAAU,gDAAgD,UAAAL,EAAK,OAAM;AAAA,UACzE,gBAAAK,EAAC,KAAA,EAAE,WAAU,uCAAuC,YAAK,YAAA,CAAY;AAAA,QAAA,GACzE;AAAA,0BACCK,EAAO,KAAP,EAAW,QAAM,IAAE,YAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE1C,EAAA,GA3BiB,MA4BrB,IACA;AAAA,EAAA,CACR,GACJ,GACJ,GAGSI,IAAe,CAACC,MAAgD;AACzE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAgC,IAAI,GAC9DC,IAAKC,EAAA,GACL,EAAE,SAAAnB,GAAS,MAAAG,EAAA,IAASiB,EAAY;AAAA,IAClC,MAAML,MAAa;AAAA,IACnB,WAAW;AAAA,IACX,cAAc,CAACM,MAAUA,IAAO,SAAYL,EAAY,IAAI;AAAA,EAAA,CAC/D,GACKM,IAAQC,EAASvB,CAAO,GACxBwB,IAAOC,EAAQzB,GAAS,EAAE,MAAM,UAAU,GAC1C0B,IAAUC,EAAW3B,GAAS,EAAE,WAAW,IAAM,gBAAgB,IAAM,cAAc,IAAM,GAC3F,EAAE,kBAAA4B,MAAqBC,EAAgB,CAACP,GAAOE,GAAME,CAAO,CAAC,GAE7DI,IAAQC,EAAY,MAAM;AAC5B,IAAAf,EAAY,IAAI;AAAA,EAAA,GACjB,EAAE,GAECgB,IAAQC,EAAM,SAAS,QAAQnB,EAAM,QAAQ;AAEnD,2BACKoB,GAAA,EACG,UAAA;AAAA,IAAA,gBAAA9B,EAACN,GAAA,EAAU,MAAAK,GAAY,SAAAH,GAAkB,KAAK4B,GAAkB,MAAMb,GAAU,QAAQe,EAAA,CAAO;AAAA,IAC/F,gBAAA1B,EAAC,QAAG,MAAK,QACJ,YAAM,IAAI,CAAC+B,GAAGC,MAAU;AACrB,YAAMrC,IAAQoC,EAA4C,OACpDE,IAAU,GAAGnB,CAAE,IAAIkB,CAAK,IACxBnC,IAAS,MAAMe,EAAY,EAAE,GAAGjB,GAAM,IAAIsC,GAAS,GACnDC,IAAUvC,EAAK;AACrB,aACI,gBAAAK;AAAA,QAACK,EAAO;AAAA,QAAP;AAAA,UACG,QAAM;AAAA,UAEN,UAAU,QAAQ4B,CAAO;AAAA,UACzB,WAAW;AAAA,UAEX,UAAA,gBAAAjC,EAACK,EAAO,KAAP,EAAW,UAAU,SAAS4B,CAAO,IAAI,WAAU,YAChD,UAAA,gBAAAjC,EAAC,OAAA,EAAI,WAAU,uCACX,4BAAC8B,GAAA,EACI,UAAA;AAAA,YAAAnC,EAAK,SACF,gBAAAK,EAAC,OAAA,EACG,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA,gBAAAA,EAAC,UAAA,EAAO,SAASH,GAAQ,WAAU,yDAC9B,YAAK,OAAA,CACV,GACJ,GACJ,IACA;AAAA,8BACH,OAAA,EAAI,WAAU,uCACX,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,mDACX,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,SAASN;AAAA,kBACT,WAAU;AAAA,kBAEV,UAAA;AAAA,oBAAA,gBAAAG,EAAC,MAAA,EAAI,YAAK,MAAA,CAAM;AAAA,oBAChB,gBAAAA,EAAC,KAAA,EAAE,WAAU,uCAAuC,YAAK,YAAA,CAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAExEkC,IAAU,gBAAAlC,EAACkC,GAAA,EAAQ,MAAMrC,GAAQ,IAAK;AAAA,YAAA,EAAA,CAC3C,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ,GACJ,EAAA,CACJ;AAAA,QAAA;AAAA,QA9BKoC;AAAA,MAAA;AAAA,IA+BT,CAEP,EAAA,CACL;AAAA,EAAA,GACJ;AAER,GAEaE,IAAmB,CAACzB,MAAgD,gBAAAV,EAAC8B,GAAA,EAAU,YAAM,SAAA,CAAS;"}
+{"version":3,"file":"list.js","names":[],"sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: (node: HTMLElement | null) => void };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => (\n    <FloatingPortal>\n        <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n            <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                {item ? (\n                    <motion.div\n                        key=\"overlay\"\n                        exit={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        initial={{ opacity: 0 }}\n                        transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                        className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                    />\n                ) : null}\n                {item ? (\n                    <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div\n                                layout\n                                layoutId={`item-${item.id}`}\n                                initial={{ opacity: 0.6, scale: 0.98 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.98 }}\n                                className=\"relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card\"\n                                ref={refs.setFloating}\n                                {...get()}\n                            >\n                                <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                    <button\n                                        type=\"button\"\n                                        onClick={setter}\n                                        className=\"p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                    >\n                                        <XIcon />\n                                    </button>\n                                </nav>\n                                <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-list-header-gap\">\n                                    <h3 className=\"min-w-full text-balance text-list-title-text font-medium\">{item.title}</h3>\n                                    <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                </motion.header>\n                                <motion.div layout>{item.children}</motion.div>\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingOverlay>\n                ) : null}\n            </AnimatePresence>\n        </MotionConfig>\n    </FloatingPortal>\n);\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\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 } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item = (x as React.ReactElement<AnimatedItemProps>).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-list-item-py last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-list-avatar-px\">\n                                                    <button onClick={setter} className=\"flex size-10 items-center justify-center ring-primary\">\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-list-body-py text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-list-item-gap\">\n                                                <button\n                                                    onClick={setter}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"mappings":"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"}

package/dist/components/display/notifications.js

@@ -1,15 +1,3 @@
-import "react/jsx-runtime";
-import "../../index-DlJ_2RBL.js";
-import "../../CheckCircle.es-C6QWLfk_.js";
-import { w as n, s as N } from "../../notifications-Dp0ydKJS.js";
-import "../../Info.es-CrZKs4q4.js";
-import "../../Warning.es-D_eI6tLe.js";
-import "../../X.es-BJ1O93El.js";
-import "react";
-import "../../dom-CyQHY7ID.js";
-import "../../proxy-BZcQiBrp.js";
-export {
-  n as Notifications,
-  N as useNotification
-};
-//# sourceMappingURL=notifications.js.map
+"use client";
+import { n as e, t } from "../../notifications-MT4XkLov.js";
+export { t as Notifications, e as useNotification };