@g4rcez/components 0.2.0 → 0.2.2

package/dist/preset/preset.tailwind.js

@@ -22,41 +22,41 @@ var config = {
                 DEFAULT: "cubic-bezier(0,0,.58,1)",
                 normal: "cubic-bezier(.25,.1,.25,1)",
             },
+            width: spacing,
             spacing: spacing,
-            transitionDuration: { DEFAULT: "375ms" },
-            minWidth: { xs: "20rem", screen: "100vh" },
-            borderRadius: createDesignTokens(theme.rounded, parsers.cssVariable),
             fill: COLORS,
             colors: COLORS,
+            fontSize: spacing,
             placeholderColor: COLORS,
+            transitionDuration: { DEFAULT: "375ms" },
+            minWidth: { xs: "20rem", screen: "100vh" },
             borderColors: __assign(__assign({}, COLORS), { DEFAULT: COLORS.card.border }),
+            borderRadius: createDesignTokens(theme.rounded, parsers.cssVariable),
+            boxShadow: { floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 5px 12px" },
             zIndex: {
-                normal: "1",
-                tooltip: "13",
-                floating: "21",
-                overlay: "20",
-                navbar: "19",
-                calendar: "2",
-            },
-            boxShadow: {
-                floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 5px 12px",
+                navbar: "var(--z-navbar)",
+                normal: "var(--z-normal)",
+                overlay: "var(--z-overlay)",
+                tooltip: "var(--z-tooltip)",
+                calendar: "var(--z-calendar)",
+                floating: "var(--z-floating)",
             },
         },
     },
     plugins: [
         forms({ strategy: "class" }),
         plugin(function (_a) {
-            var addVariant = _a.addVariant, theme = _a.theme, matchUtilities = _a.matchUtilities;
+            var addVariant = _a.addVariant;
             addVariant("link", ["&:hover", "&:active"]);
             addVariant("hocus", ["&:hover", "&:focus"]);
             addVariant("group-assert", [":merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &"]);
+            addVariant("group-checkbox-checked", [":merge(&:has(.form-checkbox[type=checkbox]:checked))"]);
             addVariant("group-error", [
                 ":merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &",
                 ":merge(.group[data-error=true]:has(.input[data-initialized=true])) &",
                 ":merge(.group[data-error=true][data-interactive=true]):has(.input) &",
                 ":merge(.group[data-error=true][data-interactive=true]):has(.input[data-initialized=true]) &",
             ]);
-            addVariant("group-checkbox-checked", [":merge(&:has(.form-checkbox[type=checkbox]:checked))"]);
         }),
     ],
 };

package/dist/preset/src/styles/common.d.ts

@@ -1,3 +1,4 @@
+import { ZIndex } from "./theme.types";
 export declare const rounded: {
     readonly button: "0.4rem";
     readonly pill: "2rem";
@@ -8,10 +9,13 @@ export declare const spacing: {
     readonly base: "1rem";
     readonly lg: "1.5rem";
     readonly sm: "0.75rem";
+    readonly "field-height": "1.5rem";
+    readonly "field-label": "1.875rem";
     readonly "input-height": "2.5rem";
     readonly "input-x": "0.5rem";
     readonly "input-y": "0.25rem";
     readonly "input-inline": "0.25rem";
     readonly "input-gap": "0.3rem";
 };
+export declare const zIndex: ZIndex;
 //# sourceMappingURL=common.d.ts.map

package/dist/preset/src/styles/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/styles/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/styles/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;CAWV,CAAC;AAEX,eAAO,MAAM,MAAM,EAAE,MAOX,CAAC"}

package/dist/preset/src/styles/common.js

@@ -8,9 +8,19 @@ export var spacing = {
     base: "1rem",
     lg: "1.5rem",
     sm: "0.75rem",
+    "field-height": "1.5rem",
+    "field-label": "1.875rem",
     "input-height": "2.5rem",
     "input-x": "0.5rem",
     "input-y": "0.25rem",
     "input-inline": "0.25rem",
     "input-gap": "0.3rem",
 };
+export var zIndex = {
+    normal: "1",
+    navbar: "19",
+    calendar: "2",
+    overlay: "20",
+    tooltip: "13",
+    floating: "21",
+};

package/dist/preset/src/styles/dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAyMxB,CAAC"}
+{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YA0MxB,CAAC"}

package/dist/preset/src/styles/dark.js

@@ -1,6 +1,7 @@
-import { rounded, spacing } from "./common";
+import { rounded, spacing, zIndex } from "./common";
 export var DARK_THEME = {
     name: "dark",
+    zIndex: zIndex,
     rounded: rounded,
     spacing: spacing,
     shadow: {

package/dist/preset/src/styles/design-tokens.d.ts

@@ -1,13 +1,14 @@
 import { CSSProperties } from "react";
 import { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from "./theme.types";
 export declare const parsers: {
-    cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
-    rgba: (v: string) => `rgba(${string})`;
-    rgb: (v: string) => `rgb(${string})`;
-    hsl: (v: string) => `hsl(${string})`;
-    hsla: (v: string) => `hsla(${string})`;
     hex: (v: string) => string;
     raw: (v: string) => string;
+    hsl: (v: string) => `hsl(${string})`;
+    rgb: (v: string) => `rgb(${string})`;
+    z: (_: string, __: string, k: string) => `var(--z-${string})`;
+    hsla: (v: string) => `hsla(${string})`;
+    rgba: (v: string) => `rgba(${string})`;
+    cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
     formatWithVar: (format: string) => (_: string, __: string, v: string) => `${string}(var(--${string}), <alpha-value>)`;
 };
 export declare const reduceTokens: <T extends GeneralTokens>(colors: T, parse: DesignTokensBuilder, prefix?: string, append?: string) => Token[];
@@ -16,8 +17,8 @@ export declare const createStyles: {
     default: (tokens: Token[]) => string;
     dark: (tokens: Token[]) => string;
 };
-type TokenParsersType = "colors" | "spacing" | "rounded" | "customTokens";
-type TokenCustomParser = (token: Token) => Token;
+type TokenParsersType = "colors" | "spacing" | "rounded" | "customTokens" | "zIndex";
+type TokenCustomParser = (t: Token) => Token;
 export type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & {
     name: string;
 }>;

package/dist/preset/src/styles/design-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,mBAAmB,EAAE,SAAQ,MAAW,EAAE,SAAQ,MAAW,KAAG,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,EACrF,QAAQ,CAAC,EACT,OAAO,EAAE,EACT,SAAQ,MAAW,EACnB,SAAQ,MAAW,KACpB,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;AAE1E,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAgBjG,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,WAIjE,CAAC"}
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;aACP,MAAM;aACN,MAAM;aACN,MAAM;aACN,MAAM;;cAEL,MAAM;cACN,MAAM;;4BAEQ,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,mBAAmB,EAAE,SAAQ,MAAW,EAAE,SAAQ,MAAW,KAAG,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,EACrF,QAAQ,CAAC,EACT,OAAO,EAAE,EACT,SAAQ,MAAW,EACnB,SAAQ,MAAW,KACpB,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;AAErF,KAAK,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAoBjG,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,WAIjE,CAAC"}

package/dist/preset/src/styles/design-tokens.js

@@ -10,13 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 export var parsers = {
-    cssVariable: function (_, __, k) { return "var(--".concat(k, ")"); },
-    rgba: function (v) { return "rgba(".concat(v, ")"); },
-    rgb: function (v) { return "rgb(".concat(v, ")"); },
-    hsl: function (v) { return "hsl(".concat(v, ")"); },
-    hsla: function (v) { return "hsla(".concat(v, ")"); },
     hex: function (v) { return v; },
     raw: function (v) { return v; },
+    hsl: function (v) { return "hsl(".concat(v, ")"); },
+    rgb: function (v) { return "rgb(".concat(v, ")"); },
+    z: function (_, __, k) { return "var(--z-".concat(k, ")"); },
+    hsla: function (v) { return "hsla(".concat(v, ")"); },
+    rgba: function (v) { return "rgba(".concat(v, ")"); },
+    cssVariable: function (_, __, k) { return "var(--".concat(k, ")"); },
     formatWithVar: function (format) { return function (_, __, v) { return "".concat(format, "(var(--").concat(v, "), <alpha-value>)"); }; },
 };
 export var reduceTokens = function (colors, parse, prefix, append) {
@@ -59,18 +60,21 @@ export var createStyles = {
     default: function (tokens) { return createStyleContent(tokens, { result: modifiers.default }); },
     dark: function (tokens) { return createStyleContent(tokens, { result: modifiers.dark }); },
 };
-var createTokens = function (theme, map) {
-    var fn = function (p) {
-        return function (value, _, key) {
-            var r = { key: "--".concat(key), value: "".concat(value) };
-            return p ? p(r) : r;
-        };
+var fn = function (p) {
+    return function (value, _, key) {
+        var r = { key: "--".concat(key), value: "".concat(value) };
+        return p ? p(r) : r;
     };
+};
+var zIndexParser = function (t) { return ({ key: t.key.replace(/^--/, "--z-"), value: t.value }); };
+var createTokens = function (theme, map) {
+    var _a;
     var colors = reduceTokens(theme.colors, fn(map === null || map === void 0 ? void 0 : map.colors));
     var spacing = reduceTokens(theme.spacing, fn(map === null || map === void 0 ? void 0 : map.spacing));
     var rounded = reduceTokens(theme.rounded, fn(map === null || map === void 0 ? void 0 : map.rounded));
+    var zIndex = reduceTokens(theme.zIndex, fn((_a = map === null || map === void 0 ? void 0 : map.zIndex) !== null && _a !== void 0 ? _a : zIndexParser));
     var customTokens = theme.custom ? reduceTokens(theme.custom, fn(map === null || map === void 0 ? void 0 : map.customTokens)) : [];
-    return colors.concat(spacing, rounded, customTokens);
+    return colors.concat(spacing, rounded, customTokens, zIndex);
 };
 export var createTheme = function (theme, name) {
     return createStyleContent(createTokens(theme), {

package/dist/preset/src/styles/light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAyMzB,CAAC"}
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YA0MzB,CAAC"}

package/dist/preset/src/styles/light.js

@@ -1,4 +1,4 @@
-import { rounded, spacing } from "./common";
+import { rounded, spacing, zIndex } from "./common";
 export var LIGHT_THEME = {
     rounded: rounded,
     spacing: spacing,
@@ -6,6 +6,7 @@ export var LIGHT_THEME = {
     shadow: {
         floating: "rgba(50, 50, 50, 0.1) 0px 0px 0px 1px, rgba(50, 50, 50, 0.1) 0px 3px 6px, rgba(50, 50, 50, 0.1) 0px 2px 3px",
     },
+    zIndex: zIndex,
     colors: {
         foreground: "hsla(217, 15%, 30%)",
         background: "hsla(210, 34%, 96%)",
@@ -85,9 +86,9 @@ export var LIGHT_THEME = {
             overlay: "hsla(0, 0%, 0%)",
         },
         table: {
-            header: "hsla(221, 10%, 90%)",
+            header: "hsla(221, 20%, 97%)",
             background: "hsla(0, 0%, 100%)",
-            border: "hsla(210, 25%, 88%)",
+            border: "hsla(210, 20%, 92%)",
         },
         button: {
             muted: {
@@ -125,8 +126,8 @@ export var LIGHT_THEME = {
         },
         tag: {
             muted: {
-                bg: "hsla(210, 30%, 86%)",
-                text: "hsla(210, 30%, 86%)",
+                bg: "hsla(210, 30%, 92%)",
+                text: "hsla(210, 10%, 25%)",
             },
             primary: {
                 text: "hsla(0, 0%, 100%)",

package/dist/preset/src/styles/theme.types.d.ts

@@ -15,11 +15,20 @@ type ComponentToken = {
     background: string;
     foreground: string;
 };
+export type ZIndex = {
+    navbar: `${number}`;
+    normal: `${number}`;
+    overlay: `${number}`;
+    tooltip: `${number}`;
+    calendar: `${number}`;
+    floating: `${number}`;
+};
 export type DesignTokens = {
     name: string;
+    zIndex: ZIndex;
     shadow: Record<"floating", string>;
-    rounded: Record<"button" | "full" | "pill" | "card", string>;
     spacing: Record<"base" | "lg" | "sm", string>;
+    rounded: Record<"button" | "full" | "pill" | "card", string>;
     custom?: Record<string, string>;
     colors: {
         disabled: string;

package/dist/preset/src/styles/theme.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}

package/dist/preset.tailwind.js

@@ -11,40 +11,40 @@ const config = {
                 DEFAULT: "cubic-bezier(0,0,.58,1)",
                 normal: "cubic-bezier(.25,.1,.25,1)",
             },
+            width: spacing,
             spacing,
-            transitionDuration: { DEFAULT: "375ms" },
-            minWidth: { xs: "20rem", screen: "100vh" },
-            borderRadius: createDesignTokens(theme.rounded, parsers.cssVariable),
             fill: COLORS,
             colors: COLORS,
+            fontSize: spacing,
             placeholderColor: COLORS,
+            transitionDuration: { DEFAULT: "375ms" },
+            minWidth: { xs: "20rem", screen: "100vh" },
             borderColors: { ...COLORS, DEFAULT: COLORS.card.border },
+            borderRadius: createDesignTokens(theme.rounded, parsers.cssVariable),
+            boxShadow: { floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 5px 12px" },
             zIndex: {
-                normal: "1",
-                tooltip: "13",
-                floating: "21",
-                overlay: "20",
-                navbar: "19",
-                calendar: "2",
-            },
-            boxShadow: {
-                floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 5px 12px",
+                navbar: "var(--z-navbar)",
+                normal: "var(--z-normal)",
+                overlay: "var(--z-overlay)",
+                tooltip: "var(--z-tooltip)",
+                calendar: "var(--z-calendar)",
+                floating: "var(--z-floating)",
             },
         },
     },
     plugins: [
         forms({ strategy: "class" }),
-        plugin(function ({ addVariant, theme, matchUtilities }) {
+        plugin(function ({ addVariant }) {
             addVariant("link", ["&:hover", "&:active"]);
             addVariant("hocus", ["&:hover", "&:focus"]);
             addVariant("group-assert", [`:merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &`]);
+            addVariant("group-checkbox-checked", [`:merge(&:has(.form-checkbox[type=checkbox]:checked))`]);
             addVariant("group-error", [
                 `:merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &`,
                 `:merge(.group[data-error=true]:has(.input[data-initialized=true])) &`,
                 `:merge(.group[data-error=true][data-interactive=true]):has(.input) &`,
                 `:merge(.group[data-error=true][data-interactive=true]):has(.input[data-initialized=true]) &`,
             ]);
-            addVariant("group-checkbox-checked", [`:merge(&:has(.form-checkbox[type=checkbox]:checked))`]);
         }),
     ],
 };

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
 declare const indicatorVariant: (props?: ({
-    theme?: "main" | "info" | "warn" | "muted" | "danger" | "success" | "secondary" | null | undefined;
+    theme?: "info" | "warn" | "muted" | "danger" | "primary" | "success" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const tagVariants: (props?: ({
     size?: "big" | "small" | "default" | "icon" | null | undefined;

package/dist/src/components/core/tag.js

@@ -9,7 +9,7 @@ const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
             info: "bg-info",
             warn: "bg-warn",
             muted: "bg-muted",
-            main: "bg-primary",
+            primary: "bg-primary",
             danger: "bg-danger",
             success: "bg-success",
             secondary: "bg-secondary",
@@ -40,5 +40,5 @@ const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transp
     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 }), className), children: [indicator ? _jsx("span", { className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] }));
+    return (_jsxs(Polymorph, { ...props, ref: ref, "data-theme": theme, "data-component": "tag", as: props.as ?? "span", className: css(tagVariants({ size, theme }), className), children: [indicator ? _jsx("span", { "aria-hidden": "true", className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] }));
 });

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

@@ -32,5 +32,5 @@ 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 (_jsx("div", { "data-open": !!open, "aria-hidden": !open, "data-component": "alert", className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined && open ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
+    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, "data-component": "alert", className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { "aria-hidden": "true", size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { "aria-hidden": "true", size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { "aria-hidden": "true", size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined && open ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
 });

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Locales } from "the-mask-input";
+import { type Locales } from "the-mask-input";
 type Range = {
     from?: Date;
     to?: Date;

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAsBvD,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,MAAM,EAAE,cAAc,CAAC;IACvB,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,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,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;AAwIH,eAAO,MAAM,QAAQ,GAAI,gKActB,aAAa,4CAkQf,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAqB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAuB5D,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,MAAM,EAAE,cAAc,CAAC;IACvB,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,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,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,gKActB,aAAa,4CAkQf,CAAC"}

package/dist/src/components/display/calendar.js

@@ -1,28 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { addDays, addMonths, addWeeks, addYears, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subWeeks, subYears, } from "date-fns";
-import { AnimatePresence, motion, MotionConfig } from "motion/react";
+import { add, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, setYear, startOfDay, startOfMonth, startOfWeek, sub, } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { AnimatePresence, motion, MotionConfig } from "motion/react";
 import { useEffect, useRef } from "react";
 import { Is } from "sidekicker";
 import TheMaskInput from "the-mask-input";
 import { useReducer } from "use-typed-reducer";
 import { useDebounce } from "../../hooks/use-debounce";
 import { useLocale } from "../../hooks/use-locale";
+import { useSwipe } from "../../hooks/use-swipe";
 import { useTranslations } from "../../hooks/use-translations";
 import { css } from "../../lib/dom";
 import { splitInto, uuid } from "../../lib/fns";
 const transition = { type: "spring", bounce: 0.3, duration: 0.6 };
 const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.25 });
 const variants = {
-    middle: { x: "0%", opacity: 1 },
     enter: dir(1),
     exit: dir(-1),
+    middle: { x: "0%", opacity: 1 },
 };
 const removeImmediately = { exit: { visibility: "hidden" } };
 const createDays = (month) => {
     const start = startOfWeek(startOfMonth(month));
-    return eachDayOfInterval({ start, end: addDays(start, 41) });
+    return eachDayOfInterval({ start, end: add(start, { days: 41 }) });
 };
 const formatMonth = (d, locale) => d.toLocaleDateString(locale, { month: "long" });
 const getOptionsMonth = (id, date, locale) => Array.from({ length: 12 }).map((_, i) => {
@@ -31,10 +32,10 @@ const getOptionsMonth = (id, date, locale) => Array.from({ length: 12 }).map((_,
     return (_jsx("option", { value: label, "data-index": i, children: label }, `${id}-${label}`));
 });
 const onChangeUsingKeyboard = {
-    ArrowLeft: (date, duration) => (duration === "days" ? subDays(date, 1) : subMonths(date, 1)),
-    ArrowRight: (date, duration) => (duration === "days" ? addDays(date, 1) : addMonths(date, 1)),
-    ArrowUp: (date, duration) => (duration === "days" ? subWeeks(date, 1) : subYears(date, 1)),
-    ArrowDown: (date, duration) => (duration === "days" ? addWeeks(date, 1) : addYears(date, 1)),
+    ArrowLeft: (date, duration) => (duration === "days" ? sub(date, { days: 1 }) : sub(date, { months: 1 })),
+    ArrowRight: (date, duration) => (duration === "days" ? add(date, { days: 1 }) : add(date, { months: 1 })),
+    ArrowUp: (date, duration) => (duration === "days" ? sub(date, { weeks: 1 }) : sub(date, { years: 1 })),
+    ArrowDown: (date, duration) => (duration === "days" ? add(date, { weeks: 1 }) : add(date, { years: 1 })),
 };
 const focusDate = (origin, root, next, delay = 0) => {
     const d = next.toISOString();
@@ -77,6 +78,7 @@ const CalendarBody = (props) => {
                 }) }, `week-${week.length}-${index}`));
         }) }));
 };
+const setToday = () => startOfDay(new Date());
 export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles, markRange = true, ...props }) => {
     const id = useRef(uuid());
     const translations = useTranslations();
@@ -96,7 +98,6 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         week: eachDayOfInterval({ start: startOfWeek(providedDate), end: endOfWeek(providedDate) }),
     }, (get) => ({
         onChangeYear: (year) => ({ year }),
-        setToday: () => ({ date: startOfDay(new Date()) }),
         onExitComplete: () => {
             focusDate(monthClicked.current || null, root, get.state().date, 200);
             monthClicked.current = null;
@@ -107,19 +108,21 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
             return { date: newDate, year: formatYear(newDate) };
         },
         nextMonth: (e) => {
-            monthClicked.current = e.currentTarget;
+            if (e)
+                monthClicked.current = e.currentTarget;
             const state = get.state();
             if (state.isAnimating)
                 return state;
-            const date = addMonths(state.date, 1);
+            const date = add(state.date, { months: 1 });
             return { date, isAnimating: true, direction: 1, year: formatYear(date) };
         },
         previousMonth: (e) => {
-            monthClicked.current = e.currentTarget;
+            if (e)
+                monthClicked.current = e.currentTarget;
             const state = get.state();
             if (state.isAnimating)
                 return state;
-            const date = subMonths(state.date, 1);
+            const date = sub(state.date, { months: 1 });
             return { date, isAnimating: true, direction: -1, year: formatYear(date) };
         },
         onSelectDate: (e) => {
@@ -201,21 +204,19 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
     useEffect(() => {
         if (!changeOnlyOnClick)
             onChange?.(state.date);
-    }, [currentAsString]);
-    const defer = useDebounce((y) => {
-        dispatch.date((prev) => {
-            const d = new Date(prev);
-            d.setFullYear(+y);
-            return d;
-        });
-    }, 1200);
+    }, [currentAsString, changeOnlyOnClick]);
+    const defer = useDebounce((y) => dispatch.date((prev) => setYear(new Date(prev), +y)), 1200);
     const internalOnChangeYear = (e) => {
         const value = e.currentTarget.value;
         dispatch.onChangeYear(value);
         onChangeYear?.(new Date(value));
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, 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", { "aria-label": translations.calendarMonthLabel, value: monthString, onChange: dispatch.onChangeMonth, 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: {
+    const swipe = useSwipe((event, direction) => {
+        event.preventDefault();
+        return direction === "right" ? dispatch.previousMonth() : dispatch.nextMonth();
+    }, 10);
+    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) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
+                                            } })] }), _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) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { type: "button", onClick: () => dispatch.date(setToday), className: "transition-transform duration-300 hover:scale-105", children: translations.calendarToday }) })] }) }));
 };

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
-export const Card = ({ children, title, titleClassName = "", as = "div", container = "", header = null, className = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as, "data-componen": "card", className: css("flex flex-col gap-4 rounded-card border border-card-border bg-card-background py-4 pb-8 shadow", container), children: [title ? (_jsx("header", { className: css("mb-2 w-full border-b border-card-border px-8 pb-4 text-xl font-medium", titleClassName), children: title })) : (header), _jsx("div", { className: css("min-w-full px-8", className), children: children })] }));
+export const Card = ({ children, title, titleClassName = "", as = "div", container = "", header = null, className = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as, "data-componen": "card", className: css("flex flex-col gap-4 rounded-card border border-card-border bg-card-background py-4 pb-8 shadow", container), children: [title ? (_jsx("header", { className: css("mb-2 w-full border-b border-card-border lg:px-8 px-4 pb-4 text-xl font-medium", titleClassName), children: title })) : (header), _jsx("div", { className: css("min-w-full lg:px-8 px-4", className), children: children })] }));

package/dist/src/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;AAI1B,MAAM,MAAM,UAAU,GAAG;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAChC,CAAC;AAEF,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,CAAA;CAAE,CAAC;AAE1D,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAStC,CAAC"}

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

@@ -14,7 +14,7 @@ export const AnimatedList = (props) => {
         onOpenChange: (open) => (open ? undefined : setSelected(null)),
     });
     const click = useClick(context);
-    const role = useRole(context);
+    const role = useRole(context, { role: "dialog" });
     const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });
     const { getFloatingProps } = useInteractions([click, role, dismiss]);
     const clear = useCallback(() => {

package/dist/src/components/display/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAGzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAIF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CA2FvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GACd;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAChD;IACI,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAER,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAGzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAIF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CA2FvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GACd;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAChD;IACI,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAER,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/src/components/display/tabs.js

@@ -4,6 +4,7 @@ import { useMotionValue } from "motion/react";
 import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
 import { useReactive } from "../../hooks/use-reactive";
 import { useStableRef } from "../../hooks/use-stable-ref";
+import { Polymorph } from "../core/polymorph";
 import { Card } from "./card";
 const Context = createContext("");
 export const Tabs = (props) => {
@@ -11,7 +12,6 @@ export const Tabs = (props) => {
     const left = useMotionValue(0);
     const width = useMotionValue(0);
     const ref = useRef(null);
-    const Render = props.useHash ? "a" : "button";
     useEffect(() => {
         const header = ref.current;
         if (header === null)
@@ -57,7 +57,7 @@ export const Tabs = (props) => {
     };
     return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: "pt-0 max-w-full w-full min-w-0", header: _jsx("header", { ref: ref, className: "relative mb-2 overflow-x-auto border-b border-card-border", children: _jsx("nav", { className: "min-w-0", children: _jsx("ul", { className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto", children: items.map((x) => {
                             const inner = x.props;
-                            return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "w-full border-b-2 transition-all border-card-border data-[active=true]:border-primary data-[active=true]:text-primary", children: _jsx(Render, { "data-id": inner.id, onClick: onClick, "aria-current": "page", href: props.useHash ? `#${inner.id}` : undefined, className: "block w-full whitespace-nowrap px-10 py-4", children: inner.title }) }, `tab-header-${inner.id}`));
+                            return (_jsx("li", { "data-id": inner.id, "data-active": active === inner.id, className: "w-full border-b-2 transition-all border-card-border data-[active=true]:border-primary data-[active=true]:text-primary", children: _jsx(Polymorph, { onClick: onClick, "data-id": inner.id, "aria-current": "page", as: props.useHash ? "a" : "button", href: props.useHash ? `#${inner.id}` : undefined, className: "block w-full whitespace-nowrap px-10 py-4", children: inner.title }) }, `tab-header-${inner.id}`));
                         }) }) }) }), children: props.children }) }));
 };
 const useTabs = () => useContext(Context);