@cronocode/react-box 1.2.7 → 1.3.2

package/components/baseSvg.mjs

@@ -1,22 +1,22 @@
-import v, { useState as H } from "react";
-import { C as g, t as f } from "../utils/utils.mjs";
-const a = { base: "cGH", rotate0: "cGI", rotateH0: "cGJ", hovertrue: "_h", rotate90: "cGK", rotateH90: "cGL", rotate180: "cGM", rotateH180: "cGN", rotate270: "cGO", rotateH270: "cGP", flipxAxis: "cGQ", flipHxAxis: "cGR", flipyAxis: "cGS", flipHyAxis: "cGT", rotateF0: "cGU", focustrue: "_f", rotateF90: "cGV", rotateF180: "cGW", rotateF270: "cGX", flipFxAxis: "cGY", flipFyAxis: "cGZ", rotateA0: "cG0", rotateA90: "cG1", rotateA180: "cG2", rotateA270: "cG3", flipAxAxis: "cG4", flipAyAxis: "cG5" };
-function F(c) {
-  const { children: t, props: p, className: r, style: x, viewBox: A, width: m, height: u } = c, e = r ? g.classNames(r, a.base) : [a.base];
-  Object.entries(c).forEach(([o, n]) => {
-    const G = a[o + n];
-    G ? e.push(G) : o in f && e.push(`${f[o]}${n}`);
+import d, { useState as N } from "react";
+import { C as x, t as m } from "../utils/utils.mjs";
+import { c as a } from "../baseSvg.module.css.mjs";
+function C(n) {
+  const { children: s, props: p, className: r, style: h, viewBox: u, width: v, height: g } = n, e = r ? x.classNames(r, a.base) : [a.base];
+  Object.entries(n).forEach(([o, l]) => {
+    const f = a[o + l];
+    f ? e.push(f) : o in m && e.push(`${m[o]}${l}`);
   });
-  const s = {
+  const t = {
     ...p,
-    style: { ...x, width: m, height: u },
+    style: { ...h, width: v, height: g },
     className: e.join(" "),
-    viewBox: A || "0 0 24 24",
+    viewBox: u || "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none"
-  }, [h, i] = H(!1), l = typeof t == "function";
-  return l && (s.onMouseEnter = () => i(!0), s.onMouseLeave = () => i(!1)), v.createElement("svg", s, l ? t({ isHover: h }) : t);
+  }, [w, c] = N(!1), i = typeof s == "function";
+  return i && (t.onMouseEnter = () => c(!0), t.onMouseLeave = () => c(!1)), d.createElement("svg", t, i ? s({ isHover: w }) : s);
 }
 export {
-  F as default
+  C as default
 };

package/components/{buttonCore.d.ts → button.d.ts}

@@ -1,13 +1,14 @@
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-type ButtonTagProps = Omit<BoxTagProps, 'type' | 'onClick' | 'disabled'>;
+declare const tagProps: readonly ["type", "onClick", "disabled"];
+type TagPropsType = (typeof tagProps)[number];
+type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
 interface Props extends Omit<BoxProps, 'props'> {
     props?: ButtonTagProps;
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    disabled?: boolean;
 }
 declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;

package/components/button.mjs

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import p from "../box.mjs";
+import { O as e } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+import "../theme.mjs";
+const s = ["type", "onClick", "disabled"];
+function m(o, t) {
+  const r = e.buildProps(o, s);
+  return /* @__PURE__ */ n(p, { ref: t, tag: "button", inline: !0, cursor: "pointer", component: "button", ...r });
+}
+const d = i(m);
+export {
+  d as default
+};

package/components/{radioButtonCore.d.ts → checkbox.d.ts}

@@ -2,19 +2,21 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-type RadioButtonCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'checked' | 'defaultChecked'>;
+declare const tagProps: readonly ["name", "onInput", "onChange", "disabled", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
+type TagPropsType = (typeof tagProps)[number];
+type CheckboxTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
 interface Props extends Omit<BoxProps, 'props'> {
     name?: string;
-    props?: RadioButtonCoreTagProps;
-    onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
-    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
+    props?: CheckboxTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
     required?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    native?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/checkbox.mjs

@@ -0,0 +1,30 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import t from "../box.mjs";
+import { O as a } from "../utils/utils.mjs";
+import l from "./flex.mjs";
+import { c as d } from "../box.module.css.mjs";
+import "../theme.mjs";
+const p = [
+  "name",
+  "onInput",
+  "onChange",
+  "disabled",
+  "autoFocus",
+  "readOnly",
+  "required",
+  "value",
+  "checked",
+  "defaultChecked"
+];
+function m(o, r) {
+  const { native: n } = o, i = a.buildProps(o, p, { type: "checkbox" });
+  return /* @__PURE__ */ c(l, { inline: !0, position: "relative", children: [
+    /* @__PURE__ */ e(t, { ref: r, tag: "input", inline: !0, b: 1, p: 2, component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
+    !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", className: d._checkedIcon, children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 10.15L8.5 13 14 7" }) }) }) })
+  ] });
+}
+const w = s(m);
+export {
+  w as default
+};

package/components/dataGrid.d.ts

@@ -0,0 +1,15 @@
+export interface GridCell<T> {
+    key: keyof T;
+    value: React.ReactNode;
+}
+export interface GridColumn<T extends {}> {
+    key: keyof T;
+}
+export interface GridRow<T extends {}> {
+    dataRow: T;
+    cells: GridCell<T>[];
+}
+export interface Grid<T extends {}> {
+    columns: GridColumn<T>[];
+    rows: GridRow<T>[];
+}

package/components/dataGrid.mjs

@@ -0,0 +1,36 @@
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import t from "../box.mjs";
+import "react";
+import "../box.module.css.mjs";
+import "../utils/utils.mjs";
+import "../theme.mjs";
+function p(i) {
+  if (!(i != null && i.length))
+    return {
+      rows: [],
+      columns: []
+    };
+  const e = Object.keys(i[0]);
+  return {
+    rows: i.map((r) => ({
+      dataRow: r,
+      cells: e.map((n) => ({
+        key: n,
+        value: r[n]
+      }))
+    })),
+    columns: e.map((r) => ({
+      key: r
+    }))
+  };
+}
+function h(i) {
+  const { data: e } = i, r = p(e);
+  return r.columns.length === 0 ? /* @__PURE__ */ s(t, { display: "grid", children: "empty grid" }) : /* @__PURE__ */ l(t, { display: "grid", children: [
+    r.columns.map((n, o) => /* @__PURE__ */ s(t, { style: { gridColumn: o + 1 }, children: n.key.toString() }, n.key.toString())),
+    r.rows.map((n, o) => n.cells.map((m) => /* @__PURE__ */ s(t, { children: m.value }, m.key.toString() + o)))
+  ] });
+}
+export {
+  h as default
+};

package/components/flex.mjs

@@ -3,6 +3,7 @@ import r from "../box.mjs";
 import "react";
 import "../box.module.css.mjs";
 import "../utils/utils.mjs";
+import "../theme.mjs";
 function x(i) {
   const { inline: o } = i;
   return /* @__PURE__ */ t(r, { display: o ? "inline-flex" : "flex", ...i });

package/components/form.d.ts

@@ -0,0 +1,10 @@
+import Box from '../box';
+type BoxProps = React.ComponentProps<typeof Box<'form'>>;
+type BoxTagProps = Required<BoxProps>['props'];
+type FormTagProps = Omit<BoxTagProps, 'onSubmit' | 'ref'>;
+interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
+    props?: FormTagProps;
+    onSubmit: (obj: T, e: React.ChangeEvent<HTMLFormElement>) => void;
+}
+export default function Form<T>(props: Props<T>): JSX.Element;
+export {};

package/components/{formAsync.mjs → form.mjs}

@@ -3,14 +3,15 @@ import { useRef as p, useCallback as u } from "react";
 import a from "../box.mjs";
 import { F as c } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-function S(o) {
-  const { onSubmit: m, props: n } = o, r = p(null), s = u((t) => {
+import "../theme.mjs";
+function d(o) {
+  const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
     t.preventDefault();
     const f = c.getFormEntries(r.current);
     m(f, t);
-  }, []), e = { ...n, onSubmit: s, ref: r };
-  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: e });
+  }, []), s = { ...n, onSubmit: e, ref: r };
+  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: s });
 }
 export {
-  S as default
+  d as default
 };

package/components/{checkboxCore.d.ts → radioButton.d.ts}

@@ -2,19 +2,21 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-type CheckboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'checked' | 'defaultChecked'>;
+declare const tagProps: readonly ["name", "onInput", "onChange", "disabled", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
+type TagPropsType = (typeof tagProps)[number];
+type RadioButtonTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
 interface Props extends Omit<BoxProps, 'props'> {
     name?: string;
-    props?: CheckboxCoreTagProps;
-    onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
-    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
+    props?: RadioButtonTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
     required?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    native?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/radioButton.mjs

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import i from "../box.mjs";
+import { O as d } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+import "../theme.mjs";
+const p = [
+  "name",
+  "onInput",
+  "onChange",
+  "disabled",
+  "value",
+  "autoFocus",
+  "readOnly",
+  "required",
+  "checked",
+  "defaultChecked"
+];
+function u(o, t) {
+  const { native: e } = o, n = d.buildProps(o, p, { type: "radio" });
+  return /* @__PURE__ */ r(i, { ref: t, tag: "input", inline: !0, b: 1, p: 2, component: "radioButton", ...n, appearance: e ? void 0 : "none" });
+}
+const B = a(u);
+export {
+  B as default
+};

package/components/{textareaCore.d.ts → textarea.d.ts}

@@ -2,12 +2,14 @@ import React from 'react';
 import Box from '../box';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-type TextareaCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'placeholder' | 'disabled' | 'value' | 'defaultValue' | 'rows' | 'cols' | 'autoFocus' | 'maxLength' | 'minLength' | 'readOnly' | 'required'>;
+declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "disabled", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly", "required"];
+type TagPropsType = (typeof tagProps)[number];
+type TextareaTagProps = Omit<BoxTagProps, TagPropsType>;
 interface Props extends Omit<BoxProps, 'props'> {
     name?: string;
-    props?: TextareaCoreTagProps;
-    onInput?: (e: React.FormEvent<HTMLTextAreaElement>) => void;
-    onChange?: (e: React.FormEvent<HTMLTextAreaElement>) => void;
+    props?: TextareaTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     placeholder?: string;
     disabled?: boolean;
     value?: string;

package/components/textarea.mjs

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import n from "../box.mjs";
+import { O as i } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+import "../theme.mjs";
+const m = [
+  "name",
+  "onInput",
+  "onChange",
+  "placeholder",
+  "disabled",
+  "value",
+  "defaultValue",
+  "rows",
+  "cols",
+  "autoFocus",
+  "maxLength",
+  "minLength",
+  "readOnly",
+  "required"
+];
+function s(t, e) {
+  const o = i.buildProps(t, m);
+  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", inline: !0, ...o });
+}
+const x = a(s);
+export {
+  x as default
+};

package/components/textbox.d.ts

@@ -1,17 +1,16 @@
 import React from 'react';
 import Box from '../box';
-import Theme from '../theme';
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "disabled", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
 type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends Omit<BoxProps, 'props'>, Theme.ThemeComponentProps {
+interface Props extends Omit<BoxProps, 'props'> {
     name?: string;
     props?: TextboxTagProps;
-    onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
-    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     type?: TextboxType;
     placeholder?: string;
     value?: string | number;

package/components/textbox.mjs

@@ -1,10 +1,10 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import i from "../box.mjs";
-import { O as m } from "../utils/utils.mjs";
-import { useTheme as s } from "../theme.mjs";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import a from "../box.mjs";
+import { O as p } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
-const u = [
+import "../theme.mjs";
+const i = [
   "name",
   "onInput",
   "onChange",
@@ -18,11 +18,11 @@ const u = [
   "value",
   "pattern"
 ];
-function p(t, e) {
-  const o = s("textbox", t), r = m.buildProps(t, u, o);
-  return /* @__PURE__ */ n(i, { ref: e, tag: "input", inline: !0, ...r });
+function u(t, o) {
+  const e = p.buildProps(t, i);
+  return /* @__PURE__ */ r(a, { ref: o, tag: "input", inline: !0, component: "textbox", ...e });
 }
-const h = a(p);
+const c = n(u);
 export {
-  h as default
+  c as default
 };

package/components/tooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BoxPosition } from '../types';
+interface Props extends BoxPosition {
+    children: React.ReactNode;
+    style?: React.ComponentProps<'div'>['style'];
+}
+export default function Tooltip(props: Props): JSX.Element;
+export {};

package/components/tooltip.mjs

@@ -0,0 +1,55 @@
+import { jsxs as w, Fragment as x, jsx as u } from "react/jsx-runtime";
+import { createPortal as b } from "react-dom";
+import a from "../box.mjs";
+import { useRef as E, useState as L, useCallback as i, useLayoutEffect as g } from "react";
+import { u as z } from "../utils/utils.mjs";
+import "../box.module.css.mjs";
+import "../theme.mjs";
+function B(c) {
+  const { children: p } = c, t = E(null), [n, d] = L(), f = z(), m = i((r, e) => {
+    const o = (l) => {
+      l.target.contains(r) && e();
+    };
+    return document.addEventListener("scroll", o, { capture: !0 }), () => {
+      document.removeEventListener("scroll", o, { capture: !0 });
+    };
+  }, []), v = i((r, e) => {
+    const o = (l) => {
+      e();
+    };
+    return window.addEventListener("resize", o, { capture: !0 }), () => {
+      window.removeEventListener("resize", o, { capture: !0 });
+    };
+  }, []), s = i((r) => () => {
+    const e = r.getBoundingClientRect();
+    d({ top: e.top + window.scrollY, left: e.left + window.scrollX });
+  }, []);
+  return g(() => {
+    if (t.current) {
+      s(t.current)();
+      const r = m(t.current, s(t.current)), e = v(t.current, s(t.current));
+      return () => {
+        r(), e();
+      };
+    }
+  }, []), /* @__PURE__ */ w(x, { children: [
+    /* @__PURE__ */ u(a, { ref: t, position: "absolute", top: 0, left: 0, ...c, children: void 0 }),
+    n && b(
+      /* @__PURE__ */ u(
+        a,
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transition: "none",
+          style: { transform: `translate(${n.left}px,${n.top}px)` },
+          children: p
+        }
+      ),
+      f
+    )
+  ] });
+}
+export {
+  B as default
+};

package/hooks/usePortalContainer.d.ts

@@ -0,0 +1 @@
+export default function usePortalContainer(): HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.2.7",
+  "version": "1.3.2",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",
@@ -23,7 +23,9 @@
     }
   },
   "scripts": {
-    "dev": "vite ./dev --config ./vite.config.ts --mode dev",
+    "dev": "vite ./pages --config ./pages.vite.config.ts --mode dev",
+    "build:pages": "vite build ./pages --config ./pages.vite.config.ts --outDir ../dist --mode production",
+    "preview": "vite preview",
     "build": "vite build",
     "build:dev": "vite build --mode dev",
     "postbuild": "cp package.json dist & cp LICENSE dist & rm ./dist/index.d.ts & rm ./dist/index.js",
@@ -62,6 +64,7 @@
     "prettier": "^2.8.7",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "typescript": "^5.0.2",
     "vite": "^4.2.1",
     "vite-plugin-dts": "^2.1.0"