@coinloger/dev-ui 0.0.5 → 0.0.7

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,39 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { forwardRef as h, useId as x } from "react";
+import { clsx as i } from "clsx";
+import * as r from "prop-types";
+/* empty css          */
+const s = h(
+  ({ className: u, label: p, error: t, helperText: l, fullWidth: n, size: m = "md", id: a, ...d }, c) => {
+    const o = a || x();
+    return /* @__PURE__ */ f("div", { className: i("ui-input-wrapper", n && "ui-input-wrapper-full"), children: [
+      p && /* @__PURE__ */ e("label", { htmlFor: o, className: "ui-label", children: p }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: c,
+          id: o,
+          className: i(
+            "ui-input",
+            `ui-input-${m}`,
+            t && "ui-input-error",
+            u
+          ),
+          ...d
+        }
+      ),
+      l && /* @__PURE__ */ e("span", { className: i("ui-helper-text", t && "ui-helper-text-error"), children: l })
+    ] });
+  }
+);
+s.displayName = "Input";
+s.propTypes = {
+  label: r.node,
+  error: r.bool,
+  helperText: r.string,
+  fullWidth: r.bool,
+  size: r.oneOf(["sm", "md", "lg", "xl"])
+};
+export {
+  s as Input
+};

package/dist/esm/components/Modal/Modal.d.ts

@@ -0,0 +1,123 @@
+import { ReactNode } from 'react';
+
+import * as PropTypes from 'prop-types';
+export declare const ModalHeader: {
+    ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export declare const ModalBody: {
+    ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export declare const ModalFooter: {
+    ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+/**
+ * Modal component properties.
+ */
+export interface ModalProps {
+    /**
+     * Controls the visibility of the modal.
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the modal requests to be closed (e.g., backdrop click, ESC key).
+     */
+    onClose: () => void;
+    /**
+     * Content to be displayed in the modal header.
+     */
+    title?: ReactNode;
+    /**
+     * The body content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Content to be displayed in the modal footer.
+     */
+    footer?: ReactNode;
+    /**
+     * The width size of the modal.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * If true, clicking on the backdrop closes the modal.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+}
+export declare const Modal: {
+    ({ isOpen, onClose, title, children, footer, size, className, closeOnBackdropClick, }: ModalProps): import('react').ReactPortal | null;
+    displayName: string;
+    propTypes: {
+        isOpen: PropTypes.Validator<boolean>;
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        size: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        closeOnBackdropClick: PropTypes.Requireable<boolean>;
+    };
+} & {
+    Header: {
+        ({ children, className }: {
+            children: ReactNode;
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+        };
+    };
+    Body: {
+        ({ children, className }: {
+            children: ReactNode;
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+        };
+    };
+    Footer: {
+        ({ children, className }: {
+            children: ReactNode;
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+        };
+    };
+};

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,123 @@
+import { jsx as r, jsxs as c, Fragment as C } from "react/jsx-runtime";
+import { createContext as E, useRef as B, useState as R, useEffect as h, useContext as T } from "react";
+import { createPortal as j } from "react-dom";
+import { clsx as l } from "clsx";
+import * as o from "prop-types";
+/* empty css          */
+const v = E(void 0), F = () => {
+  const e = T(v);
+  if (!e)
+    throw new Error("Modal compound components must be used within a Modal");
+  return e;
+}, a = ({ children: e, className: d }) => {
+  const { onClose: n } = F();
+  return /* @__PURE__ */ c("div", { className: l("ui-modal-header", d), children: [
+    /* @__PURE__ */ r("h3", { className: "ui-modal-title", children: e }),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        className: "ui-modal-close",
+        onClick: n,
+        "aria-label": "Close modal",
+        children: /* @__PURE__ */ c("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    )
+  ] });
+}, i = ({ children: e, className: d }) => /* @__PURE__ */ r("div", { className: l("ui-modal-body", d), children: e }), s = ({ children: e, className: d }) => /* @__PURE__ */ r("div", { className: l("ui-modal-footer", d), children: e }), m = ({
+  isOpen: e,
+  onClose: d,
+  title: n,
+  children: u,
+  footer: y,
+  size: x = "md",
+  className: N,
+  closeOnBackdropClick: g = !0
+}) => {
+  const p = B(null), [k, f] = R(e);
+  h(() => {
+    e && f(!0);
+  }, [e]);
+  const M = () => {
+    e || f(!1);
+  };
+  if (h(() => {
+    const t = (w) => {
+      w.key === "Escape" && d();
+    };
+    return e && (document.addEventListener("keydown", t), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", t), document.body.style.overflow = "";
+    };
+  }, [e, d]), !k) return null;
+  const b = (t) => {
+    g && t.target === p.current && d();
+  };
+  return j(
+    /* @__PURE__ */ r(v.Provider, { value: { onClose: d }, children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: l("ui-modal-overlay", !e && "ui-modal-closing"),
+        ref: p,
+        onClick: b,
+        onAnimationEnd: M,
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: l(
+              "ui-modal",
+              `ui-modal-${x}`,
+              !e && "ui-modal-closing",
+              N
+            ),
+            role: "dialog",
+            "aria-modal": "true",
+            children: n ? /* @__PURE__ */ c(C, { children: [
+              /* @__PURE__ */ r(a, { children: n }),
+              /* @__PURE__ */ r(i, { children: u }),
+              y && /* @__PURE__ */ r(s, { children: y })
+            ] }) : u
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+}, V = Object.assign(m, {
+  Header: a,
+  Body: i,
+  Footer: s
+});
+m.displayName = "Modal";
+a.displayName = "ModalHeader";
+i.displayName = "ModalBody";
+s.displayName = "ModalFooter";
+m.propTypes = {
+  isOpen: o.bool.isRequired,
+  onClose: o.func.isRequired,
+  title: o.node,
+  children: o.node,
+  footer: o.node,
+  size: o.oneOf(["sm", "md", "lg", "xl"]),
+  className: o.string,
+  closeOnBackdropClick: o.bool
+};
+a.propTypes = {
+  children: o.node,
+  className: o.string
+};
+i.propTypes = {
+  children: o.node,
+  className: o.string
+};
+s.propTypes = {
+  children: o.node,
+  className: o.string
+};
+export {
+  V as Modal,
+  i as ModalBody,
+  s as ModalFooter,
+  a as ModalHeader
+};

package/dist/esm/components/Radio/Radio.d.ts

@@ -0,0 +1,26 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Radio component properties.
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Label to display next to the radio button.
+     */
+    label?: ReactNode;
+    /**
+     * If true, the radio will be styled with an error state.
+     */
+    error?: boolean;
+    /**
+     * The size of the radio button.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The visual color variant.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { clsx as c } from "clsx";
+import * as a from "prop-types";
+/* empty css          */
+const s = t(
+  ({ className: e, label: i, error: u, disabled: o, size: d = "md", variant: m = "primary", ...p }, l) => /* @__PURE__ */ n(
+    "label",
+    {
+      className: c(
+        "ui-radio-label",
+        `ui-radio-${d}`,
+        `ui-radio-${m}`,
+        o && "ui-radio-disabled",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "radio",
+            className: "ui-radio-input",
+            disabled: o,
+            ref: l,
+            ...p
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "ui-radio-custom", children: /* @__PURE__ */ r("span", { className: "ui-radio-dot" }) }),
+        i && /* @__PURE__ */ r("span", { className: "ui-radio-text", children: i })
+      ]
+    }
+  )
+);
+s.displayName = "Radio";
+s.propTypes = {
+  label: a.node,
+  error: a.bool,
+  size: a.oneOf(["sm", "md", "lg", "xl"]),
+  variant: a.oneOf(["primary", "success", "warning", "danger"])
+};
+export {
+  s as Radio
+};

package/dist/esm/components/Select/Select.d.ts

@@ -0,0 +1,76 @@
+import * as PropTypes from 'prop-types';
+export interface SelectOption {
+    value: string | number;
+    label: string;
+}
+/**
+ * Select component properties.
+ */
+export interface SelectProps {
+    /**
+     * Array of options to display.
+     */
+    options: SelectOption[];
+    /**
+     * The value of the selected option.
+     */
+    value?: string | number;
+    /**
+     * Callback fired when an option is selected.
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Placeholder text displayed when no option is selected.
+     * @default "Select an option"
+     */
+    placeholder?: string;
+    /**
+     * Label text displayed above the select.
+     */
+    label?: string;
+    /**
+     * If true, the select will be styled with an error state.
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the select.
+     */
+    helperText?: string;
+    /**
+     * If true, the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The size of the select trigger.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+/**
+ * Select/Dropdown component for selecting a value from a list of options.
+ */
+export declare const Select: {
+    ({ options, value, onChange, placeholder, label, error, helperText, disabled, fullWidth, size, className, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        options: PropTypes.Validator<(PropTypes.InferProps<{
+            value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+            label: PropTypes.Validator<string>;
+        }> | null | undefined)[]>;
+        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        error: PropTypes.Requireable<boolean>;
+        helperText: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        fullWidth: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+};

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,110 @@
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { useState as w, useRef as T, useEffect as R } from "react";
+import { clsx as r } from "clsx";
+import * as e from "prop-types";
+/* empty css           */
+const b = ({
+  options: i,
+  value: n,
+  onChange: m,
+  placeholder: y = "Select an option",
+  label: p,
+  error: f,
+  helperText: h,
+  disabled: o,
+  fullWidth: g,
+  size: v = "md",
+  className: x
+}) => {
+  const [t, a] = w(!1), c = T(null), u = i.find((l) => l.value === n), N = () => {
+    o || a(!t);
+  }, k = (l) => {
+    m && m(l), a(!1);
+  };
+  return R(() => {
+    const l = (O) => {
+      c.current && !c.current.contains(O.target) && a(!1);
+    };
+    return t && document.addEventListener("mousedown", l), () => {
+      document.removeEventListener("mousedown", l);
+    };
+  }, [t]), /* @__PURE__ */ d(
+    "div",
+    {
+      className: r("ui-select-wrapper", g && "ui-w-full", x),
+      ref: c,
+      style: { width: g ? "100%" : "auto" },
+      children: [
+        p && /* @__PURE__ */ s("label", { className: "ui-label", style: { marginBottom: "0.375rem", display: "block" }, children: p }),
+        /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            className: r(
+              "ui-select-trigger",
+              `ui-select-${v}`,
+              f && "ui-select-error",
+              o && "ui-select-disabled",
+              t && "ui-select-open"
+            ),
+            onClick: N,
+            disabled: o,
+            "aria-haspopup": "listbox",
+            "aria-expanded": t,
+            children: [
+              /* @__PURE__ */ s("span", { className: r(!u && "ui-select-placeholder"), children: u ? u.label : y }),
+              /* @__PURE__ */ s(
+                "svg",
+                {
+                  className: "ui-select-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ s("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ d("ul", { className: "ui-select-menu", role: "listbox", children: [
+          i.map((l) => /* @__PURE__ */ s(
+            "li",
+            {
+              className: r(
+                "ui-select-option",
+                l.value === n && "ui-select-selected"
+              ),
+              onClick: () => k(l.value),
+              role: "option",
+              "aria-selected": l.value === n,
+              children: l.label
+            },
+            l.value
+          )),
+          i.length === 0 && /* @__PURE__ */ s("li", { className: "ui-select-option", style: { color: "var(--ui-text-muted)", cursor: "default" }, children: "No options" })
+        ] }),
+        h && /* @__PURE__ */ s("span", { className: r("ui-helper-text", f && "ui-helper-text-error"), style: { marginTop: "0.375rem", display: "block" }, children: h })
+      ]
+    }
+  );
+};
+b.displayName = "Select";
+b.propTypes = {
+  options: e.arrayOf(e.shape({
+    value: e.oneOfType([e.string, e.number]).isRequired,
+    label: e.string.isRequired
+  })).isRequired,
+  value: e.oneOfType([e.string, e.number]),
+  onChange: e.func,
+  placeholder: e.string,
+  label: e.string,
+  error: e.bool,
+  helperText: e.string,
+  disabled: e.bool,
+  fullWidth: e.bool,
+  size: e.oneOf(["sm", "md", "lg", "xl"]),
+  className: e.string
+};
+export {
+  b as Select
+};

package/dist/esm/components/Switch/Switch.d.ts

@@ -0,0 +1,26 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Switch toggle component properties.
+ */
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Label to display next to the switch.
+     */
+    label?: ReactNode;
+    /**
+     * If true, the switch will be styled with an error state.
+     */
+    error?: boolean;
+    /**
+     * The size of the switch.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The visual color variant.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Switch/Switch.js

@@ -0,0 +1,44 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { clsx as h } from "clsx";
+import * as i from "prop-types";
+/* empty css           */
+const t = n(
+  ({ className: a, label: r, error: u, disabled: e, size: c = "md", variant: o = "primary", ...m }, p) => /* @__PURE__ */ l(
+    "label",
+    {
+      className: h(
+        "ui-switch-label",
+        `ui-switch-${c}`,
+        `ui-switch-${o}`,
+        e && "ui-switch-disabled",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: "checkbox",
+            className: "ui-switch-input",
+            disabled: e,
+            ref: p,
+            role: "switch",
+            ...m
+          }
+        ),
+        /* @__PURE__ */ s("span", { className: "ui-switch-track", children: /* @__PURE__ */ s("span", { className: "ui-switch-thumb" }) }),
+        r && /* @__PURE__ */ s("span", { className: "ui-switch-text", children: r })
+      ]
+    }
+  )
+);
+t.displayName = "Switch";
+t.propTypes = {
+  label: i.node,
+  error: i.bool,
+  size: i.oneOf(["sm", "md", "lg", "xl"]),
+  variant: i.oneOf(["primary", "success", "warning", "danger"])
+};
+export {
+  t as Switch
+};

package/dist/esm/components/Table/Table.d.ts

@@ -0,0 +1,27 @@
+import { TableHTMLAttributes } from 'react';
+
+/**
+ * Table component properties.
+ */
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * If true, adds borders to table cells.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * If true, adds alternating background colors to rows.
+     */
+    striped?: boolean;
+    /**
+     * If true, adds a hover effect to rows.
+     */
+    hover?: boolean;
+    /**
+     * The size of the table padding.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+}
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
+export {};

package/dist/esm/components/Table/Table.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import * as e from "prop-types";
+/* empty css          */
+const r = n(
+  ({ className: s, bordered: a = !0, striped: i, hover: l, size: t = "md", children: m, ...b }, p) => {
+    const d = [
+      "ui-table",
+      a && "ui-table-bordered",
+      i && "ui-table-striped",
+      l && "ui-table-hover",
+      t === "sm" && "ui-table-sm",
+      s
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ o("div", { className: "ui-table-responsive", children: /* @__PURE__ */ o("table", { ref: p, className: d, ...b, children: m }) });
+  }
+);
+r.displayName = "Table";
+r.propTypes = {
+  bordered: e.bool,
+  striped: e.bool,
+  hover: e.bool,
+  size: e.oneOf(["sm", "md"])
+};
+export {
+  r as Table
+};