@once-ui-system/core 1.0.0

package/dist/components/InfiniteScroll.js

@@ -0,0 +1,109 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.InfiniteScroll = InfiniteScroll;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Spinner_1 = require("./Spinner");
+const Column_1 = require("./Column");
+const Row_1 = require("./Row");
+function InfiniteScroll(_a) {
+    var { items, renderItem, loadMore, loading = false, threshold = 200 } = _a, flex = __rest(_a, ["items", "renderItem", "loadMore", "loading", "threshold"]);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(loading);
+    const observerRef = (0, react_1.useRef)(null);
+    const lastItemRef = (0, react_1.useRef)(null);
+    const handleLoadMore = async () => {
+        if (isLoading || !hasMore)
+            return;
+        setIsLoading(true);
+        try {
+            const hasMoreItems = await loadMore();
+            setHasMore(hasMoreItems);
+        }
+        catch (error) {
+            console.error("Error loading more items:", error);
+            setHasMore(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!hasMore || isLoading)
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        observerRef.current = new IntersectionObserver((entries) => {
+            const [entry] = entries;
+            if (entry.isIntersecting) {
+                handleLoadMore();
+            }
+        }, {
+            root: null,
+            rootMargin: `0px 0px ${threshold}px 0px`,
+            threshold: 0.1,
+        });
+        if (lastItemRef.current) {
+            observerRef.current.observe(lastItemRef.current);
+        }
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [items, hasMore, isLoading]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [items.map((item, index) => {
+                // If this is the last item, attach the ref
+                if (index === items.length - 1) {
+                    return ((0, jsx_runtime_1.jsx)(Row_1.Row, Object.assign({ ref: lastItemRef }, flex, { children: renderItem(item, index) }), index));
+                }
+                return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderItem(item, index) }, index);
+            }), isLoading && ((0, jsx_runtime_1.jsx)(Column_1.Column, { fillWidth: true, horizontal: "center", padding: "24", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "m" }) }))] }));
+}
+//# sourceMappingURL=InfiniteScroll.js.map

package/dist/components/InfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/once-ui/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGJ,wCAAc;;AAjGvB,+CAAsE;AACtE,uCAAoC;AACpC,qCAAkC;AAClC,+BAA4B;AAW5B,SAAS,cAAc,CAAI,EAOF;QAPE,EACzB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,GAAG,OAEQ,EADpB,IAAI,cANkB,2DAO1B,CADQ;IAEP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAA,cAAM,EAA8B,IAAI,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;QAChC,IAAI,SAAS,IAAI,CAAC,OAAO;YAAE,OAAO;QAElC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC;YACH,MAAM,YAAY,GAAG,MAAM,QAAQ,EAAE,CAAC;YACtC,UAAU,CAAC,YAAY,CAAC,CAAC;QAC3B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,CAAC,CAAC;YAClD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,SAAS;YAAE,OAAO;QAElC,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QAED,WAAW,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAC5C,CAAC,OAAO,EAAE,EAAE;YACV,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;YACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,cAAc,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,EACD;YACE,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,WAAW,SAAS,QAAQ;YACxC,SAAS,EAAE,GAAG;SACf,CACF,CAAC;QAEF,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,6DACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,2CAA2C;gBAC3C,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC/B,OAAO,CACL,uBAAC,SAAG,kBAAa,GAAG,EAAE,WAAW,IAAM,IAAI,cACxC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,KADhB,KAAK,CAET,CACP,CAAC;gBACJ,CAAC;gBACD,OAAO,uBAAC,eAAK,CAAC,QAAQ,cAAc,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,IAA/B,KAAK,CAA4C,CAAC;YAChF,CAAC,CAAC,EAED,SAAS,IAAI,CACZ,uBAAC,eAAM,IAAC,SAAS,QAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,YAChD,uBAAC,iBAAO,IAAC,IAAI,EAAC,GAAG,GAAG,GACb,CACV,IACA,CACJ,CAAC;AACJ,CAAC"}

package/dist/components/InlineCode.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+interface InlineCodeProps extends React.ComponentProps<typeof Flex> {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const InlineCode: React.ForwardRefExoticComponent<Omit<InlineCodeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { InlineCode };
+//# sourceMappingURL=InlineCode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/InlineCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,UAAU,qGAuBf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/InlineCode.js

@@ -0,0 +1,30 @@
+"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.InlineCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineCode_module_scss_1 = __importDefault(require("./InlineCode.module.scss"));
+const _1 = require(".");
+const classnames_1 = __importDefault(require("classnames"));
+const InlineCode = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, style } = _a, rest = __rest(_a, ["children", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ as: "span", inline: true, fit: true, ref: ref, radius: "s", vertical: "center", paddingX: "4", paddingY: "1", textType: "code", background: "neutral-alpha-weak", border: "neutral-alpha-medium", className: (0, classnames_1.default)(InlineCode_module_scss_1.default.inlineCode, className), style: style }, rest, { children: children })));
+});
+exports.InlineCode = InlineCode;
+InlineCode.displayName = "InlineCode";
+//# sourceMappingURL=InlineCode.js.map

package/dist/components/InlineCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.js","sourceRoot":"","sources":["../../src/once-ui/components/InlineCode.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAqD;AACrD,sFAA8C;AAC9C,wBAAyB;AACzB,4DAAoC;AAQpC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAC3B,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACpC,OAAO,CACL,uBAAC,OAAI,kBACH,EAAE,EAAC,MAAM,EACT,MAAM,QACN,GAAG,QACH,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,oBAAoB,EAC/B,MAAM,EAAC,sBAAsB,EAC7B,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE,KAAK,IACR,IAAI,cAEP,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/InlineCode.module.scss

@@ -0,0 +1,5 @@
+.inlineCode {
+    font-size: 80%;
+    line-height: 125%;
+    vertical-align: middle;
+}

package/dist/components/Input.d.ts

@@ -0,0 +1,21 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    height?: "s" | "m";
+    error?: boolean;
+    errorMessage?: ReactNode;
+    description?: ReactNode;
+    radius?: "none" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    className?: string;
+    style?: React.CSSProperties;
+    hasPrefix?: ReactNode;
+    hasSuffix?: ReactNode;
+    cursor?: undefined | "interactive";
+    validate?: (value: ReactNode) => ReactNode | null;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+export type { InputProps };
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;CACnD;AAED,QAAA,MAAM,KAAK,qFA8KV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,93 @@
+"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.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const _1 = require(".");
+const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
+const useDebounce_1 = require("../hooks/useDebounce");
+const Input = (0, react_1.forwardRef)((_a, ref) => {
+    var { id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, children, onFocus, onBlur, validate, cursor } = _a, props = __rest(_a, ["id", "label", "placeholder", "height", "error", "errorMessage", "description", "radius", "className", "style", "hasPrefix", "hasSuffix", "children", "onFocus", "onBlur", "validate", "cursor"]);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isFilled, setIsFilled] = (0, react_1.useState)(!!props.value);
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    const debouncedValue = (0, useDebounce_1.useDebounce)(props.value, 1000);
+    const handleFocus = (event) => {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(event);
+    };
+    const handleBlur = (event) => {
+        setIsFocused(false);
+        if (event.target.value) {
+            setIsFilled(true);
+        }
+        else {
+            setIsFilled(false);
+        }
+        if (onBlur)
+            onBlur(event);
+    };
+    (0, react_1.useEffect)(() => {
+        setIsFilled(!!props.value);
+    }, [props.value]);
+    const validateInput = (0, react_1.useCallback)(() => {
+        if (!debouncedValue) {
+            setValidationError(null);
+            return;
+        }
+        if (validate) {
+            const error = validate(debouncedValue);
+            if (error) {
+                setValidationError(error);
+            }
+            else {
+                setValidationError(errorMessage || null);
+            }
+        }
+        else {
+            setValidationError(null);
+        }
+    }, [debouncedValue, validate, errorMessage]);
+    (0, react_1.useEffect)(() => {
+        validateInput();
+    }, [debouncedValue, validateInput]);
+    const displayError = validationError || errorMessage;
+    const inputClassNames = (0, classnames_1.default)(Input_module_scss_1.default.input, "font-body", "font-default", "font-m", cursor === "interactive" ? "cursor-interactive" : undefined, {
+        [Input_module_scss_1.default.filled]: isFilled,
+        [Input_module_scss_1.default.focused]: isFocused,
+        [Input_module_scss_1.default.withPrefix]: hasPrefix,
+        [Input_module_scss_1.default.withSuffix]: hasSuffix,
+        [Input_module_scss_1.default.placeholder]: placeholder,
+        [Input_module_scss_1.default.hasChildren]: children,
+        [Input_module_scss_1.default.error]: displayError && debouncedValue !== "",
+    });
+    return ((0, jsx_runtime_1.jsxs)(_1.Column, { gap: "8", style: style, fillWidth: true, fitHeight: true, className: (0, classnames_1.default)(className, {
+            [Input_module_scss_1.default.error]: (error || (displayError && debouncedValue !== "")) && props.value !== "",
+        }), children: [(0, jsx_runtime_1.jsxs)(_1.Flex, { transition: "micro-medium", border: "neutral-medium", background: "neutral-alpha-weak", overflow: "hidden", vertical: "stretch", className: (0, classnames_1.default)(Input_module_scss_1.default.base, {
+                    [Input_module_scss_1.default.s]: height === "s",
+                }, {
+                    [Input_module_scss_1.default.m]: height === "m",
+                }, radius === "none" ? "radius-none" : radius ? `radius-l-${radius}` : "radius-l"), children: [hasPrefix && ((0, jsx_runtime_1.jsx)(_1.Flex, { paddingLeft: "12", className: Input_module_scss_1.default.prefix, position: "static", children: hasPrefix })), (0, jsx_runtime_1.jsxs)(_1.Column, { fillWidth: true, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { ref: ref, id: id, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, className: inputClassNames, "aria-describedby": displayError ? `${id}-error` : undefined, "aria-invalid": !!displayError })), label && ((0, jsx_runtime_1.jsx)(_1.Text, { as: "label", variant: "label-default-m", htmlFor: id, className: (0, classnames_1.default)(Input_module_scss_1.default.label, Input_module_scss_1.default.inputLabel, {
+                                    [Input_module_scss_1.default.floating]: isFocused || isFilled || placeholder,
+                                }), children: label })), children] }), hasSuffix && ((0, jsx_runtime_1.jsx)(_1.Flex, { paddingRight: "12", className: Input_module_scss_1.default.suffix, position: "static", children: hasSuffix }))] }), displayError && errorMessage !== false && ((0, jsx_runtime_1.jsx)(_1.Flex, { paddingX: "16", children: (0, jsx_runtime_1.jsx)(_1.Text, { as: "span", id: `${id}-error`, variant: "body-default-s", onBackground: "danger-weak", children: validationError || errorMessage }) })), description && ((0, jsx_runtime_1.jsx)(_1.Flex, { paddingX: "16", fillWidth: true, id: `${id}-description`, textVariant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
+});
+exports.Input = Input;
+Input.displayName = "Input";
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

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

package/dist/components/Input.module.scss

@@ -0,0 +1,144 @@
+.base {
+    backdrop-filter: var(--backdrop-filter);
+    min-height: var(--static-space-56);
+
+    &.focused, &.filled {
+        border-color: var(--neutral-border-medium);
+    }
+
+    &:has(.placeholder) {
+        min-height: var(--static-space-48);
+    }
+}
+
+.textareaBase {
+    &::after {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: var(--static-space-32);
+        height: var(--static-space-32);
+        border: 1px solid var(--neutral-border-strong);
+        transform: translateX(50%) translateY(50%) rotate(45deg);
+        background-color: var(--neutral-alpha-weak);
+    }
+
+    ::-webkit-resizer {
+        display: none;
+    }
+}
+
+.label {
+    position: absolute;
+    left: var(--static-space-16);
+    transition: transform 0.3s, top 0.3s, left 0.3s;
+    color: var(--neutral-on-background-medium);
+    pointer-events: none;
+    transform-origin: left;
+}
+
+.inputLabel {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &.floating {
+        transform: scale(0.75);
+    }
+}
+
+.textareaLabel {
+    top: var(--static-space-16);
+
+    &.floating {
+        transform: scale(0.75) translateY(calc(-1 * var(--static-space-16)));
+    }
+}
+
+.s {
+    min-height: var(--static-space-48);
+
+    &:has(.placeholder) {
+        min-height: var(--static-space-40);
+    }
+
+    .label {
+        &.floating {
+            top: var(--static-space-4);
+        }
+    }
+}
+
+.m {
+    .label {
+        &.floating {
+            top: calc(var(--static-space-8) - var(--static-space-2));
+        }
+    }
+}
+
+.input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: none;
+    color: var(--neutral-on-background-strong);
+    padding: 0 var(--static-space-16);
+    outline: none;
+
+    &.placeholder {
+        padding-top: 0;
+    }
+
+    &.textarea.placeholder {
+        padding-top: var(--static-space-12);
+        padding-bottom: var(--static-space-12);
+    }
+
+    &:not(.placeholder) {
+        padding-top: var(--static-space-16);
+    }
+
+    &.placeholder.hasChildren {
+        padding-top: var(--static-space-16);
+    }
+
+    &::placeholder {
+        color: var(--neutral-on-background-weak);
+    }
+
+    &:disabled {
+        background-color: var(--neutral-solid-strong);
+        color: var(--neutral-on-solid-weak);
+    }
+
+    &:autofill, &:-webkit-autofill {
+        background-color: var(--static-transparent) !important;
+        -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-medium) inset !important;
+        -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
+    }
+}
+
+.error {
+    .base {
+        background-color: var(--danger-background-medium);
+        border-color: var(--danger-border-medium);
+    }
+
+    .input, .prefix, .suffix {
+        color: var(--danger-on-background-medium);
+    }
+
+    .label {
+        color: var(--danger-on-background-weak);
+    }
+}
+
+.prefix, .suffix {
+    align-self: center;
+}
+
+.input[type="color"] {
+    opacity: 0;
+}

package/dist/components/InteractiveDetails.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconButtonProps } from ".";
+interface InteractiveDetailsProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    iconButtonProps?: IconButtonProps;
+    onClick: () => void;
+    className?: string;
+    id?: string;
+}
+declare const InteractiveDetails: React.FC<InteractiveDetailsProps>;
+export { InteractiveDetails };
+export type { InteractiveDetailsProps };
+//# sourceMappingURL=InteractiveDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveDetails.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA4B,eAAe,EAAO,MAAM,GAAG,CAAC;AAEnE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiCxD,CAAC;AAIH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/InteractiveDetails.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractiveDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const InteractiveDetails = (0, react_1.forwardRef)(({ label, description, iconButtonProps, onClick, className, id, disabled }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(_1.Column, { ref: ref, cursor: disabled ? "not-allowed" : undefined, className: className, onClick: onClick, id: id, children: [(0, jsx_runtime_1.jsxs)(_1.Row, { gap: "4", vertical: "center", children: [(0, jsx_runtime_1.jsx)(_1.Text, { as: "span", variant: "label-default-m", onBackground: disabled ? "neutral-weak" : "neutral-strong", children: label }), (iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.tooltip) && ((0, jsx_runtime_1.jsx)("div", { onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(_1.IconButton, Object.assign({ size: "s", variant: "ghost", icon: "help" }, iconButtonProps)) }))] }), description && ((0, jsx_runtime_1.jsx)(_1.Text, { as: "span", variant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
+});
+exports.InteractiveDetails = InteractiveDetails;
+InteractiveDetails.displayName = "InteractiveDetails";
+//# sourceMappingURL=InteractiveDetails.js.map

package/dist/components/InteractiveDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveDetails.js","sourceRoot":"","sources":["../../src/once-ui/components/InteractiveDetails.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAA0C;AAC1C,wBAAmE;AAYnE,MAAM,kBAAkB,GAAsC,IAAA,kBAAU,EAGtE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACnF,OAAO,CACL,wBAAC,SAAM,IACL,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,aAEN,wBAAC,MAAG,IAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAC,QAAQ,aAC5B,uBAAC,OAAI,IACH,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,iBAAiB,EACzB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,YAEzD,KAAK,GACD,EACN,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,KAAI,CAC3B,gCAAK,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACtC,uBAAC,aAAU,kBAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,IAAK,eAAe,EAAI,GACpE,CACP,IACG,EACL,WAAW,IAAI,CACd,uBAAC,OAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,gBAAgB,EAAC,YAAY,EAAC,cAAc,YACjE,WAAW,GACP,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAIM,gDAAkB;AAF3B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC"}

package/dist/components/Kbd.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+interface KbdProps extends React.ComponentProps<typeof Flex> {
+    label?: string;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Kbd: React.ForwardRefExoticComponent<Omit<KbdProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Kbd };
+export type { KbdProps };
+//# sourceMappingURL=Kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAQ,MAAM,GAAG,CAAC;AAE/B,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,8FAsBR,CAAC;AAIF,OAAO,EAAE,GAAG,EAAE,CAAC;AACf,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Kbd.js

@@ -0,0 +1,25 @@
+"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.Kbd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const Kbd = (0, react_1.forwardRef)((_a, ref) => {
+    var { label, children, className, style } = _a, rest = __rest(_a, ["label", "children", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ as: "kbd", ref: ref, horizontal: "center", minWidth: "32", background: "neutral-strong", radius: "s", paddingX: "4", paddingY: "2", onBackground: "neutral-medium", border: "neutral-strong", className: className, style: style }, rest, { children: (0, jsx_runtime_1.jsx)(_1.Text, { as: "span", variant: "label-default-s", children: label || children }) })));
+});
+exports.Kbd = Kbd;
+Kbd.displayName = "Kbd";
+//# sourceMappingURL=Kbd.js.map

package/dist/components/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/once-ui/components/Kbd.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAAqD;AAErD,wBAA+B;AAS/B,MAAM,GAAG,GAAG,IAAA,kBAAU,EACpB,CAAC,EAA8C,EAAE,GAAG,EAAE,EAAE;QAAvD,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAA5C,2CAA8C,CAAF;IAAY,OAAA,CACvD,uBAAC,OAAI,kBACH,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,gBAAgB,EAC3B,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,gBAAgB,EAC7B,MAAM,EAAC,gBAAgB,EACvB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACR,IAAI,cAER,uBAAC,OAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,YACtC,KAAK,IAAI,QAAQ,GACb,IACF,CACR,CAAA;CAAA,CACF,CAAC;AAIO,kBAAG;AAFZ,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC"}

package/dist/components/LetterFx.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+type LetterFxProps = {
+    children: ReactNode;
+    trigger?: "hover" | "instant" | "custom";
+    speed?: "fast" | "medium" | "slow";
+    charset?: string[];
+    onTrigger?: (triggerFn: () => void) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const LetterFx: React.ForwardRefExoticComponent<LetterFxProps & React.RefAttributes<HTMLSpanElement>>;
+export { LetterFx };
+//# sourceMappingURL=LetterFx.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LetterFx.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/LetterFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwD,SAAS,EAAE,MAAM,OAAO,CAAC;AAuE/F,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,QAAQ,uFA0Db,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/LetterFx.js

@@ -0,0 +1,86 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LetterFx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const defaultCharset = ["X", "$", "@", "a", "H", "z", "o", "0", "y", "#", "?", "*", "0", "1", "+"];
+function getRandomCharacter(charset) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    return charset[randomIndex];
+}
+function createEventHandler(originalText, setText, inProgress, setInProgress, speed, charset, setHasAnimated) {
+    const speedSettings = {
+        fast: {
+            BASE_DELAY: 10,
+            REVEAL_DELAY: 10,
+            INITIAL_RANDOM_DURATION: 100,
+        },
+        medium: {
+            BASE_DELAY: 30,
+            REVEAL_DELAY: 30,
+            INITIAL_RANDOM_DURATION: 300,
+        },
+        slow: {
+            BASE_DELAY: 60,
+            REVEAL_DELAY: 60,
+            INITIAL_RANDOM_DURATION: 600,
+        },
+    };
+    const { BASE_DELAY, REVEAL_DELAY, INITIAL_RANDOM_DURATION } = speedSettings[speed];
+    const generateRandomText = () => originalText
+        .split("")
+        .map((char) => (char === " " ? " " : getRandomCharacter(charset)))
+        .join("");
+    return async () => {
+        if (inProgress)
+            return;
+        setInProgress(true);
+        let randomizedText = generateRandomText();
+        const endTime = Date.now() + INITIAL_RANDOM_DURATION;
+        while (Date.now() < endTime) {
+            setText(randomizedText);
+            await new Promise((resolve) => setTimeout(resolve, BASE_DELAY));
+            randomizedText = generateRandomText();
+        }
+        for (let i = 0; i < originalText.length; i++) {
+            await new Promise((resolve) => setTimeout(resolve, REVEAL_DELAY));
+            setText(`${originalText.substring(0, i + 1)}${randomizedText.substring(i + 1)}`);
+        }
+        setInProgress(false);
+        if (setHasAnimated) {
+            setHasAnimated(true);
+        }
+    };
+}
+const LetterFx = (0, react_1.forwardRef)(({ children, trigger = "hover", speed = "medium", charset = defaultCharset, onTrigger, className, style, }, ref) => {
+    const [text, setText] = (0, react_1.useState)(typeof children === "string" ? children : "");
+    const [inProgress, setInProgress] = (0, react_1.useState)(false);
+    const [hasAnimated, setHasAnimated] = (0, react_1.useState)(false);
+    const originalText = (0, react_1.useRef)(typeof children === "string" ? children : "");
+    const eventHandler = (0, react_1.useCallback)(() => {
+        createEventHandler(originalText.current, setText, inProgress, setInProgress, speed, charset, trigger === "instant" ? setHasAnimated : undefined)();
+    }, [inProgress, speed, charset, trigger, setHasAnimated]);
+    (0, react_1.useEffect)(() => {
+        if (typeof children === "string") {
+            setText(children);
+            originalText.current = children;
+            if (trigger === "instant" && !hasAnimated) {
+                eventHandler();
+            }
+        }
+    }, [children, trigger, eventHandler, hasAnimated]);
+    (0, react_1.useEffect)(() => {
+        if (trigger === "custom" && onTrigger) {
+            onTrigger(eventHandler);
+        }
+    }, [trigger, onTrigger, eventHandler]);
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: (0, classnames_1.default)(className), style: style, onMouseOver: trigger === "hover" ? eventHandler : undefined, children: text }));
+});
+exports.LetterFx = LetterFx;
+LetterFx.displayName = "LetterFx";
+//# sourceMappingURL=LetterFx.js.map