@xola/ui-kit 3.0.8 → 3.4.0

package/build/components/Buttons/Button.js

@@ -0,0 +1,83 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import h from "clsx";
+const m = {
+  standard: {
+    common: "border-transparent text-white",
+    // Common classes for each style
+    primary: "bg-primary hover:bg-primary-darker disabled:bg-primary active:bg-primary",
+    secondary: "bg-secondary text-white hover:bg-secondary-dark disabled:bg-secondary border-transparent active:bg-secondary",
+    success: "bg-success hover:bg-success-dark disabled:bg-success active:bg-success",
+    warning: "bg-warning hover:bg-warning-dark disabled:bg-warning active:bg-warning",
+    caution: "bg-caution hover:bg-caution-dark disabled:bg-caution active:bg-caution",
+    danger: "bg-danger hover:bg-danger-dark disabled:bg-danger active:bg-danger"
+  },
+  outline: {
+    common: "bg-white border hover:bg-white active:text-white",
+    // Common classes for each style
+    default: "border-gray-light hover:border-gray-dark active:bg-primary-lighter active:text-black active:border-primary",
+    primary: "text-primary border-primary hover:text-primary-dark hover:border-primary-dark active:bg-primary-light",
+    secondary: "border-gray-light hover:border-gray-dark active:bg-primary-lighter active:text-black active:border-primary",
+    success: "text-success border-success hover:text-success-dark hover:border-success-dark active:bg-success-light",
+    warning: "text-warning border-warning hover:text-warning-dark hover:border-warning-dark active:bg-warning-light",
+    caution: "text-caution border-caution hover:text-caution-dark hover:border-caution-dark active:bg-caution-light",
+    danger: "text-danger border-danger hover:text-danger-dark hover:border-danger-dark active:bg-danger-light"
+  },
+  link: {
+    common: "border-transparent hover:underline",
+    primary: "text-primary",
+    secondary: "text-secondary",
+    success: "text-success",
+    warning: "text-warning",
+    caution: "text-caution",
+    danger: "text-danger"
+  }
+}, y = {
+  tiny: "px-2 py-0.5 text-xs leading-xs",
+  // 20px
+  small: "px-3 py-2 h-7.5 text-sm leading-sm",
+  // 30px
+  medium: "px-4.5 py-3 h-10 text-base leading-base",
+  // 40px
+  large: "px-6 py-4 h-[50px] text-md leading-md"
+  // 50px
+}, x = ({
+  as: s,
+  variant: o = "standard",
+  color: a = "primary",
+  size: d = "medium",
+  icon: r,
+  iconPlacement: t = "left",
+  children: i,
+  className: c,
+  ...g
+}) => {
+  const b = s ?? "button";
+  process.env.NODE_ENV !== "production" && r && !i && console.error(
+    "UI Kit: You are using an icon without specifying children. If you want to use an icon only specify it as a child instead of prop"
+  );
+  const e = m[o], l = a in e ? e[a] : e.primary;
+  return /* @__PURE__ */ u(
+    b,
+    {
+      className: h(
+        "ui-button",
+        "inline-flex rounded border transition-colors focus:ring disabled:cursor-default disabled:bg-gray-lighter disabled:text-gray-dark",
+        "items-center justify-center font-semibold",
+        e.common,
+        l,
+        y[d],
+        c
+      ),
+      ...g,
+      children: [
+        r && t === "left" ? /* @__PURE__ */ n("span", { className: "mr-2 flex-shrink-0", children: r }) : null,
+        i,
+        r && t === "right" ? /* @__PURE__ */ n("span", { className: "ml-2 flex-shrink-0", children: r }) : null
+      ]
+    }
+  );
+};
+export {
+  x as Button,
+  m as colors
+};

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

@@ -0,0 +1,35 @@
+import { default as React, ElementType } from 'react';
+declare const sizes: {
+    readonly small: "px-2 py-1.5 text-sm";
+    readonly medium: "py-3 px-2.5 text-base";
+    readonly large: "px-4 py-3.5 text-lg";
+};
+type ButtonGroupSize = keyof typeof sizes;
+type IconPlacement = "left" | "right";
+export interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange"> {
+    size: ButtonGroupSize;
+    value: number;
+    isCollapsed?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    onChange: (index: number) => void;
+}
+export interface ButtonGroupButtonProps {
+    as?: ElementType;
+    isActive?: boolean;
+    shouldShowText?: boolean;
+    isHidden?: boolean;
+    size?: ButtonGroupSize;
+    icon?: React.ReactElement;
+    iconPlacement?: IconPlacement;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const ButtonGroup: (({ size, value, isCollapsed, children, className, onChange, ...rest }: ButtonGroupProps) => React.JSX.Element) & {
+    Button: {
+        ({ as, isActive, shouldShowText, isHidden, size, icon, iconPlacement, children, className, ...rest }: ButtonGroupButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonGroupButtonProps>): React.JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/build/components/Buttons/ButtonGroup.js

@@ -0,0 +1,55 @@
+import { jsx as d, jsxs as g } from "react/jsx-runtime";
+import m from "clsx";
+import x, { Children as h, cloneElement as y } from "react";
+const B = {
+  small: "px-2 py-1.5 text-sm",
+  medium: "py-3 px-2.5 text-base",
+  large: "px-4 py-3.5 text-lg"
+}, k = ({
+  size: i,
+  value: e,
+  isCollapsed: u = !1,
+  children: p,
+  className: a,
+  onChange: t,
+  ...n
+}) => /* @__PURE__ */ d("span", { className: m("ui-button-group", "inline-flex whitespace-nowrap", a), ...n, children: h.map(p, (r, o) => {
+  if (!x.isValidElement(r) || r.props.isHidden)
+    return null;
+  const s = { size: i };
+  return e !== void 0 && (s.isActive = e === o), u && e >= 0 && e !== o && (s.shouldShowText = !1), t && (s.onClick = () => t(o)), y(r, s);
+}) }), f = ({
+  as: i,
+  isActive: e,
+  shouldShowText: u = !0,
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  isHidden: p = !1,
+  size: a = "medium",
+  icon: t,
+  iconPlacement: n = "left",
+  children: r,
+  className: o,
+  ...s
+}) => {
+  const c = i ?? "button", l = { ...s };
+  delete l.isActive, delete l.shouldShowText, delete l.isHidden;
+  const b = m(
+    "ui-button-group-button",
+    "inline-flex border-t border-l border-b last:border-r first:rounded-l-md last:rounded-r-md transition-colors focus:ring disabled:opacity-60 focus:z-10 leading-none",
+    B[a],
+    e ? "bg-primary border-primary text-white hover:bg-primary-dark" : "border-gray-light hover:bg-gray-lighter text-gray-darker",
+    o
+  );
+  return /* @__PURE__ */ g(c, { className: b, ...l, children: [
+    t && n === "left" ? /* @__PURE__ */ d("span", { className: "mr-2 flex-shrink-0", children: t }) : null,
+    u ? r : t ? null : r,
+    t && n === "right" ? /* @__PURE__ */ d("span", { className: "ml-2 flex-shrink-0", children: t }) : null
+  ] });
+};
+f.displayName = "ButtonGroup.Button";
+const j = Object.assign(k, {
+  Button: f
+});
+export {
+  j as ButtonGroup
+};

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { colors, ButtonProps } from './Button';
+type ButtonVariant = keyof typeof colors;
+export interface SubmitButtonProps extends Omit<ButtonProps, "icon" | "iconPlacement">, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps> {
+    isLoading?: boolean;
+    isSuccess?: boolean;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+}
+export declare const SubmitButton: ({ color, variant, isLoading, isSuccess, disabled, children, className, ...rest }: SubmitButtonProps) => React.JSX.Element;
+export {};

package/build/components/Buttons/SubmitButton.js

@@ -0,0 +1,83 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { Transition as g } from "@headlessui/react";
+import o from "clsx";
+import { useState as y, useEffect as b } from "react";
+import { CheckIcon as d } from "../../icons/build/CheckIcon.js";
+import { Spinner as x } from "../Spinner.js";
+import { Button as w } from "./Button.js";
+const N = {
+  primary: "!bg-primary-light",
+  secondary: "!bg-secondary-light",
+  success: "!bg-success-light",
+  warning: "!bg-warning-light",
+  caution: "!bg-caution-light",
+  danger: "!bg-danger-light"
+}, C = ({
+  color: i = "primary",
+  variant: n = "standard",
+  isLoading: e,
+  isSuccess: c,
+  disabled: m = !1,
+  children: p,
+  className: u,
+  ...f
+}) => {
+  const [r, a] = y(!1);
+  b(() => {
+    if (c && !e) {
+      a(!0);
+      const h = setTimeout(() => a(!1), 3e3);
+      return () => clearTimeout(h);
+    }
+    e && r && a(!1);
+  }, [c, e]);
+  const t = !!e || r;
+  return /* @__PURE__ */ l(
+    w,
+    {
+      color: i,
+      variant: n,
+      disabled: t || m,
+      className: o(u, "relative", t && N[i]),
+      ...f,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: o(
+              "absolute inset-0 flex items-center justify-center",
+              t ? "opacity-100" : "opacity-0"
+            ),
+            children: t && /* @__PURE__ */ l(
+              g,
+              {
+                appear: !0,
+                as: "span",
+                show: t,
+                enter: "transition-all duration-700",
+                enterFrom: "opacity-0",
+                enterTo: "opacity-100",
+                children: [
+                  r && /* @__PURE__ */ s(
+                    d,
+                    {
+                      size: "medium",
+                      className: o("relative -top-0.25 text-white", {
+                        "text-black": n === "outline"
+                      })
+                    }
+                  ),
+                  e && !r && /* @__PURE__ */ s(x, { size: "current", color: "current", className: "relative -top-0.25 text-white" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s("span", { className: o(t ? "flex-shrink flex-grow opacity-0" : "opacity-100"), children: p })
+      ]
+    }
+  );
+};
+export {
+  C as SubmitButton
+};

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ButtonProps } from './Button';
+declare const colors: {
+    readonly outline: {
+        readonly primary: "bg-primary-lighter border border-primary hover:bg-primary-light hover:border-primary-dark";
+        readonly secondary: "bg-secondary-light border border-secondary-light hover:bg-secondary-light hover:border-secondary";
+        readonly success: "bg-success-lightish border border-success hover:bg-success-light hover:border-success-dark";
+        readonly warning: "bg-warning-lightish border border-warning hover:bg-warning-light hover:border-warning-dark";
+        readonly caution: "bg-caution-lightish border border-caution hover:bg-caution-light hover:border-caution-dark";
+        readonly danger: "bg-danger-lightish border border-danger hover:bg-danger-light hover:border-danger-dark";
+    };
+};
+type ToggleVariant = keyof typeof colors;
+type ToggleColor = keyof typeof colors.outline;
+export interface ToggleButtonProps extends Omit<ButtonProps, "variant" | "color"> {
+    color?: ToggleColor;
+    variant?: ToggleVariant;
+    isActive: boolean;
+}
+export declare const ToggleButton: ({ color, variant, isActive, className, ...rest }: ToggleButtonProps) => React.JSX.Element;
+export {};

package/build/components/Buttons/ToggleButton.js

@@ -0,0 +1,34 @@
+import { jsx as b } from "react/jsx-runtime";
+import d from "clsx";
+import { Button as t } from "./Button.js";
+const h = {
+  outline: {
+    primary: "bg-primary-lighter border border-primary hover:bg-primary-light hover:border-primary-dark",
+    secondary: "bg-secondary-light border border-secondary-light hover:bg-secondary-light hover:border-secondary",
+    success: "bg-success-lightish border border-success hover:bg-success-light hover:border-success-dark",
+    warning: "bg-warning-lightish border border-warning hover:bg-warning-light hover:border-warning-dark",
+    caution: "bg-caution-lightish border border-caution hover:bg-caution-light hover:border-caution-dark",
+    danger: "bg-danger-lightish border border-danger hover:bg-danger-light hover:border-danger-dark"
+  }
+}, c = ({
+  color: r = "primary",
+  variant: e = "outline",
+  isActive: o,
+  className: g,
+  ...i
+}) => /* @__PURE__ */ b(
+  t,
+  {
+    color: r,
+    variant: e,
+    className: d(
+      "text-black",
+      g,
+      o ? h[e][r] : `bg-white hover:bg-${r}-lighter hover:border-${r}`
+    ),
+    ...i
+  }
+);
+export {
+  c as ToggleButton
+};

package/build/components/Charts/BaseChartOptions.d.ts

@@ -0,0 +1,136 @@
+/**
+ * This view sets up a Chart. A 'Chart' is anything Highcharts can render (graphs, pies, donuts etc)
+ * This is the master file of defaults for Xola's charts. Colors, sizes, dimensions etc.
+ */
+export declare const BaseChartOptions: {
+    global: {
+        useUTC: boolean;
+    };
+    chart: {
+        spacingLeft: number;
+    };
+    colors: (string | {
+        lighter: string;
+        light: string;
+        DEFAULT: string;
+        dark: string;
+        darker: string;
+    })[];
+    xAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    yAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    tooltip: {
+        enabled: boolean;
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        valueDecimals: number;
+        crosshairs: boolean[];
+        shadow: boolean;
+        useHTML: boolean;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            opacity: number;
+            color: string;
+        };
+    };
+    title: {
+        text: string;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+    };
+    plotOptions: {
+        series: {
+            marker: {
+                enabled: boolean;
+                states: {
+                    hover: {
+                        enabled: boolean;
+                        lineWidth: number;
+                        radius: number;
+                    };
+                };
+            };
+        };
+    };
+    legend: {
+        enabled: boolean;
+        itemStyle: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        };
+        itemMarginBottom: number;
+        align: string;
+        layout: string;
+        borderWidth: number;
+    };
+    credits: {
+        enabled: boolean;
+    };
+};

package/build/components/Charts/BaseChartOptions.js

@@ -0,0 +1,95 @@
+import { merge as t } from "lodash-es";
+import { theme as o } from "../../theme.js";
+const { colors: e } = o, r = {
+  color: e.gray.darker,
+  fontSize: o.fontSize.sm,
+  // 12px
+  fontWeight: 400,
+  cursor: "pointer",
+  textOverflow: "ellipsis",
+  fontFamily: o.extend.fontFamily.sans
+}, s = {
+  global: {
+    useUTC: !1
+  },
+  chart: {
+    spacingLeft: 0
+  },
+  colors: [
+    e.primary,
+    e.success,
+    e.warning,
+    e.caution,
+    e.danger,
+    e.blue.darker,
+    e.green.darker,
+    e.red.darker,
+    e.yellow.darker,
+    e.orange.darker
+  ],
+  xAxis: {
+    title: { style: t({}, r, { color: e.black }) },
+    labels: { style: r }
+  },
+  yAxis: {
+    title: { style: t({}, r, { color: e.black }) },
+    labels: { style: r }
+  },
+  tooltip: {
+    enabled: !0,
+    backgroundColor: e.black,
+    borderColor: e.black,
+    borderRadius: 4,
+    borderWidth: 1,
+    valueDecimals: 2,
+    crosshairs: [!0, !0],
+    // Show crosshairs when you browse over the toolips
+    shadow: !1,
+    useHTML: !0,
+    // This is used to insert spans with classes for custom css
+    style: t({}, r, {
+      opacity: 0.9,
+      color: "#cccccc"
+    })
+  },
+  title: {
+    text: "",
+    // No title by default
+    style: t({}, r, { color: e.black, fontSize: "18px", fontWeight: 600 })
+  },
+  plotOptions: {
+    series: {
+      // Markers are not shown by default, except when you hover
+      marker: {
+        enabled: !0,
+        states: {
+          hover: {
+            enabled: !0,
+            // Width and radius of the marker when you hover
+            lineWidth: 1,
+            radius: 4
+          }
+        }
+      }
+    }
+  },
+  legend: {
+    enabled: !1,
+    // By default legend is disabled
+    // The style applied to each item in the legend
+    itemStyle: r,
+    itemMarginBottom: 5,
+    align: "center",
+    // Center it in the chart canvas
+    layout: "vertical",
+    // Legend items are shown as a list
+    borderWidth: 0
+  },
+  credits: {
+    // Don't show the 'Powered by Highcharts' text
+    enabled: !1
+  }
+};
+export {
+  s as BaseChartOptions
+};