@class-kit/react 0.1.0

package/dist/components/gradient-text.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function GradientText({ animated = false, backgroundSize = "200% 100%", children, className = "cc-gradient-text", colors, direction = "90deg", duration = 3600, easing = "cubic-bezier(0.22, 0.8, 0.28, 1)", fontWeight = 700, style, text = "", ...props }) {
+    const controller = React.useMemo(() => new core.GradientTextController({
+        animated,
+        backgroundSize,
+        colors,
+        direction,
+        duration,
+        easing,
+        fontWeight,
+        text,
+    }), [
+        animated,
+        backgroundSize,
+        colors,
+        direction,
+        duration,
+        easing,
+        fontWeight,
+        text,
+    ]);
+    const state = controller.getState();
+    return (jsxRuntime.jsx("span", { className: className, "data-animated": state.animated, style: {
+            "--cc-gradient-text-background": state.backgroundImage,
+            "--cc-gradient-text-background-size": state.backgroundSize,
+            "--cc-gradient-text-duration": `${state.duration}ms`,
+            "--cc-gradient-text-easing": state.easing,
+            "--cc-gradient-text-font-weight": state.fontWeight,
+            ...style,
+        }, ...props, children: children ?? state.text }));
+}
+
+exports.GradientText = GradientText;
+//# sourceMappingURL=gradient-text.cjs.map

package/dist/components/gradient-text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-text.cjs","sources":["../../src/index.tsx"],"names":["GradientTextController","_jsx"],"mappings":";;;;;;AA89KM,SAAU,YAAY,CAAC,EAC3B,QAAQ,GAAG,KAAK,EAChB,cAAc,GAAG,WAAW,EAC5B,QAAQ,EACR,SAAS,GAAG,kBAAkB,EAC9B,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,QAAQ,GAAG,IAAI,EACf,MAAM,GAAG,kCAAkC,EAC3C,UAAU,GAAG,GAAG,EAChB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,GAAG,KAAK,EACU,EAAA;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC9B,MACE,IAAIA,2BAAsB,CAAC;QACzB,QAAQ;QACR,cAAc;QACd,MAAM;QACN,SAAS;QACT,QAAQ;QACR,MAAM;QACN,UAAU;QACV,IAAI;AACL,KAAA,CAAC,EACJ;QACE,QAAQ;QACR,cAAc;QACd,MAAM;QACN,SAAS;QACT,QAAQ;QACR,MAAM;QACN,UAAU;QACV,IAAI;AACL,KAAA,CACF;AACD,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;IAEnC,QACEC,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,SAAS,EAAA,eAAA,EACL,KAAK,CAAC,QAAQ,EAC7B,KAAK,EACH;YACE,+BAA+B,EAAE,KAAK,CAAC,eAAe;YACtD,oCAAoC,EAAE,KAAK,CAAC,cAAc;AAC1D,YAAA,6BAA6B,EAAE,CAAA,EAAG,KAAK,CAAC,QAAQ,CAAA,EAAA,CAAI;YACpD,2BAA2B,EAAE,KAAK,CAAC,MAAM;YACzC,gCAAgC,EAAE,KAAK,CAAC,UAAU;AAClD,YAAA,GAAG,KAAK;SACc,EAAA,GAEtB,KAAK,YAER,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAA,CAClB;AAEX;;;;"}

package/dist/components/gradient-text.d.ts

@@ -0,0 +1,3 @@
+export { GradientText } from "../index";
+export type { GradientTextProps } from "../index";
+//# sourceMappingURL=gradient-text.d.ts.map

package/dist/components/gradient-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-text.d.ts","sourceRoot":"","sources":["../../src/components/gradient-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/gradient-text.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { GradientTextController } from '@class-kit/core';
+
+function GradientText({ animated = false, backgroundSize = "200% 100%", children, className = "cc-gradient-text", colors, direction = "90deg", duration = 3600, easing = "cubic-bezier(0.22, 0.8, 0.28, 1)", fontWeight = 700, style, text = "", ...props }) {
+    const controller = React.useMemo(() => new GradientTextController({
+        animated,
+        backgroundSize,
+        colors,
+        direction,
+        duration,
+        easing,
+        fontWeight,
+        text,
+    }), [
+        animated,
+        backgroundSize,
+        colors,
+        direction,
+        duration,
+        easing,
+        fontWeight,
+        text,
+    ]);
+    const state = controller.getState();
+    return (jsx("span", { className: className, "data-animated": state.animated, style: {
+            "--cc-gradient-text-background": state.backgroundImage,
+            "--cc-gradient-text-background-size": state.backgroundSize,
+            "--cc-gradient-text-duration": `${state.duration}ms`,
+            "--cc-gradient-text-easing": state.easing,
+            "--cc-gradient-text-font-weight": state.fontWeight,
+            ...style,
+        }, ...props, children: children ?? state.text }));
+}
+
+export { GradientText };
+//# sourceMappingURL=gradient-text.js.map

package/dist/components/gradient-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-text.js","sources":["../../src/index.tsx"],"names":["_jsx"],"mappings":";;;;AA89KM,SAAU,YAAY,CAAC,EAC3B,QAAQ,GAAG,KAAK,EAChB,cAAc,GAAG,WAAW,EAC5B,QAAQ,EACR,SAAS,GAAG,kBAAkB,EAC9B,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,QAAQ,GAAG,IAAI,EACf,MAAM,GAAG,kCAAkC,EAC3C,UAAU,GAAG,GAAG,EAChB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,GAAG,KAAK,EACU,EAAA;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC9B,MACE,IAAI,sBAAsB,CAAC;QACzB,QAAQ;QACR,cAAc;QACd,MAAM;QACN,SAAS;QACT,QAAQ;QACR,MAAM;QACN,UAAU;QACV,IAAI;AACL,KAAA,CAAC,EACJ;QACE,QAAQ;QACR,cAAc;QACd,MAAM;QACN,SAAS;QACT,QAAQ;QACR,MAAM;QACN,UAAU;QACV,IAAI;AACL,KAAA,CACF;AACD,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;IAEnC,QACEA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,SAAS,EAAA,eAAA,EACL,KAAK,CAAC,QAAQ,EAC7B,KAAK,EACH;YACE,+BAA+B,EAAE,KAAK,CAAC,eAAe;YACtD,oCAAoC,EAAE,KAAK,CAAC,cAAc;AAC1D,YAAA,6BAA6B,EAAE,CAAA,EAAG,KAAK,CAAC,QAAQ,CAAA,EAAA,CAAI;YACpD,2BAA2B,EAAE,KAAK,CAAC,MAAM;YACzC,gCAAgC,EAAE,KAAK,CAAC,UAAU;AAClD,YAAA,GAAG,KAAK;SACc,EAAA,GAEtB,KAAK,YAER,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAA,CAClB;AAEX;;;;"}

package/dist/components/input.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+const FormContext = /*#__PURE__*/ React.createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsxRuntime.jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsxRuntime.jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = React.useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = React.useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = React.useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    React.useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsxRuntime.jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function Input({ name, label, type = "text", className = "cc-field", labelClassName = "cc-field__label", controlClassName = "cc-field__control", controlWrapClassName = "cc-field__control-wrap", errorClassName, clearable = true, clearIcon = jsxRuntime.jsx(ClassIcon, { name: "x" }), clearLabel = core.getClassComponentsLocale().inputClearLabel, disabled, readOnly, initialValue, rules, validateOn, ...options }) {
+    const field = useOptionalField(name, {
+        initialValue,
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const errorId = `${name}-error`;
+    const invalid = field.errors.length > 0;
+    const canClear = clearable &&
+        field.value !== "" &&
+        !interactivity.disabled &&
+        !interactivity.readOnly;
+    return (jsxRuntime.jsxs("label", { className: className, "data-disabled": interactivity.disabled, "data-readonly": interactivity.readOnly, children: [label ? jsxRuntime.jsx("span", { className: labelClassName, children: label }) : null, jsxRuntime.jsxs("span", { className: controlWrapClassName, children: [jsxRuntime.jsx("input", { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, className: `${controlClassName}${canClear ? " cc-field__control--clearable" : ""}`, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, name: name, readOnly: interactivity.readOnly, type: type, value: field.value, onBlur: field.onBlur, onChange: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            field.setValue(event.currentTarget.value);
+                        }, ...options }), canClear ? (jsxRuntime.jsx("button", { "aria-label": clearLabel, className: "cc-field__clear", type: "button", onClick: () => field.setValue(""), children: clearIcon })) : null] }), jsxRuntime.jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
+}
+
+exports.Input = Input;
+//# sourceMappingURL=input.cjs.map

package/dist/components/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs","sources":["../../src/index.tsx"],"names":["createContext","_jsx","useContext","useSyncExternalStore","useEffect","getClassComponentsLocale","_jsxs"],"mappings":"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"}

package/dist/components/input.d.ts

@@ -0,0 +1,3 @@
+export { Input } from "../index";
+export type { FieldProps } from "../index";
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/input.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useContext, useSyncExternalStore, useEffect, createContext } from 'react';
+import { getClassComponentsLocale } from '@class-kit/core';
+
+const FormContext = /*#__PURE__*/ createContext(null);
+const classIconPaths = {
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function ClassIcon({ className = "cc-icon", name, }) {
+    return (jsx("svg", { "aria-hidden": "true", className: className, fill: name === "star" ? "currentColor" : "none", focusable: "false", viewBox: "0 0 24 24", children: classIconPaths[name].map((d) => (jsx("path", { d: d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: name === "star" ? 0 : 2 }, d))) }));
+}
+function useFormInteractivity() {
+    const context = useContext(FormContext);
+    return {
+        disabled: context?.disabled ?? false,
+        readOnly: context?.readOnly ?? false,
+    };
+}
+function useOptionalFormInteractivity() {
+    return useFormInteractivity();
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly),
+    };
+}
+function useOptionalField(name, options = {}) {
+    const context = useContext(FormContext);
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const state = useSyncExternalStore((listener) => context ? context.controller.subscribe(listener) : () => undefined, () => context?.controller.getState() ?? null, () => context?.controller.getState() ?? null);
+    const [localValue, setLocalValue] = React.useState(() => (options.initialValue ?? ""));
+    useEffect(() => {
+        if (!context || !name)
+            return undefined;
+        return context.controller.registerField(name, optionsRef.current);
+    }, [context, name]);
+    const field = name ? state?.fields[name] : undefined;
+    const usesFormField = Boolean(context && name);
+    return {
+        value: usesFormField ? (field?.value ?? "") : localValue,
+        errors: usesFormField ? (field?.errors ?? []) : [],
+        dirty: usesFormField ? (field?.meta.dirty ?? false) : false,
+        touched: usesFormField ? (field?.meta.touched ?? false) : false,
+        setValue: (value) => {
+            if (context && name) {
+                void context.controller.setValue(name, value);
+            }
+            else {
+                setLocalValue(value);
+            }
+        },
+        onBlur: () => {
+            if (context && name)
+                void context.controller.blur(name);
+        },
+    };
+}
+function FieldError({ errors, errorId, className, }) {
+    return errors.length > 0 ? (jsx("span", { className: className ?? "cc-field__error", id: errorId, role: "alert", children: errors[0] })) : null;
+}
+function Input({ name, label, type = "text", className = "cc-field", labelClassName = "cc-field__label", controlClassName = "cc-field__control", controlWrapClassName = "cc-field__control-wrap", errorClassName, clearable = true, clearIcon = jsx(ClassIcon, { name: "x" }), clearLabel = getClassComponentsLocale().inputClearLabel, disabled, readOnly, initialValue, rules, validateOn, ...options }) {
+    const field = useOptionalField(name, {
+        initialValue,
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const errorId = `${name}-error`;
+    const invalid = field.errors.length > 0;
+    const canClear = clearable &&
+        field.value !== "" &&
+        !interactivity.disabled &&
+        !interactivity.readOnly;
+    return (jsxs("label", { className: className, "data-disabled": interactivity.disabled, "data-readonly": interactivity.readOnly, children: [label ? jsx("span", { className: labelClassName, children: label }) : null, jsxs("span", { className: controlWrapClassName, children: [jsx("input", { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, className: `${controlClassName}${canClear ? " cc-field__control--clearable" : ""}`, "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, name: name, readOnly: interactivity.readOnly, type: type, value: field.value, onBlur: field.onBlur, onChange: (event) => {
+                            if (interactivity.readOnly)
+                                return;
+                            field.setValue(event.currentTarget.value);
+                        }, ...options }), canClear ? (jsx("button", { "aria-label": clearLabel, className: "cc-field__clear", type: "button", onClick: () => field.setValue(""), children: clearIcon })) : null] }), jsx(FieldError, { className: errorClassName, errorId: errorId, errors: field.errors })] }));
+}
+
+export { Input };
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../src/index.tsx"],"names":["_jsx","_jsxs"],"mappings":";;;;AAsIA,MAAM,WAAW,iBAAiB,aAAa,CAC7C,IAAI,CACL;AAaD,MAAM,cAAc,GAAoC;IACtD,WAAW,EAAE,CAAC,cAAc,CAAC;IAC7B,WAAW,EAAE,CAAC,iBAAiB,CAAC;IAChC,YAAY,EAAE,CAAC,eAAe,CAAC;IAC/B,SAAS,EAAE,CAAC,iBAAiB,CAAC;IAC9B,KAAK,EAAE,CAAC,iBAAiB,CAAC;AAC1B,IAAA,QAAQ,EAAE;QACR,kDAAkD;QAClD,2oBAA2oB;AAC5oB,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,uFAAuF;AACxF,KAAA;AACD,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;CAChC;AAED,SAAS,SAAS,CAAC,EACjB,SAAS,GAAG,SAAS,EACrB,IAAI,GAIL,EAAA;AACC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,cAAc,GAAG,MAAM,EAC/C,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EAAA,QAAA,EAElB,cAAc,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAC1BA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAE,CAAC,EAEJ,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,IAJ/B,CAAC,CAKN,CACH,CAAC,EAAA,CACE;AAEV;AAuYA,SAAS,oBAAoB,GAAA;AAC3B,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC;IACvC,OAAO;AACL,QAAA,QAAQ,EAAE,OAAO,EAAE,QAAQ,IAAI,KAAK;AACpC,QAAA,QAAQ,EAAE,OAAO,EAAE,QAAQ,IAAI,KAAK;KACrC;AACH;AAEA,SAAS,4BAA4B,GAAA;IACnC,OAAO,oBAAoB,EAAE;AAC/B;AAEA,SAAS,yBAAyB,CAChC,IAA8C,EAC9C,QAAkB,EAClB,QAAkB,EAAA;AAElB,IAAA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ;IAClD,OAAO;AACL,QAAA,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,CAAC,gBAAgB,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;KAC3D;AACH;AA+CA,SAAS,gBAAgB,CAIvB,IAA2B,EAC3B,UAAgC,EAAE,EAAA;AAElC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAoC;IAC1E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;AACxC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;IAC5B,MAAM,KAAK,GAAG,oBAAoB,CAChC,CAAC,QAAQ,KACP,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,MAAM,SAAS,EACpE,MAAM,OAAO,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,IAAI,EAC5C,MAAM,OAAO,EAAE,UAAU,CAAC,QAAQ,EAAE,IAAI,IAAI,CAC7C;IACD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAChD,OAAO,OAAO,CAAC,YAAY,IAAI,EAAE,CAAU,CAC5C;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,SAAS;AACvC,QAAA,OAAO,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAEnB,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS;IACpD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC;IAE9C,OAAO;AACL,QAAA,KAAK,EAAE,aAAa,IAAK,KAAK,EAAE,KAAK,IAAI,EAAE,IAAc,UAAU;AACnE,QAAA,MAAM,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,IAAI,EAAE,IAAI,EAAE;AAClD,QAAA,KAAK,EAAE,aAAa,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK;AAC3D,QAAA,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,KAAK;AAC/D,QAAA,QAAQ,EAAE,CAAC,KAAK,KAAI;AAClB,YAAA,IAAI,OAAO,IAAI,IAAI,EAAE;gBACnB,KAAK,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;YAC/C;iBAAO;gBACL,aAAa,CAAC,KAAK,CAAC;YACtB;QACF,CAAC;QACD,MAAM,EAAE,MAAK;YACX,IAAI,OAAO,IAAI,IAAI;gBAAE,KAAK,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;QACzD,CAAC;KACF;AACH;AAyBA,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,OAAO,EACP,SAAS,GAKV,EAAA;AACC,IAAA,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IACtBA,cAAM,SAAS,EAAE,SAAS,IAAI,iBAAiB,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,YACvE,MAAM,CAAC,CAAC,CAAC,GACL,IACL,IAAI;AACV;AAEM,SAAU,KAAK,CAAyC,EAC5D,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,cAAc,GAAG,iBAAiB,EAClC,gBAAgB,GAAG,mBAAmB,EACtC,oBAAoB,GAAG,wBAAwB,EAC/C,cAAc,EACd,SAAS,GAAG,IAAI,EAChB,SAAS,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAC,GAAG,EAAA,CAAG,EAClC,UAAU,GAAG,wBAAwB,EAAE,CAAC,eAAe,EACvD,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,UAAU,EACV,GAAG,OAAO,EACS,EAAA;AACnB,IAAA,MAAM,KAAK,GAAG,gBAAgB,CAAiB,IAAI,EAAE;QACnD,YAAY;QACZ,KAAK;QACL,UAAU;AACX,KAAA,CAAC;IACF,MAAM,aAAa,GAAG,yBAAyB,CAC7C,4BAA4B,EAAE,EAC9B,QAAQ,EACR,QAAQ,CACT;AACD,IAAA,MAAM,OAAO,GAAG,CAAA,EAAG,IAAI,QAAQ;IAC/B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;IACvC,MAAM,QAAQ,GACZ,SAAS;QACT,KAAK,CAAC,KAAK,KAAK,EAAE;QAClB,CAAC,aAAa,CAAC,QAAQ;QACvB,CAAC,aAAa,CAAC,QAAQ;IAEzB,QACEC,gBACE,SAAS,EAAE,SAAS,EAAA,eAAA,EACL,aAAa,CAAC,QAAQ,EAAA,eAAA,EACtB,aAAa,CAAC,QAAQ,EAAA,QAAA,EAAA,CAEpC,KAAK,GAAGD,cAAM,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EAC/DC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CACnCD,GAAA,CAAA,OAAA,EAAA,EAAA,kBAAA,EACoB,OAAO,GAAG,OAAO,GAAG,SAAS,kBACjC,OAAO,EACrB,SAAS,EAAE,CAAA,EAAG,gBAAgB,GAAG,QAAQ,GAAG,+BAA+B,GAAG,EAAE,CAAA,CAAE,EAAA,eAAA,EACnE,aAAa,CAAC,QAAQ,EACrC,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,KAAK,KAAI;4BAClB,IAAI,aAAa,CAAC,QAAQ;gCAAE;4BAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;AAC3C,wBAAA,CAAC,EAAA,GACG,OAAO,EAAA,CACX,EACD,QAAQ,IACPA,GAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACc,UAAU,EACtB,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,QAAA,EAEhC,SAAS,EAAA,CACH,IACP,IAAI,CAAA,EAAA,CACH,EACPA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,CACpB,CAAA,EAAA,CACI;AAEZ;;;;"}

package/dist/components/lazy-image.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function toCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function LazyImage({ src, alt = "", eager = false, fallbackSrc, placeholderSrc, rootMargin = "200px", threshold = 0, width, height, aspectRatio, objectFit = "cover", loadingVariant = "skeleton", className = "cc-lazy-image", imageClassName = "cc-lazy-image__img", placeholderClassName = "cc-lazy-image__placeholder", skeletonClassName = "cc-lazy-image__skeleton", errorClassName = "cc-lazy-image__error", imageProps, renderPlaceholder, renderError, onLoad, onError, style, ...props }) {
+    const rootRef = React.useRef(null);
+    const controllerRef = React.useRef(new core.LazyImageController({
+        eager,
+        fallbackSrc,
+        placeholderSrc,
+        rootMargin,
+        src,
+        threshold,
+    }));
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    React.useEffect(() => {
+        setState(controllerRef.current.updateOptions({
+            eager,
+            fallbackSrc,
+            placeholderSrc,
+            rootMargin,
+            src,
+            threshold,
+        }));
+    }, [eager, fallbackSrc, placeholderSrc, rootMargin, src, threshold]);
+    React.useEffect(() => {
+        if (state.status !== "idle")
+            return undefined;
+        if (eager || typeof IntersectionObserver === "undefined") {
+            setState(controllerRef.current.startLoading());
+            return undefined;
+        }
+        const target = rootRef.current;
+        if (!target)
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setState(controllerRef.current.startLoading());
+                observer.disconnect();
+            }
+        }, { rootMargin: state.rootMargin, threshold: state.threshold });
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [eager, state.rootMargin, state.status, state.threshold]);
+    const shouldShowImage = Boolean(state.currentSrc);
+    const shouldShowPlaceholder = (state.status === "idle" || state.status === "loading") &&
+        (loadingVariant !== "none" || Boolean(renderPlaceholder));
+    const shouldShowError = state.status === "error";
+    return (jsxRuntime.jsxs("div", { ...props, className: className, "data-loading-variant": loadingVariant, "data-sized": Boolean(height || aspectRatio), "data-status": state.status, ref: rootRef, style: {
+            aspectRatio,
+            height: toCssSize(height),
+            width: toCssSize(width),
+            ...style,
+        }, children: [shouldShowImage ? (jsxRuntime.jsx("img", { ...imageProps, alt: alt, className: imageProps?.className ?? imageClassName, decoding: imageProps?.decoding ?? "async", loading: eager ? "eager" : "lazy", src: state.currentSrc, style: { objectFit, ...imageProps?.style }, onError: (event) => {
+                    onError?.(event);
+                    setState(controllerRef.current.markError());
+                }, onLoad: (event) => {
+                    onLoad?.(event);
+                    setState(controllerRef.current.markLoaded());
+                } })) : null, shouldShowPlaceholder ? (jsxRuntime.jsx("span", { className: placeholderClassName, children: renderPlaceholder?.({ status: state.status }) ??
+                    (loadingVariant === "image" && state.placeholderSrc ? (jsxRuntime.jsx("img", { alt: "", "aria-hidden": "true", src: state.placeholderSrc })) : loadingVariant === "skeleton" ? (jsxRuntime.jsx("span", { "aria-hidden": "true", className: skeletonClassName })) : null) })) : null, shouldShowError ? (jsxRuntime.jsx("span", { className: errorClassName, children: renderError?.({ status: state.status }) ?? "Image unavailable" })) : null] }));
+}
+
+exports.LazyImage = LazyImage;
+//# sourceMappingURL=lazy-image.cjs.map

package/dist/components/lazy-image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-image.cjs","sources":["../../src/index.tsx"],"names":["LazyImageController","useEffect","_jsxs","_jsx"],"mappings":"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"}

package/dist/components/lazy-image.d.ts

@@ -0,0 +1,3 @@
+export { LazyImage } from "../index";
+export type { LazyImageProps, LazyImageRenderState, LazyImageLoadingVariant } from "../index";
+//# sourceMappingURL=lazy-image.d.ts.map

package/dist/components/lazy-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-image.d.ts","sourceRoot":"","sources":["../../src/components/lazy-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/lazy-image.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { LazyImageController } from '@class-kit/core';
+
+function toCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function LazyImage({ src, alt = "", eager = false, fallbackSrc, placeholderSrc, rootMargin = "200px", threshold = 0, width, height, aspectRatio, objectFit = "cover", loadingVariant = "skeleton", className = "cc-lazy-image", imageClassName = "cc-lazy-image__img", placeholderClassName = "cc-lazy-image__placeholder", skeletonClassName = "cc-lazy-image__skeleton", errorClassName = "cc-lazy-image__error", imageProps, renderPlaceholder, renderError, onLoad, onError, style, ...props }) {
+    const rootRef = React.useRef(null);
+    const controllerRef = React.useRef(new LazyImageController({
+        eager,
+        fallbackSrc,
+        placeholderSrc,
+        rootMargin,
+        src,
+        threshold,
+    }));
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    useEffect(() => {
+        setState(controllerRef.current.updateOptions({
+            eager,
+            fallbackSrc,
+            placeholderSrc,
+            rootMargin,
+            src,
+            threshold,
+        }));
+    }, [eager, fallbackSrc, placeholderSrc, rootMargin, src, threshold]);
+    useEffect(() => {
+        if (state.status !== "idle")
+            return undefined;
+        if (eager || typeof IntersectionObserver === "undefined") {
+            setState(controllerRef.current.startLoading());
+            return undefined;
+        }
+        const target = rootRef.current;
+        if (!target)
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setState(controllerRef.current.startLoading());
+                observer.disconnect();
+            }
+        }, { rootMargin: state.rootMargin, threshold: state.threshold });
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [eager, state.rootMargin, state.status, state.threshold]);
+    const shouldShowImage = Boolean(state.currentSrc);
+    const shouldShowPlaceholder = (state.status === "idle" || state.status === "loading") &&
+        (loadingVariant !== "none" || Boolean(renderPlaceholder));
+    const shouldShowError = state.status === "error";
+    return (jsxs("div", { ...props, className: className, "data-loading-variant": loadingVariant, "data-sized": Boolean(height || aspectRatio), "data-status": state.status, ref: rootRef, style: {
+            aspectRatio,
+            height: toCssSize(height),
+            width: toCssSize(width),
+            ...style,
+        }, children: [shouldShowImage ? (jsx("img", { ...imageProps, alt: alt, className: imageProps?.className ?? imageClassName, decoding: imageProps?.decoding ?? "async", loading: eager ? "eager" : "lazy", src: state.currentSrc, style: { objectFit, ...imageProps?.style }, onError: (event) => {
+                    onError?.(event);
+                    setState(controllerRef.current.markError());
+                }, onLoad: (event) => {
+                    onLoad?.(event);
+                    setState(controllerRef.current.markLoaded());
+                } })) : null, shouldShowPlaceholder ? (jsx("span", { className: placeholderClassName, children: renderPlaceholder?.({ status: state.status }) ??
+                    (loadingVariant === "image" && state.placeholderSrc ? (jsx("img", { alt: "", "aria-hidden": "true", src: state.placeholderSrc })) : loadingVariant === "skeleton" ? (jsx("span", { "aria-hidden": "true", className: skeletonClassName })) : null) })) : null, shouldShowError ? (jsx("span", { className: errorClassName, children: renderError?.({ status: state.status }) ?? "Image unavailable" })) : null] }));
+}
+
+export { LazyImage };
+//# sourceMappingURL=lazy-image.js.map

package/dist/components/lazy-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-image.js","sources":["../../src/index.tsx"],"names":["_jsxs","_jsx"],"mappings":"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"}