@once-ui-system/core 1.0.0

package/dist/components/Skeleton.module.scss

@@ -0,0 +1,120 @@
+@keyframes skeleton-loading {
+    0% {
+        background-color: var(--neutral-background-strong);
+    }
+    50% {
+        background-color: var(--neutral-background-medium);
+    }
+    100% {
+        background-color: var(--neutral-background-strong);
+    }
+}
+
+.delay-1 {
+    animation-delay: 0.1s;
+}
+
+.delay-2 {
+    animation-delay: 0.2s;
+}
+
+.delay-3 {
+    animation-delay: 0.3s;
+}
+
+.delay-4 {
+    animation-delay: 0.4s;
+}
+
+.delay-5 {
+    animation-delay: 0.5s;
+}
+
+.delay-6 {
+    animation-delay: 0.6s;
+}
+
+.skeleton {
+    animation-name: skeleton-loading;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+
+    &.block {
+        width: 100%;
+        height: 100%;
+    }
+
+    &.line {
+        &.h-xs {
+            height: var(--static-space-8);
+            min-height: var(--static-space-8);
+        }
+        &.h-s {
+            height: var(--static-space-12);
+            min-height: var(--static-space-12);
+        }
+        &.h-m {
+            height: var(--static-space-16);
+            min-height: var(--static-space-16);
+        }
+        &.h-l {
+            height: var(--static-space-20);
+            min-height: var(--static-space-20);
+        }
+        &.h-xl {
+            height: var(--static-space-24);
+            min-height: var(--static-space-24);
+        }
+
+        &.w-xs {
+            width: 25%;
+        }
+        &.w-s {
+            width: 33%;
+        }
+        &.w-m {
+            width: 50%;
+        }
+        &.w-l {
+            width: 75%;
+        }
+        &.w-xl {
+            width: 100%;
+        }
+    }
+
+    &.circle {
+        border-radius: var(--radius-full);
+
+        &.w-xs {
+            width: var(--static-space-20);
+            min-width: var(--static-space-20);
+            height: var(--static-space-20);
+            min-height: var(--static-space-20);
+        }
+        &.w-s {
+            width: var(--static-space-24);
+            min-width: var(--static-space-24);
+            height: var(--static-space-24);
+            min-height: var(--static-space-24);
+        }
+        &.w-m {
+            width: var(--static-space-32);
+            min-width: var(--static-space-32);
+            height: var(--static-space-32);
+            min-height: var(--static-space-32);
+        }
+        &.w-l {
+            width: var(--static-space-40);
+            min-width: var(--static-space-40);
+            height: var(--static-space-40);
+            min-height: var(--static-space-40);
+        }
+        &.w-xl {
+            width: var(--static-space-160);
+            min-width: var(--static-space-160);
+            height: var(--static-space-160);
+            min-height: var(--static-space-160);
+        }
+    }
+}

package/dist/components/SmartLink.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { IconName } from "../icons";
+interface CommonProps {
+    prefixIcon?: IconName;
+    suffixIcon?: IconName;
+    fillWidth?: boolean;
+    iconSize?: "xs" | "s" | "m" | "l" | "xl";
+    selected?: boolean;
+    unstyled?: boolean;
+    children: ReactNode;
+    href?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export type SmartLinkProps = CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+declare const SmartLink: React.ForwardRefExoticComponent<CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+export { SmartLink };
+//# sourceMappingURL=SmartLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmartLink.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/SmartLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEzF,QAAA,MAAM,SAAS,uIA4Dd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/SmartLink.js

@@ -0,0 +1,42 @@
+"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.SmartLink = 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 SmartLink = (0, react_1.forwardRef)((_a, ref) => {
+    var { href, prefixIcon, suffixIcon, fillWidth = false, iconSize = "xs", style, className, selected, unstyled = false, children } = _a, props = __rest(_a, ["href", "prefixIcon", "suffixIcon", "fillWidth", "iconSize", "style", "className", "selected", "unstyled", "children"]);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixIcon && (0, jsx_runtime_1.jsx)(_1.Icon, { name: prefixIcon, size: iconSize }), children, suffixIcon && (0, jsx_runtime_1.jsx)(_1.Icon, { name: suffixIcon, size: iconSize })] }));
+    const commonProps = Object.assign({ ref, className: (0, classnames_1.default)(className, "reset-button-styles focus-ring align-center display-inline-flex g-8 radius-s", {
+            "fill-width": fillWidth,
+            "fit-width": !fillWidth,
+            "min-width-0": fillWidth,
+            "px-2 mx-2": !unstyled,
+        }), style: !unstyled
+            ? Object.assign(Object.assign({}, (selected && {
+                textDecoration: "underline",
+                textUnderlineOffset: "0.3em",
+                textUnderlineThickness: "var(--static-space-1)",
+                color: "var(--neutral-on-background-strong)",
+            })), style) : Object.assign({ textDecoration: "none" }, style) }, props);
+    return ((0, jsx_runtime_1.jsx)(_1.ElementType, Object.assign({ href: href }, commonProps, { children: content })));
+});
+exports.SmartLink = SmartLink;
+SmartLink.displayName = "SmartLink";
+//# sourceMappingURL=SmartLink.js.map

package/dist/components/SmartLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartLink.js","sourceRoot":"","sources":["../../src/once-ui/components/SmartLink.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAqD;AACrD,4DAAoC;AACpC,wBAAsC;AAkBtC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,OAET,EADI,KAAK,cAXV,uHAYC,CADS;IAIV,MAAM,OAAO,GAAG,CACd,6DACG,UAAU,IAAI,uBAAC,OAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,EACxD,QAAQ,EACR,UAAU,IAAI,uBAAC,OAAI,IAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,GAAI,IACxD,CACJ,CAAC;IAEF,MAAM,WAAW,mBACf,GAAG,EACH,SAAS,EAAE,IAAA,oBAAU,EACnB,SAAS,EACT,8EAA8E,EAC9E;YACE,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,SAAS;YACvB,aAAa,EAAE,SAAS;YACxB,WAAW,EAAE,CAAC,QAAQ;SACvB,CACF,EACD,KAAK,EAAE,CAAC,QAAQ;YACd,CAAC,iCACM,CAAC,QAAQ,IAAI;gBACd,cAAc,EAAE,WAAW;gBAC3B,mBAAmB,EAAE,OAAO;gBAC5B,sBAAsB,EAAE,uBAAuB;gBAC/C,KAAK,EAAE,qCAAqC;aAC7C,CAAC,GACC,KAAK,EAEZ,CAAC,iBACG,cAAc,EAAE,MAAM,IACnB,KAAK,CACT,IACF,KAAK,CACT,CAAC;IAEF,OAAO,CACL,uBAAC,cAAW,kBAAC,IAAI,EAAE,IAAI,IAAM,WAAW,cACrC,OAAO,IACI,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,8BAAS;AAFlB,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Flex } from ".";
+interface SpinnerProps extends React.ComponentProps<typeof Flex> {
+    size?: "xs" | "s" | "m" | "l" | "xl";
+    ariaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Spinner };
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC9D,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,kGAyBZ,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Spinner.js

@@ -0,0 +1,29 @@
+"use strict";
+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.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
+const _1 = require(".");
+const classnames_1 = __importDefault(require("classnames"));
+const Spinner = (0, react_1.forwardRef)((_a, ref) => {
+    var { size = "m", ariaLabel = "Loading", className, style } = _a, rest = __rest(_a, ["size", "ariaLabel", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ center: true, style: style, className: className }, rest, { children: (0, jsx_runtime_1.jsx)(_1.Flex, { ref: ref, center: true, className: Spinner_module_scss_1.default[size], role: "status", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsxs)(_1.Flex, { fill: true, children: [(0, jsx_runtime_1.jsx)(_1.Flex, { className: (0, classnames_1.default)(Spinner_module_scss_1.default.size), borderStyle: "solid", fill: true, radius: "full", border: "neutral-alpha-medium", position: "absolute" }), (0, jsx_runtime_1.jsx)(_1.Flex, { className: (0, classnames_1.default)(Spinner_module_scss_1.default.spinner, Spinner_module_scss_1.default.size), borderStyle: "solid", fill: true, radius: "full" })] }) }) })));
+});
+exports.Spinner = Spinner;
+Spinner.displayName = "Spinner";
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/once-ui/components/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0C;AAE1C,gFAA2C;AAC3C,wBAAyB;AACzB,4DAAoC;AASpC,MAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,CAAC,EAAgE,EAAE,GAAG,EAAE,EAAE;QAAzE,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAA9D,2CAAgE,CAAF;IAC7D,OAAO,CACL,uBAAC,OAAI,kBAAC,MAAM,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IAAM,IAAI,cACvD,uBAAC,OAAI,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,QAAC,SAAS,EAAE,6BAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,SAAS,YACjF,wBAAC,OAAI,IAAC,IAAI,mBACR,uBAAC,OAAI,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,IAAI,CAAC,EAClC,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,EACb,MAAM,EAAC,sBAAsB,EAC7B,QAAQ,EAAC,UAAU,GACnB,EACF,uBAAC,OAAI,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,OAAO,EAAE,6BAAM,CAAC,IAAI,CAAC,EAClD,WAAW,EAAC,OAAO,EACnB,IAAI,QACJ,MAAM,EAAC,MAAM,GACb,IACG,GACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,0BAAO;AAFhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/Spinner.module.scss

@@ -0,0 +1,71 @@
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+        animation-timing-function: cubic-bezier(0.5, 0.2, 0.7, 0.5);
+        opacity: 0;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        transform: rotate(360deg);
+        animation-timing-function: cubic-bezier(0.5, 0.2, 0.7, 0.5);
+        opacity: 0;
+    }
+}
+
+.spinner {
+    animation: spin 1.5s infinite;
+    border-color: transparent;
+    border-top-color: currentColor;
+}
+
+.xs {
+    width: var(--static-space-16);
+    height: var(--static-space-16);
+    padding: 2px;
+
+    .size {
+        border-width: 2px;
+    }
+}
+
+.s {
+    width: var(--static-space-20);
+    height: var(--static-space-20);
+    padding: 2px;
+
+    .size {
+        border-width: 2px;
+    }
+}
+
+.m {
+    width: var(--static-space-24);
+    height: var(--static-space-24);
+    padding: 3px;
+
+    .size {
+        border-width: 2px;
+    }
+}
+
+.l {
+    width: var(--static-space-32);
+    height: var(--static-space-32);
+    padding: 4px;
+
+    .size {
+        border-width: 3px;
+    }
+}
+
+.xl {
+    width: var(--static-space-40);
+    height: var(--static-space-40);
+    padding: 8px;
+
+    .size {
+        border-width: 3px;
+    }
+}

package/dist/components/StatusIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Flex } from ".";
+interface StatusIndicatorProps extends React.ComponentProps<typeof Flex> {
+    size?: "s" | "m" | "l";
+    color: "blue" | "indigo" | "violet" | "magenta" | "pink" | "red" | "orange" | "yellow" | "moss" | "green" | "emerald" | "aqua" | "cyan" | "gray";
+    ariaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const StatusIndicator: React.ForwardRefExoticComponent<Omit<StatusIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatusIndicator };
+//# sourceMappingURL=StatusIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StatusIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACtE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,KAAK,EACD,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,0GAuBpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/StatusIndicator.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.StatusIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const StatusIndicator_module_scss_1 = __importDefault(require("./StatusIndicator.module.scss"));
+const _1 = require(".");
+const StatusIndicator = (0, react_1.forwardRef)((_a, ref) => {
+    var { size = "m", color = "blue", ariaLabel = `${color} status indicator`, className, style } = _a, rest = __rest(_a, ["size", "color", "ariaLabel", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ ref: ref, style: style, className: (0, classnames_1.default)(StatusIndicator_module_scss_1.default.statusIndicator, StatusIndicator_module_scss_1.default[size], StatusIndicator_module_scss_1.default[color], className), "aria-label": ariaLabel, radius: "full" }, rest)));
+});
+exports.StatusIndicator = StatusIndicator;
+StatusIndicator.displayName = "StatusIndicator";
+//# sourceMappingURL=StatusIndicator.js.map

package/dist/components/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sourceRoot":"","sources":["../../src/once-ui/components/StatusIndicator.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAA0C;AAC1C,4DAAoC;AACpC,gGAAmD;AACnD,wBAAyB;AAwBzB,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,GAAG,KAAK,mBAAmB,EACvC,SAAS,EACT,KAAK,OAEN,EADI,IAAI,cANT,oDAOC,CADQ;IAIT,OAAO,CACL,uBAAC,OAAI,kBACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,eAAe,EAAE,qCAAM,CAAC,IAAI,CAAC,EAAE,qCAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,gBACzE,SAAS,EACrB,MAAM,EAAC,MAAM,IACT,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,0CAAe;AAFxB,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/components/StatusIndicator.module.scss

@@ -0,0 +1,72 @@
+.statusIndicator {
+    &.s {
+        width: var(--static-space-4);
+        height: var(--static-space-4);
+    }
+
+    &.m {
+        width: var(--static-space-8);
+        height: var(--static-space-8);
+    }
+
+    &.l {
+        width: var(--static-space-16);
+        height: var(--static-space-16);
+    }
+
+    &.gray {
+        background-color: var(--scheme-gray-700);
+    }
+
+    &.blue {
+        background-color: var(--scheme-blue-700);
+    }
+
+    &.indigo {
+        background-color: var(--scheme-indigo-700);
+    }
+
+    &.violet {
+        background-color: var(--scheme-violet-700);
+    }
+
+    &.magenta {
+        background-color: var(--scheme-magenta-700);
+    }
+
+    &.pink {
+        background-color: var(--scheme-pink-700);
+    }
+
+    &.red {
+        background-color: var(--scheme-red-700);
+    }
+
+    &.orange {
+        background-color: var(--scheme-orange-700);
+    }
+
+    &.yellow {
+        background-color: var(--scheme-yellow-700);
+    }
+
+    &.moss {
+        background-color: var(--scheme-moss-700);
+    }
+
+    &.green {
+        background-color: var(--scheme-green-700);
+    }
+
+    &.emerald {
+        background-color: var(--scheme-emerald-700);
+    }
+
+    &.aqua {
+        background-color: var(--scheme-aqua-700);
+    }
+
+    &.cyan {
+        background-color: var(--scheme-cyan-700);
+    }
+}

package/dist/components/StyleOverlay.d.ts

@@ -0,0 +1,8 @@
+import { IconButton, Flex } from ".";
+interface StyleOverlayProps extends React.ComponentProps<typeof Flex> {
+    iconButtonProps?: Partial<React.ComponentProps<typeof IconButton>>;
+    children: React.ReactNode;
+}
+declare const StyleOverlay: import("react").ForwardRefExoticComponent<Omit<StyleOverlayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { StyleOverlay };
+//# sourceMappingURL=StyleOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyleOverlay.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StyleOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAc,IAAI,EAAc,MAAM,GAAG,CAAC;AAG7D,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,2HAsDjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/StyleOverlay.js

@@ -0,0 +1,35 @@
+"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.StyleOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const StyleOverlay_module_scss_1 = __importDefault(require("./StyleOverlay.module.scss"));
+const StyleOverlay = (0, react_1.forwardRef)((_a, ref) => {
+    var { iconButtonProps, children } = _a, rest = __rest(_a, ["iconButtonProps", "children"]);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const togglePanel = () => {
+        setIsOpen(!isOpen);
+    };
+    return ((0, jsx_runtime_1.jsxs)(_1.Flex, { ref: ref, position: "static", children: [!isOpen && (0, jsx_runtime_1.jsx)(_1.Flex, { onClick: togglePanel, children: children }), (0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ as: "aside", zIndex: 3, className: `${StyleOverlay_module_scss_1.default.panel} ${isOpen && StyleOverlay_module_scss_1.default.open}`, maxWidth: 28, style: {
+                    maxHeight: "calc(100% - var(--static-space-4))",
+                }, fillHeight: true, position: "absolute", shadow: "xl", top: "2", right: "2", transition: "macro-medium", background: "page", overflow: "hidden", radius: "xl", border: "neutral-medium" }, rest, { children: [(0, jsx_runtime_1.jsx)(_1.StylePanel, { fill: true, overflowY: "scroll", padding: "8" }), (0, jsx_runtime_1.jsxs)(_1.Flex, { position: "absolute", paddingTop: "8", paddingRight: "12", top: "0", right: "0", children: [(0, jsx_runtime_1.jsx)(_1.Background, { position: "absolute", top: "0", right: "8", left: undefined, width: 8, height: 4, mask: { x: 100, y: 0, radius: 7 }, dots: { display: true, size: "2", color: "page-background" } }), (0, jsx_runtime_1.jsx)(_1.IconButton, Object.assign({ variant: "secondary", onClick: togglePanel, icon: "close" }, iconButtonProps))] })] }))] }));
+});
+exports.StyleOverlay = StyleOverlay;
+StyleOverlay.displayName = "StyleOverlay";
+//# sourceMappingURL=StyleOverlay.js.map

package/dist/components/StyleOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleOverlay.js","sourceRoot":"","sources":["../../src/once-ui/components/StyleOverlay.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAA6C;AAC7C,wBAA6D;AAC7D,0FAAgD;AAOhD,MAAM,YAAY,GAAG,IAAA,kBAAU,EAC7B,CAAC,EAAsC,EAAE,GAAG,EAAE,EAAE;QAA/C,EAAE,eAAe,EAAE,QAAQ,OAAW,EAAN,IAAI,cAApC,+BAAsC,CAAF;IACnC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,wBAAC,OAAI,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,aAC9B,CAAC,MAAM,IAAI,uBAAC,OAAI,IAAC,OAAO,EAAE,WAAW,YAAG,QAAQ,GAAQ,EACzD,wBAAC,OAAI,kBACH,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,kCAAM,CAAC,KAAK,IAAI,MAAM,IAAI,kCAAM,CAAC,IAAI,EAAE,EACrD,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,oCAAoC;iBAChD,EACD,UAAU,QACV,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,IAAI,EACX,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,UAAU,EAAC,cAAc,EACzB,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAC,IAAI,EACX,MAAM,EAAC,gBAAgB,IACnB,IAAI,eAER,uBAAC,aAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,GAAG,GAAG,EAClD,wBAAC,OAAI,IAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,aAC1E,uBAAC,aAAU,IACT,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAC,GAAG,EACP,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EACjC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAC5D,EACF,uBAAC,aAAU,kBACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,OAAO,IACR,eAAe,EACnB,IACG,KACF,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,oCAAY;AADrB,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/components/StyleOverlay.module.scss

@@ -0,0 +1,18 @@
+.panel {
+    visibility: hidden;
+    opacity: 0;
+    z-index: -1;
+    transform: scale(0.2);
+    transform-origin: top right;
+
+    &.open {
+        transform: scale(1);
+        visibility: visible;
+        opacity: 1;
+    }
+
+    &:not(.open) {
+        z-index: -1;
+        filter: blur(0.25rem);
+    }
+}

package/dist/components/StylePanel.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/StylePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAwD,MAAM,GAAG,CAAC;AAQ/E,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU,yHAmgBd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC"}