sea-react-components 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 mohammed-masri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# sea-react-components

package/dist/HOC/can-access-application/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CONSTANTS } from "sea-platform-helpers";
+export interface Props {
+    applicationKey: CONSTANTS.Application.ApplicationKeys;
+    fallback?: React.ReactNode;
+    hasApplicationAccess: (key: CONSTANTS.Application.ApplicationKeys) => boolean;
+}
+export default function CanAccessApplication<P>(WrappedComponent: React.ComponentType<P>, { applicationKey, fallback, hasApplicationAccess, }: Props): (props: P) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/HOC/can-access-application/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/HOC/can-access-application/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,cAAc,EAAE,SAAS,CAAC,WAAW,CAAC,eAAe,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,CAAC,eAAe,KAAK,OAAO,CAAC;CAC/E;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,CAAC,EAC5C,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACxC,EACE,cAAc,EACd,QAIC,EACD,oBAAoB,GACrB,EAAE,KAAK,WAEO,CAAC,6CAMjB"}

package/dist/HOC/can-access-application/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import NotAuthorized from "../../components/not-authorized";
+export default function CanAccessApplication(WrappedComponent, { applicationKey, fallback = (_jsx("div", { className: "flex items-center justify-center h-screen", children: _jsx(NotAuthorized, {}) })), hasApplicationAccess, }) {
+    return (props) => {
+        const canAccess = hasApplicationAccess(applicationKey);
+        if (!canAccess)
+            return _jsx(_Fragment, { children: fallback });
+        return _jsx(WrappedComponent, Object.assign({}, props));
+    };
+}

package/dist/HOC/with-authorization/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { CONSTANTS } from "sea-platform-helpers";
+type ValidationStrategy = "all" | "some" | "one";
+export interface Props {
+    requiredPermissions: string[];
+    strategy?: ValidationStrategy;
+    fallback?: React.ReactNode;
+    hasPermission: (key: CONSTANTS.Permission.PermissionKeys) => boolean;
+}
+export default function WithAuthorization<P>(WrappedComponent: React.ComponentType<P>, { requiredPermissions, strategy, fallback, hasPermission, }: Props): (props: P) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/HOC/with-authorization/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/HOC/with-authorization/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,KAAK,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;AAEjD,MAAM,WAAW,KAAK;IACpB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,cAAc,KAAK,OAAO,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACxC,EACE,mBAAmB,EACnB,QAAgB,EAChB,QAA4B,EAC5B,aAAa,GACd,EAAE,KAAK,WAEO,CAAC,6CAWjB"}

package/dist/HOC/with-authorization/index.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import NotAuthorized from "../../components/not-authorized";
+export default function WithAuthorization(WrappedComponent, { requiredPermissions, strategy = "all", fallback = _jsx(NotAuthorized, {}), hasPermission, }) {
+    return (props) => {
+        const isAuthorized = validatePermissions(requiredPermissions, strategy, hasPermission);
+        if (!isAuthorized)
+            return _jsx(_Fragment, { children: fallback });
+        return _jsx(WrappedComponent, Object.assign({}, props));
+    };
+}
+function validatePermissions(requiredPermissions, strategy, hasPermission) {
+    switch (strategy) {
+        case "all":
+            return requiredPermissions.every((key) => hasPermission(key));
+        case "some":
+            return requiredPermissions.some((key) => hasPermission(key));
+        case "one":
+            return (requiredPermissions.length > 0 && hasPermission(requiredPermissions[0]));
+        default:
+            return false;
+    }
+}

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

@@ -0,0 +1,12 @@
+export type Types = "primary" | "secondary" | "success" | "info" | "warning" | "error";
+export type Themes = "default" | "light";
+export type Props = {
+    message: string;
+    type: Types;
+    theme?: Themes;
+    showIcon?: boolean;
+    closeButton?: boolean;
+    handleClickCloseButton?: (() => void) | undefined;
+};
+export default function Alert({ message, type, closeButton, showIcon, theme, handleClickCloseButton, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GACb,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AA4CzC,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACnD,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,WAAkB,EAClB,QAAe,EACf,KAAiB,EACjB,sBAAkC,GACnC,EAAE,KAAK,2CAmCP"}

package/dist/components/alert/index.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from "../icon";
+import clsx from "clsx";
+import { useState } from "react";
+const colors = {
+    primary: {
+        bg: "bg-primary",
+        text: "text-primary",
+    },
+    secondary: {
+        bg: "bg-secondary",
+        text: "text-secondary",
+    },
+    success: {
+        bg: "bg-success",
+        text: "text-success",
+    },
+    info: {
+        bg: "bg-info",
+        text: "text-info",
+    },
+    warning: {
+        bg: "bg-warning",
+        text: "text-warning",
+    },
+    error: {
+        bg: "bg-error",
+        text: "text-error",
+    },
+};
+const icons = {
+    primary: "gg:info",
+    secondary: "gg:info",
+    success: "qlementine-icons:success-16",
+    info: "gg:info",
+    warning: "mi:warning",
+    error: "material-symbols:error-outline",
+};
+export default function Alert({ message, type, closeButton = true, showIcon = true, theme = "default", handleClickCloseButton = undefined, }) {
+    const [open, setOpen] = useState(true);
+    let className = colors[type].bg;
+    className = clsx(className, theme === "default" ? "text-white" : `${colors[type].text} bg-opacity-20`);
+    if (open)
+        return (_jsxs("div", { className: clsx("flex items-center gap-3 rounded-lg p-2", className), children: [showIcon && _jsx(Icon, { icon: icons[type], className: "h-5 w-5" }), _jsx("p", { className: "flex-1", children: message }), closeButton && (_jsx("button", { onClick: () => {
+                        setOpen(false);
+                        if (handleClickCloseButton) {
+                            handleClickCloseButton();
+                        }
+                    }, children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }))] }));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type Props = {
+    url?: string | undefined;
+    size?: AvatarSize;
+    alt: string;
+    placeholder?: string;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+export default function Avatar({ url, alt, size, placeholder, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AASnD,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAC9C,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,GAAG,EACH,GAAG,EACH,IAAW,EACX,WAAuC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,2CAeP"}

package/dist/components/avatar/index.js

@@ -0,0 +1,26 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { PROFILE_PLACEHOLDER_IMAGE } from "../../constants/index";
+const sizeValues = {
+    sm: 30,
+    md: 50,
+    lg: 70,
+    xl: 90,
+};
+export default function Avatar(_a) {
+    var { url, alt, size = "md", placeholder = PROFILE_PLACEHOLDER_IMAGE, className } = _a, props = __rest(_a, ["url", "alt", "size", "placeholder", "className"]);
+    const sizeValue = sizeValues[size];
+    url = url || placeholder;
+    return (_jsx("img", Object.assign({}, props, { src: url, alt: alt, width: sizeValue, height: sizeValue, className: clsx("object-cover", className) })));
+}

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

@@ -0,0 +1,8 @@
+export type Types = "primary" | "secondary" | "success" | "info" | "warning" | "error";
+export type Props = {
+    message: string;
+    type: Types;
+    theme?: "default" | "light";
+};
+export default function Badge({ message, type, theme }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,KAAK,GACb,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAmCZ,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAiB,EAAE,EAAE,KAAK,2CAiBxE"}

package/dist/components/badge/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const colors = {
+    primary: {
+        bg: "bg-primary",
+        text: "text-primary",
+    },
+    secondary: {
+        bg: "bg-secondary",
+        text: "text-secondary",
+    },
+    success: {
+        bg: "bg-success",
+        text: "text-success",
+    },
+    info: {
+        bg: "bg-info",
+        text: "text-info",
+    },
+    warning: {
+        bg: "bg-warning",
+        text: "text-warning",
+    },
+    error: {
+        bg: "bg-error",
+        text: "text-error",
+    },
+};
+export default function Badge({ message, type, theme = "default" }) {
+    let className = colors[type].bg;
+    className = clsx(className, theme === "default" ? "text-white" : `${colors[type].text} bg-opacity-20`);
+    return (_jsx("div", { className: clsx("flex items-center justify-center gap-3 rounded-lg px-3 py-1", className), children: message }));
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+export type Props = {
+    name: string;
+    children: React.ReactNode;
+};
+export default function Breadcrumb({ name, children }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAoB3D"}

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+import clsx from "clsx";
+import React from "react";
+export default function Breadcrumb({ name, children }) {
+    const items = React.Children.toArray(children); // Convert children to an array
+    return (_jsx("div", { className: "flex items-center gap-3", children: items.map((item, i) => (_jsxs("div", { className: clsx("flex items-center gap-3", i === items.length - 1 && "text-primary"), children: [_jsx("div", { children: item }), i < items.length - 1 && (_jsx(Icon, { icon: "ooui:next-ltr", className: "text-text" }))] }, `${name}-breadcrumb-${i}`))) }));
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+export type Props = {
+    loading?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export default function Button({ loading, disabled, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAClD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP"}

package/dist/components/button/index.js

@@ -0,0 +1,18 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "@iconify/react";
+export default function Button(_a) {
+    var { loading = false, disabled, className, children } = _a, props = __rest(_a, ["loading", "disabled", "className", "children"]);
+    return (_jsx("button", Object.assign({ className: clsx("px-2 py-1 rounded-lg disabled:bg-gray-200 text-white transition-all duration-300 ease-in-out flex items-center justify-center", !loading && !disabled && "hover:bg-opacity-70", className ? className : "bg-primary", disabled && "bg-gray-300"), disabled: disabled }, props, { children: loading ? (_jsx(Icon, { icon: "line-md:loading-loop", className: "w-6 h-6" })) : (children) })));
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+export type Props = {
+    name: string;
+    items: React.ReactNode[];
+    auto?: boolean;
+    duration?: number;
+    nextButton?: React.ReactNode;
+    previousButton?: React.ReactNode;
+    showNextPreviousButtons?: boolean;
+    dot?: React.ReactNode;
+    showDots?: boolean;
+    itemsPerSlide?: number;
+    dropAndDregControl?: boolean;
+    autoHeight?: boolean;
+};
+export default function Carousel({ name, items, auto, duration, nextButton, previousButton, showNextPreviousButtons, dot, showDots, itemsPerSlide, dropAndDregControl, autoHeight, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,IAAY,EACZ,QAAe,EACf,UAAU,EACV,cAAc,EACd,uBAA8B,EAC9B,GAAG,EACH,QAAe,EACf,aAAiB,EACjB,kBAA0B,EAC1B,UAAiB,GAClB,EAAE,KAAK,2CAyKP"}

package/dist/components/carousel/index.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+export default function Carousel({ name, items, auto = false, duration = 3000, nextButton, previousButton, showNextPreviousButtons = true, dot, showDots = true, itemsPerSlide = 1, dropAndDregControl = false, autoHeight = true, }) {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [carouselHeight, setCarouselHeight] = useState(null);
+    const intervalRef = useRef(null);
+    const carouselRef = useRef(null);
+    if (itemsPerSlide > items.length)
+        itemsPerSlide = items.length;
+    if (itemsPerSlide <= 0)
+        itemsPerSlide = 1;
+    const totalSlides = Math.ceil(items.length / itemsPerSlide);
+    if (totalSlides <= 1) {
+        showDots = false;
+        showNextPreviousButtons = false;
+    }
+    const goToSlide = (slide) => {
+        setCurrentSlide((slide + totalSlides) % totalSlides);
+    };
+    const nextSlide = () => goToSlide(currentSlide + 1);
+    const previousSlide = () => goToSlide(currentSlide - 1);
+    // Auto-slide functionality
+    useEffect(() => {
+        if (auto) {
+            intervalRef.current = setInterval(nextSlide, duration);
+        }
+        return () => {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, [auto, duration, currentSlide]);
+    // Drag functionality
+    useEffect(() => {
+        if (!dropAndDregControl || !carouselRef.current)
+            return;
+        let startX = 0;
+        let isDragging = false;
+        const onMouseDown = (e) => {
+            isDragging = true;
+            startX = e.pageX;
+        };
+        const onMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            if (startX - e.pageX > 50) {
+                nextSlide();
+                isDragging = false;
+            }
+            else if (startX - e.pageX < -50) {
+                previousSlide();
+                isDragging = false;
+            }
+        };
+        const onMouseUp = () => (isDragging = false);
+        const element = carouselRef.current;
+        element.addEventListener("mousedown", onMouseDown);
+        element.addEventListener("mousemove", onMouseMove);
+        element.addEventListener("mouseup", onMouseUp);
+        return () => {
+            element.removeEventListener("mousedown", onMouseDown);
+            element.removeEventListener("mousemove", onMouseMove);
+            element.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [dropAndDregControl, currentSlide]);
+    // Auto height functionality
+    useEffect(() => {
+        var _a;
+        if (autoHeight && carouselRef.current) {
+            let max = 0;
+            let end = currentSlide * itemsPerSlide + itemsPerSlide;
+            if (end > items.length)
+                end = items.length;
+            for (let i = currentSlide * itemsPerSlide; i < end; i++) {
+                const slide = (_a = carouselRef.current.children[i]) === null || _a === void 0 ? void 0 : _a.children[0];
+                if (max < slide.offsetHeight)
+                    max = slide.offsetHeight;
+            }
+            setCarouselHeight(max);
+        }
+    }, [currentSlide, autoHeight]);
+    return (_jsxs("div", { className: "relative w-full overflow-hidden", style: autoHeight ? { height: carouselHeight || "auto" } : undefined, children: [_jsx("div", { ref: carouselRef, className: clsx("flex transition-transform duration-500", dropAndDregControl && "cursor-grabbing"), style: {
+                    transform: `translateX(-${currentSlide * 100}%)`,
+                }, children: items.map((item, index) => (_jsx("div", { className: "flex-shrink-0", style: {
+                        width: `${100 / itemsPerSlide}%`,
+                    }, children: item }, `${name}-carousel-${index}`))) }), showNextPreviousButtons && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: previousSlide, "aria-label": "Previous Slide", className: "absolute left-2 top-1/2 transform -translate-y-1/2 z-10", children: previousButton || (_jsx(Icon, { icon: "ooui:next-rtl", className: clsx("transition-all duration-300 ease-in-out text-secondary hover:text-opacity-50") })) }), _jsx("button", { onClick: nextSlide, "aria-label": "Next Slide", className: "absolute right-2 top-1/2 transform -translate-y-1/2 z-10", children: nextButton || (_jsx(Icon, { icon: "ooui:next-ltr", className: clsx("transition-all duration-300 ease-in-out text-secondary hover:text-opacity-50") })) })] })), showDots && (_jsx("div", { className: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2", children: Array.from({ length: totalSlides }).map((_, index) => (_jsx("button", { onClick: () => goToSlide(index), className: `w-2 h-2 rounded-full ${currentSlide === index ? "bg-secondary" : "bg-gray-300"}`, children: dot || "" }, index))) }))] }));
+}

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

@@ -0,0 +1,11 @@
+export type Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type Props = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: Sizes;
+    className?: string | undefined;
+    semiChecked?: boolean;
+};
+export default function Checkbox({ checked, onChange, disabled, size, semiChecked, className, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAUrD,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,IAAW,EACX,WAAmB,EACnB,SAAS,GACV,EAAE,KAAK,2CAiCP"}

package/dist/components/checkbox/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Icon from "../icon";
+const sizeClasses = {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6",
+    xl: "w-7 h-7",
+};
+export default function Checkbox({ checked, onChange, disabled = false, size = "md", semiChecked = false, className, }) {
+    const sizeClass = sizeClasses[size];
+    return (_jsxs("label", { className: "relative flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled, className: "sr-only peer" }), _jsx("div", { className: clsx("rounded border-2 peer-checked:bg-primary peer-checked:border-primary peer-disabled:bg-gray-200 peer-disabled:border-gray-200 peer-disabled:cursor-not-allowed flex items-center justify-center transition-all", sizeClass), children: checked ? (semiChecked ? (_jsx(Icon, { icon: "octicon:dash-16", className: "text-white" })) : (_jsx(Icon, { icon: "material-symbols:check-rounded", className: "text-white" }))) : (_jsx("div", { className: "bg-white h-full w-full" })) })] }));
+}

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type Props = {
+    color: string;
+    setColor: (newColor: string) => void;
+    showDisplay?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export default function ColorPicker({ color, setColor, showDisplay, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAChD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,2CAyBP"}

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

@@ -0,0 +1,21 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isColorLight } from "../../utils/color";
+export default function ColorPicker(_a) {
+    var { color, setColor, showDisplay = true } = _a, props = __rest(_a, ["color", "setColor", "showDisplay"]);
+    return (_jsxs("div", { className: "relative flex items-center rounded-lg", children: [showDisplay && (_jsx("div", { className: "w-full h-10 rounded-lg flex items-center justify-center", style: {
+                    backgroundColor: color,
+                    color: isColorLight(color) ? "#000000" : "#FFFFFF",
+                }, children: _jsx("p", { children: color }) })), _jsx("input", Object.assign({ type: "color", className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", value: color, onChange: (e) => setColor(e.target.value) }, props))] }));
+}

package/dist/components/count-down/index.d.ts

@@ -0,0 +1,6 @@
+export type Props = {
+    timeInSeconds: number;
+    finishObserver: () => void;
+};
+export default function CountDown({ timeInSeconds, finishObserver }: Props): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/count-down/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/count-down/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,KAAK,UAgCzE"}

package/dist/components/count-down/index.js

@@ -0,0 +1,32 @@
+"use client";
+import { Utils } from "sea-platform-helpers";
+import { useEffect, useState } from "react";
+export default function CountDown({ timeInSeconds, finishObserver }) {
+    const [time, setTime] = useState(timeInSeconds);
+    const [isFinished, setIsFinished] = useState(false);
+    useEffect(() => {
+        if (time <= 0) {
+            setIsFinished(true);
+            return;
+        }
+        const interval = setInterval(() => {
+            setTime((prevTime) => {
+                if (prevTime - 1 <= 0) {
+                    clearInterval(interval);
+                    setIsFinished(true);
+                    return 0;
+                }
+                return prevTime - 1;
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [time]);
+    useEffect(() => {
+        if (isFinished)
+            finishObserver();
+    }, [finishObserver, isFinished]);
+    const formattedTime = Utils.Moment.default
+        .utc(time * 1000)
+        .format(time >= 3600 ? "HH:mm:ss" : "mm:ss");
+    return formattedTime;
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+export type Placement = "top" | "left" | "right" | "bottom";
+export type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    placement?: Placement;
+    overlay?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+export default function Drawer({ isOpen, onClose, placement, overlay, className, children, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,OAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,2CAoDP"}

package/dist/components/drawer/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "@iconify/react";
+export default function Drawer({ isOpen, onClose, placement = "right", overlay = true, className, children, }) {
+    return (_jsxs(_Fragment, { children: [overlay && isOpen && (_jsx("div", { className: clsx("fixed z-50 inset-0 bg-black bg-opacity-50 transition-opacity duration-300", { "opacity-0 pointer-events-none": !isOpen }), onClick: onClose })), _jsxs("div", { className: clsx("fixed bg-white shadow-lg z-50 transition-transform duration-300 py-7 px-2", {
+                    "top-0 left-0 w-full h-auto transform -translate-y-full": placement === "top" && !isOpen,
+                    "top-0 left-0 w-full h-auto translate-y-0": placement === "top" && isOpen,
+                    "top-0 right-0 h-full transform translate-x-full w-[85%] md:w-[40%]": placement === "right" && !isOpen,
+                    "top-0 right-0 h-full translate-x-0 w-[85%] md:w-[40%]": placement === "right" && isOpen,
+                    "top-0 left-0 h-full transform -translate-x-full w-[85%] md:w-[40%]": placement === "left" && !isOpen,
+                    "top-0 left-0 h-full translate-x-0 w-[85%] md:w-[40%]": placement === "left" && isOpen,
+                    "bottom-0 left-0 w-full h-auto transform translate-y-full": placement === "bottom" && !isOpen,
+                    "bottom-0 left-0 w-full h-auto translate-y-0": placement === "bottom" && isOpen,
+                }, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2 text-secondary-dark", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));
+}

package/dist/components/file-input/components/file-item/index.d.ts

@@ -0,0 +1,9 @@
+import { FileState } from "../..";
+type Props = {
+    file: FileState;
+    handleUploadFile?: (file: FileState) => Promise<void>;
+    handleDeleteFile?: (file: FileState) => Promise<void>;
+};
+export default function FileItem({ file, handleUploadFile, handleDeleteFile, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/file-input/components/file-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/file-input/components/file-item/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAKlD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvD,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,KAAK,2CAuEP"}

package/dist/components/file-input/components/file-item/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { UploadStatuses } from "../..";
+import Icon from "../../../icon";
+import { Utils } from "sea-platform-helpers";
+import Button from "../../../button";
+export default function FileItem({ file, handleUploadFile, handleDeleteFile, }) {
+    return (_jsx("div", { className: "px-2 py-1 rounded-lg bg-info bg-opacity-20 max-w-52", children: _jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [_jsx("div", { className: "col-span-3", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-text font-semibold truncate", children: file.name }), _jsx("p", { className: "text-sm text-info", children: Utils.Number.default(file.size).format("0.0 b") })] }) }), _jsx("div", { className: "col-span-1", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [file.status === UploadStatuses.Failed && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "mdi:cloud-remove-outline", className: "w-5 h-5 text-error" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => handleUploadFile(file), children: _jsx(Icon, { icon: "pajamas:retry", className: "w-5 h-5 text-primary hover:text-opacity-50 transition-all duration-300 ease-in-out" }) })] })), [UploadStatuses.Pending, UploadStatuses.Uploading].includes(file.status) && (_jsx(Icon, { icon: "line-md:uploading-loop", className: "w-5 h-5 text-info" })), file.status === UploadStatuses.Uploaded && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "ic:outline-cloud-done", className: "w-5 h-5 text-primary" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => {
+                                            handleDeleteFile(file);
+                                        }, children: _jsx(Icon, { icon: "famicons:close", className: "w-5 h-5 text-error transition-all duration-300 ease-in-out" }) })] }))] }) })] }) }));
+}