@g4rcez/components 5.0.1 → 5.0.3

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/display/alert.tsx"],"sourcesContent":["\"use client\";\nimport { cva } from \"class-variance-authority\";\nimport { HTMLMotionProps, motion, 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\";\nimport { Resizable } from \"../core/resizable\";\n\nconst transition: Transition = {\n    type: \"tween\",\n    duration: 0.35,\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        initial={false}\n        animate={{ opacity: props.open ? 1 : 0 }}\n        transition={transition}\n        aria-hidden={!props.open}\n        data-component=\"collapse\"\n        className={css(\"aria-hidden:pointer-events-none\", props.className)}\n    >\n        <Resizable open={props.open} destroyOnUnmount>\n            {props.children}\n        </Resizable>\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        <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 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 ? (\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        </div>\n    );\n}) as never;\n"],"mappings":";;;;;;;;;;;;;;AAWA,IAAM,IAAyB;CAC3B,MAAM;CACN,UAAU;CACV,MAAM;EAAC;EAAM;EAAM;EAAM;CAAI;AACjC,GAIa,KAAY,MACrB,kBAAC,EAAO,KAAR;CACI,GAAK;CACL,SAAS;CACT,SAAS,EAAE,SAAS,KAAM,KAAa;CAC3B;CACZ,eAAa,CAAC,EAAM;CACpB,kBAAe;CACf,WAAW,EAAI,mCAAmC,EAAM,SAAS;WAEjE,kBAAC,GAAD;EAAW,MAAM,EAAM;EAAM,kBAAA;YACxB,EAAM;CACA,CAAA;AACH,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,OAAD;EACI,aAAW,CAAC,CAAC;EACb,eAAa,CAAC;EACd,kBAAe;EACf,WAAW,EAAI,kBAAkB,IAAO,wBAAwB,qBAAqB;YAErF,kBAAC,GAAD;GAAU,MAAM,CAAC,CAAC;aACd,kBAAC,GAAD;IACI,GAAI;IACC;IACL,MAAM;IACN,cAAY;IACZ,IAAI,EAAM,MAAM;IAChB,WAAW,EAAI,EAAc,EAAE,SAAM,CAAC,GAAG,CAAS;cAElD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACK,MAAY,KAAA,IAST,OARA,kBAAC,UAAD;OACI,MAAK;OACL,SAAS;OACT,cAAY,EAAE;OACd,WAAU;iBAEV,kBAAC,GAAD;QAAO,MAAM;QAAI,eAAY;OAAQ,CAAA;MACjC,CAAA;MAEZ,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACK,CAAC,KAAQ,MAAU,YAAY,kBAAC,GAAD;SAAiB,eAAY;SAAO,MAAM;QAAK,CAAA,IAAI;QAClF,CAAC,KAAQ,MAAU,SAAS,kBAAC,GAAD;SAAU,eAAY;SAAO,MAAM;QAAK,CAAA,IAAI;QACxE,CAAC,KAAQ,MAAU,WAAW,kBAAC,GAAD;SAAa,eAAY;SAAO,MAAM;QAAK,CAAA,IAAI;QAC7E;QACA,EAAM,QACH,kBAAC,MAAD;SAAI,WAAU;mBAA4D,EAAM;QAAU,CAAA,IAE1F,kBAAC,OAAD;SAAK,WAAU;mBAAU,EAAM;QAAc,CAAA;OAEhD;;MACJ,EAAM,QAAQ,kBAAC,OAAD;OAAK,WAAU;iBAAU,EAAM;MAAc,CAAA,IAAI;KAC/D;;GACE,CAAA;EACL,CAAA;CACT,CAAA;AAEb,CAAC"}

package/dist/components/display/alert.jsx

@@ -0,0 +1,58 @@
+"use client";
+import { cva } from "class-variance-authority";
+import { 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";
+import { Resizable } from "../core/resizable";
+const transition = {
+    type: "tween",
+    duration: 0.35,
+    ease: [0.04, 0.62, 0.23, 0.98],
+};
+export const Collapse = (props) => (<motion.div {...props} initial={false} animate={{ opacity: props.open ? 1 : 0 }} transition={transition} aria-hidden={!props.open} data-component="collapse" className={css("aria-hidden:pointer-events-none", props.className)}>
+        <Resizable open={props.open} destroyOnUnmount>
+            {props.children}
+        </Resizable>
+    </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("text-typography-sm relative block w-full rounded-alert-radius border p-alert-p", {
+    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 (<div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
+            <Collapse open={!!open}>
+                <Polymorph {...props} ref={ref} role={liveRole} data-theme={theme} as={props.as || "div"} className={css(alertVariants({ theme }), className)}>
+                    <div className="flex flex-col gap-alert-gap">
+                        {onClose !== undefined ? (<button type="button" onClick={close} aria-label={t.closeButton} className="absolute right-alert-close-right top-alert-close-top text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
+                                <XIcon size={20} aria-hidden="true"/>
+                            </button>) : null}
+                        <div className="flex items-center gap-alert-gap">
+                            {!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}
+                            {props.title ? (<h4 className="tracking-3 text-typography-lg text-balance font-semibold">{props.title}</h4>) : (<div className="w-full">{props.children}</div>)}
+                        </div>
+                        {props.title ? <div className="w-full">{props.children}</div> : null}
+                    </div>
+                </Polymorph>
+            </Collapse>
+        </div>);
+});

package/dist/components/display/calendar.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { type Locales } from "the-mask-input";
+type Range = {
+    from?: Date;
+    to?: Date;
+};
+type OnChangeDate = (d: Date | undefined) => void;
+type OnChangeRange = (d: Range | undefined) => void;
+type DateStyle = (d: Date) => string;
+type CalendarStyles = Partial<{
+    day: string | DateStyle;
+    weekDay: string | DateStyle;
+    dayFrame: string | DateStyle;
+    week: string | ((week: Date[]) => string);
+    calendar: string | ((daysOfMonth: Date[]) => string);
+}>;
+export type CalendarProps = Partial<{
+    date: Date;
+    range: Range;
+    markRange: boolean;
+    markToday: boolean;
+    rangeMode: boolean;
+    datetimeTitle: string;
+    styles: CalendarStyles;
+    type?: "date" | "datetime";
+    changeOnlyOnClick: boolean;
+    locale: Locales | undefined;
+    onChangeYear: (d: Date) => void;
+    onChangeMonth: (d: Date) => void;
+    disabledDate: (date: Date) => boolean;
+    RenderOnDay: React.FC<{
+        date: Date;
+    }>;
+    onChange: OnChangeRange | OnChangeDate;
+    labelRange: {
+        to: string;
+        from: string;
+    };
+}>;
+export declare const Calendar: ({ RenderOnDay, changeOnlyOnClick, labelRange, disabledDate, locale, markToday, onChangeMonth, onChangeYear, rangeMode, onChange, styles, markRange, type, datetimeTitle, ...props }: CalendarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/display/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAqB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAwB5D,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,QAAQ,EAAE,aAAa,GAAG,YAAY,CAAC;IACvC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC,CAAC;AA6IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,sBA2Sf,CAAC"}

package/dist/components/display/calendar.js

@@ -1,3 +1,3 @@
 "use client";
-import { t as e } from "../../calendar-PCCZDUIL.js";
+import { t as e } from "../../calendar-DEPkz8sw.js";
 export { e as Calendar };

package/dist/components/display/calendar.jsx

@@ -0,0 +1,323 @@
+"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 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-calendar-cell-p", 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-calendar-day-size 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-calendar-day-size 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-calendar-cell-text 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-calendar-cell-text 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, state.date, onChange]);
+    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-calendar-header-radius 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 grid grid-cols-7 items-center">
+                                <button type="button" data-focustrap="prev" onClick={dispatch.previousMonth} title={translations.calendarBackMonth} className="z-calendar col-start-1 justify-self-center rounded-full p-calendar-nav-p hover:text-primary">
+                                    <span className="inline-flex size-calendar-icon-size items-center justify-center">
+                                        <CaretLeftIcon aria-hidden="true"/>
+                                    </span>
+                                </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-calendar-nav-gap py-calendar-nav-py">
+                                        <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-calendar-year-w cursor-pointer appearance-none bg-transparent hover:text-primary"/>
+                                    </span>
+                                </motion.span>
+                                <button type="button" data-focustrap="next" onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar col-start-7 justify-self-center rounded-full p-calendar-nav-p hover:text-primary">
+                                    <span className="inline-flex size-calendar-icon-size items-center justify-center">
+                                        <CaretRightIcon aria-hidden="true"/>
+                                    </span>
+                                </button>
+                            </header>
+                            <motion.table className="mt-calendar-table-mt table min-w-full table-auto border-0">
+                                <thead>
+                                    <tr>
+                                        {state.week.map((dayOfWeek) => (<th role="columnheader" key={dayOfWeek.toString()} className={css("py-calendar-weekday-py text-typography-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-calendar-datetime-my 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-calendar-footer-mt 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.d.ts

@@ -0,0 +1,29 @@
+import { type Icon } from "@phosphor-icons/react";
+import React, { type PropsWithChildren } from "react";
+import { Label } from "../../types";
+import { PolymorphicProps } from "../core/polymorph";
+export type CardProps<T extends React.ElementType = "div"> = PolymorphicProps<{
+    title?: Label;
+    loading?: boolean;
+    container?: string;
+    titleClassName?: string;
+    header?: React.ReactElement | null;
+}, T>;
+export declare const Card: {
+    <T extends React.ElementType = "div">({ title, loading, children, as, header, container, titleClassName, ...props }: PropsWithChildren<CardProps<T>>): React.JSX.Element;
+    Title({ as, titleTag, navTag, children, ...props }: PropsWithChildren<CardHeaderTitleProps>): React.JSX.Element;
+};
+export type CardHeaderTitleProps<T extends React.ElementType = "div"> = PolymorphicProps<{
+    navTag?: React.ElementType;
+    titleTag?: React.ElementType;
+    title: React.ReactElement | string;
+}, T>;
+export type StatsCardProps = CardProps<React.ElementType> & {
+    Icon?: Icon;
+    title: string;
+    value: Label;
+    mark?: string;
+    interactive?: boolean;
+};
+export declare const StatsCard: (props: StatsCardProps) => React.JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/components/display/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACzE;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,yFAS7C,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;wDA+C0B,iBAAiB,CAAC,oBAAoB,CAAC;CAXlG,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACpF;IACI,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAoBF,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAuB9C,CAAC"}

package/dist/components/display/card.js

@@ -1,7 +1,7 @@
 import { p as e, t } from "../../dom-Bn4wY_Zx.js";
-import { t as n } from "../../polymorph-BLXhrn9n.js";
+import { Polymorph as n } from "../core/polymorph.js";
 import { t as r } from "../../Info.es-Dvln8pws.js";
-import { t as i } from "../../skeleton-CBYEq3lM.js";
+import { Skeleton as i } from "./skeleton.js";
 import "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/display/card.tsx

package/dist/components/display/card.jsx

@@ -0,0 +1,43 @@
+import { InfoIcon } from "@phosphor-icons/react";
+import React from "react";
+import { Is } from "sidekicker";
+import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
+import { Skeleton } from "./skeleton";
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("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", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-card-title-mb w-full border-b border-card-border px-card-padding-x pb-card-title-pb text-typography-xl font-medium", titleClassName)}>
+                {title}
+            </header>) : (header)}
+        <div data-component="card-body" className={css("min-w-full px-card-padding-x", props.className)}>
+            {loading ? (<div className="flex flex-col gap-card-gap">
+                    <Skeleton className="w-full"/>
+                    <Skeleton className="w-8/12"/>
+                    <Skeleton className="w-10/12"/>
+                    <Skeleton className="w-1/2"/>
+                </div>) : (children)}
+        </div>
+    </Polymorph>);
+Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
+    const Component = (as || "div");
+    const Title = (titleTag || "h2");
+    const Nav = (navTag || "nav");
+    return (<Component {...props} title={Is.string(props.title) ? props.title : undefined} className={css("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", props.className)}>
+            <Title className="font-semibold">{props.title}</Title>
+            {children ? (<Nav className="gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end">{children}</Nav>) : null}
+        </Component>);
+};
+export const StatsCard = (props) => {
+    const interactive = props.interactive ?? true;
+    const Icon = props.Icon ?? InfoIcon;
+    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-card-gap px-0">
+            <div 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" : ""}`}>
+                <div className={css("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", props.mark)}>
+                    {<Icon size={48}/>}
+                </div>
+                <div className="flex flex-col justify-center gap-card-stats-content-gap py-card-stats-content-py">
+                    <p className="text-typography-lg">{props.title}</p>
+                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-card-title-text font-bold tracking-wide">{props.value}</p>}
+                </div>
+            </div>
+        </Card>);
+};

package/dist/components/display/empty.d.ts

@@ -0,0 +1,8 @@
+import { type Icon } from "@phosphor-icons/react";
+import React from "react";
+export type EmptyProps = {
+    Icon?: Icon;
+    message?: string;
+};
+export declare const Empty: (props: EmptyProps) => React.JSX.Element;
+//# sourceMappingURL=empty.d.ts.map

package/dist/components/display/empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAWtC,CAAC"}

package/dist/components/display/empty.js

@@ -0,0 +1,25 @@
+import { t as e } from "../../File.es-CjNVQ00B.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/empty.tsx
+var i = (i) => {
+	let a = i.Icon ?? e, o = t();
+	return /* @__PURE__ */ r("div", {
+		className: "flex w-full flex-col items-center justify-center gap-empty-gap px-empty-px py-empty-py",
+		children: [/* @__PURE__ */ n("span", {
+			className: "text-disabled",
+			children: /* @__PURE__ */ n(a, {
+				size: 64,
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ n("p", {
+			className: "text-disabled",
+			children: i.message ?? o.emptyDataMessage
+		})]
+	});
+};
+//#endregion
+export { i as Empty };
+
+//# sourceMappingURL=empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":[],"sources":["../../../src/components/display/empty.tsx"],"sourcesContent":["import { FileIcon, type Icon } from \"@phosphor-icons/react\";\nimport React from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\n\nexport type EmptyProps = { Icon?: Icon; message?: string };\n\nexport const Empty = (props: EmptyProps) => {\n    const Icon = props.Icon ?? FileIcon;\n    const translate = useTranslations();\n    return (\n        <div className=\"flex w-full flex-col items-center justify-center gap-empty-gap px-empty-px py-empty-py\">\n            <span className=\"text-disabled\">\n                <Icon size={64} aria-hidden=\"true\" />\n            </span>\n            <p className=\"text-disabled\">{props.message ?? translate.emptyDataMessage}</p>\n        </div>\n    );\n};\n"],"mappings":";;;;;AAMA,IAAa,KAAS,MAAsB;CACxC,IAAM,IAAO,EAAM,QAAQ,GACrB,IAAY,EAAgB;CAClC,OACI,kBAAC,OAAD;EAAK,WAAU;YAAf,CACI,kBAAC,QAAD;GAAM,WAAU;aACZ,kBAAC,GAAD;IAAM,MAAM;IAAI,eAAY;GAAQ,CAAA;EAClC,CAAA,GACN,kBAAC,KAAD;GAAG,WAAU;aAAiB,EAAM,WAAW,EAAU;EAAoB,CAAA,CAC5E;;AAEb"}

package/dist/components/display/empty.jsx

@@ -0,0 +1,13 @@
+import { FileIcon } from "@phosphor-icons/react";
+import React from "react";
+import { useTranslations } from "../../hooks/use-translations";
+export const Empty = (props) => {
+    const Icon = props.Icon ?? FileIcon;
+    const translate = useTranslations();
+    return (<div className="flex w-full flex-col items-center justify-center gap-empty-gap px-empty-px py-empty-py">
+            <span className="text-disabled">
+                <Icon size={64} aria-hidden="true"/>
+            </span>
+            <p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
+        </div>);
+};