@xola/ui-kit 3.4.6 → 3.6.0

package/build/components/Logo.js

@@ -1,10 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import n from "clsx";
-const o = {
-  small: "w-10 h-10",
-  medium: "w-16 h-16",
-  large: "w-20 h-20"
-}, r = ({ size: s = "small", className: e, ...m }) => /* @__PURE__ */ l("img", { className: n("ui-logo", e, "inline-block rounded object-cover", o[s]), ...m }), i = Object.assign(r, { sizes: o });
-export {
-  i as Logo
-};

package/build/components/Modal.d.ts

@@ -1,52 +0,0 @@
-import { default as React } from 'react';
-declare const sizes: {
-    readonly small: "max-w-100";
-    readonly medium: "max-w-125";
-    readonly large: "max-w-150";
-    readonly huge: "max-w-200";
-};
-declare const positions: {
-    readonly center: "inline-block";
-    readonly topLeft: "absolute m-4 top-0 left-0";
-    readonly topRight: "absolute m-4 top-0 right-0";
-    readonly bottomLeft: "absolute m-4 bottom-0 left-0";
-    readonly bottomRight: "absolute m-4 bottom-0 right-0";
-};
-type ModalSize = keyof typeof sizes;
-type ModalPosition = keyof typeof positions;
-export interface ModalProps {
-    size?: ModalSize;
-    position?: ModalPosition;
-    isOpen: boolean;
-    shouldCloseOnOutsideClick?: boolean;
-    children: React.ReactNode;
-    className?: string;
-    onClose: () => void;
-}
-export declare const Modal: {
-    ({ size, position, isOpen, shouldCloseOnOutsideClick, children, className, onClose, }: ModalProps): React.JSX.Element;
-    Header: {
-        ({ description, children, className, ...rest }: ModalHeaderProps): React.JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ className, ...rest }: ModalBodyProps): React.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ className, ...rest }: ModalFooterProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    description?: string;
-    children: React.ReactNode;
-    className?: string;
-}
-export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
-export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
-export {};

package/build/components/Modal.js

@@ -1,126 +0,0 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Transition as s, Dialog as d } from "@headlessui/react";
-import o from "clsx";
-import { Fragment as m } from "react";
-import { CloseIcon as v } from "../icons/src/CloseIcon.js";
-const y = {
-  small: "max-w-100",
-  // 400px
-  medium: "max-w-125",
-  // 500px
-  large: "max-w-150",
-  // 600px
-  huge: "max-w-200"
-  // 800px
-}, x = {
-  center: "inline-block",
-  topLeft: "absolute m-4 top-0 left-0",
-  topRight: "absolute m-4 top-0 right-0",
-  bottomLeft: "absolute m-4 bottom-0 left-0",
-  bottomRight: "absolute m-4 bottom-0 right-0"
-}, r = {
-  center: {
-    enterFrom: "translate-y-4 sm:translate-y-0 sm:scale-95",
-    enterTo: "translate-y-0 sm:scale-100",
-    leaveFrom: "translate-y-0 sm:scale-100",
-    leaveTo: "translate-y-4 sm:translate-y-0 sm:scale-95"
-  },
-  topLeft: {
-    enterFrom: "scale-0 origin-top-left",
-    enterTo: "scale-100 origin-top-left",
-    leaveFrom: "scale-100 origin-top-left",
-    leaveTo: "scale-0 origin-top-left"
-  },
-  topRight: {
-    enterFrom: "scale-0 origin-top-right",
-    enterTo: "scale-100 origin-top-right",
-    leaveFrom: "scale-100 origin-top-right",
-    leaveTo: "scale-0 origin-top-right"
-  },
-  bottomLeft: {
-    enterFrom: "scale-0 origin-bottom-left",
-    enterTo: "scale-100 origin-bottom-left",
-    leaveFrom: "scale-100 origin-bottom-left",
-    leaveTo: "scale-0 origin-bottom-left"
-  },
-  bottomRight: {
-    enterFrom: "scale-0 origin-bottom-right",
-    enterTo: "scale-100 origin-bottom-right",
-    leaveFrom: "scale-100 origin-bottom-right",
-    leaveTo: "scale-0 origin-bottom-right"
-  }
-}, g = ({
-  size: a = "medium",
-  position: e = "center",
-  isOpen: l = !1,
-  shouldCloseOnOutsideClick: i = !1,
-  children: b,
-  className: f,
-  onClose: n
-}) => /* @__PURE__ */ t(s, { appear: !0, show: l, as: m, children: /* @__PURE__ */ t(d, { as: "div", className: "ui-modal fixed inset-0 z-30 overflow-y-auto", onClose: () => {
-  i && n();
-}, children: /* @__PURE__ */ c("div", { className: "min-h-screen px-4 text-center", children: [
-  /* @__PURE__ */ t(
-    s.Child,
-    {
-      as: m,
-      enter: "ease-out duration-300",
-      enterFrom: "opacity-0",
-      enterTo: "opacity-100",
-      leave: "ease-in duration-200",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0",
-      children: /* @__PURE__ */ t(d.Overlay, { className: "ui-modal-overlay fixed inset-0 bg-black bg-opacity-80 transition-opacity" })
-    }
-  ),
-  e === "center" && /* @__PURE__ */ t("span", { className: "inline-block h-screen align-middle", "aria-hidden": "true", children: "​" }),
-  /* @__PURE__ */ t(
-    s.Child,
-    {
-      as: m,
-      enter: o("ease-out duration-300"),
-      enterFrom: o("opacity-0", r[e].enterFrom),
-      enterTo: o("opacity-100", r[e].enterTo),
-      leave: o("ease-in duration-300"),
-      leaveFrom: o("opacity-100", r[e].leaveFrom),
-      leaveTo: o("opacity-0", r[e].leaveTo),
-      children: /* @__PURE__ */ c(
-        "div",
-        {
-          className: o(
-            f,
-            y[a],
-            x[e],
-            "w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all"
-          ),
-          children: [
-            n ? /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                className: "absolute right-0 top-0 m-4 hidden p-2 text-black hover:text-gray-darker sm:block",
-                onClick: () => n(),
-                children: /* @__PURE__ */ t(v, {})
-              }
-            ) : null,
-            b
-          ]
-        }
-      )
-    }
-  )
-] }) }) }), h = ({ description: a, children: e, className: l, ...i }) => /* @__PURE__ */ c(d.Title, { as: "div", className: o(l, "ui-modal-header text-center"), ...i, children: [
-  /* @__PURE__ */ t("h3", { className: "text-2xl font-semibold leading-6 text-black", children: e }),
-  a ? /* @__PURE__ */ t("p", { className: "mt-2 text-base font-normal leading-normal text-gray-darker", children: a }) : null
-] });
-h.displayName = "Modal.Header";
-const p = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: o(a, "ui-modal-body mt-10"), ...e });
-p.displayName = "Modal.Body";
-const u = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: o(a, "ui-modal-footer mt-10 space-x-4 text-right"), ...e });
-u.displayName = "Modal.Footer";
-g.Header = h;
-g.Body = p;
-g.Footer = u;
-export {
-  g as Modal
-};

package/build/components/Popover/Popover.d.ts

@@ -1,20 +0,0 @@
-import { TippyProps } from '@tippyjs/react';
-import { default as React } from 'react';
-export interface PopoverProps extends Omit<Partial<TippyProps>, "children" | "className"> {
-    isLazy?: boolean;
-    skidding?: number;
-    distance?: number;
-    children: React.ReactNode;
-    className?: string;
-}
-export declare const Popover: {
-    ({ isLazy, skidding, distance, children, className, ...rest }: PopoverProps): React.JSX.Element;
-    Content: {
-        ({ children, className }: PopoverContentProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-export interface PopoverContentProps {
-    children: React.ReactNode;
-    className?: string;
-}

package/build/components/Popover/Popover.js

@@ -1,50 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import d from "@tippyjs/react";
-import u from "clsx";
-import { Children as y, forwardRef as g, useState as C } from "react";
-import { followCursor as v } from "tippy.js";
-import "tippy.js/dist/border.css";
-import "tippy.js/dist/tippy.css";
-import { getChildrenByType as x } from "../../helpers/children.js";
-import T from "./Popover.module.css.js";
-import h from "./PopoverScroll.module.css.js";
-const z = ({ isLazy: t = !0, skidding: o = 0, distance: r = 10, children: n, className: s, ...e }) => {
-  const p = x(n, l), a = y.toArray(n).filter((i) => i.type !== l);
-  return /* @__PURE__ */ m(
-    t ? f : d,
-    {
-      interactive: !0,
-      zIndex: 50,
-      content: p,
-      className: u(
-        "ui-popover",
-        h,
-        T.main,
-        "!rounded-lg !border-gray-light shadow-xl",
-        s
-      ),
-      plugins: [v],
-      offset: [o ?? 0, r ?? 10],
-      ...e,
-      children: /* @__PURE__ */ m("span", { children: a })
-    }
-  );
-}, l = ({ children: t, className: o }) => /* @__PURE__ */ m("div", { className: u("ui-popover-content", o), children: t });
-l.displayName = "Popover.Content";
-z.Content = l;
-const f = g((t, o) => {
-  const [r, n] = C(!1), s = {
-    fn: () => ({
-      onMount: () => n(!0),
-      onHidden: () => n(!1)
-    })
-  }, e = { ...t };
-  return e.plugins = [s, ...t.plugins ?? []], t.render ? e.render = (p, a, c) => {
-    var i;
-    return r ? (i = t.render) == null ? void 0 : i.call(t, p, a, c) : "";
-  } : e.content = r ? t.content : "", /* @__PURE__ */ m(d, { ...e, ref: o });
-});
-f.displayName = "LazyTippy";
-export {
-  z as Popover
-};

package/build/components/Popover/Popover.module.css.js

@@ -1,7 +0,0 @@
-const t = "_main_jm0tk_1", a = {
-  main: t
-};
-export {
-  a as default,
-  t as main
-};

package/build/components/Popover/PopoverList.d.ts

@@ -1,25 +0,0 @@
-import { TippyProps } from '@tippyjs/react';
-import { default as React } from 'react';
-import { PopoverProps } from './Popover';
-export interface PopoverListProps extends Omit<Partial<PopoverProps>, "placement" | "children" | "className"> {
-    placement?: TippyProps["placement"];
-    children: React.ReactNode;
-    className?: string;
-}
-export declare const PopoverList: {
-    ({ placement, children, className, ...rest }: PopoverListProps): React.JSX.Element;
-    Item: {
-        ({ name, isActive, id, position, total, children, className, onClickItem, ...rest }: PopoverListItemProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-export interface PopoverListItemProps {
-    name: string;
-    isActive?: boolean;
-    id?: string | null;
-    position?: number;
-    total?: number;
-    children: React.ReactNode;
-    className?: string;
-    onClickItem: (event: React.MouseEvent<HTMLDivElement>, name: string, id: string | null) => void;
-}

package/build/components/Popover/PopoverList.js

@@ -1,59 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import g from "clsx";
-import v, { Children as h } from "react";
-import { Popover as u } from "./Popover.js";
-import f from "./PopoverScroll.module.css.js";
-const y = ({ placement: n = "bottom", children: i, className: s, ...o }) => {
-  const e = h.toArray(i), r = e.filter((t) => t.type !== l), m = e.length - r.length, c = e.map((t, a) => t.type === l ? v.cloneElement(t, { position: a, total: m }) : null), p = /* @__PURE__ */ d(
-    u.Content,
-    {
-      className: g(f, "ui-popover-list-content divide-y divide-solid divide-gray-lighter p-0 "),
-      children: c
-    }
-  );
-  return /* @__PURE__ */ d(
-    u,
-    {
-      content: p,
-      placement: n,
-      className: g("ui-popover-list", "w-40", s),
-      ...o,
-      children: r
-    }
-  );
-}, l = ({
-  name: n,
-  isActive: i = !1,
-  id: s = null,
-  position: o,
-  total: e,
-  children: r,
-  className: m,
-  onClickItem: c,
-  ...p
-}) => {
-  const t = (a) => c(a, n, s);
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: g(
-        "ui-popover-list-item",
-        "flex cursor-pointer space-x-2.5 p-4 align-text-top font-semibold leading-4 tracking-tightest hover:bg-gray-lighter",
-        i ? "bg-gray-lighter" : null,
-        o === 1 ? "rounded-t-lg" : null,
-        // Round the top left & right corners if it's the first one
-        o === e ? "rounded-b-lg" : null,
-        // Round bottom left & right if it's the last one
-        m
-      ),
-      onClick: t,
-      ...p,
-      children: r
-    }
-  );
-};
-l.displayName = "PopoverList.Item";
-y.Item = l;
-export {
-  y as PopoverList
-};

package/build/components/Popover/PopoverScroll.module.css.js

@@ -1,4 +0,0 @@
-const l = {};
-export {
-  l as default
-};

package/build/components/Provider.d.ts

@@ -1,18 +0,0 @@
-import { default as React } from 'react';
-export interface ContextValue {
-    generateId: () => number;
-    localize: boolean;
-    locale: string;
-}
-export declare const Context: React.Context<ContextValue>;
-export interface ProviderProps {
-    children: React.ReactNode;
-    localize?: boolean;
-    locale?: string;
-}
-/**
- * UI Kit's default provider.
- * Must be used from now on in order to generate correct component IDs.
- * Also a good place to implement any global state required for the UI Kit in the future.
- */
-export declare const Provider: ({ children, localize, locale }: ProviderProps) => React.JSX.Element;

package/build/components/Provider.js

@@ -1,17 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { createContext as s, useRef as i, useCallback as c, useMemo as l } from "react";
-let p = 1;
-const m = s({
-  generateId: () => (console.warn(
-    "Please wrap your app with `<Provider />` component from `@xola/ui-kit`. Otherwise your app will not work with SSR frameworks."
-  ), p++),
-  localize: !0,
-  locale: "en_US"
-}), f = ({ children: n, localize: e = !0, locale: r = "en_US" }) => {
-  const t = i(1), o = c(() => t.current++, [t]), a = l(() => ({ generateId: o, localize: e, locale: r }), [o, e, r]);
-  return /* @__PURE__ */ u(m.Provider, { value: a, children: n });
-};
-export {
-  m as Context,
-  f as Provider
-};

package/build/components/Screens/Login.d.ts

@@ -1,25 +0,0 @@
-import { default as React } from 'react';
-declare const backgrounds: {
-    readonly default: "https://files.xola.com/x2/images/login/old-photo-1554629947-334ff61d85dc.jpeg";
-    readonly x2: "https://files.xola.com/x2/images/login/x2-34fc260271ca80160c61777846784611.jpeg";
-    readonly admin: "https://files.xola.com/x2/images/login/admin-42e40b1836193f064f0fe0fafce1d2af.png";
-    readonly scaffold: "https://files.xola.com/x2/images/login/scaffold-f3bd19169b6976f1c75da53e7b61d0a7.jpeg";
-};
-type BackgroundType = keyof typeof backgrounds;
-export interface LoginValues {
-    email: string;
-    password: string;
-    shouldRemember: boolean;
-}
-export interface LoginProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
-    defaultValues?: Partial<LoginValues>;
-    isLoading?: boolean;
-    error?: string | null;
-    onSubmit?: (values: LoginValues) => void;
-    passwordResetUrl?: string;
-    label?: React.ReactNode;
-    backgroundImage?: string | null;
-    backgroundType?: BackgroundType;
-}
-export declare const Login: ({ defaultValues, isLoading, error, onSubmit, passwordResetUrl, label, backgroundImage, backgroundType, ...rest }: LoginProps) => React.JSX.Element;
-export {};

package/build/components/Screens/Login.js

@@ -1,144 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { Alert as j } from "../Alert.js";
-import { Button as I } from "../Buttons/Button.js";
-import { Checkbox as R } from "../Forms/Checkbox.js";
-import { FormGroup as u } from "../Forms/FormGroup.js";
-import { Input as f } from "../Forms/Input.js";
-import { Label as p } from "../Forms/Label.js";
-import { Spinner as F } from "../Spinner.js";
-import { XolaLogoSimple as B } from "../../icons/src/images/XolaLogoSimple.js";
-const g = {
-  default: "https://files.xola.com/x2/images/login/old-photo-1554629947-334ff61d85dc.jpeg",
-  x2: "https://files.xola.com/x2/images/login/x2-34fc260271ca80160c61777846784611.jpeg",
-  admin: "https://files.xola.com/x2/images/login/admin-42e40b1836193f064f0fe0fafce1d2af.png",
-  scaffold: "https://files.xola.com/x2/images/login/scaffold-f3bd19169b6976f1c75da53e7b61d0a7.jpeg"
-}, G = ({
-  defaultValues: h,
-  isLoading: c = !1,
-  error: t = null,
-  onSubmit: o,
-  passwordResetUrl: x,
-  label: m,
-  backgroundImage: b = null,
-  backgroundType: y = "default",
-  ...w
-}) => {
-  const [r, d] = C({
-    email: "",
-    password: "",
-    shouldRemember: !1,
-    ...h
-  }), i = (l) => {
-    const { name: n, value: s } = l.target;
-    d({ ...r, [n]: s });
-  }, v = (l) => {
-    const { name: n, checked: s } = l.target;
-    d({ ...r, [n]: s });
-  }, k = (l) => {
-    l.preventDefault(), o == null || o(r);
-  }, N = {
-    backgroundImage: `url("${b ?? g[y] ?? g.default}")`,
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "cover"
-  };
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: "ui-login h-screen overflow-hidden bg-white bg-opacity-100 bg-blend-overlay md:bg-opacity-0",
-      style: N,
-      ...w,
-      children: [
-        /* @__PURE__ */ e("div", { className: "md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8", children: /* @__PURE__ */ a("div", { className: "w-85 rounded-lg px-9 py-0 md:bg-white md:py-10", children: [
-          /* @__PURE__ */ a("div", { className: "mb-12 space-y-4 md:mb-20", children: [
-            /* @__PURE__ */ e(B, { className: "mx-auto h-10 w-auto md:h-12" }),
-            m && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: m })
-          ] }),
-          /* @__PURE__ */ e("form", { onSubmit: k, children: /* @__PURE__ */ a("fieldset", { className: "space-y-6", disabled: c, children: [
-            /* @__PURE__ */ a("div", { className: "-space-y-px rounded-md bg-white", children: [
-              /* @__PURE__ */ a(u, { className: "md:mb-7", children: [
-                /* @__PURE__ */ e(p, { children: "Email" }),
-                /* @__PURE__ */ e(
-                  f,
-                  {
-                    required: !0,
-                    name: "email",
-                    type: "email",
-                    autoComplete: "email",
-                    value: r.email,
-                    isError: !!t,
-                    onChange: i
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ a(u, { children: [
-                /* @__PURE__ */ e(p, { children: "Password" }),
-                /* @__PURE__ */ e(
-                  f,
-                  {
-                    required: !0,
-                    name: "password",
-                    type: "password",
-                    autoComplete: "current-password",
-                    value: r.password,
-                    isError: !!t,
-                    onChange: i
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ e(
-              R,
-              {
-                name: "shouldRemember",
-                label: "Remember me",
-                checked: r.shouldRemember,
-                onChange: v
-              }
-            ),
-            t ? /* @__PURE__ */ e(j, { color: "danger", children: t }) : null,
-            /* @__PURE__ */ a(I, { type: "submit", className: "w-full", color: "primary", children: [
-              c ? /* @__PURE__ */ e(F, { size: "current", color: "current", className: "mr-2" }) : null,
-              "Login"
-            ] }),
-            /* @__PURE__ */ e("div", { className: "mt-5 text-center text-sm", children: /* @__PURE__ */ e(
-              "a",
-              {
-                href: x,
-                className: "font-semibold text-gray-darker underline hover:text-black",
-                target: "_blank",
-                rel: "noreferrer",
-                children: "Forgot your password?"
-              }
-            ) })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ e("footer", { children: /* @__PURE__ */ e("div", { className: "flex w-full flex-col items-center justify-center overflow-hidden px-4 py-1 sm:px-6 lg:px-8", children: /* @__PURE__ */ a("div", { className: "m-5 w-85 rounded-lg px-4 text-center text-xs opacity-80 md:text-sm", children: [
-          /* @__PURE__ */ a(
-            "a",
-            {
-              href: "https://www.xola.com/team",
-              target: "_blank",
-              className: "text-gray md:text-gray-dark",
-              rel: "noreferrer",
-              children: [
-                "Designed in San Francisco & Rouen, France",
-                /* @__PURE__ */ e("br", {}),
-                "Built in Houston, Belgrade, Ukraine & Bengaluru"
-              ]
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: "text-center text-gray md:text-gray-dark", children: [
-            "© ",
-            (/* @__PURE__ */ new Date()).getFullYear(),
-            " Xola, Inc."
-          ] })
-        ] }) }) })
-      ]
-    }
-  );
-};
-export {
-  G as Login
-};

package/build/components/Search.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-export interface SearchProps<T = any> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onSelect" | "onSubmit" | "children"> {
-    className?: string;
-    items?: T[];
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    onSubmit?: (value: string) => void;
-    onSelect?: (item: T) => void;
-    children?: (item: T, isHighlighted: boolean) => React.ReactNode;
-    isLoading?: boolean;
-    shouldStayOpen?: boolean;
-    shouldDestroyOnClose?: boolean;
-    shouldHideMenu?: boolean;
-    minChars?: number;
-}
-export declare const Search: <T = any>({ className, items, defaultValue, onChange, onSubmit, onSelect, children, isLoading, shouldStayOpen, shouldDestroyOnClose, shouldHideMenu, minChars, ...rest }: SearchProps<T>) => React.JSX.Element;