@coinloger/dev-ui 0.1.0 → 0.1.3

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

@@ -0,0 +1,23 @@
+import { ElementType, HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * If true, container will be fluid (100% width) at all breakpoints.
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * The component used for the root node.
+     * @default 'div'
+     */
+    as?: ElementType;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+}
+/**
+ * A container component to center your content horizontally.
+ * It's the most basic layout element.
+ */
+export declare const Container: ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLElement>>;

package/dist/esm/components/Container/Container.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { clsx as c } from "clsx";
+/* empty css              */
+const f = m(
+  ({
+    className: r,
+    children: o,
+    fluid: i = !1,
+    as: a = "div",
+    ...s
+  }, t) => {
+    const e = c(
+      "ui-container",
+      i && "ui-container--fluid",
+      r
+    );
+    return /* @__PURE__ */ n(a, { ref: t, className: e, ...s, children: o });
+  }
+);
+f.displayName = "Container";
+export {
+  f as Container
+};

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

@@ -0,0 +1,64 @@
+import { ElementType, CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { FlexItem } from './FlexItem';
+
+export interface FlexProps {
+    /**
+     * The direction of the flex container.
+     * @default 'row'
+     */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Alignment of items along the main axis.
+     * @default 'start'
+     */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /**
+     * Alignment of items along the cross axis.
+     * @default 'stretch'
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Whether items should wrap to the next line.
+     * @default 'nowrap'
+     */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /**
+     * Gap between items.
+     * Can be a predefined size ('sm', 'md', 'lg', 'xl') or a valid CSS value (number or string).
+     * @default 'md'
+     */
+    gap?: 'sm' | 'md' | 'lg' | 'xl' | number | string;
+    /**
+     * If true, renders as an inline-flex container.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * The component used for the root node.
+     * @default 'div'
+     */
+    as?: ElementType;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: CSSProperties;
+    /**
+     * Optional ID.
+     */
+    id?: string;
+}
+/**
+ * A flexible layout component (Flexbox).
+ * building block for creating structured layouts.
+ */
+export declare const Flex: ForwardRefExoticComponent<FlexProps & RefAttributes<HTMLElement>> & {
+    Item: typeof FlexItem;
+};

package/dist/esm/components/Flex/Flex.js

@@ -0,0 +1,39 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { clsx as w } from "clsx";
+import { FlexItem as F } from "./FlexItem.js";
+/* empty css         */
+const s = $(
+  ({
+    className: i,
+    children: l,
+    direction: r = "row",
+    justify: o = "start",
+    align: m = "stretch",
+    wrap: f = "nowrap",
+    gap: e = "md",
+    inline: x = !1,
+    as: u = "div",
+    style: n,
+    ...c
+  }, a) => {
+    const t = typeof e == "number" || typeof e == "string" && !["sm", "md", "lg", "xl"].includes(e), p = w(
+      x ? "ui-flex--inline" : "ui-flex",
+      `ui-flex--dir-${r}`,
+      `ui-flex--justify-${o}`,
+      `ui-flex--align-${m}`,
+      `ui-flex--wrap-${f}`,
+      !t && e && `ui-flex--gap-${e}`,
+      i
+    ), d = {
+      ...n,
+      ...t ? { gap: e } : {}
+    };
+    return /* @__PURE__ */ y(u, { ref: a, className: p, style: d, ...c, children: l });
+  }
+);
+s.displayName = "Flex";
+s.Item = F;
+export {
+  s as Flex
+};

package/dist/esm/components/Flex/FlexItem.d.ts

@@ -0,0 +1,53 @@
+import { ElementType, CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FlexItemProps {
+    /**
+     * Flex grow factor.
+     * @default 0
+     */
+    grow?: boolean | number;
+    /**
+     * Flex shrink factor.
+     * @default 1
+     */
+    shrink?: boolean | number;
+    /**
+     * Flex basis value.
+     * @default 'auto'
+     */
+    basis?: string | number;
+    /**
+     * Flex shorthand.
+     */
+    flex?: string | number;
+    /**
+     * Explicit width.
+     */
+    width?: string | number;
+    /**
+     * Order of the item.
+     */
+    order?: number;
+    /**
+     * The component used for the root node.
+     * @default 'div'
+     */
+    as?: ElementType;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: CSSProperties;
+    /**
+     * Optional ID.
+     */
+    id?: string;
+}
+export declare const FlexItem: ForwardRefExoticComponent<FlexItemProps & RefAttributes<HTMLElement>>;

package/dist/esm/components/Flex/FlexItem.js

@@ -0,0 +1,33 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { clsx as u } from "clsx";
+const y = p(
+  ({
+    className: i,
+    children: s,
+    grow: e,
+    shrink: o,
+    basis: t,
+    flex: l,
+    width: m,
+    order: f,
+    as: a = "div",
+    style: x,
+    ...d
+  }, r) => {
+    const v = {
+      ...x,
+      ...e !== void 0 && { flexGrow: e === !0 ? 1 : e === !1 ? 0 : e },
+      ...o !== void 0 && { flexShrink: o === !0 ? 1 : o === !1 ? 0 : o },
+      ...t !== void 0 && { flexBasis: t },
+      ...l !== void 0 && { flex: l },
+      ...m !== void 0 && { width: m },
+      ...f !== void 0 && { order: f }
+    };
+    return /* @__PURE__ */ c(a, { ref: r, className: u("ui-flex-item", i), style: v, ...d, children: s });
+  }
+);
+y.displayName = "Flex.Item";
+export {
+  y as FlexItem
+};

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

@@ -1,61 +1,31 @@
-import { jsxs as g, jsx as n } from "react/jsx-runtime";
-import { forwardRef as c, useId as b } from "react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { forwardRef as d, useId as f } from "react";
 import { clsx as r } from "clsx";
-import * as e from "prop-types";
 /* empty css          */
-const u = c(
-  ({ className: p, label: t, error: i, helperText: o, fullWidth: l, size: a = "md", id: m, ...d }, f) => {
-    const s = m || b();
-    return /* @__PURE__ */ g("div", { className: r("ui-input-wrapper", l && "ui-input-wrapper-full"), children: [
-      t && /* @__PURE__ */ n("label", { htmlFor: s, className: "ui-label", children: t }),
-      /* @__PURE__ */ n(
+const h = d(
+  ({ className: s, label: p, error: t, helperText: u, fullWidth: n, size: a = "md", id: l, ...m }, o) => {
+    const e = l || f();
+    return /* @__PURE__ */ c("div", { className: r("ui-input-wrapper", n && "ui-input-wrapper-full"), children: [
+      p && /* @__PURE__ */ i("label", { htmlFor: e, className: "ui-label", children: p }),
+      /* @__PURE__ */ i(
         "input",
         {
-          ref: f,
-          id: s,
+          ref: o,
+          id: e,
           className: r(
             "ui-input",
             `ui-input-${a}`,
-            i && "ui-input-error",
-            p
+            t && "ui-input-error",
+            s
           ),
-          ...d
+          ...m
         }
       ),
-      o && /* @__PURE__ */ n("span", { className: r("ui-helper-text", i && "ui-helper-text-error"), children: o })
+      u && /* @__PURE__ */ i("span", { className: r("ui-helper-text", t && "ui-helper-text-error"), children: u })
     ] });
   }
 );
-u.displayName = "Input";
-u.propTypes = {
-  label: e.node,
-  error: e.bool,
-  helperText: e.string,
-  fullWidth: e.bool,
-  size: e.oneOf(["sm", "md", "lg", "xl"]),
-  value: e.oneOfType([e.string, e.number]),
-  defaultValue: e.oneOfType([e.string, e.number]),
-  onChange: e.func,
-  onBlur: e.func,
-  onFocus: e.func,
-  name: e.string,
-  id: e.string,
-  placeholder: e.string,
-  type: e.string,
-  disabled: e.bool,
-  readOnly: e.bool,
-  required: e.bool,
-  autoComplete: e.string,
-  autoFocus: e.bool,
-  min: e.oneOfType([e.string, e.number]),
-  max: e.oneOfType([e.string, e.number]),
-  step: e.oneOfType([e.string, e.number]),
-  minLength: e.number,
-  maxLength: e.number,
-  pattern: e.string,
-  inputMode: e.string,
-  className: e.string
-};
+h.displayName = "Input";
 export {
-  u as Input
+  h as Input
 };

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

@@ -1,16 +1,11 @@
 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 }: {
@@ -18,10 +13,6 @@ export declare const ModalBody: {
         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 }: {
@@ -29,10 +20,6 @@ export declare const ModalFooter: {
         className?: string;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
-    propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-    };
 };
 /**
  * Modal component properties.
@@ -76,16 +63,6 @@ export interface ModalProps {
 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 }: {
@@ -93,10 +70,6 @@ export declare const Modal: {
             className?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
-        propTypes: {
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            className: PropTypes.Requireable<string>;
-        };
     };
     Body: {
         ({ children, className }: {
@@ -104,10 +77,6 @@ export declare const Modal: {
             className?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
-        propTypes: {
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            className: PropTypes.Requireable<string>;
-        };
     };
     Footer: {
         ({ children, className }: {
@@ -115,9 +84,5 @@ export declare const Modal: {
             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

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

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

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