@g4rcez/components 2.0.32 → 2.0.34

package/dist/components/core/{button.js → button.jsx}

@@ -1,6 +1,5 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
 /**
@@ -80,5 +79,8 @@ const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 en
  */
 export const Button = forwardRef(function Button({ className, icon, loading, theme, type = "button", size, rounded, ...props }, ref) {
     const disabled = loading || props.disabled;
-    return (_jsxs(Polymorph, { ...props, ref: ref, type: type, "data-theme": theme, disabled: disabled, "data-loading": loading, "data-component": "button", "aria-disabled": disabled, as: props.as ?? "button", "aria-busy": disabled || loading, onClick: disabled ? undefined : props.onClick, className: css(buttonVariants({ size, rounded, theme }), className), children: [icon, props.children] }));
+    return (<Polymorph {...props} ref={ref} type={type} data-theme={theme} disabled={disabled} data-loading={loading} data-component="button" aria-disabled={disabled} as={props.as ?? "button"} aria-busy={disabled || loading} onClick={disabled ? undefined : props.onClick} className={css(buttonVariants({ size, rounded, theme }), className)}>
+            {icon}
+            {props.children}
+        </Polymorph>);
 });

package/dist/components/core/heading.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from "react";
-export declare const Heading: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: (props: PropsWithChildren) => import("react").JSX.Element;
 //# sourceMappingURL=heading.d.ts.map

package/dist/components/core/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/core/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,4CAE/C,CAAC"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/components/core/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,gCAE/C,CAAC"}

package/dist/components/core/heading.jsx

@@ -0,0 +1,4 @@
+import { Polymorph } from "./polymorph";
+export const Heading = (props) => {
+    return <Polymorph as="h2">{props.children}</Polymorph>;
+};

package/dist/components/core/{polymorph.js → polymorph.jsx}

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 export const Polymorph = forwardRef(function InnerPolymorph(props, ref) {
     const Element = props.as || "span";
-    return _jsx(Element, { ref: ref, ...props, as: undefined });
+    return <Element ref={ref} {...props} as={undefined}/>;
 });

package/dist/components/core/render-on-view.d.ts

@@ -3,5 +3,5 @@ import { PolymorphicProps } from "./polymorph";
 export type RenderOnViewProps<T extends React.ElementType = "div"> = PolymorphicProps<{
     onIntersection?: () => void;
 }, T>;
-export declare const RenderOnView: ({ children, ...props }: PropsWithChildren<RenderOnViewProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderOnView: ({ children, ...props }: PropsWithChildren<RenderOnViewProps>) => React.JSX.Element;
 //# sourceMappingURL=render-on-view.d.ts.map

package/dist/components/core/render-on-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-on-view.d.ts","sourceRoot":"","sources":["../../../src/components/core/render-on-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACjF;IACI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,EACD,CAAC,CACJ,CAAC;AAYF,eAAO,MAAM,YAAY,GAAI,wBAAwB,iBAAiB,CAAC,iBAAiB,CAAC,4CAsBxF,CAAC"}
+{"version":3,"file":"render-on-view.d.ts","sourceRoot":"","sources":["../../../src/components/core/render-on-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACjF;IACI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,EACD,CAAC,CACJ,CAAC;AAYF,eAAO,MAAM,YAAY,GAAI,wBAAwB,iBAAiB,CAAC,iBAAiB,CAAC,sBAsBxF,CAAC"}

package/dist/components/core/{render-on-view.js → render-on-view.jsx}

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { useStableRef } from "../../hooks/use-stable-ref";
 function isInViewport(el) {
     const rect = el.getBoundingClientRect();
@@ -26,5 +25,7 @@ export const RenderOnView = ({ children, ...props }) => {
         observer.observe(div);
         return () => observer.disconnect();
     }, []);
-    return (_jsx("div", { ...props, ref: ref, children: shouldRender ? children : null }));
+    return (<div {...props} ref={ref}>
+            {shouldRender ? children : null}
+        </div>);
 };

package/dist/components/core/resizable.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-export declare const Resizable: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const Resizable: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 //# sourceMappingURL=resizable.d.ts.map

package/dist/components/core/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAkD5D,eAAO,MAAM,SAAS,GAAI,cAAc,KAAK,CAAC,iBAAiB,4CAQ9D,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAkD5D,eAAO,MAAM,SAAS,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAQ9D,CAAC"}

package/dist/components/core/{resizable.js → resizable.jsx}

@@ -1,7 +1,6 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useMotionValue } from "motion/react";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { isSsr } from "../../lib/fns";
 const defaultState = {
     x: 0,
@@ -46,5 +45,7 @@ const useElementRect = () => {
 export const Resizable = ({ children }) => {
     const [ref, bounds] = useElementRect();
     const h = bounds.get().height;
-    return (_jsx(motion.div, { animate: { height: h > 0 ? h : "auto" }, children: _jsx("div", { ref: ref, children: children }) }));
+    return (<motion.div animate={{ height: h > 0 ? h : "auto" }}>
+            <div ref={ref}>{children}</div>
+        </motion.div>);
 };

package/dist/components/core/{slot.js → slot.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 function setRef(ref, value) {
@@ -72,11 +71,15 @@ export function createSlot(ownerName) {
                     return child;
                 }
             });
-            return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement)
+            return (<SlotClone {...slotProps} ref={forwardedRef}>
+          {React.isValidElement(newElement)
                     ? React.cloneElement(newElement, undefined, newChildren)
-                    : null }));
+                    : null}
+        </SlotClone>);
         }
-        return (_jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: children }));
+        return (<SlotClone {...slotProps} ref={forwardedRef}>
+        {children}
+      </SlotClone>);
     });
     Slot.displayName = `${ownerName}.Slot`;
     return Slot;
@@ -105,7 +108,7 @@ function createSlotClone(ownerName) {
 const SLOTTABLE_IDENTIFIER = Symbol('radix.slottable');
 export function createSlottable(ownerName) {
     const Slottable = ({ children }) => {
-        return _jsx(_Fragment, { children: children });
+        return <>{children}</>;
     };
     Slottable.displayName = `${ownerName}.Slottable`;
     Slottable.__radixId = SLOTTABLE_IDENTIFIER;

package/dist/components/core/{tag.js → tag.jsx}

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
 const variants = {
@@ -44,5 +43,9 @@ const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-0 items-center
     defaultVariants: { theme: "primary", size: "default" },
 });
 export const Tag = forwardRef(function Tag({ className, indicator = undefined, icon, loading, theme, size, ...props }, ref) {
-    return (_jsxs(Polymorph, { ...props, ref: ref, "data-theme": theme, "data-component": "tag", as: props.as ?? "span", className: css(tagVariants({ size, theme: loading ? "loading" : theme }), className), children: [indicator ? _jsx("span", { "aria-hidden": "true", className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] }));
+    return (<Polymorph {...props} ref={ref} data-theme={theme} data-component="tag" as={props.as ?? "span"} className={css(tagVariants({ size, theme: loading ? "loading" : theme }), className)}>
+            {indicator ? <span aria-hidden="true" className={indicatorVariant({ theme: indicator })}/> : null}
+            {icon}
+            {props.children}
+        </Polymorph>);
 });

package/dist/components/core/typography.d.ts

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from "react";
 import React, { type ComponentProps } from "react";
 import { Label } from "../../types";
-export declare const Paragraph: (props: ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
-export declare const Description: (props: ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: (props: ComponentProps<"p">) => React.JSX.Element;
+export declare const Description: (props: ComponentProps<"p">) => React.JSX.Element;
 export type InfoProps = {
     info?: Label;
     label: Label;
@@ -11,14 +11,14 @@ export type InfoProps = {
     className?: string;
     infoDescription?: string;
 };
-export declare const Info: (props: React.PropsWithChildren<InfoProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Info: (props: React.PropsWithChildren<InfoProps>) => React.JSX.Element;
 export declare const PageTitle: (props: PropsWithChildren<{
     title: string;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => React.JSX.Element;
 type PageHeaderProps = {
     title: string;
     description: Label;
 };
-export declare const PageHeader: (props: PropsWithChildren<PageHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: (props: PropsWithChildren<PageHeaderProps>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=typography.d.ts.map

package/dist/components/core/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,4CAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,4CAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,4CAS7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,4CAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,4CAWnE,CAAA"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,sBAS7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,sBAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBAWnE,CAAA"}

package/dist/components/core/typography.jsx

@@ -0,0 +1,26 @@
+import React, { Fragment } from "react";
+import { css } from "../../lib/dom";
+export const Paragraph = (props) => (<p {...props} className={css("text-base leading-snug", props.className)}/>);
+export const Description = (props) => (<p {...props} className={css("mb-kilo text-sm text-secondary", props.className)}/>);
+export const Info = (props) => (<div className={css(`flex ${props.row ? "flex-row items-center" : "flex-col"} gap-1`, props.className)}>
+        <Fragment>
+            <span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
+            <span className={`w-fit ${props.disabled ? "text-disabled" : ""} ${props.row ? "text-base" : "text-lg"}`}>
+                {props.children}
+            </span>
+        </Fragment>
+    </div>);
+export const PageTitle = (props) => (<div>
+        <h2 className="text-3xl font-bold typography tracking-wide">{props.title}</h2>
+        <p className="text-secondary typography">{props.children}</p>
+    </div>);
+export const PageHeader = (props) => {
+    return (<header className="flex flex-row flex-wrap justify-between items-center gap-mega">
+            <div>
+                <PageTitle title={props.title}>{props.description}</PageTitle>
+            </div>
+            <div className="flex gap-kilo items-center">
+                {props.children}
+            </div>
+        </header>);
+};

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

@@ -5,7 +5,7 @@ import { PolymorphicProps } from "../core/polymorph";
 type CollapseProps = HTMLMotionProps<"section"> & {
     open: boolean;
 };
-export declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapse: (props: PropsWithChildren<CollapseProps>) => React.JSX.Element;
 declare const themeVariants: {
     theme: {
         primary: string;

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,4CAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA6CxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAU,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GACjC,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA6CxE,CAAC"}

package/dist/components/display/alert.jsx

@@ -0,0 +1,56 @@
+"use client";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
+import { CheckCircleIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import React, { forwardRef } from "react";
+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("p-4 w-full block border relative rounded-lg text-sm", {
+    variants: themeVariants,
+    defaultVariants: { theme: "neutral" },
+});
+export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
+    const close = () => onClose?.(false);
+    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="alert" data-theme={theme} as={props.as ?? "div"} className={css(alertVariants({ theme }), className)}>
+                        <h4 className="flex gap-2 items-center mb-2">
+                            {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
+                            {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
+                            {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
+                            {Icon}
+                            <span className="text-lg font-semibold tracking-3 text-balance">{props.title}</span>
+                        </h4>
+                        {props.children}
+                        {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute top-3 right-3 transition-colors duration-300 ease-in-out text-foreground hover:text-danger">
+                                <XIcon size={20}/>
+                            </button>) : null}
+                    </Polymorph>
+                </Collapse>
+            </motion.div> : null}
+        </AnimatePresence>);
+});

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

@@ -37,6 +37,6 @@ export type CalendarProps = Partial<{
         from: string;
     };
 }>;
-export declare const Calendar: ({ RenderOnDay, changeOnlyOnClick, labelRange, disabledDate, locale, markToday, onChangeMonth, onChangeYear, rangeMode, onChange, styles, markRange, type, datetimeTitle, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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;AA0B5D,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,CAAA;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,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;AA0IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,4CA+Rf,CAAC"}
+{"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;AA0B5D,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,CAAA;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,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;AA0IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,sBA+Rf,CAAC"}

package/dist/components/display/{calendar.js → calendar.jsx}

@@ -1,9 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { add, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, setYear, startOfDay, startOfMonth, startOfWeek, sub, format, set, } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { AnimatePresence, motion, MotionConfig } from "motion/react";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { Is } from "sidekicker";
 import TheMaskInput from "the-mask-input";
 import { useReducer } from "use-typed-reducer";
@@ -31,7 +30,9 @@ 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 (_jsx("option", { value: label, "data-index": i, children: label }, `${id}-${label}`));
+    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 })),
@@ -64,9 +65,11 @@ const inRange = (start, middle, end) => {
 };
 const CalendarBody = (props) => {
     const translate = useTranslations();
-    return (_jsx(motion.tbody, { layout: true, variants: variants, custom: props.direction, onKeyDown: props.onKeyDown, className: css(props.styles?.week), children: props.zip.map((week, index) => {
+    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 (_jsx("tr", { className: weekClassName, children: week.map((day) => {
+            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()
@@ -76,9 +79,24 @@ const CalendarBody = (props) => {
                     const sameMonth = isSameMonth(day, props.stateDate);
                     const disableDate = !sameMonth || disabledByFn;
                     const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
-                    return (_jsxs("td", { align: "center", className: css("relative", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame), children: [_jsxs("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(`flex size-10 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-10 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day), children: [day.getDate(), isSelected && props.stateRange.from?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.from ?? translate.calendarFromDate }) })) : null, isSelected && props.stateRange.to?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.to ?? translate.calendarToDate }) })) : null] }), props.RenderOnDay ? _jsx(props.RenderOnDay, { date: day }) : null] }, key));
-                }) }, `week-${week.length}-${index}`));
-        }) }));
+                    return (<td key={key} align="center" className={css("relative", 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(`flex size-10 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-10 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
+                                        {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 }) => {
@@ -223,17 +241,61 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         dispatch.date(() => d);
         onChange?.(d);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("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), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { layout: true, 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", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("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", children: state.months }), _jsx(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" })] }) }), _jsx(motion.button, { layout: true, 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", children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
-                                                backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
-                                            } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { role: "columnheader", className: css("py-2 text-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay), children: dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(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 })] })] }, monthString) }) }), type === "datetime" ? (_jsx("section", { className: "grid items-center my-4", children: _jsx(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);
-                        } }) })) : null, _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { type: "button", onClick: onSetToday, className: "transition-transform duration-300 hover:scale-105", children: translations.calendarToday }) })] }) }));
+    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">
+                                    <ChevronLeftIcon 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">
+                                    <ChevronRightIcon className="h-4 w-4"/>
+                                </motion.button>
+                                <div className="absolute inset-0" style={{
+            backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
+        }}/>
+                            </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="grid items-center my-4">
+                        <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.d.ts

@@ -10,8 +10,8 @@ export type CardProps<T extends React.ElementType = "div"> = PolymorphicProps<{
     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>>): import("react/jsx-runtime").JSX.Element;
-    Title({ as, titleTag, navTag, children, ...props }: PropsWithChildren<CardHeaderTitleProps>): import("react/jsx-runtime").JSX.Element;
+    <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;
@@ -25,5 +25,5 @@ export type StatsCardProps = CardProps<React.ElementType> & {
     mark?: string;
     interactive?: boolean;
 };
-export declare const StatsCard: (props: StatsCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatsCard: (props: StatsCardProps) => React.JSX.Element;
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,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;wDAuC0B,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,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CACvF,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAuB9C,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,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;wDAuC0B,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,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CACvF,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAuB9C,CAAC"}

package/dist/components/display/card.jsx

@@ -0,0 +1,43 @@
+import { InfoIcon } from "lucide-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 shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-4 text-xl font-medium", titleClassName)}>
+                {title}
+            </header>) : (header)}
+        <div data-component="card-body" className={css("min-w-full px-6", props.className)}>
+            {loading ? (<div className="flex flex-col gap-4">
+                    <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="flex flex-col justify-start items-start sm:flex-row sm:justify-end sm:items-center gap-kilo">{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 gap-4 items-center px-0">
+            <div 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" : ""}`}>
+                <div className={css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark)}>
+                    {<Icon size={48}/>}
+                </div>
+                <div className="flex flex-col gap-2 justify-center py-2">
+                    <p className="text-lg">{props.title}</p>
+                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-4xl font-bold tracking-wide">{props.value}</p>}
+                </div>
+            </div>
+        </Card>);
+};

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

@@ -4,5 +4,5 @@ export type EmptyProps = {
     Icon?: React.FC<LucideProps>;
     message?: string;
 };
-export declare const Empty: (props: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Empty: (props: EmptyProps) => React.JSX.Element;
 //# sourceMappingURL=empty.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAStC,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAStC,CAAC"}

package/dist/components/display/empty.jsx

@@ -0,0 +1,11 @@
+import { FileIcon } from "lucide-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 flex-col gap-4 justify-center items-center py-12 px-8 w-full">
+            <Icon size={64} className="text-disabled"/>
+            <p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
+        </div>);
+};

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

@@ -10,7 +10,7 @@ type AnimatedItemProps = {
     }>;
 };
 type AnimatedListProps = object;
-export declare const AnimatedList: (props: PropsWithChildren<AnimatedListProps>) => import("react/jsx-runtime").JSX.Element;
-export declare const AnimatedListItem: (props: PropsWithChildren<AnimatedItemProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedList: (props: PropsWithChildren<AnimatedListProps>) => React.JSX.Element;
+export declare const AnimatedListItem: (props: PropsWithChildren<AnimatedItemProps>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAuDhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAuDhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAA0C,CAAC"}