@once-ui-system/core 1.0.0

package/dist/components/Fade.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+import { ColorScheme, ColorWeight, SpacingToken } from "../types";
+export type BaseColor = `${ColorScheme}-${ColorWeight}` | `${ColorScheme}-alpha-${ColorWeight}` | "surface" | "overlay" | "page" | "transparent";
+interface FadeProps extends React.ComponentProps<typeof Flex> {
+    className?: string;
+    to?: "bottom" | "top" | "left" | "right";
+    base?: BaseColor;
+    blur?: number;
+    pattern?: {
+        display?: boolean;
+        size?: SpacingToken;
+    };
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+declare const Fade: React.ForwardRefExoticComponent<Omit<FadeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Fade };
+//# sourceMappingURL=Fade.d.ts.map

package/dist/components/Fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Fade.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAElE,MAAM,MAAM,SAAS,GACjB,GAAG,WAAW,IAAI,WAAW,EAAE,GAC/B,GAAG,WAAW,UAAU,WAAW,EAAE,GACrC,SAAS,GACT,SAAS,GACT,MAAM,GACN,aAAa,CAAC;AAElB,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,YAAY,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,+FAyDT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Fade.js

@@ -0,0 +1,56 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fade = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Fade_module_scss_1 = __importDefault(require("./Fade.module.scss"));
+const _1 = require(".");
+const Fade = (0, react_1.forwardRef)((_a, ref) => {
+    var { to = "bottom", base = "page", pattern = {
+        display: false,
+        size: "4",
+    }, blur = 0.5, children } = _a, rest = __rest(_a, ["to", "base", "pattern", "blur", "children"]);
+    const getBaseVar = (base) => {
+        if (base === "page")
+            return "var(--page-background)";
+        if (base === "surface")
+            return "var(--surface-background)";
+        if (base === "overlay")
+            return "var(--backdrop)";
+        if (base === "transparent")
+            return "var(--static-transparent)";
+        const [scheme, weight] = base.includes("alpha") ? base.split("-alpha-") : base.split("-");
+        return base.includes("alpha")
+            ? `var(--${scheme}-alpha-${weight})`
+            : `var(--${scheme}-background-${weight})`;
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ ref: ref, fillWidth: true, style: Object.assign({ "--base-color": getBaseVar(base), "--gradient-direction": to === "top"
+                ? "0deg"
+                : to === "right"
+                    ? "90deg"
+                    : to === "bottom"
+                        ? "180deg"
+                        : "270deg" }, (pattern.display && {
+            backgroundImage: `linear-gradient(var(--gradient-direction), var(--base-color), transparent), radial-gradient(transparent 1px, var(--base-color) 1px)`,
+            backgroundSize: `100% 100%, var(--static-space-${pattern.size}) var(--static-space-${pattern.size})`,
+            backdropFilter: `blur(${blur}rem)`,
+        })), className: Fade_module_scss_1.default.mask }, rest, { children: children })));
+});
+exports.Fade = Fade;
+Fade.displayName = "Fade";
+//# sourceMappingURL=Fade.js.map

package/dist/components/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.js","sourceRoot":"","sources":["../../src/once-ui/components/Fade.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAqD;AACrD,0EAAwC;AAExC,wBAAyB;AAwBzB,MAAM,IAAI,GAAG,IAAA,kBAAU,EACrB,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,GAAG,QAAQ,EACb,IAAI,GAAG,MAAM,EACb,OAAO,GAAG;QACR,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;KACV,EACD,IAAI,GAAG,GAAG,EACV,QAAQ,OAET,EADI,IAAI,cATT,6CAUC,CADQ;IAIT,MAAM,UAAU,GAAG,CAAC,IAAe,EAAE,EAAE;QACrC,IAAI,IAAI,KAAK,MAAM;YAAE,OAAO,wBAAwB,CAAC;QACrD,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO,2BAA2B,CAAC;QAC3D,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO,iBAAiB,CAAC;QACjD,IAAI,IAAI,KAAK,aAAa;YAAE,OAAO,2BAA2B,CAAC;QAE/D,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE1F,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC3B,CAAC,CAAC,SAAS,MAAM,UAAU,MAAM,GAAG;YACpC,CAAC,CAAC,SAAS,MAAM,eAAe,MAAM,GAAG,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,OAAI,kBACH,GAAG,EAAE,GAAG,EACR,SAAS,QACT,KAAK,EACH,gBACE,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,EAChC,sBAAsB,EACpB,EAAE,KAAK,KAAK;gBACV,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,EAAE,KAAK,OAAO;oBACd,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,EAAE,KAAK,QAAQ;wBACf,CAAC,CAAC,QAAQ;wBACV,CAAC,CAAC,QAAQ,IACf,CAAC,OAAO,CAAC,OAAO,IAAI;YACrB,eAAe,EAAE,qIAAqI;YACtJ,cAAc,EAAE,iCAAiC,OAAO,CAAC,IAAI,wBAAwB,OAAO,CAAC,IAAI,GAAG;YACpG,cAAc,EAAE,QAAQ,IAAI,MAAM;SACnC,CAAC,CACoB,EAE1B,SAAS,EAAE,0BAAM,CAAC,IAAI,IAClB,IAAI,cAEP,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,oBAAI;AADb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/components/Fade.module.scss

@@ -0,0 +1,6 @@
+.mask {
+    backdrop-filter: blur(0.5rem);
+    background: linear-gradient(var(--gradient-direction), var(--base-color), transparent);
+    mask-image: linear-gradient(var(--gradient-direction), black 20%, transparent 100%);
+    mask-size: 100% 100%;
+}

package/dist/components/Feedback.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+interface FeedbackProps extends Omit<React.ComponentProps<typeof Flex>, "title"> {
+    variant?: "info" | "danger" | "warning" | "success";
+    icon?: boolean;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+declare const Feedback: React.ForwardRefExoticComponent<Omit<FeedbackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Feedback };
+//# sourceMappingURL=Feedback.d.ts.map

package/dist/components/Feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Feedback.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAA4B,IAAI,EAAgB,MAAM,GAAG,CAAC;AAEjE,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC;IAC9E,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,QAAA,MAAM,QAAQ,mGAkFb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Feedback.js

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const variantIconMap = {
+    info: "info",
+    danger: "danger",
+    warning: "warning",
+    success: "check",
+};
+const Feedback = (0, react_1.forwardRef)((_a, ref) => {
+    var { variant = "info", icon = true, title, description, showCloseButton = false, onClose, className, style, children } = _a, rest = __rest(_a, ["variant", "icon", "title", "description", "showCloseButton", "onClose", "className", "style", "children"]);
+    return ((0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ fillWidth: true, radius: "l", ref: ref, border: `${variant}-medium`, background: `${variant}-medium`, vertical: "start", role: "alert", "aria-live": "assertive", className: className, style: style }, rest, { children: [icon && ((0, jsx_runtime_1.jsx)(_1.Flex, { paddingY: "16", paddingLeft: "16", children: (0, jsx_runtime_1.jsx)(_1.Icon, { padding: "4", radius: "m", border: `${variant}-medium`, onBackground: `${variant}-medium`, name: variantIconMap[variant], "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, padding: "16", gap: "24", vertical: "center", children: [(title || description) && ((0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, gap: "4", children: [title && ((0, jsx_runtime_1.jsxs)(_1.Flex, { fillWidth: true, gap: "16", children: [(0, jsx_runtime_1.jsx)(_1.Flex, { fillWidth: true, paddingY: "4", children: (0, jsx_runtime_1.jsx)(_1.Text, { variant: "heading-strong-m", onBackground: `${variant}-medium`, role: "heading", "aria-level": 2, children: title }) }), showCloseButton && ((0, jsx_runtime_1.jsx)(_1.IconButton, { onClick: onClose, icon: "close", size: "m", tooltip: "Hide", tooltipPosition: "top", variant: "ghost", "aria-label": "Close alert" }))] })), description && ((0, jsx_runtime_1.jsx)(_1.Text, { variant: "body-default-s", onBackground: `${variant}-strong`, children: description }))] })), children] })] })));
+});
+exports.Feedback = Feedback;
+Feedback.displayName = "Feedback";
+//# sourceMappingURL=Feedback.js.map

package/dist/components/Feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.js","sourceRoot":"","sources":["../../src/once-ui/components/Feedback.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAAqD;AACrD,wBAAiE;AAcjE,MAAM,cAAc,GAEhB;IACF,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAA,kBAAU,EACzB,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,WAAW,EACX,eAAe,GAAG,KAAK,EACvB,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,OAET,EADI,IAAI,cAVT,2GAWC,CADQ;IAIT,OAAO,CACL,wBAAC,OAAI,kBACH,SAAS,QACT,MAAM,EAAC,GAAG,EACV,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,GAAG,OAAO,SAAS,EAC3B,UAAU,EAAE,GAAG,OAAO,SAAS,EAC/B,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,OAAO,eACF,WAAW,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACR,IAAI,eAEP,IAAI,IAAI,CACP,uBAAC,OAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,YAClC,uBAAC,OAAI,IACH,OAAO,EAAC,GAAG,EACX,MAAM,EAAC,GAAG,EACV,MAAM,EAAE,GAAG,OAAO,SAAS,EAC3B,YAAY,EAAE,GAAG,OAAO,SAAS,EACjC,IAAI,EAAE,cAAc,CAAC,OAAO,CAAC,iBACjB,MAAM,GAClB,GACG,CACR,EACD,wBAAC,SAAM,IAAC,SAAS,QAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,aACtD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,wBAAC,SAAM,IAAC,SAAS,QAAC,GAAG,EAAC,GAAG,aACtB,KAAK,IAAI,CACR,wBAAC,OAAI,IAAC,SAAS,QAAC,GAAG,EAAC,IAAI,aACtB,uBAAC,OAAI,IAAC,SAAS,QAAC,QAAQ,EAAC,GAAG,YAC1B,uBAAC,OAAI,IACH,OAAO,EAAC,kBAAkB,EAC1B,YAAY,EAAE,GAAG,OAAO,SAAS,EACjC,IAAI,EAAC,SAAS,gBACF,CAAC,YAEZ,KAAK,GACD,GACF,EACN,eAAe,IAAI,CAClB,uBAAC,aAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,EACd,eAAe,EAAC,KAAK,EACrB,OAAO,EAAC,OAAO,gBACJ,aAAa,GACxB,CACH,IACI,CACR,EACA,WAAW,IAAI,CACd,uBAAC,OAAI,IAAC,OAAO,EAAC,gBAAgB,EAAC,YAAY,EAAE,GAAG,OAAO,SAAS,YAC7D,WAAW,GACP,CACR,IACM,CACV,EACA,QAAQ,IACF,KACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,4BAAQ;AADjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Flex.d.ts

@@ -0,0 +1,6 @@
+import { CommonProps, ConditionalProps, DisplayProps, FlexProps, SizeProps, SpacingProps, StyleProps } from "../interfaces";
+interface ComponentProps extends FlexProps, SpacingProps, SizeProps, StyleProps, CommonProps, DisplayProps, ConditionalProps {
+}
+declare const Flex: import("react").ForwardRefExoticComponent<ComponentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Flex };
+//# sourceMappingURL=Flex.d.ts.map

package/dist/components/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Flex.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACX,MAAM,eAAe,CAAC;AAGvB,UAAU,cACR,SAAQ,SAAS,EACf,YAAY,EACZ,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB;CAAG;AAEvB,QAAA,MAAM,IAAI,2GAoST,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Flex.js

@@ -0,0 +1,113 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Flex = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", inline, dark, light, direction, tabletDirection, mobileDirection, wrap = false, horizontal, vertical, flex, textVariant, textSize, textWeight, textType, onBackground, onSolid, align, top, right, bottom, left, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingX, paddingY, margin, marginLeft, marginRight, marginTop, marginBottom, marginX, marginY, gap, position = "relative", center, width, height, maxWidth, minWidth, minHeight, maxHeight, fit = false, fitWidth = false, fitHeight = false, fill = false, fillWidth = false, fillHeight = false, aspectRatio, hide, show, transition, background, solid, opacity, pointerEvents, border, borderTop, borderRight, borderBottom, borderLeft, borderStyle, borderWidth, radius, topRadius, rightRadius, bottomRadius, leftRadius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, overflow, overflowX, overflowY, zIndex, shadow, cursor, className, style, children } = _a, rest = __rest(_a, ["as", "inline", "dark", "light", "direction", "tabletDirection", "mobileDirection", "wrap", "horizontal", "vertical", "flex", "textVariant", "textSize", "textWeight", "textType", "onBackground", "onSolid", "align", "top", "right", "bottom", "left", "padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "paddingX", "paddingY", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom", "marginX", "marginY", "gap", "position", "center", "width", "height", "maxWidth", "minWidth", "minHeight", "maxHeight", "fit", "fitWidth", "fitHeight", "fill", "fillWidth", "fillHeight", "aspectRatio", "hide", "show", "transition", "background", "solid", "opacity", "pointerEvents", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderStyle", "borderWidth", "radius", "topRadius", "rightRadius", "bottomRadius", "leftRadius", "topLeftRadius", "topRightRadius", "bottomLeftRadius", "bottomRightRadius", "overflow", "overflowX", "overflowY", "zIndex", "shadow", "cursor", "className", "style", "children"]);
+    if (onBackground && onSolid) {
+        console.warn("You cannot use both 'onBackground' and 'onSolid' props simultaneously. Only one will be applied.");
+    }
+    if (background && solid) {
+        console.warn("You cannot use both 'background' and 'solid' props simultaneously. Only one will be applied.");
+    }
+    const getVariantClasses = (variant) => {
+        const [fontType, weight, size] = variant.split("-");
+        return [`font-${fontType}`, `font-${weight}`, `font-${size}`];
+    };
+    const sizeClass = textSize ? `font-${textSize}` : "";
+    const weightClass = textWeight ? `font-${textWeight}` : "";
+    const variantClasses = textVariant ? getVariantClasses(textVariant) : [sizeClass, weightClass];
+    let colorClass = "";
+    if (onBackground) {
+        const [scheme, weight] = onBackground.split("-");
+        colorClass = `${scheme}-on-background-${weight}`;
+    }
+    else if (onSolid) {
+        const [scheme, weight] = onSolid.split("-");
+        colorClass = `${scheme}-on-solid-${weight}`;
+    }
+    const generateDynamicClass = (type, value) => {
+        if (!value)
+            return undefined;
+        if (value === "transparent") {
+            return `transparent-border`;
+        }
+        if (["surface", "page", "overlay"].includes(value)) {
+            return `${value}-${type}`;
+        }
+        const parts = value.split("-");
+        if (parts.includes("alpha")) {
+            const [scheme, , weight] = parts;
+            return `${scheme}-${type}-alpha-${weight}`;
+        }
+        const [scheme, weight] = value.split("-");
+        return `${scheme}-${type}-${weight}`;
+    };
+    const classes = (0, classnames_1.default)(inline ? "display-inline-flex" : "display-flex", padding && `p-${padding}`, paddingLeft && `pl-${paddingLeft}`, paddingRight && `pr-${paddingRight}`, paddingTop && `pt-${paddingTop}`, paddingBottom && `pb-${paddingBottom}`, paddingX && `px-${paddingX}`, paddingY && `py-${paddingY}`, margin && `m-${margin}`, marginLeft && `ml-${marginLeft}`, marginRight && `mr-${marginRight}`, marginTop && `mt-${marginTop}`, marginBottom && `mb-${marginBottom}`, marginX && `mx-${marginX}`, marginY && `my-${marginY}`, gap === "-1"
+        ? direction === "column" || direction === "column-reverse"
+            ? "g-vertical--1"
+            : "g-horizontal--1"
+        : gap && `g-${gap}`, top && `top-${top}`, right && `right-${right}`, bottom && `bottom-${bottom}`, left && `left-${left}`, generateDynamicClass("background", background), generateDynamicClass("solid", solid), generateDynamicClass("border", border || borderTop || borderRight || borderBottom || borderLeft), (border || borderTop || borderRight || borderBottom || borderLeft) &&
+        !borderStyle &&
+        "border-solid", border && !borderWidth && "border-1", (borderTop || borderRight || borderBottom || borderLeft) && "border-reset", borderTop && "border-top-1", borderRight && "border-right-1", borderBottom && "border-bottom-1", borderLeft && "border-left-1", borderWidth && `border-${borderWidth}`, borderStyle && `border-${borderStyle}`, radius === "full" ? "radius-full" : radius && `radius-${radius}`, topRadius && `radius-${topRadius}-top`, rightRadius && `radius-${rightRadius}-right`, bottomRadius && `radius-${bottomRadius}-bottom`, leftRadius && `radius-${leftRadius}-left`, topLeftRadius && `radius-${topLeftRadius}-top-left`, topRightRadius && `radius-${topRightRadius}-top-right`, bottomLeftRadius && `radius-${bottomLeftRadius}-bottom-left`, bottomRightRadius && `radius-${bottomRightRadius}-bottom-right`, direction && `flex-${direction}`, tabletDirection && `m-flex-${tabletDirection}`, mobileDirection && `s-flex-${mobileDirection}`, pointerEvents && `pointer-events-${pointerEvents}`, transition && `transition-${transition}`, hide && `${hide}-flex-hide`, show && `${show}-flex-show`, opacity && `opacity-${opacity}`, wrap && "flex-wrap", overflow && `overflow-${overflow}`, overflowX && `overflow-x-${overflowX}`, overflowY && `overflow-y-${overflowY}`, flex && `flex-${flex}`, horizontal &&
+        (direction === "row" || direction === "row-reverse" || direction === undefined
+            ? `justify-${horizontal}`
+            : `align-${horizontal}`), vertical &&
+        (direction === "row" || direction === "row-reverse" || direction === undefined
+            ? `align-${vertical}`
+            : `justify-${vertical}`), center && "center", fit && "fit", fitWidth && "fit-width", fitHeight && "fit-height", fill && "fill", fillWidth && !minWidth && "min-width-0", fillHeight && !minHeight && "min-height-0", fill && "min-height-0", fill && "min-width-0", (fillWidth || maxWidth) && "fill-width", (fillHeight || maxHeight) && "fill-height", shadow && `shadow-${shadow}`, position && `position-${position}`, zIndex && `z-index-${zIndex}`, textType && `font-${textType}`, cursor && `cursor-${cursor}`, dark && "dark-flex", light && "light-flex", colorClass, className, ...variantClasses);
+    const parseDimension = (value, type) => {
+        if (value === undefined)
+            return undefined;
+        if (typeof value === "number")
+            return `${value}rem`;
+        if ([
+            "0",
+            "1",
+            "2",
+            "4",
+            "8",
+            "12",
+            "16",
+            "20",
+            "24",
+            "32",
+            "40",
+            "48",
+            "56",
+            "64",
+            "80",
+            "104",
+            "128",
+            "160",
+        ].includes(value)) {
+            return `var(--static-space-${value})`;
+        }
+        if (["xs", "s", "m", "l", "xl"].includes(value)) {
+            return `var(--responsive-${type}-${value})`;
+        }
+        return undefined;
+    };
+    const combinedStyle = Object.assign({ maxWidth: parseDimension(maxWidth, "width"), minWidth: parseDimension(minWidth, "width"), minHeight: parseDimension(minHeight, "height"), maxHeight: parseDimension(maxHeight, "height"), width: parseDimension(width, "width"), height: parseDimension(height, "height"), aspectRatio: aspectRatio, textAlign: align }, style);
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: classes, style: combinedStyle }, rest, { children: children })));
+});
+exports.Flex = Flex;
+Flex.displayName = "Flex";
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../src/once-ui/components/Flex.tsx"],"names":[],"mappings":"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"}

package/dist/components/FlipFx.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex } from "@/once-ui/components";
+export interface FlipFxProps extends React.ComponentProps<typeof Flex> {
+    flipDirection?: "horizontal" | "vertical";
+    timing?: number;
+    flipped?: boolean;
+    onFlip?: (flipped: boolean) => void;
+    disableClickFlip?: boolean;
+    autoFlipInterval?: number;
+    front: React.ReactNode;
+    back: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const FlipFx: React.ForwardRefExoticComponent<Omit<FlipFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { FlipFx };
+//# sourceMappingURL=FlipFx.d.ts.map

package/dist/components/FlipFx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipFx.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/FlipFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACpE,aAAa,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,iGA6HV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/FlipFx.js

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlipFx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("@/once-ui/components");
+const FlipFx = (0, react_1.forwardRef)((props, ref) => {
+    const { flipDirection = "horizontal", timing = 2000, flipped, onFlip, disableClickFlip = false, autoFlipInterval, front, back, className, style } = props, flex = __rest(props, ["flipDirection", "timing", "flipped", "onFlip", "disableClickFlip", "autoFlipInterval", "front", "back", "className", "style"]);
+    const [internalFlipped, setInternalFlipped] = (0, react_1.useState)(false);
+    const flippedState = flipped !== null && flipped !== void 0 ? flipped : internalFlipped;
+    const cardRef = (0, react_1.useRef)(null);
+    const frontRef = (0, react_1.useRef)(null);
+    const backRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const updateHeight = () => {
+            if (cardRef.current && frontRef.current && backRef.current) {
+                const frontH = frontRef.current.scrollHeight;
+                const backH = backRef.current.scrollHeight;
+                cardRef.current.style.height = `${Math.max(frontH, backH)}px`;
+            }
+        };
+        updateHeight();
+        const observer = new ResizeObserver(updateHeight);
+        if (frontRef.current)
+            observer.observe(frontRef.current);
+        if (backRef.current)
+            observer.observe(backRef.current);
+        return () => observer.disconnect();
+    }, [flippedState, front, back]);
+    (0, react_1.useEffect)(() => {
+        if (autoFlipInterval) {
+            const interval = setInterval(() => {
+                setInternalFlipped((prev) => !prev);
+                onFlip === null || onFlip === void 0 ? void 0 : onFlip(!flippedState);
+            }, autoFlipInterval * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [autoFlipInterval, flippedState, onFlip]);
+    const handleFlip = (0, react_1.useCallback)(() => {
+        if (disableClickFlip || autoFlipInterval)
+            return;
+        setInternalFlipped((v) => !v);
+        onFlip === null || onFlip === void 0 ? void 0 : onFlip(!flippedState);
+    }, [disableClickFlip, autoFlipInterval, flippedState, onFlip]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleFlip();
+        }
+    }, [handleFlip]);
+    return ((0, jsx_runtime_1.jsxs)(components_1.Flex, Object.assign({ ref: (node) => {
+            cardRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: className, style: Object.assign({ transformStyle: "preserve-3d", transition: `transform ${timing}ms cubic-bezier(0.22, 1, 0.36, 1)`, transform: flippedState
+                ? flipDirection === "vertical"
+                    ? "rotateX(180deg)"
+                    : "rotateY(180deg)"
+                : "none", perspective: "1000px" }, style), onClick: handleFlip, onKeyDown: handleKeyDown, role: "button", "aria-pressed": flippedState, tabIndex: 0 }, flex, { children: [(0, jsx_runtime_1.jsx)(components_1.Flex, { ref: frontRef, fill: true, position: "absolute", overflow: "hidden", "aria-hidden": flippedState, style: {
+                    backfaceVisibility: "hidden",
+                }, children: front }), (0, jsx_runtime_1.jsx)(components_1.Flex, { ref: backRef, fill: true, position: "absolute", overflow: "hidden", "aria-hidden": !flippedState, style: {
+                    backfaceVisibility: "hidden",
+                    transform: "rotateY(180deg)",
+                }, children: (0, jsx_runtime_1.jsx)(components_1.Flex, { fill: true, style: {
+                        transform: flipDirection === "vertical" ? "rotateY(-180deg) rotateX(180deg)" : undefined,
+                    }, children: back }) })] })));
+});
+exports.FlipFx = FlipFx;
+FlipFx.displayName = "FlipFx";
+//# sourceMappingURL=FlipFx.js.map

package/dist/components/FlipFx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipFx.js","sourceRoot":"","sources":["../../src/once-ui/components/FlipFx.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAOe;AACf,qDAA4C;AAe5C,MAAM,MAAM,GAAG,IAAA,kBAAU,EAA8B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,EACJ,aAAa,GAAG,YAAY,EAC5B,MAAM,GAAG,IAAI,EACb,OAAO,EACP,MAAM,EACN,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,+HAYL,CAAQ,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,eAAe,CAAC;IAEhD,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE7C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,OAAO,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC3D,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC;gBAC7C,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC;gBAC3C,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC;YAChE,CAAC;QACH,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC;QAEf,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAEhC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;gBAChC,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;gBACpC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,YAAY,CAAC,CAAC;YAC1B,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;YAE5B,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7C,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAClC,IAAI,gBAAgB,IAAI,gBAAgB;YAAE,OAAO;QACjD,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/D,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,KAA0B,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,wBAAC,iBAAI,kBACH,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,OAAO,CAAC,OAAO,GAAG,IAAsB,CAAC;YACzC,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,IAAsB,CAAC,CAAC;iBACtD,IAAI,GAAG;gBAAG,GAA8C,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/E,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,kBACH,cAAc,EAAE,aAAa,EAC7B,UAAU,EAAE,aAAa,MAAM,mCAAmC,EAClE,SAAS,EAAE,YAAY;gBACrB,CAAC,CAAC,aAAa,KAAK,UAAU;oBAC5B,CAAC,CAAC,iBAAiB;oBACnB,CAAC,CAAC,iBAAiB;gBACrB,CAAC,CAAC,MAAM,EACV,WAAW,EAAE,QAAQ,IAClB,KAAK,GAEV,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,QAAQ,kBACC,YAAY,EAC1B,QAAQ,EAAE,CAAC,IACP,IAAI,eAER,uBAAC,iBAAI,IACH,GAAG,EAAE,QAAQ,EACb,IAAI,QACJ,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAC,QAAQ,iBACJ,YAAY,EACzB,KAAK,EAAE;oBACL,kBAAkB,EAAE,QAAQ;iBAC7B,YAEA,KAAK,GACD,EAEP,uBAAC,iBAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,QACJ,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAC,QAAQ,iBACJ,CAAC,YAAY,EAC1B,KAAK,EAAE;oBACL,kBAAkB,EAAE,QAAQ;oBAC5B,SAAS,EAAE,iBAAiB;iBAC7B,YAED,uBAAC,iBAAI,IACH,IAAI,QACJ,KAAK,EAAE;wBACL,SAAS,EAAE,aAAa,KAAK,UAAU,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,SAAS;qBACzF,YAEA,IAAI,GACA,GACF,KACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAGM,wBAAM;AADf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/GlitchFx.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Flex } from ".";
+interface GlitchFxProps extends React.ComponentProps<typeof Flex> {
+    children: React.ReactNode;
+    speed?: "slow" | "medium" | "fast";
+    interval?: number;
+    trigger?: "instant" | "hover" | "custom";
+    continuous?: boolean;
+}
+declare const GlitchFx: React.ForwardRefExoticComponent<Omit<GlitchFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { GlitchFx };
+//# sourceMappingURL=GlitchFx.d.ts.map

package/dist/components/GlitchFx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlitchFx.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/GlitchFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,mGA0Fb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/GlitchFx.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlitchFx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const GlitchFx_module_scss_1 = __importDefault(require("./GlitchFx.module.scss"));
+const _1 = require(".");
+const classnames_1 = __importDefault(require("classnames"));
+const GlitchFx = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, speed = "medium", interval = 2500, trigger = "instant", continuous = true } = _a, rest = __rest(_a, ["children", "speed", "interval", "trigger", "continuous"]);
+    const [isGlitching, setIsGlitching] = (0, react_1.useState)(continuous || trigger === "instant");
+    (0, react_1.useEffect)(() => {
+        if (continuous || trigger === "instant") {
+            setIsGlitching(true);
+        }
+    }, [continuous, trigger]);
+    const handleMouseEnter = () => {
+        if (trigger === "hover") {
+            setIsGlitching(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (trigger === "hover") {
+            setIsGlitching(false);
+        }
+    };
+    const triggerGlitch = (0, react_1.useCallback)(() => {
+        if (trigger === "custom") {
+            setIsGlitching(true);
+            setTimeout(() => setIsGlitching(false), 500);
+        }
+    }, [trigger]);
+    (0, react_1.useEffect)(() => {
+        if (trigger === "custom") {
+            const glitchInterval = setInterval(triggerGlitch, interval);
+            return () => clearInterval(glitchInterval);
+        }
+    }, [trigger, interval, triggerGlitch]);
+    const speedClass = GlitchFx_module_scss_1.default[speed];
+    return ((0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ ref: ref, inline: true, zIndex: 0, className: (0, classnames_1.default)(speedClass, isGlitching && GlitchFx_module_scss_1.default.active), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, rest, { children: [(0, jsx_runtime_1.jsx)(_1.Flex, { fillWidth: true, inline: true, zIndex: 1, children: children }), (0, jsx_runtime_1.jsx)(_1.Flex, { inline: true, position: "absolute", top: "0", left: "0", fill: true, zIndex: 0, opacity: 50, className: (0, classnames_1.default)(GlitchFx_module_scss_1.default.glitchLayer, GlitchFx_module_scss_1.default.blueShift), children: children }), (0, jsx_runtime_1.jsx)(_1.Flex, { inline: true, position: "absolute", top: "0", left: "0", fill: true, zIndex: 0, opacity: 50, className: (0, classnames_1.default)(GlitchFx_module_scss_1.default.glitchLayer, GlitchFx_module_scss_1.default.redShift), children: children })] })));
+});
+exports.GlitchFx = GlitchFx;
+GlitchFx.displayName = "GlitchFx";
+//# sourceMappingURL=GlitchFx.js.map

package/dist/components/GlitchFx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlitchFx.js","sourceRoot":"","sources":["../../src/once-ui/components/GlitchFx.tsx"],"names":[],"mappings":"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"}

package/dist/components/GlitchFx.module.scss

@@ -0,0 +1,92 @@
+.glitchLayer {
+    pointer-events: none;
+}
+
+.blueShift {
+    filter: hue-rotate(260deg);
+    animation: glitch-blue 2.5s infinite;
+    z-index: 1;
+}
+
+.redShift {
+    filter: hue-rotate(120deg);
+    animation: glitch-red 2.5s infinite;
+    z-index: 1;
+}
+
+@keyframes glitch-blue {
+    6%, 14%, 70%, 78% {
+        transform: none;
+        opacity: 0.25;
+        clip-path: inset(0 0 0 0);
+    }
+    10%, 12% {
+        transform: translate(-5px, -3px) skew(1deg, -2deg);
+        opacity: 0.5;
+        clip-path: inset(50% 0 25% 0);
+    }
+    11%, 13% {
+        transform: translate(4px, -7px) skew(-1deg) scaleX(1.5) scaleY(1.25);
+        opacity: 0.7;
+        clip-path: inset(0 35% 40% 0);
+    }
+    14%, 82% {
+        transform: translate(-5px, -3px) skew(1deg, -1deg);
+        opacity: 0.3;
+        clip-path: inset(30% 5% 25% 40%);
+    }
+    75%, 83% {
+        transform: translate(-9px, 2px) skew(-1deg, 0);
+        opacity: 0.2;
+        clip-path: inset(0 35% 45% 10%);
+    }
+}
+
+@keyframes glitch-red {
+    6%, 14%, 70%, 78% {
+        transform: none;
+        opacity: 0;
+        clip-path: inset(0 0 0 0);
+    }
+    10%, 12% {
+        transform: translate(6px, 4px) skew(1deg);
+        opacity: 0.5;
+        clip-path: inset(5% 0 10% 0);
+    }
+    11%, 13% {
+        transform: translate(-4px, 5px) skew(0, -1deg);
+        opacity: 0.7;
+        clip-path: inset(5% 0 10% 0);
+    }
+    14%, 82% {
+        transform: translate(-7px, -4px) skew(1deg, -1deg);
+        opacity: 0.2;
+        clip-path: inset(50% 25% 25% 0);
+    }
+    75%, 80% {
+        transform: translate(4px, -6px) skew(-1deg) scaleX(2) scaleY(1.25);
+        opacity: 0.3;
+        clip-path: inset(0 0 20% 50%);
+    }
+}
+
+.slow {
+    animation-duration: 3.5s;
+}
+
+.medium {
+    animation-duration: 2.5s;
+}
+
+.fast {
+    animation-duration: 1.5s;
+}
+
+.active .blueShift, .active .redShift {
+    animation-play-state: running;
+}
+
+.glitchFx:not(.active) .blueShift,
+.glitchFx:not(.active) .redShift {
+    animation-play-state: paused;
+}

package/dist/components/Grid.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { GridProps, SpacingProps, SizeProps, StyleProps, CommonProps, DisplayProps, ConditionalProps } from "../interfaces";
+interface ComponentProps extends GridProps, SpacingProps, SizeProps, StyleProps, CommonProps, DisplayProps, ConditionalProps {
+}
+declare const Grid: React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<HTMLDivElement>>;
+export { Grid };
+export type { GridProps };
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,SAAS,EACT,YAAY,EACZ,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAGvB,UAAU,cACR,SAAQ,SAAS,EACf,YAAY,EACZ,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB;CAAG;AAEvB,QAAA,MAAM,IAAI,uFAwOT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}