@codeleap/web 7.0.0 → 7.0.2

package/dist/components/Tooltip/index.js

@@ -0,0 +1,115 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_tooltip_1 = require("@radix-ui/react-tooltip");
+const hooks_1 = require("@codeleap/hooks");
+const types_1 = require("@codeleap/types");
+const View_1 = require("../View");
+const lib_1 = require("../../lib");
+const WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+const useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+/**
+ * Contextual bubble that floats near a trigger element, supporting hover and/or press to open.
+ * Visibility can be fully controlled via `visible` / `toggle` or left to internal state.
+ * Uses: `View`, `useStylesFor`
+ */
+const Tooltip = (props) => {
+    const allProps = {
+        ...exports.Tooltip.defaultProps,
+        ...props,
+    };
+    const { toggle: _toggle, visible: _visible, children, content: Content, triggerWrapperProps, triggerWrapper: TriggerWrapper, side, disabled, delayDuration, openOnPress, openOnHover, onOpen, onClose, onValueChange, onHover, onPress, contentProps, portalProps, arrowProps, triggerProps, providerProps, closeOnClickOutside, style, ...rest } = allProps;
+    const styles = (0, useStylesFor_1.useStylesFor)(exports.Tooltip.styleRegistryName, style);
+    const [visible, toggle] = (0, hooks_1.useConditionalState)(_visible, _toggle, { initialValue: false });
+    const tooltipDirectionStyle = react_1.default.useMemo(() => {
+        return side ? styles[`content:${side}`] : styles.content;
+    }, [side, styles]);
+    function handleToggle(_value, isToggle = true) {
+        if (disabled)
+            return;
+        if (_value === true) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
+        if (isToggle)
+            toggle(_value);
+        if (types_1.TypeGuards.isFunction(onValueChange))
+            onValueChange?.(_value);
+    }
+    const onOpenChange = react_1.default.useCallback((_open) => {
+        handleToggle(_open, false);
+    }, [handleToggle]);
+    const _onHover = (type) => {
+        if (!openOnHover || disabled)
+            return;
+        const value = !visible;
+        if (type === 'leave' && visible === false)
+            return;
+        handleToggle(value);
+        if (types_1.TypeGuards.isFunction(onHover))
+            onHover?.(type, value);
+    };
+    const _onPress = () => {
+        if (!openOnPress || disabled)
+            return;
+        const value = !visible;
+        handleToggle(value);
+        if (types_1.TypeGuards.isFunction(onPress))
+            onPress?.(value);
+    };
+    const triggerRef = react_1.default.useRef(null);
+    const contentRef = (0, lib_1.useClickOutsideElement)((isOutside) => {
+        if (isOutside && closeOnClickOutside && !openOnHover && visible) {
+            handleToggle(false);
+        }
+    }, [triggerRef]);
+    return ((0, jsx_runtime_1.jsx)(react_tooltip_1.Provider, { ...providerProps, children: (0, jsx_runtime_1.jsxs)(react_tooltip_1.Root, { delayDuration: delayDuration, open: visible, onOpenChange: onOpenChange, ...rest, children: [(0, jsx_runtime_1.jsx)(react_tooltip_1.Trigger, { onClick: _onPress, onMouseEnter: () => _onHover('enter'), onMouseLeave: () => _onHover('leave'), asChild: true, ref: triggerRef, ...triggerProps, css: styles.triggerWrapper, children: (0, jsx_runtime_1.jsx)(TriggerWrapper, { ...allProps, ...triggerWrapperProps, css: styles.triggerInnerWrapper, children: children }) }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Portal, { ...portalProps, children: (0, jsx_runtime_1.jsxs)(react_tooltip_1.Content, { ref: contentRef, css: [tooltipDirectionStyle, styles.content], sideOffset: 2, side: side, ...contentProps, children: [types_1.TypeGuards.isFunction(Content)
+                                ? (0, jsx_runtime_1.jsx)(Content, { ...allProps, visible: visible, toggle: toggle, variantsStyles: styles })
+                                : Content, (0, jsx_runtime_1.jsx)(react_tooltip_1.Arrow, { ...arrowProps, css: styles.arrow })] }) })] }) }));
+};
+exports.Tooltip = Tooltip;
+exports.Tooltip.styleRegistryName = 'Tooltip';
+exports.Tooltip.elements = [
+    'content',
+    'arrow',
+    'triggerWrapper',
+    'triggerInnerWrapper',
+];
+exports.Tooltip.rootElement = 'content';
+exports.Tooltip.withVariantTypes = (styles) => {
+    return exports.Tooltip;
+};
+exports.Tooltip.defaultProps = {
+    openOnPress: true,
+    openOnHover: true,
+    disabled: false,
+    delayDuration: 0,
+    closeOnClickOutside: false,
+    side: 'bottom',
+    triggerWrapper: View_1.View,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.Tooltip);
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,2DAOgC;AAChC,2CAAqD;AACrD,2CAA4C;AAC5C,kCAA8B;AAC9B,mCAAkD;AAClD,iEAA6D;AAG7D,+DAA2D;AAE3D,2CAAwB;AACxB,0CAAuB;AAEvB;;;;GAIG;AACI,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,QAAQ,GAAG;QACf,GAAG,eAAO,CAAC,YAAY;QACvB,GAAG,KAAK;KACT,CAAA;IAED,MAAM,EACJ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EACR,OAAO,EAAE,OAAO,EAChB,mBAAmB,EACnB,cAAc,EAAE,cAAc,EAC9B,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,MAAM,EACN,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,KAAK,EACL,GAAG,IAAI,EACR,GAAG,QAAQ,CAAA;IAEZ,MAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,eAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE7D,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,IAAA,2BAAmB,EAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAA;IAEzF,MAAM,qBAAqB,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/C,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;IAC1D,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;IAElB,SAAS,YAAY,CAAC,MAAe,EAAE,QAAQ,GAAG,IAAI;QACpD,IAAI,QAAQ;YAAE,OAAM;QAEpB,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACpB,MAAM,EAAE,EAAE,CAAA;QACZ,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,EAAE,CAAA;QACb,CAAC;QAED,IAAI,QAAQ;YAAE,MAAM,CAAC,MAAM,CAAC,CAAA;QAE5B,IAAI,kBAAU,CAAC,UAAU,CAAC,aAAa,CAAC;YAAE,aAAa,EAAE,CAAC,MAAM,CAAC,CAAA;IACnE,CAAC;IAED,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CAAC,CAAC,KAAc,EAAE,EAAE;QACxD,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;QAC3C,IAAI,CAAC,WAAW,IAAI,QAAQ;YAAE,OAAM;QAEpC,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;QAEtB,IAAI,IAAI,KAAK,OAAO,IAAI,OAAO,KAAK,KAAK;YAAE,OAAM;QAEjD,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,IAAI,kBAAU,CAAC,UAAU,CAAC,OAAO,CAAC;YAAE,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAC5D,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,WAAW,IAAI,QAAQ;YAAE,OAAM;QAEpC,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;QAEtB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,IAAI,kBAAU,CAAC,UAAU,CAAC,OAAO,CAAC;YAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;IACtD,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,eAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAErC,MAAM,UAAU,GAAG,IAAA,4BAAsB,EAAC,CAAC,SAAS,EAAE,EAAE;QACtD,IAAI,SAAS,IAAI,mBAAmB,IAAI,CAAC,WAAW,IAAI,OAAO,EAAE,CAAC;YAChE,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,uBAAC,wBAAgB,OAAK,aAAa,YACjC,wBAAC,oBAAc,IACb,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,YAAY,KACtB,IAAI,aAGR,uBAAC,uBAAc,IACb,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EACrC,OAAO,QACP,GAAG,EAAE,UAAU,KACX,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,cAAc,YAE1B,uBAAC,cAAc,OACT,QAAe,KACf,mBAAmB,EACvB,GAAG,EAAE,MAAM,CAAC,mBAAmB,YAE9B,QAAQ,GACM,GACF,EACjB,uBAAC,sBAAa,OAAK,WAAW,YAC5B,wBAAC,uBAAc,IAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,KAAM,YAAY,aAEtH,kBAAU,CAAC,UAAU,CAAC,OAAO,CAAC;gCAC5B,CAAC,CAAC,uBAAC,OAAO,OACJ,QAAQ,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,MAAM,GACtB;gCACF,CAAC,CAAC,OAAO,EAEb,uBAAC,qBAAY,OACP,UAAU,EACd,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,IACa,GACH,IACD,GAEA,CACpB,CAAA;AACH,CAAC,CAAA;AAvIY,QAAA,OAAO,WAuInB;AAED,eAAO,CAAC,iBAAiB,GAAG,SAAS,CAAA;AAErC,eAAO,CAAC,QAAQ,GAAG;IACjB,SAAS;IACT,OAAO;IACP,gBAAgB;IAChB,qBAAqB;CACtB,CAAA;AAED,eAAO,CAAC,WAAW,GAAG,SAAS,CAAA;AAE/B,eAAO,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IAC5D,OAAO,eAA6E,CAAA;AACtF,CAAC,CAAA;AAED,eAAO,CAAC,YAAY,GAAG;IACrB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,CAAC;IAChB,mBAAmB,EAAE,KAAK;IAC1B,IAAI,EAAE,QAAQ;IACd,cAAc,EAAE,WAAoC;CAC5B,CAAA;AAE1B,mCAAgB,CAAC,iBAAiB,CAAC,eAAO,CAAC,CAAA"}

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=styles.js.map

package/dist/components/Tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.ts"],"names":[],"mappings":""}

package/dist/components/Tooltip/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/Tooltip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":""}

package/dist/components/Touchable/index.js

@@ -0,0 +1,100 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Touchable = Touchable;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("@codeleap/hooks");
+const types_1 = require("@codeleap/types");
+const react_1 = __importDefault(require("react"));
+const lib_1 = require("../../lib");
+const test_1 = require("../../lib/utils/test");
+const useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+const WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+/**
+ * Click wrapper that normalises keyboard Enter presses as clicks, debounces
+ * repeated presses, propagates analytics events, and applies disabled state.
+ * Uses: `useStylesFor`, `WebStyleRegistry`
+ */
+function Touchable(touchableProps) {
+    const allProps = {
+        ...Touchable.defaultProps,
+        ...touchableProps,
+    };
+    const { propagate, debounce, leadingDebounce, component, disabled, onPress, onClick, debugName, debugComponent, style, analyticsEnabled, analyticsName, analyticsData, ref, ...props } = allProps;
+    const styles = (0, useStylesFor_1.useStylesFor)(Touchable.styleRegistryName, style);
+    const pressed = react_1.default.useRef(!!leadingDebounce);
+    (0, hooks_1.onMount)(() => {
+        if (!!leadingDebounce && !!debounce) {
+            setTimeout(() => {
+                pressed.current = false;
+            }, debounce);
+        }
+    });
+    const Component = component;
+    const notPressable = !types_1.TypeGuards.isFunction(onPress) && !types_1.TypeGuards.isFunction(onClick);
+    const handleClick = (event) => {
+        if (disabled)
+            return;
+        if (!propagate)
+            (0, lib_1.stopPropagation)(event);
+        if (notPressable)
+            return;
+        const _onPress = () => {
+            if (event && (event?.type !== 'click' && event?.keyCode !== 13 && event?.key !== 'Enter'))
+                return null;
+            if (types_1.TypeGuards.isFunction(onClick))
+                onClick?.(event);
+            onPress?.();
+        };
+        if (types_1.TypeGuards.isNumber(debounce)) {
+            if (pressed.current) {
+                return;
+            }
+            pressed.current = true;
+            _onPress();
+            setTimeout(() => {
+                pressed.current = false;
+            }, debounce);
+        }
+        else {
+            _onPress();
+        }
+    };
+    const testId = (0, test_1.getTestId)(allProps);
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, disabled: disabled, onClick: handleClick, onKeyDown: handleClick, "aria-disabled": disabled || undefined, ref: ref, css: [
+            styles.wrapper,
+            disabled && styles?.['wrapper:disabled'],
+        ], "data-testid": testId }));
+}
+Touchable.styleRegistryName = 'Touchable';
+Touchable.elements = ['wrapper'];
+Touchable.rootElement = 'wrapper';
+Touchable.defaultProps = {
+    propagate: true,
+    debounce: null,
+    component: 'button',
+    analyticsEnabled: false,
+    analyticsName: null,
+    analyticsData: {},
+    tabIndex: 0,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(Touchable);
+//# sourceMappingURL=index.js.map

package/dist/components/Touchable/index.js.map

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

package/dist/components/Touchable/styles.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=styles.js.map

package/dist/components/Touchable/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Touchable/styles.ts"],"names":[],"mappings":""}

package/dist/components/Touchable/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/Touchable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Touchable/types.ts"],"names":[],"mappings":""}

package/dist/components/View/index.js

@@ -0,0 +1,56 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.View = View;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const types_1 = require("@codeleap/types");
+const react_1 = require("motion/react");
+const test_1 = require("../../lib/utils/test");
+const useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+const WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+/**
+ * Generic layout wrapper that renders any DOM element with responsive styling,
+ * hover callbacks, and optional Framer Motion animation.
+ * Uses: `useStylesFor`, `WebStyleRegistry`
+ */
+function View(viewProps) {
+    const { component, children, is, not, up, onHover, debugName, down, style, animated, animatedProps, ref, ...props } = {
+        ...View.defaultProps,
+        ...viewProps,
+    };
+    const styles = (0, useStylesFor_1.useStylesFor)(View.styleRegistryName, style);
+    const Component = animated ? (react_1.motion?.[component] || react_1.motion.div) : (component || 'div');
+    function handleHover(isMouseOverElement) {
+        onHover?.(isMouseOverElement);
+    }
+    const hoverProps = types_1.TypeGuards.isFunction(onHover) && {
+        onMouseEnter: () => handleHover(true),
+        onMouseLeave: () => handleHover(false),
+    };
+    const testId = (0, test_1.getTestId)(viewProps);
+    return ((0, jsx_runtime_1.jsx)(Component, { ...hoverProps, ...props, ...animatedProps, ref: ref, "data-testid": testId, css: styles.wrapper, children: children }));
+}
+View.styleRegistryName = 'View';
+View.elements = ['wrapper'];
+View.rootElement = 'wrapper';
+View.defaultProps = {
+    component: 'div',
+    animated: false,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(View);
+//# sourceMappingURL=index.js.map

package/dist/components/View/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/View/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA,oBA+CC;;AAhED,2CAA4C;AAE5C,wCAAqC;AAErC,+CAAgD;AAChD,+DAA2D;AAC3D,iEAA6D;AAG7D,2CAAwB;AACxB,0CAAuB;AAEvB;;;;GAIG;AACH,SAAgB,IAAI,CAAwB,SAAuB;IACjE,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,EAAE,EACF,GAAG,EACH,EAAE,EACF,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,GAAG;QACF,GAAG,IAAI,CAAC,YAAY;QACpB,GAAG,SAAS;KACb,CAAA;IAED,MAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE1D,MAAM,SAAS,GAAQ,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAM,EAAE,CAAC,SAAmB,CAAC,IAAI,cAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAA;IAEtG,SAAS,WAAW,CAAC,kBAA2B;QAC9C,OAAO,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC/B,CAAC;IAED,MAAM,UAAU,GAAG,kBAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;QACnD,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;QACrC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;KACvC,CAAA;IAED,MAAM,MAAM,GAAG,IAAA,gBAAS,EAAC,SAAS,CAAC,CAAA;IAEnC,OAAO,CACL,uBAAC,SAAS,OACJ,UAAU,KACV,KAAK,KACL,aAAa,EACjB,GAAG,EAAE,GAAG,iBACK,MAAM,EACnB,GAAG,EAAE,MAAM,CAAC,OAAO,YAElB,QAAQ,GACC,CACb,CAAA;AACH,CAAC;AAED,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAA;AAC3B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAG5B,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;CACM,CAAA;AAEvB,mCAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA"}

package/dist/components/View/styles.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=styles.js.map

package/dist/components/View/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/View/styles.ts"],"names":[],"mappings":""}

package/dist/components/View/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/View/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/View/types.ts"],"names":[],"mappings":""}

package/dist/components/components.js

@@ -0,0 +1,58 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./View"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Touchable"), exports);
+__exportStar(require("./Text"), exports);
+__exportStar(require("./Slider"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./ActivityIndicator"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Collapse"), exports);
+__exportStar(require("./Drawer"), exports);
+__exportStar(require("./Overlay"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./MaskedTextInput"), exports);
+__exportStar(require("./RadioInput"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./FileInput"), exports);
+__exportStar(require("./Slider"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./LoadingOverlay"), exports);
+__exportStar(require("./Switch"), exports);
+__exportStar(require("./NumberIncrement"), exports);
+__exportStar(require("./SearchInput"), exports);
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./Field"), exports);
+__exportStar(require("./Carousel"), exports);
+__exportStar(require("./EmptyPlaceholder"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./CropPicker"), exports);
+__exportStar(require("./Calendar"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./Dropzone"), exports);
+__exportStar(require("./Progress"), exports);
+__exportStar(require("./Tag"), exports);
+__exportStar(require("./TextEditor"), exports);
+__exportStar(require("./ColorPicker"), exports);
+__exportStar(require("./PaginationButtons"), exports);
+__exportStar(require("./SectionFilters"), exports);
+__exportStar(require("./PaginationIndicator"), exports);
+__exportStar(require("./Carousel"), exports);
+//# sourceMappingURL=components.js.map

package/dist/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,yCAAsB;AACtB,8CAA2B;AAC3B,yCAAsB;AACtB,2CAAwB;AACxB,yCAAsB;AACtB,sDAAmC;AACnC,2CAAwB;AACxB,0CAAuB;AACvB,6CAA0B;AAC1B,6CAA0B;AAC1B,2CAAwB;AACxB,4CAAyB;AACzB,8CAA2B;AAC3B,oDAAiC;AACjC,+CAA4B;AAC5B,2CAAwB;AACxB,8CAA2B;AAC3B,2CAAwB;AACxB,yCAAsB;AACtB,mDAAgC;AAChC,2CAAwB;AACxB,oDAAiC;AACjC,gDAA6B;AAC7B,4CAAyB;AACzB,0CAAuB;AACvB,6CAA0B;AAC1B,qDAAkC;AAClC,0CAAuB;AACvB,+CAA4B;AAC5B,6CAA0B;AAC1B,+CAA4B;AAC5B,6CAA0B;AAC1B,6CAA0B;AAC1B,wCAAqB;AACrB,+CAA4B;AAC5B,gDAA6B;AAC7B,sDAAmC;AACnC,mDAAgC;AAChC,wDAAqC;AACrC,6CAA0B"}

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/components"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./lib"), exports);
+__exportStar(require("./lib/WebStyleRegistry"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAuC;AACvC,0CAAuB;AACvB,wCAAqB;AACrB,yDAAsC"}

package/dist/lib/ListMasonry.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMasonryReload = void 0;
+exports.MasonryComponent = MasonryComponent;
+exports.ListMasonry = ListMasonry;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const window_size_1 = require("@react-hook/window-size");
+const types_1 = require("@codeleap/types");
+const EmptyPlaceholder_1 = require("../components/EmptyPlaceholder");
+const masonic_1 = require("masonic");
+function fillItems(arr, toCount, fillContent = {}) {
+    if (!arr || !types_1.TypeGuards.isArray(arr))
+        return [];
+    if (toCount === arr?.length)
+        return arr;
+    const diff = toCount - arr?.length;
+    if (diff < 0)
+        return arr;
+    const right = Array(diff).fill(fillContent);
+    return arr.concat(right);
+}
+const useMasonryReload = (args) => {
+    const { data, reloadTimeout = 350, } = args;
+    const [reloadingLayout, setReloadingLayout] = react_1.default.useState(false);
+    const previousLengthRef = react_1.default.useRef(data?.length ?? 0);
+    const updater = () => {
+        previousLengthRef.current = (data?.length ?? 0);
+    };
+    react_1.default.useEffect(() => {
+        if (previousLengthRef.current > data?.length) {
+            setReloadingLayout(true);
+            setTimeout(() => {
+                updater();
+                setTimeout(() => {
+                    setReloadingLayout(false);
+                }, reloadTimeout);
+            }, reloadTimeout);
+        }
+        else {
+            updater();
+        }
+    }, [data?.length]);
+    return {
+        reloadingLayout,
+        setReloadingLayout,
+        previousLength: previousLengthRef.current,
+    };
+};
+exports.useMasonryReload = useMasonryReload;
+function MasonryComponent(props) {
+    const containerRef = react_1.default.useRef(null);
+    const windowSize = (0, window_size_1.useWindowSize)({
+        initialWidth: props?.ssrWidth,
+        initialHeight: props?.ssrHeight,
+    });
+    const containerPosition = (0, masonic_1.useContainerPosition)(containerRef, windowSize);
+    const listProps = Object.assign({
+        offset: containerPosition?.offset,
+        width: containerPosition?.width || containerRef?.current?.clientWidth || windowSize?.[0],
+        height: windowSize?.[1],
+        containerRef,
+        scrollFps: props?.scrollFps || 12,
+    }, props);
+    const positioner = (0, masonic_1.usePositioner)({
+        width: listProps?.width,
+        columnGutter: listProps?.columnGutter,
+        columnWidth: listProps?.columnWidth,
+        columnCount: listProps?.columnCount,
+        maxColumnCount: listProps?.columnCount,
+        rowGutter: listProps?.rowGutter
+    });
+    const { scrollTop, isScrolling } = (0, masonic_1.useScroller)(listProps?.offset, listProps?.scrollFps);
+    const resizeObserver = (0, masonic_1.useResizeObserver)(positioner);
+    return (0, masonic_1.useMasonry)({
+        ...listProps,
+        resizeObserver,
+        positioner,
+        scrollTop,
+        isScrolling,
+        items: fillItems(props?.items, props?.previousItemsLength)
+    });
+}
+function ListMasonry(props) {
+    if (props?.reloadingLayout) {
+        return ((0, jsx_runtime_1.jsx)(EmptyPlaceholder_1.EmptyPlaceholder, { loading: true, title: '', description: null }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(MasonryComponent, { ...props, items: props?.items || [] }));
+    }
+}
+//# sourceMappingURL=ListMasonry.js.map

package/dist/lib/ListMasonry.js.map

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

package/dist/lib/ThemeVariables.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSchemeFoucScript = exports.ThemeVariables = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const styles_1 = require("@codeleap/styles");
+const toDeclarations = (vars) => Object.entries(vars).map(([n, v]) => `  ${n}: ${v};`).join('\n');
+const ThemeVariables = ({ theme }) => {
+    const defaultVars = theme.getCssVariables();
+    const alternateColors = theme.alternateColors ?? {};
+    const blocks = [
+        `:root {\n${toDeclarations(defaultVars)}\n}`,
+        `[data-color-scheme="light"] {\n${toDeclarations(defaultVars)}\n}`,
+    ];
+    for (const scheme of Object.keys(alternateColors)) {
+        const vars = theme.getCssVariables(scheme);
+        if (scheme === 'dark') {
+            blocks.push(`@media (prefers-color-scheme: dark) {\n  :root:not([data-color-scheme="light"]) {\n${toDeclarations(vars)}\n  }\n}`);
+        }
+        blocks.push(`[data-color-scheme="${scheme}"] {\n${toDeclarations(vars)}\n}`);
+    }
+    return (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: blocks.join('\n\n') } });
+};
+exports.ThemeVariables = ThemeVariables;
+const FOUC_SCRIPT = `(function(){try{var s=localStorage.getItem('${styles_1.DOM_COLOR_SCHEME_KEY}');if(s&&s!=='default')document.documentElement.dataset.colorScheme=s;}catch(e){}})()`;
+const ColorSchemeFoucScript = () => ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: FOUC_SCRIPT } }));
+exports.ColorSchemeFoucScript = ColorSchemeFoucScript;
+//# sourceMappingURL=ThemeVariables.js.map

package/dist/lib/ThemeVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeVariables.js","sourceRoot":"","sources":["../../src/lib/ThemeVariables.tsx"],"names":[],"mappings":";;;;AACA,6CAAuD;AAOvD,MAAM,cAAc,GAAG,CAAC,IAA4B,EAAE,EAAE,CACtD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAE3D,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAkC,EAAE,EAAE;IAC1E,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,EAAE,CAAA;IAC3C,MAAM,eAAe,GAAG,KAAK,CAAC,eAAe,IAAI,EAAE,CAAA;IAEnD,MAAM,MAAM,GAAa;QACvB,YAAY,cAAc,CAAC,WAAW,CAAC,KAAK;QAC5C,kCAAkC,cAAc,CAAC,WAAW,CAAC,KAAK;KACnE,CAAA;IAED,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,MAAM,CAAC,IAAI,CACT,sFAAsF,cAAc,CAAC,IAAI,CAAC,UAAU,CACrH,CAAA;QACH,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,uBAAuB,MAAM,SAAS,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9E,CAAC;IAED,OAAO,kCAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAI,CAAA;AAC5E,CAAC,CAAA;AApBY,QAAA,cAAc,kBAoB1B;AAED,MAAM,WAAW,GAAG,+CAA+C,6BAAoB,uFAAuF,CAAA;AAEvK,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CACzC,mCAAQ,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,GAAI,CAC7D,CAAA;AAFY,QAAA,qBAAqB,yBAEjC"}

package/dist/lib/WebStyleRegistry.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebStyleRegistry = void 0;
+const styles_1 = require("@codeleap/styles");
+const persistor = new styles_1.StylePersistor({
+    set(key, value) {
+        if (typeof window === 'undefined')
+            return null;
+        return localStorage?.setItem(key, value);
+    },
+    get(key) {
+        if (typeof window === 'undefined')
+            return null;
+        return localStorage?.getItem(key);
+    },
+    del(key) {
+        if (typeof window === 'undefined')
+            return null;
+        return localStorage?.removeItem(key);
+    },
+});
+let instance;
+const components = [];
+/**
+ * Singleton style registry for the web platform.
+ *
+ * Extends `CodeleapStyleRegistry` with localStorage-backed style persistence
+ * and a variant-element map that tracks which HTML element tag should be used
+ * for each component variant.
+ *
+ * Only one instance exists per JS runtime. The first `new WebStyleRegistry()`
+ * call creates the instance; subsequent calls return the same object. Components
+ * register themselves via the static `WebStyleRegistry.registerComponent()` —
+ * call this at module level so registrations survive before the registry is
+ * instantiated (they are replayed on construction).
+ *
+ * Access the live singleton via `WebStyleRegistry.current`.
+ */
+class WebStyleRegistry extends styles_1.CodeleapStyleRegistry {
+    variantElements = {};
+    constructor() {
+        super(persistor);
+        components.forEach((component) => {
+            this.registerComponent(component);
+        });
+        if (!instance) {
+            instance = this;
+        }
+        return instance;
+    }
+    /** Registers the HTML element tag to render for each variant of a component (e.g. `{ h1: 'h1', p: 'p' }`). */
+    registerVariantElements(componentName, elements) {
+        this.variantElements[componentName] = elements;
+    }
+    /** Returns the element tag registered for the given component variant, or `undefined` if none was registered. */
+    variantElementFor(componentName, variantName) {
+        return this.variantElements[componentName]?.[variantName];
+    }
+    createStyle(css) {
+        return css;
+    }
+    static get current() {
+        return instance;
+    }
+    static registerComponent(component) {
+        components.push(component);
+        if (instance) {
+            instance.registerComponent(component);
+        }
+    }
+}
+exports.WebStyleRegistry = WebStyleRegistry;
+//# sourceMappingURL=WebStyleRegistry.js.map