@g4rcez/components 3.0.0-0 → 3.0.0

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

@@ -1,10 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { CvaVariants, type Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
-/**
- * Button variant definitions for styling
- * @internal
- */
 declare const variants: {
     size: {
         icon: string;
@@ -39,13 +35,11 @@ declare const variants: {
         "ghost-primary": string;
         "ghost-success": string;
         "ghost-secondary": string;
+        "ghost-muted": string;
+        "ghost-neutral": string;
     };
 };
 type Variants = CvaVariants<typeof variants>;
-/**
- * Props for the Button component
- * @template T - The HTML element type to render as (defaults to "button")
- */
 export type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<PolymorphicProps<Variants & Partial<{
     /** Icon to display in the button */
     icon: Label;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBjF,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CACZ,QAAQ,GACJ,OAAO,CAAC;IACJ,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC,EACN,CAAC,CACJ,CACJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBjF,CAAC"}

package/dist/components/core/button.jsx

@@ -2,10 +2,6 @@ import { cva } from "class-variance-authority";
 import React, { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-/**
- * Button variant definitions for styling
- * @internal
- */
 const variants = {
     size: {
         icon: "p-1",
@@ -16,7 +12,7 @@ const variants = {
         tiny: "h-6 px-2 py-1 text-sm",
     },
     rounded: {
-        rough: "rounded-xs",
+        rough: "rounded-sm",
         squared: "rounded-none",
         default: "rounded-button",
         circle: "rounded-full aspect-square",
@@ -30,24 +26,21 @@ const variants = {
         warn: "bg-button-warn-bg text-button-warn-text",
         muted: "bg-button-muted-bg text-button-muted-text",
         danger: "bg-button-danger-bg text-button-danger-text",
-        neutral: "bg-transparent border-2 border-card-border",
+        neutral: "bg-transparent border-1 border-card-border",
         primary: "bg-button-primary-bg text-button-primary-text",
         success: "bg-button-success-bg text-button-success-text",
         secondary: "bg-button-secondary-bg text-button-secondary-text",
-        "ghost-info": "bg-transparent hover:bg-info/20 border border-info text-info",
-        "ghost-warn": "bg-transparent hover:bg-warn/20 border border-warn text-warn",
-        "ghost-danger": "bg-transparent hover:bg-danger/20 border border-danger text-danger",
-        "ghost-primary": "bg-transparent hover:bg-primary/20 border border-primary text-primary",
-        "ghost-success": "bg-transparent hover:bg-success/20 border border-success text-success",
-        "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
+        "ghost-info": "bg-transparent hover:bg-info/20 border-0 border-transparent text-info",
+        "ghost-warn": "bg-transparent hover:bg-warn/20 border-0 border-transparent text-warn",
+        "ghost-danger": "bg-transparent hover:bg-danger/20 border-0 border-transparent text-danger",
+        "ghost-primary": "bg-transparent hover:bg-primary/20 border-0 border-transparent text-primary",
+        "ghost-success": "bg-transparent hover:bg-success/20 border-0 border-transparent text-success",
+        "ghost-secondary": "bg-transparent hover:bg-secondary/20 border-0 border-transparent text-secondary",
+        "ghost-muted": "bg-transparent hover:bg-muted/20 border-0 border-transparent text-muted-foreground",
+        "ghost-neutral": "bg-transparent border-0 border-card-border",
     },
 };
-/**
- * Class variance authority configuration for button styling
- * Handles all visual states and variants of the button component
- * @internal
- */
-const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring", {
+const buttonVariants = cva("relative overflow-hidden inline-flex duration-300 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-linear disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
     variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,GAAG;IACzE,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,SAAS,kFAKrB,CAAC"}
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,GAAG;IACvE,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAEN,eAAO,MAAM,SAAS,kFAGpB,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 export type Usable<T> = PromiseLike<T> | React.Context<T>;
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/components/core/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAI1D,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,iFA6C3C;AAED,eAAO,MAAM,IAAI,+EAAqB,CAAC;AAgCvC,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,sBAOhD"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/components/core/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgD/B,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAI1D,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiBD,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,iFAyC3C;AAED,eAAO,MAAM,IAAI,+EAAqB,CAAC;AAgCvC,UAAU,cAAc;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,sBAOhD"}

package/dist/components/core/slot.jsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+import * as React from "react";
+const REACT_LAZY_TYPE = Symbol.for("react.lazy");
 function setRef(ref, value) {
-    if (typeof ref === 'function') {
+    if (typeof ref === "function") {
         return ref(value);
     }
     else if (ref !== null && ref !== undefined) {
@@ -13,7 +13,7 @@ function composeRefs(...refs) {
         let hasCleanup = false;
         const cleanups = refs.map((ref) => {
             const cleanup = setRef(ref, node);
-            if (!hasCleanup && typeof cleanup == 'function') {
+            if (!hasCleanup && typeof cleanup == "function") {
                 hasCleanup = true;
             }
             return cleanup;
@@ -22,7 +22,7 @@ function composeRefs(...refs) {
             return () => {
                 for (let i = 0; i < cleanups.length; i++) {
                     const cleanup = cleanups[i];
-                    if (typeof cleanup == 'function') {
+                    if (typeof cleanup == "function") {
                         cleanup();
                     }
                     else {
@@ -33,23 +33,23 @@ function composeRefs(...refs) {
         }
     };
 }
-const use = React[' use '.trim().toString()];
+const use = React[" use ".trim().toString()];
 function isPromiseLike(value) {
-    return typeof value === 'object' && value !== null && 'then' in value;
+    return typeof value === "object" && value !== null && "then" in value;
 }
 function isLazyComponent(element) {
     return (element != null &&
-        typeof element === 'object' &&
-        '$$typeof' in element &&
+        typeof element === "object" &&
+        "$$typeof" in element &&
         element.$$typeof === REACT_LAZY_TYPE &&
-        '_payload' in element &&
+        "_payload" in element &&
         isPromiseLike(element._payload));
 }
 export function createSlot(ownerName) {
     const SlotClone = createSlotClone(ownerName);
     const Slot = React.forwardRef((props, forwardedRef) => {
         let { children, ...slotProps } = props;
-        if (isLazyComponent(children) && typeof use === 'function') {
+        if (isLazyComponent(children) && typeof use === "function") {
             children = use(children._payload);
         }
         const childrenArray = React.Children.toArray(children);
@@ -63,32 +63,28 @@ export function createSlot(ownerName) {
                     // in grabbing its children (`newElement.props.children`)
                     if (React.Children.count(newElement) > 1)
                         return React.Children.only(null);
-                    return React.isValidElement(newElement)
-                        ? newElement.props.children
-                        : null;
+                    return React.isValidElement(newElement) ? newElement.props.children : null;
                 }
                 else {
                     return child;
                 }
             });
             return (<SlotClone {...slotProps} ref={forwardedRef}>
-          {React.isValidElement(newElement)
-                    ? React.cloneElement(newElement, undefined, newChildren)
-                    : null}
-        </SlotClone>);
+                    {React.isValidElement(newElement) ? React.cloneElement(newElement, undefined, newChildren) : null}
+                </SlotClone>);
         }
         return (<SlotClone {...slotProps} ref={forwardedRef}>
-        {children}
-      </SlotClone>);
+                {children}
+            </SlotClone>);
     });
     Slot.displayName = `${ownerName}.Slot`;
     return Slot;
 }
-export const Slot = createSlot('Slot');
+export const Slot = createSlot("Slot");
 function createSlotClone(ownerName) {
     const SlotClone = React.forwardRef((props, forwardedRef) => {
         let { children, ...slotProps } = props;
-        if (isLazyComponent(children) && typeof use === 'function') {
+        if (isLazyComponent(children) && typeof use === "function") {
             children = use(children._payload);
         }
         if (React.isValidElement(children)) {
@@ -105,7 +101,7 @@ function createSlotClone(ownerName) {
     SlotClone.displayName = `${ownerName}.SlotClone`;
     return SlotClone;
 }
-const SLOTTABLE_IDENTIFIER = Symbol('radix.slottable');
+const SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 export function createSlottable(ownerName) {
     const Slottable = ({ children }) => {
         return <>{children}</>;
@@ -114,12 +110,9 @@ export function createSlottable(ownerName) {
     Slottable.__radixId = SLOTTABLE_IDENTIFIER;
     return Slottable;
 }
-const Slottable = createSlottable('Slottable');
+const Slottable = createSlottable("Slottable");
 function isSlottable(child) {
-    return (React.isValidElement(child) &&
-        typeof child.type === 'function' &&
-        '__radixId' in child.type &&
-        child.type.__radixId === SLOTTABLE_IDENTIFIER);
+    return (React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER);
 }
 function mergeProps(slotProps, childProps) {
     const overrideProps = { ...childProps };
@@ -139,23 +132,23 @@ function mergeProps(slotProps, childProps) {
                 overrideProps[propName] = slotPropValue;
             }
         }
-        else if (propName === 'style') {
+        else if (propName === "style") {
             overrideProps[propName] = { ...slotPropValue, ...childPropValue };
         }
-        else if (propName === 'className') {
-            overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
+        else if (propName === "className") {
+            overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
         }
     }
     return { ...slotProps, ...overrideProps };
 }
 function getElementRef(element) {
-    let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
-    let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+    let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+    let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
     if (mayWarn) {
         return element.ref;
     }
-    getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;
-    mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+    getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+    mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
     if (mayWarn) {
         return element.props.ref;
     }

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

@@ -6,8 +6,8 @@ declare const variants: {
         icon: string;
         big: string;
         default: string;
-        small: string;
         tiny: string;
+        small: string;
     };
     theme: {
         custom: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAsB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5F,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkBnE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAyB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5F,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkBnE,CAAC"}

package/dist/components/core/tag.jsx

@@ -7,8 +7,8 @@ const variants = {
         icon: "p-1",
         big: "h-12 px-6 py-4",
         default: "h-8 px-4 py-2",
+        tiny: "h-5 p-1 px-2 text-xs",
         small: "h-6 p-2 px-3 text-sm",
-        tiny: "h-6 p-2 px-3 text-xs",
     },
     theme: {
         custom: "",
@@ -24,7 +24,7 @@ const variants = {
         loading: "animate-pulse bg-disabled duration-700 opacity-70",
     },
 };
-const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
+const indicatorVariant = cva("size-2 aspect-square rounded-full border-0", {
     variants: {
         theme: {
             info: "bg-info",
@@ -38,7 +38,7 @@ const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
         },
     },
 });
-const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-0 items-center justify-center align-middle whitespace-nowrap", {
+const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-0 items-center justify-center align-middle whitespace-nowrap ease-linear duration-300 transition-all", {
     variants,
     defaultVariants: { theme: "primary", size: "default" },
 });

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,sBAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,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;CAC1B,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;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBAWnE,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,sBAAgF,CAAC;AAErI,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAAwF,CAAC;AAE/I,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,sBAO7D,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,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBASnE,CAAC"}

package/dist/components/core/typography.jsx

@@ -1,26 +1,22 @@
 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 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>);
+        <Fragment>
+            <span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
+            <span className={css(props.disabled ? "text-disabled" : "", props.row ? "w-fit text-base" : "w-full 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>);
+        <h2 className="typography text-3xl font-bold tracking-wide">{props.title}</h2>
+        <p className="typography text-secondary">{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 flex-wrap">
-        {props.children}
-      </div>
-    </header>);
+    return (<header className="gap-mega flex flex-row flex-wrap items-center justify-between">
+            <div>
+                <PageTitle title={props.title}>{props.description}</PageTitle>
+            </div>
+            <div className="gap-kilo flex flex-wrap items-center">{props.children}</div>
+        </header>);
 };

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,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"}
+{"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,GAC7B,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,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAiDxE,CAAC"}

package/dist/components/display/alert.jsx

@@ -35,22 +35,24 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
 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}
+            {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)}>
+                            <div className="grid grid-cols-[auto_1fr] gap-base">
+                                {onClose !== undefined && open ? (<button type="button" onClick={close} className="absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
+                                        <XIcon size={20}/>
+                                    </button>) : null}
+                                <div className={css("flex items-center gap-2", props.title ? "" : "w-fit")}>
+                                    {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
+                                    {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
+                                    {!Icon && theme === "danger" ? <TriangleAlertIcon aria-hidden="true" size={20}/> : null}
+                                    {Icon}
+                                </div>
+                                {props.title ? <h4 className="tracking-3 col-start-2 text-balance text-lg font-semibold">{props.title}</h4> : null}
+                                <div className="col-start-2 w-full">{props.children}</div>
+                            </div>
+                        </Polymorph>
+                    </Collapse>
+                </motion.div>) : null}
         </AnimatePresence>);
 });

package/dist/components/display/calendar.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,sBA+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,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;AA2IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,sBAwRf,CAAC"}

package/dist/components/display/calendar.jsx

@@ -79,8 +79,9 @@ 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 (<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)}>
+                    return (<td key={key} align="center" className={css("relative p-1", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
+                                    <button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-9 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-9 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
+                                        <div></div>
                                         {day.getDate()}
                                         {isSelected && props.stateRange.from?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
                                                 <span className="text-xs text-foreground">
@@ -243,7 +244,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, 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-sm text-center">
+                <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">
@@ -261,9 +262,6 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
                                 <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>
@@ -278,8 +276,8 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
                         </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 => {
+                {type === "datetime" ? (<section className="my-4 grid items-center">
+                        <Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={(e) => {
                 const value = e.target.value;
                 const match = timeRegex.exec(value);
                 if (!match)

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,sBAuB9C,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;wDAyC0B,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;IAClB,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.jsx

@@ -4,8 +4,8 @@ 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)}>
+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-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
                 {title}
             </header>) : (header)}
         <div data-component="card-body" className={css("min-w-full px-6", props.className)}>
@@ -14,7 +14,7 @@ export const Card = ({ title, loading, children, as, header = null, container =
                     <Skeleton className="w-8/12"/>
                     <Skeleton className="w-10/12"/>
                     <Skeleton className="w-1/2"/>
-                </div>) : children}
+                </div>) : (children)}
         </div>
     </Polymorph>);
 Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
@@ -23,18 +23,18 @@ Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
     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}
+            {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 gap-4 items-center px-0">
+    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-4 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">
+                <div className="flex flex-col justify-center gap-2 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>

package/dist/components/display/empty.jsx

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

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

@@ -5,9 +5,11 @@ declare const variants: (props?: ({
     theme?: "info" | "warn" | "muted" | "danger" | "success" | "secondary" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
+    id: string;
     title: Label;
     timeout: number;
     closable: boolean;
+    loading: boolean;
     theme: VariantProps<typeof variants>["theme"];
 }>;
 type NotificationSubscriber = {

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CAC/C,CAAC,CAAC;AAIH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAwDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAqE1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAkDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAsF1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}