@class-kit/react 0.1.0

package/dist/components/color-picker.js

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect, useContext, useSyncExternalStore, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { ColorPickerController, getClassComponentsLocale } from '@class-kit/core';
+
+const FormContext = /*#__PURE__*/ createContext(null);
+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 renderBodyPortal(node) {
+    return typeof document === "undefined"
+        ? node
+        : createPortal(node, document.body);
+}
+function ColorPicker({ name, label, className = "cc-field cc-color-picker", disabled, panelClassName = "cc-color-picker__panel", readOnly, initialValue, rules, showInputSteppers = false, validateOn, onChange, ...props }) {
+    const field = useOptionalField(name, {
+        initialValue: initialValue ?? "#7c3aed",
+        rules,
+        validateOn,
+    });
+    const interactivity = resolveFieldInteractivity(useOptionalFormInteractivity(), disabled, readOnly);
+    const controller = React.useMemo(() => new ColorPickerController(String(field.value || "#7c3aed")), [field.value]);
+    const state = controller.getState();
+    const rootRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const spectrumRef = React.useRef(null);
+    const hueRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [panelStyle, setPanelStyle] = React.useState({});
+    const updatePanelPosition = React.useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger || typeof window === "undefined")
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const gap = 8;
+        const width = Math.min(240, Math.max(220, rect.width));
+        const estimatedHeight = 292;
+        const openUp = window.innerHeight - rect.bottom < estimatedHeight + gap &&
+            rect.top > estimatedHeight + gap;
+        setPanelStyle({
+            bottom: openUp ? window.innerHeight - rect.top + gap : undefined,
+            left: Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - width - 8)),
+            top: openUp ? undefined : rect.bottom + gap,
+            transformOrigin: openUp ? "bottom left" : "top left",
+            width,
+        });
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        updatePanelPosition();
+        const close = (event) => {
+            const target = event.target;
+            if (!rootRef.current?.contains(target) &&
+                !panelRef.current?.contains(target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", close);
+        window.addEventListener("resize", updatePanelPosition);
+        window.addEventListener("scroll", updatePanelPosition, true);
+        return () => {
+            document.removeEventListener("mousedown", close);
+            window.removeEventListener("resize", updatePanelPosition);
+            window.removeEventListener("scroll", updatePanelPosition, true);
+        };
+    }, [open, updatePanelPosition]);
+    const commit = (value) => {
+        if (interactivity.disabled || interactivity.readOnly)
+            return;
+        const next = controller.update(value).value;
+        field.setValue(next);
+        onChange?.(next);
+    };
+    const commitState = (next) => {
+        field.setValue(next.value);
+        onChange?.(next.value);
+    };
+    const updateSpectrum = (event) => {
+        if (interactivity.disabled ||
+            interactivity.readOnly ||
+            !spectrumRef.current)
+            return;
+        const rect = spectrumRef.current.getBoundingClientRect();
+        const saturation = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        const brightness = 1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height));
+        commitState(controller.setSaturationBrightness(saturation, brightness));
+    };
+    const updateHue = (event) => {
+        if (interactivity.disabled || interactivity.readOnly || !hueRef.current)
+            return;
+        const rect = hueRef.current.getBoundingClientRect();
+        const hue = Math.min(359, Math.max(0, ((event.clientX - rect.left) / rect.width) * 360));
+        commitState(controller.setHue(hue));
+    };
+    const errorId = `${name}-error`;
+    return (jsxs("div", { className: className, "data-disabled": interactivity.disabled, "data-open": open, "data-readonly": interactivity.readOnly, ref: rootRef, ...props, children: [label ? jsx("span", { className: "cc-field__label", children: label }) : null, jsxs("div", { className: "cc-color-picker__body", children: [jsx("button", { "aria-expanded": open, className: "cc-field__control cc-color-picker__trigger", disabled: interactivity.disabled, ref: triggerRef, style: {
+                            "--cc-color-picker-contrast": state.contrastColor,
+                            "--cc-color-picker-current": state.value,
+                        }, type: "button", onClick: () => {
+                            if (interactivity.readOnly)
+                                return;
+                            setOpen((next) => !next);
+                            window.requestAnimationFrame(updatePanelPosition);
+                        }, children: jsx("span", { className: "cc-color-picker__value", children: state.value }) }), open
+                        ? renderBodyPortal(jsxs("div", { className: panelClassName, ref: panelRef, style: panelStyle, children: [jsx("div", { "aria-label": `${name} color panel`, className: "cc-color-picker__spectrum", ref: spectrumRef, role: "slider", style: {
+                                        "--cc-color-picker-hue": state.hue,
+                                        "--cc-color-picker-saturation": `${state.saturation * 100}%`,
+                                        "--cc-color-picker-brightness": `${(1 - state.brightness) * 100}%`,
+                                    }, tabIndex: interactivity.disabled ? -1 : 0, onPointerDown: (event) => {
+                                        updateSpectrum(event);
+                                        event.currentTarget.setPointerCapture(event.pointerId);
+                                    }, onPointerMove: (event) => {
+                                        if (event.buttons > 0)
+                                            updateSpectrum(event);
+                                    }, children: jsx("span", { className: "cc-color-picker__thumb" }) }), jsx("div", { "aria-label": `${name} hue`, className: "cc-color-picker__hue", ref: hueRef, role: "slider", tabIndex: interactivity.disabled ? -1 : 0, onPointerDown: (event) => {
+                                        updateHue(event);
+                                        event.currentTarget.setPointerCapture(event.pointerId);
+                                    }, onPointerMove: (event) => {
+                                        if (event.buttons > 0)
+                                            updateHue(event);
+                                    }, children: jsx("span", { style: { left: `${state.hue / 3.6}%` } }) }), jsxs("label", { className: "cc-color-picker__alpha", children: [jsx("span", { children: getClassComponentsLocale().colorPickerAlphaLabel }), jsx("input", { disabled: interactivity.disabled || interactivity.readOnly, max: 1, min: 0, step: 0.1, type: "range", value: Number(state.alpha.toFixed(1)), onChange: (event) => {
+                                                const next = controller.setAlpha(Number(event.currentTarget.value)).value;
+                                                field.setValue(next);
+                                                onChange?.(next);
+                                            } }), jsx("output", { children: state.alpha.toFixed(1) })] }), jsxs("div", { className: "cc-color-picker__channels", "data-show-steppers": showInputSteppers, children: [["red", "green", "blue"].map((channel) => (jsxs("label", { children: [jsx("span", { children: channel.slice(0, 1).toUpperCase() }), jsx("input", { className: "cc-field__control cc-number-input__control cc-color-picker__channel-input", "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, inputMode: "numeric", max: 255, min: 0, readOnly: interactivity.readOnly, type: "number", value: state[channel], onChange: (event) => {
+                                                        const value = Math.max(0, Math.min(255, Number(event.currentTarget.value || 0)));
+                                                        commit(`rgba(${channel === "red" ? value : state.red}, ${channel === "green" ? value : state.green}, ${channel === "blue" ? value : state.blue}, ${state.alpha})`);
+                                                    } })] }, channel))), jsxs("label", { children: [jsx("span", { children: "A" }), jsx("input", { className: "cc-field__control cc-number-input__control cc-color-picker__channel-input", "data-readonly": interactivity.readOnly, disabled: interactivity.disabled, inputMode: "decimal", max: 1, min: 0, readOnly: interactivity.readOnly, step: 0.1, type: "number", value: state.alpha.toFixed(1), onChange: (event) => {
+                                                        const value = Math.max(0, Math.min(1, Number(event.currentTarget.value || 0)));
+                                                        commit(`rgba(${state.red}, ${state.green}, ${state.blue}, ${value.toFixed(1)})`);
+                                                    } })] })] })] }))
+                        : null] }), jsx(FieldError, { errorId: errorId, errors: field.errors })] }));
+}
+
+export { ColorPicker };
+//# sourceMappingURL=color-picker.js.map

package/dist/components/color-picker.js.map

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

package/dist/components/comic-reader.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function ReaderIcon({ name }) {
+    const paths = {
+        chevronLeft: jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }),
+        chevronRight: jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }),
+    };
+    return (jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "cc-reader-icon", fill: "none", focusable: "false", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.4", viewBox: "0 0 24 24", children: paths[name] }));
+}
+function ComicReader({ className = "cc-comic-reader", current, defaultCurrent = 0, hasMore = false, loading = false, onLoadMore, onPageChange, pages, ...props }) {
+    const controlled = typeof current === "number";
+    const [innerCurrent, setInnerCurrent] = React.useState(defaultCurrent);
+    const sentinelRef = React.useRef(null);
+    const pageRefs = React.useRef([]);
+    const controller = React.useMemo(() => new core.ComicReaderController({
+        current: controlled ? current : innerCurrent,
+        hasMore,
+        loading,
+        pages,
+    }), [controlled, current, innerCurrent, hasMore, loading, pages]);
+    const state = controller.getState();
+    const commit = (index) => {
+        const next = controller.goTo(index);
+        if (!controlled)
+            setInnerCurrent(next.current);
+        onPageChange?.(next.current, next.page);
+        pageRefs.current[next.current]?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    };
+    React.useEffect(() => {
+        const node = sentinelRef.current;
+        if (!node || !onLoadMore)
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting) &&
+                hasMore &&
+                !loading)
+                onLoadMore();
+        }, { rootMargin: "240px" });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [hasMore, loading, onLoadMore]);
+    return (jsxRuntime.jsxs("div", { className: className, ...props, children: [jsxRuntime.jsxs("div", { className: "cc-comic-reader__toolbar", children: [jsxRuntime.jsx("button", { "aria-label": core.getClassComponentsLocale().comicReaderPreviousLabel, title: core.getClassComponentsLocale().comicReaderPreviousLabel, type: "button", disabled: !state.canPrevious, onClick: () => commit(state.current - 1), children: jsxRuntime.jsx(ReaderIcon, { name: "chevronLeft" }) }), jsxRuntime.jsx("span", { children: state.total ? `${state.current + 1} / ${state.total}` : "0 / 0" }), jsxRuntime.jsx("button", { "aria-label": core.getClassComponentsLocale().comicReaderNextLabel, title: core.getClassComponentsLocale().comicReaderNextLabel, type: "button", disabled: !state.canNext, onClick: () => commit(state.current + 1), children: jsxRuntime.jsx(ReaderIcon, { name: "chevronRight" }) })] }), jsxRuntime.jsxs("div", { className: "cc-comic-reader__pages", children: [state.pages.map((page, index) => (jsxRuntime.jsx("div", { ref: (node) => {
+                            pageRefs.current[index] = node;
+                        }, className: "cc-comic-reader__page", "data-active": index === state.current, children: jsxRuntime.jsx("img", { alt: page.alt ?? "", loading: "lazy", src: page.src }) }, page.id))), jsxRuntime.jsx("div", { ref: sentinelRef, className: "cc-comic-reader__load", children: loading
+                            ? core.getClassComponentsLocale().comicReaderLoadingText
+                            : hasMore
+                                ? core.getClassComponentsLocale().comicReaderLoadMoreText
+                                : core.getClassComponentsLocale().comicReaderNoMoreText })] })] }));
+}
+
+exports.ComicReader = ComicReader;
+//# sourceMappingURL=comic-reader.cjs.map

package/dist/components/comic-reader.cjs.map

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

package/dist/components/comic-reader.d.ts

@@ -0,0 +1,3 @@
+export { ComicReader } from "../index";
+export type { ComicReaderProps } from "../index";
+//# sourceMappingURL=comic-reader.d.ts.map

package/dist/components/comic-reader.d.ts.map

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

package/dist/components/comic-reader.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { ComicReaderController, getClassComponentsLocale } from '@class-kit/core';
+
+function ReaderIcon({ name }) {
+    const paths = {
+        chevronLeft: jsx("path", { d: "m15 18-6-6 6-6" }),
+        chevronRight: jsx("path", { d: "m9 18 6-6-6-6" }),
+    };
+    return (jsx("svg", { "aria-hidden": "true", className: "cc-reader-icon", fill: "none", focusable: "false", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.4", viewBox: "0 0 24 24", children: paths[name] }));
+}
+function ComicReader({ className = "cc-comic-reader", current, defaultCurrent = 0, hasMore = false, loading = false, onLoadMore, onPageChange, pages, ...props }) {
+    const controlled = typeof current === "number";
+    const [innerCurrent, setInnerCurrent] = React.useState(defaultCurrent);
+    const sentinelRef = React.useRef(null);
+    const pageRefs = React.useRef([]);
+    const controller = React.useMemo(() => new ComicReaderController({
+        current: controlled ? current : innerCurrent,
+        hasMore,
+        loading,
+        pages,
+    }), [controlled, current, innerCurrent, hasMore, loading, pages]);
+    const state = controller.getState();
+    const commit = (index) => {
+        const next = controller.goTo(index);
+        if (!controlled)
+            setInnerCurrent(next.current);
+        onPageChange?.(next.current, next.page);
+        pageRefs.current[next.current]?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    };
+    React.useEffect(() => {
+        const node = sentinelRef.current;
+        if (!node || !onLoadMore)
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting) &&
+                hasMore &&
+                !loading)
+                onLoadMore();
+        }, { rootMargin: "240px" });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [hasMore, loading, onLoadMore]);
+    return (jsxs("div", { className: className, ...props, children: [jsxs("div", { className: "cc-comic-reader__toolbar", children: [jsx("button", { "aria-label": getClassComponentsLocale().comicReaderPreviousLabel, title: getClassComponentsLocale().comicReaderPreviousLabel, type: "button", disabled: !state.canPrevious, onClick: () => commit(state.current - 1), children: jsx(ReaderIcon, { name: "chevronLeft" }) }), jsx("span", { children: state.total ? `${state.current + 1} / ${state.total}` : "0 / 0" }), jsx("button", { "aria-label": getClassComponentsLocale().comicReaderNextLabel, title: getClassComponentsLocale().comicReaderNextLabel, type: "button", disabled: !state.canNext, onClick: () => commit(state.current + 1), children: jsx(ReaderIcon, { name: "chevronRight" }) })] }), jsxs("div", { className: "cc-comic-reader__pages", children: [state.pages.map((page, index) => (jsx("div", { ref: (node) => {
+                            pageRefs.current[index] = node;
+                        }, className: "cc-comic-reader__page", "data-active": index === state.current, children: jsx("img", { alt: page.alt ?? "", loading: "lazy", src: page.src }) }, page.id))), jsx("div", { ref: sentinelRef, className: "cc-comic-reader__load", children: loading
+                            ? getClassComponentsLocale().comicReaderLoadingText
+                            : hasMore
+                                ? getClassComponentsLocale().comicReaderLoadMoreText
+                                : getClassComponentsLocale().comicReaderNoMoreText })] })] }));
+}
+
+export { ComicReader };
+//# sourceMappingURL=comic-reader.js.map

package/dist/components/comic-reader.js.map

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

package/dist/components/config-provider.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+function ClassConfigProvider({ children, className, locale, style, theme = "minimal", }) {
+    const [version, setVersion] = React.useState(0);
+    const themeName = resolveClassKitThemeName(theme);
+    const localeKey = JSON.stringify(locale ?? {});
+    const themeKey = JSON.stringify(theme ?? "minimal");
+    React.useEffect(() => {
+        core.configureClassComponents({ locale, theme });
+        setVersion((value) => value + 1);
+    }, [localeKey, themeKey]);
+    return (jsxRuntime.jsx("div", { className: ["cc-config-provider", className].filter(Boolean).join(" "), "data-cc-theme": themeName, style: style, children: jsxRuntime.jsx(React.Fragment, { children: children }, version) }));
+}
+
+exports.ClassConfigProvider = ClassConfigProvider;
+//# sourceMappingURL=config-provider.cjs.map

package/dist/components/config-provider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.cjs","sources":["../../src/index.tsx"],"names":["useEffect","configureClassComponents","_jsx"],"mappings":";;;;;;AA0MA,SAAS,wBAAwB,CAC/B,KAAqC,EAAA;IAErC,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;AAC3C,IAAA,OAAO,KAAK,EAAE,IAAI,IAAI,SAAS;AACjC;AAEM,SAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,GAAG,SAAS,GACQ,EAAA;AACzB,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC;IACjD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC;IAEnDA,eAAS,CAAC,MAAK;AACb,QAAAC,6BAAwB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAC3C,UAAU,CAAC,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;AAClC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,eAAA,EACvD,SAAS,EACxB,KAAK,EAAE,KAAK,YAEZA,cAAA,CAAC,KAAK,CAAC,QAAQ,cAAgB,QAAQ,EAAA,EAAlB,OAAO,CAA6B,EAAA,CACrD;AAEV;;;;"}

package/dist/components/config-provider.d.ts

@@ -0,0 +1,3 @@
+export { ClassConfigProvider } from "../index";
+export type { ClassConfigProviderProps } from "../index";
+//# sourceMappingURL=config-provider.d.ts.map

package/dist/components/config-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.d.ts","sourceRoot":"","sources":["../../src/components/config-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,YAAY,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/config-provider.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useEffect } from 'react';
+import { configureClassComponents } from '@class-kit/core';
+
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+function ClassConfigProvider({ children, className, locale, style, theme = "minimal", }) {
+    const [version, setVersion] = React.useState(0);
+    const themeName = resolveClassKitThemeName(theme);
+    const localeKey = JSON.stringify(locale ?? {});
+    const themeKey = JSON.stringify(theme ?? "minimal");
+    useEffect(() => {
+        configureClassComponents({ locale, theme });
+        setVersion((value) => value + 1);
+    }, [localeKey, themeKey]);
+    return (jsx("div", { className: ["cc-config-provider", className].filter(Boolean).join(" "), "data-cc-theme": themeName, style: style, children: jsx(React.Fragment, { children: children }, version) }));
+}
+
+export { ClassConfigProvider };
+//# sourceMappingURL=config-provider.js.map

package/dist/components/config-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.js","sources":["../../src/index.tsx"],"names":["_jsx"],"mappings":";;;;AA0MA,SAAS,wBAAwB,CAC/B,KAAqC,EAAA;IAErC,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;AAC3C,IAAA,OAAO,KAAK,EAAE,IAAI,IAAI,SAAS;AACjC;AAEM,SAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,GAAG,SAAS,GACQ,EAAA;AACzB,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC;IACjD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC;IAEnD,SAAS,CAAC,MAAK;AACb,QAAA,wBAAwB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAC3C,UAAU,CAAC,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;AAClC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,eAAA,EACvD,SAAS,EACxB,KAAK,EAAE,KAAK,YAEZA,GAAA,CAAC,KAAK,CAAC,QAAQ,cAAgB,QAAQ,EAAA,EAAlB,OAAO,CAA6B,EAAA,CACrD;AAEV;;;;"}