@xola/ui-kit 3.0.8 → 3.4.1

package/README.md

@@ -11,8 +11,9 @@ It's storybook is publicly published at [ui.xola.io](https://ui.xola.io). The ic
 
 ### Requirements
 
--   Node.js v16
+-   Node.js v20 or higher
 -   NPM v7 or higher
+-   **ESM-only package** - This package uses ES modules exclusively and does not support CommonJS
 
 ### Usage
 
@@ -25,31 +26,79 @@ npm install @xola/ui-kit
 Install peer dependencies:
 
 ```bash
-npm install autoprefixer postcss tailwindcss lodash
+npm install autoprefixer postcss tailwindcss vite
 ```
 
-Create PostCSS and Tailwind config files:
+#### Option 1: Use configs directly (Recommended)
 
-```bash
-echo 'module.exports = require("@xola/ui-kit/tailwind.config");' > tailwind.config.js
-echo 'module.exports = require("@xola/ui-kit/postcss.config");' > postcss.config.js
+Import and extend the configs in your project:
+
+**tailwind.config.js:**
+```js
+import uiKitConfig from "@xola/ui-kit/tailwind.config.js";
+
+export default {
+  ...uiKitConfig,
+  content: [
+    ...uiKitConfig.content,
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+};
+```
+
+**postcss.config.js:**
+```js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+#### Option 2: Re-export configs (Simple)
+
+If you want to use the UI Kit configs as-is:
+
+**tailwind.config.js:**
+```js
+export { default } from "@xola/ui-kit/tailwind.config.js";
+```
+
+**postcss.config.js:**
+```js
+export { default } from "@xola/ui-kit/postcss.config.js";
 ```
 
+#### Import Styles and Components
+
 Import main CSS files in your project:
 
 ```js
 import "@xola/ui-kit/index.css";
-import "@xola/ui-kit/build/style.css";
+import "@xola/ui-kit/build/ui-kit.css";
 ```
 
-UI kit expects you already have a working React dev environment with PostCSS support.
+UI kit expects you already have a working React 18+ dev environment with PostCSS support.
 
-Import and use the components:
+Import and use the components (with full TypeScript support):
 
-```js
-import { Button } from "@xola/ui-kit";
+```tsx
+import { Button, Modal, Input } from "@xola/ui-kit";
+
+// TypeScript types are automatically included
+function MyComponent() {
+  return (
+    <>
+      <Button variant="primary">Click me</Button>
+      <Input type="text" placeholder="Enter text" />
+    </>
+  );
+}
 ```
 
+> **Note:** This package is ESM-only. Ensure your project has `"type": "module"` in package.json or use `.mjs` file extensions for configuration files.
+
 ## Development
 
 ### Installation
@@ -57,7 +106,7 @@ import { Button } from "@xola/ui-kit";
 Install all required dependencies:
 
 ```bash
-$ nvm use # Project needs Node.js v16 with NPM v7
+$ nvm use # Project needs Node.js v20+ with NPM v7+
 $ npm install
 ```
 

package/build/components/Alert.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+declare const colors: {
+    readonly primary: "bg-primary-lighter text-black";
+    readonly secondary: "bg-secondary-lighter text-black";
+    readonly success: "bg-success-lighter text-black";
+    readonly warning: "bg-warning-lighter text-black";
+    readonly danger: "bg-danger-lighter text-black";
+    readonly caution: "bg-caution-lighter text-black";
+};
+type AlertColor = keyof typeof colors;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: AlertColor;
+    children: React.ReactNode;
+    className?: string;
+    onClose?: () => void;
+}
+export declare const Alert: ({ color, children, className, onClose, ...rest }: AlertProps) => React.JSX.Element;
+export {};

package/build/components/Alert.js

@@ -0,0 +1,28 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import i from "clsx";
+import { CloseIcon as n } from "../icons/build/CloseIcon.js";
+const o = {
+  primary: "bg-primary-lighter text-black",
+  secondary: "bg-secondary-lighter text-black",
+  success: "bg-success-lighter text-black",
+  warning: "bg-warning-lighter text-black",
+  danger: "bg-danger-lighter text-black",
+  caution: "bg-caution-lighter text-black"
+}, u = ({ color: r = "primary", children: a, className: l, onClose: e, ...c }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: i(
+      "ui-alert flex items-start rounded px-3 py-3 text-base leading-4",
+      o[r],
+      l
+    ),
+    ...c,
+    children: [
+      /* @__PURE__ */ t("span", { className: "ui-alert-content w-full leading-p1", children: a }),
+      e ? /* @__PURE__ */ t("button", { type: "button", className: "ui-alert-close ml-3 cursor-pointer hover:text-gray-dark", children: /* @__PURE__ */ t(n, { onClick: e }) }) : null
+    ]
+  }
+);
+export {
+  u as Alert
+};

package/build/components/Animation/FadeIn.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface FadeInProps {
+    [key: string]: any;
+    shouldShow?: boolean;
+    shouldAppear?: boolean;
+    tag?: React.ElementType;
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const FadeIn: ({ shouldShow, shouldAppear, tag, enter, enterFrom, enterTo, children, className, ...rest }: FadeInProps) => React.JSX.Element;

package/build/components/Animation/FadeIn.js

@@ -0,0 +1,29 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Transition as m } from "@headlessui/react";
+const y = ({
+  shouldShow: t = !0,
+  shouldAppear: o = !0,
+  tag: r = "div",
+  enter: i = "transition-opacity duration-700",
+  enterFrom: a = "opacity-0",
+  enterTo: n = "opacity-100",
+  children: p,
+  className: e,
+  ...s
+}) => /* @__PURE__ */ c(
+  m,
+  {
+    show: t,
+    appear: o,
+    as: r,
+    className: e,
+    enter: i,
+    enterFrom: a,
+    enterTo: n,
+    ...s,
+    children: p
+  }
+);
+export {
+  y as FadeIn
+};

package/build/components/Animation/SlideDown.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface SlideDownProps {
+    isOpen?: boolean;
+    children?: React.ReactNode;
+}
+export declare const SlideDown: ({ isOpen, children }: SlideDownProps) => React.JSX.Element;

package/build/components/Animation/SlideDown.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Transition as o } from "@headlessui/react";
+const i = ({ isOpen: r, children: a }) => /* @__PURE__ */ t("div", { className: "overflow-hidden", children: /* @__PURE__ */ t(
+  o,
+  {
+    show: r,
+    appear: r,
+    as: "div",
+    enter: "transition-all duration-500",
+    enterFrom: "transform -translate-y-full opacity-0",
+    enterTo: "transform translate-y-0 opacity-100",
+    leave: "transition duration-500",
+    leaveFrom: "transform translate-y-0 opacity-100",
+    leaveTo: "transform -translate-y-full opacity-0",
+    children: a
+  }
+) });
+export {
+  i as SlideDown
+};

package/build/components/Avatar.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+declare const sizes: {
+    readonly tiny: "h-7 w-7 text-base";
+    readonly small: "h-10 w-10 text-base";
+    readonly medium: "h-12 w-12 text-md";
+    readonly large: "h-15 w-15 text-xl";
+};
+type AvatarSize = keyof typeof sizes;
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    name?: string;
+    color?: string;
+    size?: AvatarSize;
+    className?: string;
+}
+export declare const Avatar: ({ name, color, size, className, ...rest }: AvatarProps) => React.JSX.Element;
+export {};

package/build/components/Avatar.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import n from "clsx";
+import { getInitials as m } from "../helpers/avatar.js";
+const o = {
+  tiny: "h-7 w-7 text-base",
+  small: "h-10 w-10 text-base",
+  medium: "h-12 w-12 text-md",
+  large: "h-15 w-15 text-xl"
+}, f = ({ name: t, color: e = "bg-primary-lighter", size: r = "large", className: i, ...l }) => {
+  const s = n(
+    "ui-avatar",
+    "inline-flex items-center justify-center rounded-full text-black leading-none",
+    o[r],
+    e,
+    i
+  );
+  return /* @__PURE__ */ a("div", { title: t, className: s, ...l, children: m(t) });
+};
+export {
+  f as Avatar
+};

package/build/components/Badge.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+declare const colors: {
+    readonly primary: "bg-primary-lighter text-primary-dark";
+    readonly secondary: "bg-secondary-lighter text-black";
+    readonly success: "bg-success-lightish text-success-darker";
+    readonly warning: "bg-warning-lightish text-warning-darker";
+    readonly caution: "bg-caution-lighter text-caution-dark";
+    readonly danger: "bg-danger-lightish text-danger-dark";
+    readonly problem: "bg-warning text-white";
+    readonly critical: "bg-danger text-white";
+};
+declare const sizes: {
+    readonly small: "px-2 py-0.75 h-5 text-sm leading-sm";
+    readonly medium: "px-3 py-1.5 h-7.5 text-base leading-base";
+    readonly large: "px-3.5 py-0.75 h-10 text-lg leading-lg";
+};
+type BadgeColor = keyof typeof colors;
+type BadgeSize = keyof typeof sizes;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColor;
+    size?: BadgeSize;
+    icon?: React.ReactElement;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Badge: ({ color, size, icon, children, className, ...rest }: BadgeProps) => React.JSX.Element;
+export {};

package/build/components/Badge.js

@@ -0,0 +1,40 @@
+import { jsxs as n } from "react/jsx-runtime";
+import t from "clsx";
+import { cloneElement as g } from "react";
+const c = {
+  primary: "bg-primary-lighter text-primary-dark",
+  secondary: "bg-secondary-lighter text-black",
+  success: "bg-success-lightish text-success-darker",
+  warning: "bg-warning-lightish text-warning-darker",
+  caution: "bg-caution-lighter text-caution-dark",
+  danger: "bg-danger-lightish text-danger-dark",
+  problem: "bg-warning text-white",
+  critical: "bg-danger text-white"
+}, m = {
+  small: "px-2 py-0.75 h-5 text-sm leading-sm",
+  medium: "px-3 py-1.5 h-7.5 text-base leading-base",
+  large: "px-3.5 py-0.75 h-10 text-lg leading-lg"
+}, o = {
+  small: "w-3 h-3",
+  medium: "w-4 h-4",
+  large: "w-5 h-5 mr-1.5"
+}, x = ({ color: a = "primary", size: e = "small", icon: r, children: i, className: s, ...l }) => /* @__PURE__ */ n(
+  "span",
+  {
+    className: t(
+      "ui-badge",
+      "inline-flex items-center whitespace-nowrap rounded-full",
+      c[a],
+      m[e],
+      s
+    ),
+    ...l,
+    children: [
+      r ? g(r, { className: t("mr-1", o[e]) }) : null,
+      i
+    ]
+  }
+);
+export {
+  x as Badge
+};

package/build/components/Breadcrumb.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    separator?: string;
+    children?: React.ReactNode;
+    classNames?: {
+        item?: string;
+        separator?: string;
+    };
+    className?: string;
+}
+export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+export declare const Breadcrumb: (({ separator, children, classNames, className, ...rest }: BreadcrumbProps) => React.JSX.Element) & {
+    Item: {
+        ({ className, onClick, children }: BreadcrumbItemProps): React.JSX.Element;
+        displayName: string;
+    };
+};

package/build/components/Breadcrumb.js

@@ -0,0 +1,27 @@
+import { jsx as t, jsxs as p, Fragment as b } from "react/jsx-runtime";
+import a from "clsx";
+import { Children as s } from "react";
+const x = ({ separator: n = "/", children: r, classNames: e = {}, className: o, ...i }) => {
+  const d = s.count(r) - 1;
+  return /* @__PURE__ */ t("div", { className: a("ui-breadcrumb", "whitespace-nowrap text-2xl font-semibold", o), ...i, children: s.map(r, (u, l) => {
+    const m = l >= d;
+    return /* @__PURE__ */ p(b, { children: [
+      /* @__PURE__ */ t("span", { className: a(e.item, m ? "text-black" : "text-gray-dark"), children: u }),
+      m ? null : /* @__PURE__ */ t("span", { className: a(e.separator, "mx-2 text-gray-dark"), children: n })
+    ] });
+  }) });
+}, c = ({ className: n, onClick: r, children: e }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: a("ui-breadcrumb-item inline", r && "cursor-pointer hover:underline", n),
+    onClick: r,
+    children: e
+  }
+);
+c.displayName = "Breadcrumb.Item";
+const B = Object.assign(x, {
+  Item: c
+});
+export {
+  B as Breadcrumb
+};

package/build/components/Breakdown.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+declare const colors: {
+    readonly default: "text-gray-darker";
+    readonly black: "text-black";
+    readonly primary: "text-primary";
+    readonly secondary: "text-secondary";
+    readonly warning: "text-warning";
+    readonly success: "text-success";
+    readonly danger: "text-danger";
+    readonly caution: "text-caution";
+};
+type BreakdownColor = keyof typeof colors;
+export interface BreakdownProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    currency: string;
+    locale?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface BreakdownItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    info?: React.ReactNode;
+    methodIcon?: React.ReactNode;
+    secondary?: React.ReactNode;
+    value?: React.ReactNode;
+    color?: BreakdownColor;
+    children?: React.ReactNode;
+    classNames?: {
+        key?: string;
+        children?: string;
+        info?: string;
+        value?: string;
+    };
+    className?: string;
+}
+export interface BreakdownSubtotalItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    info?: React.ReactNode;
+    value?: number;
+    color?: BreakdownColor;
+    children?: React.ReactNode;
+    classNames?: {
+        children?: string;
+        info?: string;
+        value?: string;
+    };
+    className?: string;
+}
+export interface BreakdownSeparatorProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    className?: string;
+}
+export declare const Breakdown: (({ currency, locale, children, className, ...rest }: BreakdownProps) => React.JSX.Element) & {
+    Item: {
+        ({ info, methodIcon, secondary, value, color, children, classNames, className, ...rest }: BreakdownItemProps): React.JSX.Element;
+        displayName: string;
+    };
+    SubtotalItem: {
+        ({ info, value, color, children, classNames, className, ...rest }: BreakdownSubtotalItemProps): React.JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        ({ className, ...rest }: BreakdownSeparatorProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/build/components/Breakdown.js

@@ -0,0 +1,89 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import r from "clsx";
+import { isNumber as f } from "lodash-es";
+import { useMemo as S, createContext as v, useContext as h } from "react";
+import { Currency as b } from "./Utilities/Currency.js";
+const w = {
+  default: "text-gray-darker",
+  black: "text-black",
+  primary: "text-primary",
+  secondary: "text-secondary",
+  warning: "text-warning",
+  success: "text-success",
+  danger: "text-danger",
+  caution: "text-caution"
+}, u = v(void 0), B = ({ currency: a, locale: t, children: s, className: l, ...c }) => {
+  const i = S(() => ({ currency: a, locale: t }), [a, t]);
+  return /* @__PURE__ */ e(u.Provider, { value: i, children: /* @__PURE__ */ e("table", { className: r("ui-breakdown", "w-full", l), ...c, children: /* @__PURE__ */ e("tbody", { children: s }) }) });
+}, k = ({
+  info: a,
+  methodIcon: t,
+  secondary: s,
+  value: l,
+  color: c = "default",
+  children: i,
+  classNames: d = {},
+  className: o,
+  ...p
+}) => {
+  const n = h(u), N = n == null ? void 0 : n.currency, g = n == null ? void 0 : n.locale;
+  return /* @__PURE__ */ m("tr", { className: r("ui-breakdown-item", w[c], o), ...p, children: [
+    /* @__PURE__ */ m("td", { colSpan: 2, className: r("break-words text-left leading-none", d.key), children: [
+      /* @__PURE__ */ e("span", { className: "mr-0.5", children: t }),
+      /* @__PURE__ */ e("span", { className: r("mr-1 break-normal md:break-all", d.children), children: i ?? "" }),
+      /* @__PURE__ */ m("span", { className: r("text-sm", d.info), children: [
+        a && /* @__PURE__ */ e("span", { className: "mr-2 rounded bg-white p-1 uppercase text-black empty:hidden", children: a }),
+        s && /* @__PURE__ */ e("span", { className: "empty:hidden", children: s })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pl-4 text-right", d.value), children: f(l) ? /* @__PURE__ */ e(
+      b,
+      {
+        shouldRemoveTrailingZeroes: !1,
+        currency: N,
+        locale: g,
+        compact: void 0,
+        isNarrowSymbolForm: void 0,
+        children: l
+      }
+    ) : /* @__PURE__ */ e("span", { children: l }) })
+  ] });
+};
+k.displayName = "Breakdown.Item";
+const y = ({
+  info: a,
+  value: t,
+  color: s = "black",
+  children: l,
+  classNames: c = {},
+  className: i,
+  ...d
+}) => {
+  const o = h(u), p = o == null ? void 0 : o.currency, n = o == null ? void 0 : o.locale;
+  return /* @__PURE__ */ m("tr", { className: r("ui-breakdown-subtotal-item", "font-bold", w[s], i), ...d, children: [
+    /* @__PURE__ */ e("td", { className: r("pb-4 pt-1 text-left", c.children), children: l }),
+    /* @__PURE__ */ e("td", { className: r("whitespace-nowrap pb-4 pt-1 text-right", c.info), children: a }),
+    /* @__PURE__ */ e("td", { className: r("w-[1%] whitespace-nowrap pb-4 pl-4 pt-1 text-right", c.value), children: /* @__PURE__ */ e(
+      b,
+      {
+        shouldRemoveTrailingZeroes: !1,
+        currency: p,
+        locale: n,
+        compact: void 0,
+        isNarrowSymbolForm: void 0,
+        children: t ?? 0
+      }
+    ) })
+  ] });
+};
+y.displayName = "Breakdown.SubtotalItem";
+const x = ({ className: a, ...t }) => /* @__PURE__ */ e("tr", { className: r("ui-breakdown-separator", a), ...t, children: /* @__PURE__ */ e("td", { colSpan: 3, className: "border-b border-gray-light pb-1" }) });
+x.displayName = "Breakdown.Separator";
+const T = Object.assign(B, {
+  Item: k,
+  SubtotalItem: y,
+  Separator: x
+});
+export {
+  T as Breakdown
+};

package/build/components/Buttons/Button.d.ts

@@ -0,0 +1,53 @@
+import { default as React, ElementType } from 'react';
+export declare const colors: {
+    readonly standard: {
+        readonly common: "border-transparent text-white";
+        readonly primary: "bg-primary hover:bg-primary-darker disabled:bg-primary active:bg-primary";
+        readonly secondary: "bg-secondary text-white hover:bg-secondary-dark disabled:bg-secondary border-transparent active:bg-secondary";
+        readonly success: "bg-success hover:bg-success-dark disabled:bg-success active:bg-success";
+        readonly warning: "bg-warning hover:bg-warning-dark disabled:bg-warning active:bg-warning";
+        readonly caution: "bg-caution hover:bg-caution-dark disabled:bg-caution active:bg-caution";
+        readonly danger: "bg-danger hover:bg-danger-dark disabled:bg-danger active:bg-danger";
+    };
+    readonly outline: {
+        readonly common: "bg-white border hover:bg-white active:text-white";
+        readonly default: "border-gray-light hover:border-gray-dark active:bg-primary-lighter active:text-black active:border-primary";
+        readonly primary: "text-primary border-primary hover:text-primary-dark hover:border-primary-dark active:bg-primary-light";
+        readonly secondary: "border-gray-light hover:border-gray-dark active:bg-primary-lighter active:text-black active:border-primary";
+        readonly success: "text-success border-success hover:text-success-dark hover:border-success-dark active:bg-success-light";
+        readonly warning: "text-warning border-warning hover:text-warning-dark hover:border-warning-dark active:bg-warning-light";
+        readonly caution: "text-caution border-caution hover:text-caution-dark hover:border-caution-dark active:bg-caution-light";
+        readonly danger: "text-danger border-danger hover:text-danger-dark hover:border-danger-dark active:bg-danger-light";
+    };
+    readonly link: {
+        readonly common: "border-transparent hover:underline";
+        readonly primary: "text-primary";
+        readonly secondary: "text-secondary";
+        readonly success: "text-success";
+        readonly warning: "text-warning";
+        readonly caution: "text-caution";
+        readonly danger: "text-danger";
+    };
+};
+declare const sizes: {
+    readonly tiny: "px-2 py-0.5 text-xs leading-xs";
+    readonly small: "px-3 py-2 h-7.5 text-sm leading-sm";
+    readonly medium: "px-4.5 py-3 h-10 text-base leading-base";
+    readonly large: "px-6 py-4 h-[50px] text-md leading-md";
+};
+type ButtonVariant = keyof typeof colors;
+type ButtonColor = keyof typeof colors.outline;
+type ButtonSize = keyof typeof sizes;
+type IconPlacement = "left" | "right";
+export interface ButtonProps<T extends ElementType = "button"> {
+    as?: T;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    icon?: React.ReactElement;
+    iconPlacement?: IconPlacement;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Button: <T extends ElementType = "button">({ as, variant, color, size, icon, iconPlacement, children, className, ...rest }: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>) => React.JSX.Element;
+export {};