@codeleap/web 4.1.0 → 4.2.1

package/dist/components/Checkbox/index.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var InputBase_1 = require("../InputBase");
+var __1 = require("../..");
+var Icon_1 = require("../Icon");
+var framer_motion_1 = require("framer-motion");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var styles_1 = require("@codeleap/styles");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+var common_1 = require("@codeleap/common");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+var reversedOrder = __spreadArray([], InputBase_1.InputBaseDefaultOrder, true).reverse();
+var Checkbox = function (props) {
+    var _a;
+    var _b = (0, InputBase_1.selectInputBaseProps)(__assign(__assign({}, exports.Checkbox.defaultProps), props)), inputBaseProps = _b.inputBaseProps, checkboxProps = _b.others;
+    var style = checkboxProps.style, value = checkboxProps.value, disabled = checkboxProps.disabled, debugName = checkboxProps.debugName, onValueChange = checkboxProps.onValueChange, checkboxOnLeft = checkboxProps.checkboxOnLeft, checkIcon = checkboxProps.checkIcon;
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.Checkbox.styleRegistryName, style);
+    var boxAnimation = (0, __1.useAnimatedVariantStyles)({
+        variantStyles: styles,
+        animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
+        updater: function () {
+            'worklet';
+            var disabledStyle = {};
+            if (disabled) {
+                disabledStyle = value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked'];
+            }
+            var style = value ? styles['box:checked'] : styles['box:unchecked'];
+            return __assign(__assign({}, style), disabledStyle);
+        },
+        dependencies: [value, disabled],
+    });
+    var checkmarkWrapperAnimation = (0, __1.useAnimatedVariantStyles)({
+        variantStyles: styles,
+        animatedProperties: [
+            'checkmarkWrapper:unchecked',
+            'checkmarkWrapper:disabled',
+            'checkmarkWrapper:checked',
+            'checkmarkWrapper:disabled-unchecked',
+            'checkmarkWrapper:disabled-checked',
+        ],
+        updater: function () {
+            'worklet';
+            var disabledStyle = {};
+            if (disabled) {
+                disabledStyle = value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked'];
+            }
+            var style = value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked'];
+            return __assign(__assign({}, style), disabledStyle);
+        },
+        dependencies: [value, disabled],
+    });
+    // @ts-expect-error __props is ICSS
+    var _checkboxOnLeft = checkboxOnLeft !== null && checkboxOnLeft !== void 0 ? checkboxOnLeft : (_a = styles === null || styles === void 0 ? void 0 : styles.__props) === null || _a === void 0 ? void 0 : _a.checkboxOnLeft;
+    var handleChange = function (e) {
+        if (disabled)
+            return;
+        if (!common_1.TypeGuards.isFunction(onValueChange))
+            return;
+        var isSpaceBarClick = (e === null || e === void 0 ? void 0 : e.keyCode) === 32;
+        var isEnterKey = (e === null || e === void 0 ? void 0 : e.key) === 'Enter';
+        var isClick = (e === null || e === void 0 ? void 0 : e.type) === 'click';
+        if (isClick || (e === null || e === void 0 ? void 0 : e.keyCode) === 13 || isSpaceBarClick || isEnterKey) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(!value);
+        }
+    };
+    var getStyles = function (key) { return (0, styles_1.mergeStyles)([
+        styles[key],
+        disabled ? styles[key + ':disabled'] : null,
+    ]); };
+    var componentStyles = {
+        box: getStyles('box'),
+        checkmarkWrapper: getStyles('checkmarkWrapper'),
+        checkmark: getStyles('checkmark'),
+    };
+    return ((0, jsx_runtime_1.jsx)(InputBase_1.InputBase, __assign({}, inputBaseProps, { debugName: debugName, style: styles, order: _checkboxOnLeft ? reversedOrder : InputBase_1.InputBaseDefaultOrder }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ style: componentStyles.box, initial: false, animate: boxAnimation, transition: styles['box:transition'], onClick: handleChange, onKeyDown: handleChange, tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ style: componentStyles.checkmarkWrapper, initial: false, animate: checkmarkWrapperAnimation, transition: styles['checkmarkWrapper:transition'] }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { debugName: debugName, name: checkIcon, style: componentStyles.checkmark }) })) })) })));
+};
+exports.Checkbox = Checkbox;
+exports.Checkbox.styleRegistryName = 'Checkbox';
+exports.Checkbox.elements = __spreadArray(__spreadArray([], InputBase_1.InputBase.elements, true), ['checkmarkWrapper', 'checkmark', 'box', '__props'], false);
+exports.Checkbox.rootElement = 'wrapper';
+exports.Checkbox.withVariantTypes = function (styles) {
+    return exports.Checkbox;
+};
+exports.Checkbox.defaultProps = {
+    checkIcon: 'check',
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.Checkbox);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Checkbox/styles.d.ts

@@ -0,0 +1,7 @@
+import { InputBaseParts, InputBaseStates } from '../InputBase';
+type AnimatableParts = 'checkmarkWrapper' | 'box';
+export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark';
+export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked';
+export type CheckboxStates = InputBaseStates;
+export type CheckboxComposition = CheckboxParts | `${CheckboxParts}:${CheckboxStates}` | `${AnimatableParts}:transition` | `${AnimatableParts}:${CheckboxAnimationStates}` | '__props';
+export {};

package/dist/components/Checkbox/styles.js

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

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

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

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,11 @@
+import { CheckboxComposition } from './styles';
+import { InputBaseProps } from '../InputBase';
+import { ComponentCommonProps } from '../../types';
+import { AppIcon, StyledProp } from '@codeleap/styles';
+export type CheckboxProps = Pick<InputBaseProps, 'disabled' | 'label'> & ComponentCommonProps & {
+    style?: StyledProp<CheckboxComposition>;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    checkboxOnLeft?: boolean;
+    checkIcon?: AppIcon;
+};

package/dist/components/Checkbox/types.js

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

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

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

package/dist/components/Collapse/index.d.ts

@@ -0,0 +1,12 @@
+import { CollapseProps } from './types';
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const Collapse: {
+    (props: CollapseProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    styleRegistryName: string;
+    elements: string[];
+    rootElement: string;
+    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<CollapseProps, S>) => IJSX;
+    defaultProps: Partial<CollapseProps>;
+};

package/dist/components/Collapse/index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapse = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+var framer_motion_1 = require("framer-motion");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+var Collapse = function (props) {
+    var _a = __assign(__assign({}, exports.Collapse.defaultProps), props), open = _a.open, children = _a.children, style = _a.style, rest = __rest(_a, ["open", "children", "style"]);
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.Collapse.styleRegistryName, style);
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ initial: false, animate: { height: open ? 'auto' : 0, opacity: open ? 1 : 0 }, transition: { duration: 0.2 } }, rest, { style: open ? styles === null || styles === void 0 ? void 0 : styles['wrapper:open'] : styles === null || styles === void 0 ? void 0 : styles['wrapper:closed'], 
+        // @ts-expect-error css type
+        css: [styles.wrapper, open ? styles === null || styles === void 0 ? void 0 : styles['wrapper:open'] : styles === null || styles === void 0 ? void 0 : styles['wrapper:closed']] }, { children: children })));
+};
+exports.Collapse = Collapse;
+exports.Collapse.styleRegistryName = 'Collapse';
+exports.Collapse.elements = ['wrapper'];
+exports.Collapse.rootElement = 'wrapper';
+exports.Collapse.withVariantTypes = function (styles) {
+    return exports.Collapse;
+};
+exports.Collapse.defaultProps = {};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.Collapse);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Collapse/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,6DAA2D;AAE3D,+DAA6D;AAC7D,+CAAsC;AAEtC,2CAAwB;AACxB,0CAAuB;AAEhB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IAC3C,IAAM,2BAMD,gBAAQ,CAAC,YAAY,GACrB,KAAK,CACT,EAPC,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAJH,6BAKL,CAGA,CAAA;IAED,IAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,gBAAQ,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE9D,OAAO,CACL,uBAAC,sBAAM,CAAC,GAAG,aACT,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC7D,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IACzB,IAAI,IACR,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,gBAAgB,CAAC;QACnE,4BAA4B;QAC5B,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,gBAAgB,CAAC,CAAC,gBAElF,QAAQ,IACE,CACd,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,QAAQ,YA0BpB;AAED,gBAAQ,CAAC,iBAAiB,GAAG,UAAU,CAAA;AACvC,gBAAQ,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAA;AAC/B,gBAAQ,CAAC,WAAW,GAAG,SAAS,CAAA;AAEhC,gBAAQ,CAAC,gBAAgB,GAAG,UAAsB,MAAS;IACzD,OAAO,gBAA+E,CAAA;AACxF,CAAC,CAAA;AAED,gBAAQ,CAAC,YAAY,GAAG,EAA4B,CAAA;AAEpD,mCAAgB,CAAC,iBAAiB,CAAC,gBAAQ,CAAC,CAAA"}

package/dist/components/Collapse/styles.d.ts

@@ -0,0 +1,4 @@
+type CollapseState = 'open' | 'closed';
+type CollapseParts = 'wrapper';
+export type CollapseComposition = CollapseParts | `${CollapseParts}:${CollapseState}`;
+export {};

package/dist/components/Collapse/styles.js

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

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

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

package/dist/components/Collapse/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StyledProp } from '@codeleap/styles';
+import { MotionProps } from 'framer-motion';
+import { CollapseComposition } from './styles';
+export type CollapseProps = Omit<MotionProps, 'style'> & {
+    open: boolean;
+    style?: StyledProp<CollapseComposition>;
+    children?: React.ReactNode;
+};

package/dist/components/Collapse/types.js

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

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

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

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,12 @@
+import { ColorPickerProps } from './types';
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
+export * from './styles';
+export * from './types';
+export declare const ColorPicker: {
+    (props: ColorPickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    styleRegistryName: string;
+    elements: string[];
+    rootElement: string;
+    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<ColorPickerProps, S>) => IJSX;
+    defaultProps: Partial<ColorPickerProps>;
+};

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.ColorPicker = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("react");
+var components_1 = require("../components");
+var react_colorful_1 = require("react-colorful");
+var common_1 = require("@codeleap/common");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+var DefaultFooter = function (props) {
+    var styles = props.styles, clearIcon = props.clearIcon, handleClear = props.handleClear, confirmIcon = props.confirmIcon, handleConfirmation = props.handleConfirmation;
+    return ((0, jsx_runtime_1.jsxs)(components_1.View, __assign({ style: styles.footerWrapper }, { children: [(0, jsx_runtime_1.jsx)(components_1.ActionIcon, { debugName: 'ColorPicker footer trash', name: clearIcon, onPress: handleClear, style: styles.clearIcon }), (0, jsx_runtime_1.jsx)(components_1.ActionIcon, { debugName: 'ColorPicker footer check', name: confirmIcon, onPress: handleConfirmation, style: styles.confirmIcon })] })));
+};
+var ColorPicker = function (props) {
+    var _a = __assign(__assign({}, exports.ColorPicker.defaultProps), props), isPlain = _a.isPlain, initialColor = _a.initialColor, showFooter = _a.showFooter, icon = _a.icon, style = _a.style, clearIcon = _a.clearIcon, confirmIcon = _a.confirmIcon, onConfirm = _a.onConfirm, onClear = _a.onClear, closeOnConfirm = _a.closeOnConfirm, PickerComponent = _a.pickerComponent, OpenPickerComponent = _a.openPickerComponent, FooterComponent = _a.footerComponent, openPickerProps = _a.openPickerProps;
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.ColorPicker.styleRegistryName, style);
+    var _b = (0, common_1.useConditionalState)(props === null || props === void 0 ? void 0 : props.visible, props === null || props === void 0 ? void 0 : props.toggle, { initialValue: false }), visible = _b[0], toggle = _b[1];
+    var _c = (0, common_1.useState)(initialColor), color = _c[0], setColor = _c[1];
+    var handleConfirmation = (0, react_1.useCallback)(function (color) {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(color);
+        if (closeOnConfirm)
+            toggle(false);
+    }, []);
+    var handleClear = (0, react_1.useCallback)(function (initialColor) {
+        setColor(initialColor);
+        if (common_1.TypeGuards.isFunction(onClear))
+            onClear === null || onClear === void 0 ? void 0 : onClear();
+    }, []);
+    // Dragging to change the color in any other way does not seem to work for some reason.
+    var picker = (0, jsx_runtime_1.jsx)(components_1.View, __assign({ style: styles.picker }, { children: (0, jsx_runtime_1.jsx)(PickerComponent, { color: color, onChange: setColor }) }));
+    var openColorPickerBtn = !!OpenPickerComponent ? ((0, jsx_runtime_1.jsx)(OpenPickerComponent, { color: color, visible: visible, toggle: function () { return toggle(!visible); } })) : ((0, jsx_runtime_1.jsx)(components_1.ActionIcon, __assign({ onPress: function () { return toggle(!visible); }, icon: icon }, openPickerProps)));
+    return ((0, jsx_runtime_1.jsx)(components_1.View, __assign({ style: styles.wrapper }, { children: isPlain ? picker : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openColorPickerBtn, (0, jsx_runtime_1.jsx)(components_1.Collapse, __assign({ open: visible, style: [
+                        styles.dropdown,
+                        visible && styles['dropdown:open'],
+                    ] }, { children: (0, jsx_runtime_1.jsxs)(components_1.View, __assign({ style: styles.dropdownInnerWrapper }, { children: [picker, showFooter ? ((0, jsx_runtime_1.jsx)(FooterComponent, { color: color, handleConfirmation: function () { return handleConfirmation(color); }, handleClear: function () { return handleClear(initialColor); }, styles: styles, clearIcon: clearIcon, confirmIcon: confirmIcon })) : null] })) }))] })) })));
+};
+exports.ColorPicker = ColorPicker;
+exports.ColorPicker.styleRegistryName = 'ColorPicker';
+exports.ColorPicker.elements = ['wrapper', 'picker', 'dropdown', 'dropdownInnerWrapper', 'footerWrapper', 'clearIcon', 'confirmIcon'];
+exports.ColorPicker.rootElement = 'wrapper';
+exports.ColorPicker.withVariantTypes = function (styles) {
+    return exports.ColorPicker;
+};
+exports.ColorPicker.defaultProps = {
+    pickerComponent: function (props) { return (0, jsx_runtime_1.jsx)(react_colorful_1.HexColorPicker, __assign({}, props)); },
+    footerComponent: DefaultFooter,
+    icon: 'edit',
+    clearIcon: 'trash',
+    confirmIcon: 'check',
+    showFooter: true,
+    isPlain: false,
+    closeOnConfirm: true,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.ColorPicker);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ColorPicker/styles.d.ts

@@ -0,0 +1,4 @@
+type ColorPickerState = 'open';
+export type ColorPickerParts = 'wrapper' | 'picker' | 'dropdown' | `dropdown:${ColorPickerState}` | 'dropdownInnerWrapper' | 'footerWrapper' | 'clearIcon' | 'confirmIcon';
+export type ColorPickerComposition = ColorPickerParts;
+export {};

package/dist/components/ColorPicker/styles.js

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

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

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

package/dist/components/ColorPicker/types.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ActionIconProps, ColorPickerComposition } from '../components';
+import { AppIcon, ICSS, StyledProp } from '@codeleap/styles';
+import { RgbColor, RgbaColor, HslColor, HsvColor, HslaColor, HsvaColor } from 'react-colorful';
+export type ColorTypes = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string;
+export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'clearIcon'> & {
+    color?: ColorTypes;
+    handleConfirmation: (value: ColorTypes) => void;
+    handleClear: (value: ColorTypes) => void;
+    styles: Record<ColorPickerComposition, ICSS>;
+};
+export type ColorPickerPickerProps = {
+    color: ColorTypes;
+    visible: boolean;
+    toggle: (v?: boolean) => void;
+};
+export type ColorPickerProps = {
+    style?: StyledProp<ColorPickerComposition>;
+    isPlain?: boolean;
+    closeOnConfirm?: boolean;
+    initialColor?: ColorTypes;
+    showFooter?: boolean;
+    icon?: AppIcon;
+    clearIcon?: AppIcon;
+    confirmIcon?: AppIcon;
+    openPickerProps?: ActionIconProps;
+    onConfirm?: (color: ColorTypes) => void;
+    onClear?: () => void;
+    openPickerComponent?: (props: ColorPickerPickerProps) => JSX.Element;
+    pickerComponent?: (props: any) => JSX.Element;
+    footerComponent?: (props: ColorPickerFooterProps) => JSX.Element;
+    visible?: boolean;
+    toggle?: React.Dispatch<React.SetStateAction<boolean>>;
+    children?: React.ReactNode;
+};

package/dist/components/ColorPicker/types.js

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

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

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

package/dist/components/CropPicker/index.d.ts

@@ -0,0 +1,6 @@
+import { StyledComponentWithProps } from '@codeleap/styles';
+import { CropPickerProps } from './types';
+import 'react-image-crop/dist/ReactCrop.css';
+export * from './styles';
+export * from './types';
+export declare const CropPicker: StyledComponentWithProps<CropPickerProps>;

package/dist/components/CropPicker/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CropPicker = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("@codeleap/styles");
+var lib_1 = require("../../lib");
+var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
+var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
+var FileInput_1 = require("../FileInput");
+var Modal_1 = require("../Modal");
+var Button_1 = require("../Button");
+var LoadingOverlay_1 = require("../LoadingOverlay");
+var ReactCrop = require('react-image-crop').Component;
+require("react-image-crop/dist/ReactCrop.css");
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);
+exports.CropPicker = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = __assign(__assign({}, exports.CropPicker.defaultProps), props), onFileSelect = _a.onFileSelect, targetCrop = _a.targetCrop, modalProps = _a.modalProps, title = _a.title, confirmButton = _a.confirmButton, debugName = _a.debugName, handle = _a.handle, withLoading = _a.withLoading, style = _a.style, confirmButtonProps = _a.confirmButtonProps, fileInputProps = __rest(_a, ["onFileSelect", "targetCrop", "modalProps", "title", "confirmButton", "debugName", "handle", "withLoading", "style", "confirmButtonProps"]);
+    var _b = handle || (0, lib_1.useCropPicker)(__assign({ onFileSelect: onFileSelect, ref: ref }, targetCrop)), onConfirmCrop = _b.onConfirmCrop, onFilesReturned = _b.onFilesReturned, onClose = _b.onClose, fileInputRef = _b.fileInputRef, visible = _b.visible, image = _b.image, crop = _b.crop, setRelativeCrop = _b.setRelativeCrop, isLoading = _b.isLoading, handleCropChange = _b.handleCropChange;
+    var styles = (0, useStylesFor_1.useStylesFor)(exports.CropPicker.styleRegistryName, style);
+    var composition = (0, styles_1.useCompositionStyles)(['confirmButton', 'modal'], styles);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileInput_1.FileInput
+            // @ts-ignore
+            , __assign({ 
+                // @ts-ignore
+                ref: fileInputRef, onChange: function (files) { return onFilesReturned(files); } }, fileInputProps)), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ visible: visible, toggle: onClose, title: title, footer: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ text: confirmButton, style: composition === null || composition === void 0 ? void 0 : composition.confirmButton, onPress: onConfirmCrop, debugName: debugName }, confirmButtonProps)) }, modalProps, { style: composition === null || composition === void 0 ? void 0 : composition.modal }, { children: [!!(image === null || image === void 0 ? void 0 : image.src) ? ((0, jsx_runtime_1.jsx)(ReactCrop, __assign({ crop: crop, onChange: handleCropChange, onComplete: function (_, relCrop) { return setRelativeCrop(relCrop); } }, targetCrop, { style: styles.previewSize }, { children: (0, jsx_runtime_1.jsx)("img", { src: image === null || image === void 0 ? void 0 : image.src, 
+                            // @ts-expect-error
+                            css: [styles.cropPreview, styles.previewSize] }) }))) : null, withLoading ? (0, jsx_runtime_1.jsx)(LoadingOverlay_1.LoadingOverlay, { debugName: 'CropPicker', visible: isLoading }) : null] }))] }));
+});
+exports.CropPicker.styleRegistryName = 'CropPicker';
+exports.CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal'];
+exports.CropPicker.rootElement = 'previewSize';
+exports.CropPicker.withVariantTypes = function (styles) {
+    return exports.CropPicker;
+};
+exports.CropPicker.defaultProps = {
+    title: 'Crop Image',
+    confirmButton: 'Confirm Crop',
+    withLoading: false,
+};
+WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.CropPicker);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/CropPicker/styles.d.ts

@@ -0,0 +1,3 @@
+import { ButtonComposition } from '../Button';
+import { ModalComposition } from '../Modal';
+export type CropPickerComposition = 'cropPreview' | 'previewSize' | `confirmButton${Capitalize<ButtonComposition>}` | `modal${Capitalize<ModalComposition>}`;

package/dist/components/CropPicker/styles.js

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

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

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

package/dist/components/CropPicker/types.d.ts

@@ -0,0 +1,20 @@
+import { StyledProp } from '@codeleap/styles';
+import { FileInputProps } from '../FileInput';
+import { CropPickerComposition } from './styles';
+import { ReactCropProps } from 'react-image-crop';
+import { ModalProps } from '../Modal';
+import { useCropPicker } from '../../lib';
+import { ButtonProps } from '../Button';
+export type BaseCropProps = Partial<ReactCropProps>;
+export type CropPickerProps = Partial<FileInputProps> & {
+    style?: StyledProp<CropPickerComposition>;
+    targetCrop?: BaseCropProps;
+    modalProps?: Partial<ModalProps>;
+    title?: string;
+    confirmButton?: string;
+    debugName: string;
+    handle?: ReturnType<typeof useCropPicker>;
+    withLoading?: boolean;
+    confirmButtonProps?: Partial<ButtonProps>;
+};
+export type ImageReading = HTMLImageElement;

package/dist/components/CropPicker/types.js

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

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

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

package/dist/components/DatePicker/components/Header.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerArrowProps, DatePickerHeaderComponent } from '../types';
+export declare const ArrowLabel: ({ name, direction, ...props }: DatePickerArrowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Header: (props: DatePickerHeaderComponent) => import("@emotion/react/jsx-runtime").JSX.Element;