@coinloger/dev-ui 0.1.0 → 0.1.3

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

@@ -1,4 +1,4 @@
-import * as PropTypes from 'prop-types';
+
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -57,20 +57,4 @@ export interface SelectProps {
 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

@@ -1,110 +1,112 @@
-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";
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { useState as N, useRef as C, useEffect as g } from "react";
+import { clsx as n } from "clsx";
 /* 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 O = ({
+  options: c,
+  value: a,
+  onChange: p,
+  placeholder: x = "Select an option",
+  label: f,
+  error: h,
+  helperText: v,
+  disabled: u,
+  fullWidth: w,
+  size: k = "md",
+  className: y
 }) => {
-  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);
+  const [t, d] = N(!1), [L, b] = N("bottom"), i = C(null), m = c.find((e) => e.value === a), l = () => {
+    if (i.current) {
+      const e = i.current.getBoundingClientRect(), o = window.innerHeight - e.bottom, B = e.top;
+      o < 250 && B > o ? b("top") : b("bottom");
+    }
+  }, E = () => {
+    u || (t || l(), d(!t));
+  }, S = (e) => {
+    p && p(e), d(!1);
   };
-  return R(() => {
-    const l = (O) => {
-      c.current && !c.current.contains(O.target) && a(!1);
+  return g(() => (t && (window.addEventListener("resize", l), window.addEventListener("scroll", l, { capture: !0 })), () => {
+    window.removeEventListener("resize", l), window.removeEventListener("scroll", l, { capture: !0 });
+  }), [t]), g(() => {
+    const e = (o) => {
+      i.current && !i.current.contains(o.target) && d(!1);
     };
-    return t && document.addEventListener("mousedown", l), () => {
-      document.removeEventListener("mousedown", l);
+    return t && document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
     };
-  }, [t]), /* @__PURE__ */ d(
+  }, [t]), /* @__PURE__ */ r(
     "div",
     {
-      className: r("ui-select-wrapper", g && "ui-w-full", x),
-      ref: c,
-      style: { width: g ? "100%" : "auto" },
+      className: n("ui-select-wrapper", w && "ui-w-full", y),
+      ref: i,
+      style: { width: w ? "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",
+        f && /* @__PURE__ */ s("label", { className: "ui-label", style: { marginBottom: "0.375rem", display: "block" }, children: f }),
+        /* @__PURE__ */ r("div", { className: "ui-select-input-container", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: n(
+                "ui-select-trigger",
+                `ui-select-${k}`,
+                h && "ui-select-error",
+                u && "ui-select-disabled",
+                t && "ui-select-open"
+              ),
+              onClick: E,
+              disabled: u,
+              "aria-haspopup": "listbox",
+              "aria-expanded": t,
+              children: [
+                /* @__PURE__ */ s("span", { className: n(!m && "ui-select-placeholder"), children: m ? m.label : x }),
+                /* @__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__ */ r(
+            "ul",
             {
-              className: r(
-                "ui-select-option",
-                l.value === n && "ui-select-selected"
+              className: n(
+                "ui-select-menu",
+                L === "top" && "ui-select-menu-top"
               ),
-              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" })
+              role: "listbox",
+              children: [
+                c.map((e) => /* @__PURE__ */ s(
+                  "li",
+                  {
+                    className: n(
+                      "ui-select-option",
+                      e.value === a && "ui-select-selected"
+                    ),
+                    onClick: () => S(e.value),
+                    role: "option",
+                    "aria-selected": e.value === a,
+                    children: e.label
+                  },
+                  e.value
+                )),
+                c.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 })
+        v && /* @__PURE__ */ s("span", { className: n("ui-helper-text", h && "ui-helper-text-error"), style: { marginTop: "0.375rem", display: "block" }, children: v })
       ]
     }
   );
 };
-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
-};
+O.displayName = "Select";
 export {
-  b as Select
+  O as Select
 };

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

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

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

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

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

@@ -1,6 +1,5 @@
 import { ReactNode, MouseEventHandler } from 'react';
 
-import * as PropTypes from 'prop-types';
 /**
  * Tabs Root properties.
  */
@@ -40,41 +39,17 @@ export interface TabsContentProps {
 export declare const Tabs: {
     ({ defaultValue, value, onValueChange, children, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
-    propTypes: {
-        defaultValue: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-    };
 } & {
     List: {
         ({ className, children, variant, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
-        propTypes: {
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            variant: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-        };
     };
     Trigger: {
         ({ value, className, children, onClick, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
-        propTypes: {
-            value: PropTypes.Validator<string>;
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            className: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
-            disabled: PropTypes.Requireable<boolean>;
-        };
     };
     Content: {
         ({ value, className, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
-        propTypes: {
-            value: PropTypes.Validator<string>;
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            className: PropTypes.Requireable<string>;
-        };
     };
 };

package/dist/esm/components/Tabs/Tabs.js

@@ -1,92 +1,67 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as N, useState as v, useId as y, useContext as f } from "react";
-import { clsx as d } from "clsx";
-import * as t from "prop-types";
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as x, useState as $, useId as N, useContext as m } from "react";
+import { clsx as b } from "clsx";
 /* empty css         */
-const p = N(null), m = ({ defaultValue: e, value: n, onValueChange: i, children: r, className: a }) => {
-  const [s, o] = v(e || ""), c = n !== void 0, b = c ? n : s, u = y(), g = (I) => {
-    c || o(I), i?.(I);
+const u = x(null), C = ({ defaultValue: t, value: s, onValueChange: a, children: o, className: n }) => {
+  const [e, i] = $(t || ""), r = s !== void 0, l = r ? s : e, d = N(), g = (T) => {
+    r || i(T), a?.(T);
   };
-  return /* @__PURE__ */ l(p.Provider, { value: { value: b, onChange: g, baseId: u }, children: /* @__PURE__ */ l("div", { className: d("ui-tabs", a), children: r }) });
-}, T = ({ className: e, children: n, variant: i = "line", ...r }) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ c(u.Provider, { value: { value: l, onChange: g, baseId: d }, children: /* @__PURE__ */ c("div", { className: b("ui-tabs", n), children: o }) });
+}, I = ({ className: t, children: s, variant: a = "line", ...o }) => /* @__PURE__ */ c(
   "div",
   {
     role: "tablist",
-    className: d("ui-tabs-list", `ui-tabs-list-${i}`, e),
-    ...r,
-    children: n
+    className: b("ui-tabs-list", `ui-tabs-list-${a}`, t),
+    ...o,
+    children: s
   }
-), h = ({ value: e, className: n, children: i, onClick: r, ...a }) => {
-  const s = f(p);
-  if (!s) throw new Error("TabsTrigger must be used within Tabs");
-  const o = s.value === e, c = `${s.baseId}-trigger-${e}`, b = `${s.baseId}-content-${e}`, u = (g) => {
-    s.onChange(e), r?.(g);
+), p = ({ value: t, className: s, children: a, onClick: o, ...n }) => {
+  const e = m(u);
+  if (!e) throw new Error("TabsTrigger must be used within Tabs");
+  const i = e.value === t, r = `${e.baseId}-trigger-${t}`, l = `${e.baseId}-content-${t}`, d = (g) => {
+    e.onChange(t), o?.(g);
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
       role: "tab",
-      "aria-selected": o,
-      "aria-controls": b,
-      id: c,
-      tabIndex: o ? 0 : -1,
-      "data-state": o ? "active" : "inactive",
-      className: d("ui-tabs-trigger", n),
-      onClick: u,
-      ...a,
-      children: i
+      "aria-selected": i,
+      "aria-controls": l,
+      id: r,
+      tabIndex: i ? 0 : -1,
+      "data-state": i ? "active" : "inactive",
+      className: b("ui-tabs-trigger", s),
+      onClick: d,
+      ...n,
+      children: a
     }
   );
-}, C = ({ value: e, className: n, children: i, ...r }) => {
-  const a = f(p);
-  if (!a) throw new Error("TabsContent must be used within Tabs");
-  const s = a.value === e, o = `${a.baseId}-trigger-${e}`, c = `${a.baseId}-content-${e}`;
-  return s ? /* @__PURE__ */ l(
+}, h = ({ value: t, className: s, children: a, ...o }) => {
+  const n = m(u);
+  if (!n) throw new Error("TabsContent must be used within Tabs");
+  const e = n.value === t, i = `${n.baseId}-trigger-${t}`, r = `${n.baseId}-content-${t}`;
+  return e ? /* @__PURE__ */ c(
     "div",
     {
       role: "tabpanel",
-      id: c,
-      "aria-labelledby": o,
+      id: r,
+      "aria-labelledby": i,
       tabIndex: 0,
-      className: d("ui-tabs-content", n),
-      ...r,
-      children: i
+      className: b("ui-tabs-content", s),
+      ...o,
+      children: a
     }
   ) : null;
-}, k = Object.assign(m, {
-  List: T,
-  Trigger: h,
-  Content: C
+}, L = Object.assign(C, {
+  List: I,
+  Trigger: p,
+  Content: h
 });
-m.displayName = "Tabs";
-T.displayName = "TabsList";
-h.displayName = "TabsTrigger";
-C.displayName = "TabsContent";
-m.propTypes = {
-  defaultValue: t.string,
-  value: t.string,
-  onValueChange: t.func,
-  children: t.node,
-  className: t.string
-};
-T.propTypes = {
-  children: t.node,
-  variant: t.oneOf(["line", "pills"]),
-  className: t.string
-};
-h.propTypes = {
-  value: t.string.isRequired,
-  children: t.node,
-  className: t.string,
-  onClick: t.func,
-  disabled: t.bool
-};
-C.propTypes = {
-  value: t.string.isRequired,
-  children: t.node,
-  className: t.string
-};
+C.displayName = "Tabs";
+I.displayName = "TabsList";
+p.displayName = "TabsTrigger";
+h.displayName = "TabsContent";
 export {
-  k as Tabs
+  L as Tabs
 };

package/dist/esm/components/Typography/Heading.js

@@ -1,39 +1,29 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { clsx as f } from "clsx";
-import * as e from "prop-types";
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { clsx as s } from "clsx";
 /* empty css               */
-const i = u(
-  ({ className: n, children: a, level: o = 1, truncate: m, lines: t, style: r, ...p }, s) => {
-    const c = `h${o}`, l = t ? { ...r, "--ui-line-clamp": t } : r;
-    return /* @__PURE__ */ d(
+const f = d(
+  ({ className: i, children: r, level: o = 1, truncate: m, lines: t, style: a, ...e }, n) => {
+    const c = `h${o}`, p = t ? { ...a, "--ui-line-clamp": t } : a;
+    return /* @__PURE__ */ u(
       c,
       {
-        ref: s,
-        className: f(
+        ref: n,
+        className: s(
           "ui-heading",
           `ui-heading-h${o}`,
           m && "ui-text-truncate",
           t && "ui-text-clamp",
-          n
+          i
         ),
-        style: l,
-        ...p,
-        children: a
+        style: p,
+        ...e,
+        children: r
       }
     );
   }
 );
-i.displayName = "Heading";
-i.propTypes = {
-  level: e.oneOf([1, 2, 3, 4, 5, 6]),
-  truncate: e.bool,
-  lines: e.number,
-  children: e.node,
-  className: e.string,
-  style: e.object,
-  id: e.string
-};
+f.displayName = "Heading";
 export {
-  i as Heading
+  f as Heading
 };