@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/display/alert.js

@@ -1,38 +1,39 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { c as f } from "../../index-DJSMaZR4.js";
-import { c as g } from "../../CheckCircle.es-C6QWLfk_.js";
-import { e as h } from "../../Info.es-CrZKs4q4.js";
-import { r as x } from "../../Warning.es-D_eI6tLe.js";
-import { e as y } from "../../X.es-BJ1O93El.js";
-import { forwardRef as p } from "react";
-import { c as n } from "../../dom-Dl8XH0CK.js";
-import { P as v } from "../../polymorph-B5n9fs_K.js";
-import { A as w, m as c } from "../../proxy-BZcQiBrp.js";
+import { c as h } from "../../index-DlJ_2RBL.js";
+import { c as x } from "../../CheckCircle.es-C6QWLfk_.js";
+import { e as y } from "../../Info.es-CrZKs4q4.js";
+import { r as p } from "../../Warning.es-D_eI6tLe.js";
+import { e as v } from "../../X.es-BJ1O93El.js";
+import { forwardRef as w } from "react";
+import { u as N } from "../../use-translations-DSltA7H_.js";
+import { c as o } from "../../dom-CyQHY7ID.js";
+import { P as A } from "../../polymorph-B5n9fs_K.js";
+import { A as z, m as c } from "../../proxy-BZcQiBrp.js";
 const d = {
   true: { opacity: 1, height: "auto" },
   false: { opacity: [0.7, 0.3, 0], height: 0 }
-}, N = {
+}, k = {
   type: "tween",
   duration: 0.7,
   ease: [0.04, 0.62, 0.23, 0.98]
-}, A = (r) => /* @__PURE__ */ e(
+}, P = (a) => /* @__PURE__ */ e(
   c.div,
   {
-    ...r,
+    ...a,
     layout: !0,
     layoutRoot: !0,
     layoutScroll: !0,
     initial: !1,
     variants: d,
     exit: d.false,
-    transition: N,
-    "aria-hidden": !r.open,
+    transition: k,
+    "aria-hidden": !a.open,
     "data-component": "collapse",
-    animate: r.open.toString(),
-    className: n("aria-hidden:pointer-events-none", r.className),
-    children: r.children
+    animate: a.open.toString(),
+    className: o("aria-hidden:pointer-events-none", a.className),
+    children: a.children
   }
-), z = {
+), R = {
   theme: {
     primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
     danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
@@ -42,45 +43,46 @@ const d = {
     warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
     neutral: "bg-transparent border border-card-border text-alert-primary-text"
   }
-}, k = f("p-4 w-full block border relative rounded-lg text-sm", {
-  variants: z,
+}, V = h("relative block w-full rounded-lg border p-4 text-sm", {
+  variants: R,
   defaultVariants: { theme: "neutral" }
-}), B = p(function({ className: m, theme: l, Icon: i, onClose: o, open: t = !0, ...a }, u) {
-  const b = () => o?.(!1);
-  return /* @__PURE__ */ e(w, { presenceAffectsLayout: !0, propagate: !0, mode: "sync", children: t ? /* @__PURE__ */ e(
+}), F = w(function({ className: u, theme: t, Icon: n, onClose: i, open: r = !0, ...l }, m) {
+  const b = N(), f = () => i?.(!1), g = t === "danger" || t === "warn" ? "alert" : "status";
+  return /* @__PURE__ */ e(z, { presenceAffectsLayout: !0, propagate: !0, mode: "sync", children: r ? /* @__PURE__ */ e(
     c.div,
     {
-      "data-open": !!t,
-      "aria-hidden": !t,
+      "data-open": !!r,
+      "aria-hidden": !r,
       "data-component": "alert",
-      className: n("isolate w-full", t ? "pointer-events-auto" : "pointer-events-none"),
-      children: /* @__PURE__ */ e(A, { "data-open": !!t, open: !!t, children: /* @__PURE__ */ e(
-        v,
+      className: o("isolate w-full", r ? "pointer-events-auto" : "pointer-events-none"),
+      children: /* @__PURE__ */ e(P, { "data-open": !!r, open: !!r, children: /* @__PURE__ */ e(
+        A,
         {
-          ...a,
-          ref: u,
-          role: "alert",
-          "data-theme": l,
-          as: a.as ?? "div",
-          className: n(k({ theme: l }), m),
+          ...l,
+          ref: m,
+          role: g,
+          "data-theme": t,
+          as: l.as || "div",
+          className: o(V({ theme: t }), u),
           children: /* @__PURE__ */ s("div", { className: "grid grid-cols-[auto_1fr] gap-base", children: [
-            o !== void 0 && t ? /* @__PURE__ */ e(
+            i !== void 0 && r ? /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: b,
+                onClick: f,
+                "aria-label": b.closeButton,
                 className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger",
-                children: /* @__PURE__ */ e(y, { size: 20 })
+                children: /* @__PURE__ */ e(v, { size: 20, "aria-hidden": "true" })
               }
             ) : null,
-            /* @__PURE__ */ s("div", { className: n("flex items-center gap-2", a.title ? "" : "w-fit"), children: [
-              !i && l === "success" ? /* @__PURE__ */ e(g, { "aria-hidden": "true", size: 20 }) : null,
-              !i && l === "info" ? /* @__PURE__ */ e(h, { "aria-hidden": "true", size: 20 }) : null,
-              !i && l === "danger" ? /* @__PURE__ */ e(x, { "aria-hidden": "true", size: 20 }) : null,
-              i
+            /* @__PURE__ */ s("div", { className: o("flex items-center gap-2", l.title ? "" : "w-fit"), children: [
+              !n && t === "success" ? /* @__PURE__ */ e(x, { "aria-hidden": "true", size: 20 }) : null,
+              !n && t === "info" ? /* @__PURE__ */ e(y, { "aria-hidden": "true", size: 20 }) : null,
+              !n && t === "danger" ? /* @__PURE__ */ e(p, { "aria-hidden": "true", size: 20 }) : null,
+              n
             ] }),
-            a.title ? /* @__PURE__ */ e("h4", { className: "tracking-3 col-start-2 text-balance text-lg font-semibold", children: a.title }) : null,
-            /* @__PURE__ */ e("div", { className: "col-start-2 w-full", children: a.children })
+            l.title ? /* @__PURE__ */ e("h4", { className: "tracking-3 col-start-2 text-balance text-lg font-semibold", children: l.title }) : null,
+            /* @__PURE__ */ e("div", { className: "col-start-2 w-full", children: l.children })
           ] })
         }
       ) })
@@ -88,7 +90,7 @@ const d = {
   ) : null });
 });
 export {
-  B as Alert,
-  A as Collapse
+  F as Alert,
+  P as Collapse
 };
 //# sourceMappingURL=alert.js.map

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 } from \"motion/react\";\nimport { CheckCircleIcon, InfoIcon, WarningIcon, XIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\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};\n\nconst 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 any)}\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(\"p-4 w-full block border relative rounded-lg 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>) => any = forwardRef(function Alert(\n    { className, theme, Icon, onClose, open = true, ...props }: AlertProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    const close = () => onClose?.(false);\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=\"alert\"\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                                        className=\"absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger\"\n                                    >\n                                        <XIcon size={20} />\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","close","AnimatePresence","Polymorph","jsxs","XIcon","CheckCircleIcon","InfoIcon","WarningIcon"],"mappings":"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"}
+{"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":";;;;;;;;;;;AAUA,MAAMA,IAAW;AAAA,EACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,EAC5B,OAAO,EAAE,SAAS,CAAC,KAAK,KAAK,CAAC,GAAG,QAAQ,EAAA;AAC7C,GAEMC,IAAyB;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AACjC,GAIaC,IAAW,CAACC,MACrB,gBAAAC;AAAA,EAACC,EAAO;AAAA,EAAP;AAAA,IACI,GAAIF;AAAA,IACL,QAAM;AAAA,IACN,YAAU;AAAA,IACV,cAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAAH;AAAA,IACA,MAAMA,EAAS;AAAA,IACf,YAAAC;AAAA,IACA,eAAa,CAACE,EAAM;AAAA,IACpB,kBAAe;AAAA,IACf,SAASA,EAAM,KAAK,SAAA;AAAA,IACpB,WAAWG,EAAI,mCAAmCH,EAAM,SAAS;AAAA,IAEhE,UAAAA,EAAM;AAAA,EAAA;AACX,GAGEI,IAAgB;AAAA,EAClB,OAAO;AAAA,IACH,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEjB,GAEMC,IAAgBC,EAAI,uDAAuD;AAAA,EAC7E,UAAUF;AAAA,EACV,iBAAiB,EAAE,OAAO,UAAA;AAC9B,CAAC,GAaYG,IAAwFC,EAAW,SAC5G,EAAE,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,IAAM,GAAGb,EAAA,GACnDc,GACF;AACE,QAAMC,IAAIC,EAAA,GACJC,IAAQ,MAAML,IAAU,EAAK,GAC7BM,IAAWR,MAAU,YAAYA,MAAU,SAAS,UAAU;AAEpE,SACI,gBAAAT,EAACkB,KAAgB,uBAAqB,IAAC,WAAS,IAAC,MAAK,QACjD,UAAAN,IACG,gBAAAZ;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,aAAW,CAAC,CAACW;AAAA,MACb,eAAa,CAACA;AAAA,MACd,kBAAe;AAAA,MACf,WAAWV,EAAI,kBAAkBU,IAAO,wBAAwB,qBAAqB;AAAA,MAErF,UAAA,gBAAAZ,EAACF,KAAS,aAAW,CAAC,CAACc,GAAM,MAAM,CAAC,CAACA,GACjC,UAAA,gBAAAZ;AAAA,QAACmB;AAAA,QAAA;AAAA,UACI,GAAGpB;AAAA,UACJ,KAAAc;AAAA,UACA,MAAMI;AAAA,UACN,cAAYR;AAAA,UACZ,IAAIV,EAAM,MAAM;AAAA,UAChB,WAAWG,EAAIE,EAAc,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,UAElD,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,sCACV,UAAA;AAAA,YAAAT,MAAY,UAAaC,IACtB,gBAAAZ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,SAASgB;AAAA,gBACT,cAAYF,EAAE;AAAA,gBACd,WAAU;AAAA,gBAEV,UAAA,gBAAAd,EAACqB,GAAA,EAAM,MAAM,IAAI,eAAY,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA,IAExC;AAAA,YACJ,gBAAAD,EAAC,SAAI,WAAWlB,EAAI,2BAA2BH,EAAM,QAAQ,KAAK,OAAO,GACpE,UAAA;AAAA,cAAA,CAACW,KAAQD,MAAU,YAAY,gBAAAT,EAACsB,KAAgB,eAAY,QAAO,MAAM,GAAA,CAAI,IAAK;AAAA,cAClF,CAACZ,KAAQD,MAAU,SAAS,gBAAAT,EAACuB,KAAS,eAAY,QAAO,MAAM,GAAA,CAAI,IAAK;AAAA,cACxE,CAACb,KAAQD,MAAU,WAAW,gBAAAT,EAACwB,KAAY,eAAY,QAAO,MAAM,GAAA,CAAI,IAAK;AAAA,cAC7Ed;AAAA,YAAA,GACL;AAAA,YACCX,EAAM,QAAQ,gBAAAC,EAAC,MAAA,EAAG,WAAU,6DAA6D,UAAAD,EAAM,OAAM,IAAQ;AAAA,YAC9G,gBAAAC,EAAC,OAAA,EAAI,WAAU,sBAAsB,YAAM,SAAA,CAAS;AAAA,UAAA,EAAA,CACxD;AAAA,QAAA;AAAA,MAAA,EACJ,CACJ;AAAA,IAAA;AAAA,EAAA,IAEJ,KAAA,CACR;AAER,CAAC;"}

package/dist/components/display/alert.jsx

@@ -0,0 +1,61 @@
+"use client";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
+import { CheckCircleIcon, InfoIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+import React, { forwardRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
+const variants = {
+    true: { opacity: 1, height: "auto" },
+    false: { opacity: [0.7, 0.3, 0], height: 0 },
+};
+const transition = {
+    type: "tween",
+    duration: 0.7,
+    ease: [0.04, 0.62, 0.23, 0.98],
+};
+export const Collapse = (props) => (<motion.div {...props} layout layoutRoot layoutScroll initial={false} variants={variants} exit={variants.false} transition={transition} aria-hidden={!props.open} data-component="collapse" animate={props.open.toString()} className={css("aria-hidden:pointer-events-none", props.className)}>
+        {props.children}
+    </motion.div>);
+const themeVariants = {
+    theme: {
+        primary: "bg-alert-primary-bg text-alert-primary-text border-alert-primary-border",
+        danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
+        info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
+        success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
+        secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
+        warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
+        neutral: "bg-transparent border border-card-border text-alert-primary-text",
+    },
+};
+const alertVariants = cva("relative block w-full rounded-lg border p-4 text-sm", {
+    variants: themeVariants,
+    defaultVariants: { theme: "neutral" },
+});
+export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
+    const t = useTranslations();
+    const close = () => onClose?.(false);
+    const liveRole = theme === "danger" || theme === "warn" ? "alert" : "status";
+    return (<AnimatePresence presenceAffectsLayout propagate mode="sync">
+            {open ? (<motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
+                    <Collapse data-open={!!open} open={!!open}>
+                        <Polymorph {...props} ref={ref} role={liveRole} data-theme={theme} as={props.as || "div"} className={css(alertVariants({ theme }), className)}>
+                            <div className="grid grid-cols-[auto_1fr] gap-base">
+                                {onClose !== undefined && open ? (<button type="button" onClick={close} aria-label={t.closeButton} className="absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
+                                        <XIcon size={20} aria-hidden="true"/>
+                                    </button>) : null}
+                                <div className={css("flex items-center gap-2", props.title ? "" : "w-fit")}>
+                                    {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
+                                    {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
+                                    {!Icon && theme === "danger" ? <WarningIcon aria-hidden="true" size={20}/> : null}
+                                    {Icon}
+                                </div>
+                                {props.title ? <h4 className="tracking-3 col-start-2 text-balance text-lg font-semibold">{props.title}</h4> : null}
+                                <div className="col-start-2 w-full">{props.children}</div>
+                            </div>
+                        </Polymorph>
+                    </Collapse>
+                </motion.div>) : null}
+        </AnimatePresence>);
+});

package/dist/components/display/calendar.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
-import { C as n } from "../../calendar-B5lSd0ID.js";
+import { C as n } from "../../calendar-BJMHRoy2.js";
 import "../../CaretRight.es-0-M8D9y8.js";
 import "react";
-import "../../dom-Dl8XH0CK.js";
-import "../../input-CrGrSnUt.js";
-import "../../index-Z-fZHxfJ.js";
-import "../../use-translations-BwLKTrZv.js";
-import "../../fns-D2eyJKd5.js";
+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 {

package/dist/components/display/calendar.jsx

@@ -0,0 +1,299 @@
+"use client";
+import { add, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, setYear, startOfDay, startOfMonth, startOfWeek, sub, format, set, } from "date-fns";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion, MotionConfig } from "motion/react";
+import React, { useEffect, useRef } from "react";
+import { Is } from "sidekicker";
+import TheMaskInput from "the-mask-input";
+import { useReducer } from "use-typed-reducer";
+import { useDebounce } from "../../hooks/use-debounce";
+import { useLocale } from "../../hooks/use-locale";
+import { useSwipe } from "../../hooks/use-swipe";
+import { useTranslations } from "../../hooks/use-translations";
+import { css } from "../../lib/dom";
+import { splitInto, uuid } from "../../lib/fns";
+import { Input } from "../form/input";
+const timeRegex = /^(?<hour>\d\d):(?<min>\d\d)$/;
+const transition = { type: "spring", bounce: 0.3, duration: 0.6 };
+const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.25 });
+const variants = {
+    enter: dir(1),
+    exit: dir(-1),
+    middle: { x: "0%", opacity: 1 },
+};
+const removeImmediately = { exit: { visibility: "hidden" } };
+const createDays = (month) => {
+    const start = startOfWeek(startOfMonth(month));
+    return eachDayOfInterval({ start, end: add(start, { days: 41 }) });
+};
+const formatMonth = (d, locale) => d.toLocaleDateString(locale, { month: "long" });
+const getOptionsMonth = (id, date, locale) => Array.from({ length: 12 }).map((_, i) => {
+    const month = startOfMonth(new Date(1970, i, 1).setMonth(i));
+    const label = formatMonth(month, locale);
+    return (<option value={label} key={`${id}-${label}`} data-index={i}>
+                {label}
+            </option>);
+});
+const onChangeUsingKeyboard = {
+    ArrowLeft: (date, duration) => (duration === "days" ? sub(date, { days: 1 }) : sub(date, { months: 1 })),
+    ArrowRight: (date, duration) => (duration === "days" ? add(date, { days: 1 }) : add(date, { months: 1 })),
+    ArrowUp: (date, duration) => (duration === "days" ? sub(date, { weeks: 1 }) : sub(date, { years: 1 })),
+    ArrowDown: (date, duration) => (duration === "days" ? add(date, { weeks: 1 }) : add(date, { years: 1 })),
+};
+const focusDate = (origin, root, next, delay = 0) => {
+    const d = next.toISOString();
+    const select = () => {
+        if (origin?.dataset.focustrap) {
+            const el = root.current?.querySelector(`button[data-focustrap="${origin?.dataset.focustrap}"]`);
+            return setTimeout(() => el?.focus({ preventScroll: true }), delay);
+        }
+        if (root.current) {
+            const element = root.current.querySelector(`button[data-date="${d}"]`);
+            if (element)
+                return element.focus({ preventScroll: true });
+        }
+    };
+    if (delay === 0)
+        select();
+    setTimeout(select, delay);
+};
+const formatYear = (now) => now.getFullYear().toString().padStart(4, "0");
+const inRange = (start, middle, end) => {
+    if (start === undefined || end === undefined)
+        return false;
+    return isAfter(middle, start) && isBefore(middle, end);
+};
+const CalendarBody = (props) => {
+    const translate = useTranslations();
+    return (<motion.tbody layout variants={variants} custom={props.direction} onKeyDown={props.onKeyDown} className={css(props.styles?.week)}>
+            {props.zip.map((week, index) => {
+            const weekClassName = Is.function(props.styles?.week) ? props.styles?.week(week) : props.styles?.week;
+            return (<tr key={`week-${week.length}-${index}`} className={weekClassName}>
+                        {week.map((day) => {
+                    const key = day.toISOString();
+                    const isSelected = props.rangeMode
+                        ? key === props.range?.to?.toISOString() || key === props.range?.from?.toISOString()
+                        : key === (props.date ? startOfDay(props.date).toISOString() : undefined);
+                    const today = isToday(day) && props.markToday;
+                    const disabledByFn = props.disabledDate?.(day) || false;
+                    const sameMonth = isSameMonth(day, props.stateDate);
+                    const disableDate = !sameMonth || disabledByFn;
+                    const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
+                    return (<td key={key} align="center" className={css("relative p-1", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
+                                    <button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-9 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-9 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
+                                        <div></div>
+                                        {day.getDate()}
+                                        {isSelected && props.stateRange.from?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
+                                                <span className="text-xs text-foreground">
+                                                    {props.labelRange?.from ?? translate.calendarFromDate}
+                                                </span>
+                                            </span>) : null}
+                                        {isSelected && props.stateRange.to?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
+                                                <span className="text-xs text-foreground">{props.labelRange?.to ?? translate.calendarToDate}</span>
+                                            </span>) : null}
+                                    </button>
+                                    {props.RenderOnDay ? <props.RenderOnDay date={day}/> : null}
+                                </td>);
+                })}
+                    </tr>);
+        })}
+        </motion.tbody>);
+};
+const getToday = () => startOfDay(new Date());
+export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles, markRange = true, type = "date", datetimeTitle, ...props }) => {
+    const id = useRef(uuid());
+    const translations = useTranslations();
+    const currentLocale = useLocale(locale);
+    const root = useRef(null);
+    const { date, range } = props;
+    const providedDate = date || new Date();
+    const monthClicked = useRef(null);
+    const [state, dispatch] = useReducer({
+        date: providedDate,
+        isAnimating: false,
+        year: formatYear(providedDate),
+        direction: undefined,
+        range: { from: range?.from, to: range?.to },
+        months: getOptionsMonth(id.current, providedDate, currentLocale),
+        selectMode: (rangeMode ? "from" : undefined),
+        week: eachDayOfInterval({ start: startOfWeek(providedDate), end: endOfWeek(providedDate) }),
+    }, (get) => ({
+        onChangeYear: (year) => ({ year }),
+        onExitComplete: () => {
+            focusDate(monthClicked.current || null, root, get.state().date, 200);
+            monthClicked.current = null;
+            return { isAnimating: false };
+        },
+        date: (callback) => {
+            const newDate = callback(get.state().date);
+            return { date: newDate, year: formatYear(newDate) };
+        },
+        nextMonth: (e) => {
+            if (e)
+                monthClicked.current = e.currentTarget;
+            const state = get.state();
+            if (state.isAnimating)
+                return state;
+            const date = add(state.date, { months: 1 });
+            return { date, isAnimating: true, direction: 1, year: formatYear(date) };
+        },
+        previousMonth: (e) => {
+            if (e)
+                monthClicked.current = e.currentTarget;
+            const state = get.state();
+            if (state.isAnimating)
+                return state;
+            const date = sub(state.date, { months: 1 });
+            return { date, isAnimating: true, direction: -1, year: formatYear(date) };
+        },
+        onSelectDate: (e) => {
+            const state = get.state();
+            const isRangeMode = e.currentTarget.dataset.range === "true";
+            const d = e.currentTarget.dataset.date || "";
+            const date = new Date(d);
+            return {
+                date,
+                year: formatYear(date),
+                selectMode: state.selectMode === undefined ? undefined : state.selectMode === "from" ? "to" : "from",
+                range: !isRangeMode
+                    ? state.range
+                    : {
+                        from: state.selectMode === "from" ? date : state.range.from,
+                        to: state.selectMode === "to" ? date : state.range.to,
+                    },
+            };
+        },
+        onChangeMonth: (e) => {
+            const value = e.target.value;
+            const array = Array.from(e.target.options);
+            const month = array.find((x) => x.value === value);
+            const state = get.state();
+            if (month) {
+                const i = month.dataset.index || "";
+                const d = new Date(get.state().date);
+                d.setMonth(+i);
+                return { ...state, date: d, year: formatYear(d) };
+            }
+            return state;
+        },
+        onKeyDown: (e) => {
+            const key = e.key;
+            const state = get.state();
+            if (key in onChangeUsingKeyboard) {
+                if (key === "ArrowUp" || key === "ArrowDown")
+                    e.preventDefault();
+                const prev = get.state().date;
+                const date = Is.keyof(onChangeUsingKeyboard, key) ? onChangeUsingKeyboard[key](prev, e.shiftKey ? "month" : "days") : null;
+                if (date !== null) {
+                    focusDate(e.target, root, date);
+                    return { ...state, date, year: formatYear(date) };
+                }
+            }
+            return get.state();
+        },
+    }), {
+        props: { onChangeMonth, onChangeYear },
+        postMiddleware: [
+            (state, _, args) => {
+                const isValidMethod = args.method === "onChangeMonth" || args.method === "previousMonth" || args.method === "nextMonth";
+                if (isValidMethod)
+                    args.props.onChangeMonth?.(state.date);
+                return state;
+            },
+            (state, _, args) => {
+                const isValidMethod = args.method === "onChangeYear";
+                if (isValidMethod)
+                    args.props.onChangeYear?.(state.date);
+                return state;
+            },
+            (state, _, args) => {
+                const isValidMethod = args.method === "onSelectDate" || args.method === "setToday" || args.method === "onKeyDown";
+                if (rangeMode && isValidMethod && changeOnlyOnClick) {
+                    onChange?.(state.range);
+                    return state;
+                }
+                if (isValidMethod && changeOnlyOnClick)
+                    onChange?.(state.date);
+                return state;
+            },
+        ],
+    });
+    const allDaysOfMonth = createDays(state.date);
+    const zip = splitInto(allDaysOfMonth, 7);
+    const currentAsString = state.date.toISOString();
+    const monthString = formatMonth(state.date, currentLocale);
+    useEffect(() => {
+        if (!changeOnlyOnClick)
+            onChange?.(state.date);
+    }, [currentAsString, changeOnlyOnClick]);
+    const defer = useDebounce((y) => dispatch.date((prev) => setYear(new Date(prev), +y)), 1200);
+    const internalOnChangeYear = (e) => {
+        const value = e.currentTarget.value;
+        dispatch.onChangeYear(value);
+        onChangeYear?.(new Date(value));
+        defer(value);
+    };
+    const swipe = useSwipe((event, direction) => {
+        event.preventDefault();
+        return direction === "right" ? dispatch.previousMonth() : dispatch.nextMonth();
+    }, 10);
+    const onSetToday = () => {
+        const d = getToday();
+        dispatch.date(() => d);
+        onChange?.(d);
+    };
+    return (<MotionConfig transition={transition}>
+            <div ref={root} data-component="calendar" onTouchEnd={swipe.onTouchEnd} onTouchStart={swipe.onTouchStart} className={css("relative overflow-hidden", Is.function(styles?.calendar) ? styles?.calendar(allDaysOfMonth) : styles?.calendar)}>
+                <div className="flex flex-col justify-center rounded text-center">
+                    <AnimatePresence initial={false} mode="popLayout" custom={state.direction} onExitComplete={dispatch.onExitComplete}>
+                        <motion.div key={monthString} initial="enter" animate="middle" exit="exit">
+                            <header className="relative flex justify-between">
+                                <motion.button layout type="button" data-focustrap="prev" variants={removeImmediately} onClick={dispatch.previousMonth} title={translations.calendarBackMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
+                                    <CaretLeftIcon className="h-4 w-4"/>
+                                </motion.button>
+                                <motion.span layout variants={variants} custom={state.direction} className="absolute inset-0 isolate z-normal flex items-center justify-center font-semibold">
+                                    <span className="flex w-fit items-center justify-center gap-0.5 py-1">
+                                        <select value={monthString} onChange={dispatch.onChangeMonth} aria-label={translations.calendarMonthLabel} style={{ width: `${monthString.length + 1}ch` }} className="cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary">
+                                            {state.months}
+                                        </select>
+                                        <TheMaskInput mask="int" maxLength={4} placeholder="YYYY" value={state.year} onChange={internalOnChangeYear} style={{ width: `${state.year.length}ch` }} className="w-16 cursor-pointer appearance-none bg-transparent hover:text-primary"/>
+                                    </span>
+                                </motion.span>
+                                <motion.button layout type="button" data-focustrap="next" variants={removeImmediately} onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
+                                    <CaretRightIcon className="h-4 w-4"/>
+                                </motion.button>
+                            </header>
+                            <motion.table className="mt-2 table min-w-full table-auto border-0">
+                                <thead>
+                                    <tr>
+                                        {state.week.map((dayOfWeek) => (<th role="columnheader" key={dayOfWeek.toString()} className={css("py-2 text-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay)}>
+                                                {dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" })}
+                                            </th>))}
+                                    </tr>
+                                </thead>
+                                <CalendarBody zip={zip} range={range} styles={styles} date={date || null} dispatch={dispatch} markRange={markRange} markToday={markToday} rangeMode={rangeMode} stateDate={state.date} labelRange={labelRange} stateRange={state.range} RenderOnDay={RenderOnDay} direction={state.direction} disabledDate={disabledDate} onKeyDown={dispatch.onKeyDown}/>
+                            </motion.table>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+                {type === "datetime" ? (<section className="my-4 grid items-center">
+                        <Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={(e) => {
+                const value = e.target.value;
+                const match = timeRegex.exec(value);
+                if (!match)
+                    return;
+                const hour = match.groups.hour;
+                const min = match.groups.min;
+                const d = set(state.date, { hours: Number(hour), minutes: Number(min), seconds: 0 });
+                dispatch.date(() => d);
+                onChange?.(d);
+            }}/>
+                    </section>) : null}
+                <footer className="mt-2 text-center text-primary">
+                    <button type="button" onClick={onSetToday} className="transition-transform duration-300 hover:scale-105">
+                        {translations.calendarToday}
+                    </button>
+                </footer>
+            </div>
+        </MotionConfig>);
+};

package/dist/components/display/card.js

@@ -1,8 +1,8 @@
 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-Dl8XH0CK.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-D75GFBV6.js";
+import { a as s } from "../../skeleton-BjJobYYf.js";
 const f = ({
   title: a,
   loading: t,

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 any;\n    const Title = (titleTag || \"h2\") as any;\n    const Nav = (navTag || \"nav\") as any;\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","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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"}