@liujip0/components 0.2.2 → 0.2.4

package/dist/components/Backdrop/Backdrop.d.ts

@@ -1,6 +1,7 @@
 type BackdropProps = {
     open: boolean;
     onClose?: () => void;
+    className?: string;
 };
-export declare function Backdrop({ open, onClose }: BackdropProps): import("react/jsx-runtime").JSX.Element;
+export declare function Backdrop({ open, onClose, className }: BackdropProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Backdrop/Backdrop.js

@@ -1,18 +1,18 @@
-import { jsx as c, Fragment as a } from "react/jsx-runtime";
-import '../../assets/Backdrop.css';const t = "_backdrop_qbjym_1", p = {
-  backdrop: t
+import { jsx as c, Fragment as t } from "react/jsx-runtime";
+import '../../assets/Backdrop.css';const p = "_backdrop_qbjym_1", d = {
+  backdrop: p
 };
-function k({ open: o, onClose: r }) {
+function n({ open: o, onClose: r, className: a }) {
   return o ? /* @__PURE__ */ c(
     "div",
     {
       onClick: () => {
         r && r();
       },
-      className: p.backdrop
+      className: d.backdrop + " " + (a || "")
     }
-  ) : /* @__PURE__ */ c(a, {});
+  ) : /* @__PURE__ */ c(t, {});
 }
 export {
-  k as Backdrop
+  n as Backdrop
 };

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 type ButtonProps = {
+    ref?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;
     className?: string;
-    ref?: React.Ref<HTMLButtonElement>;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare function Button({ children, className, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">;
+export declare function Button({ ref, children, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/Button.js

@@ -2,14 +2,14 @@ import { jsx as s } from "react/jsx-runtime";
 import '../../assets/Button.css';const r = "_button_y7o2r_1", b = {
   button: r
 };
-function e({ children: t, className: o, ref: n, ...u }) {
+function e({ ref: t, children: o, className: n, ...u }) {
   return /* @__PURE__ */ s(
     "button",
     {
-      ref: n,
-      className: b.button + " " + (o || ""),
+      ref: t,
+      className: b.button + " " + (n || ""),
       ...u,
-      children: t
+      children: o
     }
   );
 }

package/dist/components/Button/IconButton/IconButton.d.ts

@@ -1,6 +1,7 @@
 type IconButtonProps = {
+    ref?: React.Ref<HTMLButtonElement>;
     children: React.ReactNode;
     className?: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare function IconButton({ children, className, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">;
+export declare function IconButton({ ref, children, className, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/IconButton/IconButton.js

@@ -1,17 +1,23 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../../assets/IconButton.css';const s = "_button_180ek_1", b = {
-  button: s
+import { jsx as s } from "react/jsx-runtime";
+import '../../../assets/IconButton.css';const b = "_button_180ek_1", c = {
+  button: b
 };
-function e({ children: t, className: o, ...n }) {
-  return /* @__PURE__ */ u(
+function r({
+  ref: t,
+  children: o,
+  className: n,
+  ...u
+}) {
+  return /* @__PURE__ */ s(
     "button",
     {
-      className: b.button + " " + (o || ""),
-      ...n,
-      children: t
+      ref: t,
+      className: c.button + " " + (n || ""),
+      ...u,
+      children: o
     }
   );
 }
 export {
-  e as IconButton
+  r as IconButton
 };

package/dist/components/Button/ToggleButton/ToggleButton.d.ts

@@ -1,20 +1,20 @@
-type ToggleButtonProps = {
+import { default as React } from 'react';
+export type ToggleButtonProps = {
+    ref?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;
     className?: string;
     classNameTrue?: string;
     classNameFalse?: string;
-    disabled?: boolean;
-    ref?: React.Ref<HTMLButtonElement>;
-};
-type ToggleButtonPropsAsStandalone = {
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "ref" | "className">;
+export type ToggleButtonPropsAsStandalone = {
     value: boolean;
     onChange: (value: boolean) => void;
-} & ToggleButtonProps;
+} & Omit<ToggleButtonProps, "value" | "onChange" | "onClick">;
 export type ToggleButtonPropsAsChild = {
     value: string;
     selected?: boolean;
     onClick?: () => void;
-} & ToggleButtonProps;
-export declare function ToggleButton({ value, onClick, children, }: ToggleButtonPropsAsChild): React.ReactNode;
-export declare function ToggleButton({ value, onChange, children, }: ToggleButtonPropsAsStandalone): React.ReactNode;
-export {};
+} & Omit<ToggleButtonProps, "value" | "onClick" | "onChange">;
+export declare function ToggleButtonInternal({ value, onChange, }: ToggleButtonPropsAsStandalone): React.ReactNode;
+export declare function ToggleButtonInternal({ value, onClick, }: ToggleButtonPropsAsChild): React.ReactNode;
+export declare function ToggleButton({ ...props }: ToggleButtonPropsAsStandalone | Omit<ToggleButtonPropsAsChild, "selected" | "onClick">): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ToggleButton/ToggleButton.js

@@ -1,32 +1,38 @@
-import { jsx as b } from "react/jsx-runtime";
-import { Button as s } from "../Button.js";
-import '../../../assets/ToggleButton.css';const C = "_buttonFalse_1ed44_1", d = "_buttonTrue_1ed44_8", e = {
-  buttonFalse: C,
-  buttonTrue: d
+import { jsx as e } from "react/jsx-runtime";
+import { omit as C } from "../../../utils/omit.js";
+import { Button as b } from "../Button.js";
+import '../../../assets/ToggleButton.css';const f = "_buttonFalse_1ed44_1", m = "_buttonTrue_1ed44_8", u = {
+  buttonFalse: f,
+  buttonTrue: m
 };
-function g({
-  value: n,
-  children: o,
-  className: u,
-  classNameTrue: i,
-  classNameFalse: l,
-  disabled: c,
-  ref: a,
-  ...t
+function i({
+  ref: t,
+  value: o,
+  children: l,
+  className: a,
+  classNameTrue: c,
+  classNameFalse: g,
+  ...n
 }) {
-  return /* @__PURE__ */ b(
-    s,
+  return /* @__PURE__ */ e(
+    b,
     {
-      ref: a,
-      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (i || "") : e.buttonFalse + " " + (l || "")) + " " + (u || ""),
+      ref: t,
+      className: (("selected" in n ? n.selected : o) ? u.buttonTrue + " " + (c || "") : u.buttonFalse + " " + (g || "")) + " " + (a || ""),
       onClick: () => {
-        "onChange" in t && t.onChange !== void 0 ? t.onChange(!n) : "onClick" in t && t.onClick !== void 0 && t.onClick();
+        "onChange" in n && n.onChange ? n.onChange(!o) : "onClick" in n && n.onClick && n.onClick();
       },
-      disabled: c,
-      children: o
+      ..."onChange" in n ? C(n, ["onChange"]) : n,
+      children: l
     }
   );
 }
+function _({
+  ...t
+}) {
+  return "onChange" in t ? /* @__PURE__ */ e(i, { ...t }) : /* @__PURE__ */ e(i, { ...t });
+}
 export {
-  g as ToggleButton
+  _ as ToggleButton,
+  i as ToggleButtonInternal
 };

package/dist/components/Button/ToggleButton/ToggleButtonGroup.d.ts

@@ -4,9 +4,9 @@ type ToggleButtonGroupProps = {
     onChange: (value: string) => void;
     children?: React.ReactNode;
     label?: string;
-    error?: boolean;
     helperText?: string;
+    error?: boolean;
     className?: string;
 };
-export declare function ToggleButtonGroup({ value, onChange, children, label, error, helperText, className, }: ToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButtonGroup({ value, onChange, children, label, helperText, error, className, }: ToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/ToggleButton/ToggleButtonGroup.js

@@ -12,8 +12,8 @@ function f({
   onChange: o,
   children: c,
   label: s,
-  error: i,
   helperText: p,
+  error: i,
   className: a
 }) {
   const m = t.Children.map(c, (e) => t.isValidElement(e) ? t.cloneElement(e, {

package/dist/components/Dialog/Dialog.d.ts

@@ -2,18 +2,23 @@ type DialogProps = {
     open: boolean;
     onClose?: () => void;
     children?: React.ReactNode;
+    backdropClassName?: string;
+    dialogClassName?: string;
 };
-export declare function Dialog({ open, onClose, children }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ open, onClose, children, backdropClassName, dialogClassName, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 type DialogTitleProps = {
     children: React.ReactNode;
+    className?: string;
 };
-export declare function DialogTitle({ children }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogTitle({ children, className }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
 type DialogContentProps = {
     children: React.ReactNode;
+    className?: string;
 };
-export declare function DialogContent({ children }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogContent({ children, className }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
 type DialogActionsProps = {
     children: React.ReactNode;
+    className?: string;
 };
-export declare function DialogActions({ children }: DialogActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogActions({ children, className }: DialogActionsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/Dialog.js

@@ -1,44 +1,50 @@
-import { jsx as n, Fragment as l } from "react/jsx-runtime";
-import '../../assets/Dialog.css';const s = "_screenDarken_9wfqy_1", c = "_dialog_9wfqy_16", g = "_dialogTitle_9wfqy_29", r = "_dialogContent_9wfqy_36", d = "_dialogActions_9wfqy_41", i = {
-  screenDarken: s,
-  dialog: c,
-  dialogTitle: g,
-  dialogContent: r,
-  dialogActions: d
+import { jsx as i, Fragment as c } from "react/jsx-runtime";
+import '../../assets/Dialog.css';const g = "_screenDarken_9wfqy_1", r = "_dialog_9wfqy_16", d = "_dialogTitle_9wfqy_29", _ = "_dialogContent_9wfqy_36", f = "_dialogActions_9wfqy_41", t = {
+  screenDarken: g,
+  dialog: r,
+  dialogTitle: d,
+  dialogContent: _,
+  dialogActions: f
 };
-function f({ open: o, onClose: t, children: a }) {
-  return o ? /* @__PURE__ */ n(
+function u({
+  open: n,
+  onClose: o,
+  children: a,
+  backdropClassName: e,
+  dialogClassName: l
+}) {
+  return n ? /* @__PURE__ */ i(
     "div",
     {
-      className: i.screenDarken,
+      className: t.screenDarken + " " + (e || ""),
       onClick: () => {
-        t && t();
+        o && o();
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          className: i.dialog,
-          onClick: (e) => {
-            e.stopPropagation();
+          className: t.dialog + " " + (l || ""),
+          onClick: (s) => {
+            s.stopPropagation();
           },
           children: a
         }
       )
     }
-  ) : /* @__PURE__ */ n(l, {});
+  ) : /* @__PURE__ */ i(c, {});
 }
-function m({ children: o }) {
-  return /* @__PURE__ */ n("h2", { className: i.dialogTitle, children: o });
+function D({ children: n, className: o }) {
+  return /* @__PURE__ */ i("h2", { className: t.dialogTitle + " " + (o || ""), children: n });
 }
-function u({ children: o }) {
-  return /* @__PURE__ */ n("div", { className: i.dialogContent, children: o });
+function k({ children: n, className: o }) {
+  return /* @__PURE__ */ i("div", { className: t.dialogContent + " " + (o || ""), children: n });
 }
-function D({ children: o }) {
-  return /* @__PURE__ */ n("div", { className: i.dialogActions, children: o });
+function y({ children: n, className: o }) {
+  return /* @__PURE__ */ i("div", { className: t.dialogActions + " " + (o || ""), children: n });
 }
 export {
-  f as Dialog,
-  D as DialogActions,
-  u as DialogContent,
-  m as DialogTitle
+  u as Dialog,
+  y as DialogActions,
+  k as DialogContent,
+  D as DialogTitle
 };

package/dist/components/Divider/Divider.d.ts

@@ -1,5 +1,6 @@
 type DividerProps = {
     orientation: "horizontal" | "vertical";
+    className?: string;
 };
-export declare function Divider({ orientation }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Divider({ orientation, className }: DividerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Divider/Divider.js

@@ -1,17 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../assets/Divider.css';const d = "_divider_rubc3_1", v = "_horizontalDivider_rubc3_8", t = "_verticalDivider_rubc3_13", i = {
-  divider: d,
-  horizontalDivider: v,
-  verticalDivider: t
+import { jsx as d } from "react/jsx-runtime";
+import '../../assets/Divider.css';const v = "_divider_rubc3_1", t = "_horizontalDivider_rubc3_8", o = "_verticalDivider_rubc3_13", i = {
+  divider: v,
+  horizontalDivider: t,
+  verticalDivider: o
 };
-function c({ orientation: r }) {
-  return /* @__PURE__ */ e(
+function n({ orientation: r, className: e }) {
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: i.divider + " " + (i[r] + "Divider")
+      className: i.divider + " " + (i[r] + "Divider") + " " + (e || "")
     }
   );
 }
 export {
-  c as Divider
+  n as Divider
 };

package/dist/components/Input/Checkbox/Checkbox.d.ts

@@ -1,9 +1,11 @@
 type CheckboxProps = {
+    id: string;
     value: boolean;
     onChange: (value: boolean) => void;
-    id: string;
     label?: string | React.ReactNode;
     className?: string;
-};
-export declare function Checkbox({ value, onChange, id, label, className, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    buttonClassName?: string;
+    labelClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "value" | "onChange" | "className">;
+export declare function Checkbox({ id, value, onChange, label, className, buttonClassName, labelClassName, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Checkbox/Checkbox.js

@@ -1,23 +1,26 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { IconButton as i } from "../../Button/IconButton/IconButton.js";
-import '../../../assets/Radio.css';const h = "_container_12u6r_1", m = "_label_12u6r_7", r = {
-  container: h,
-  label: m
+import { IconButton as b } from "../../Button/IconButton/IconButton.js";
+import '../../../assets/Radio.css';const d = "_container_12u6r_1", _ = "_label_12u6r_7", r = {
+  container: d,
+  label: _
 };
-function _({
+function p({
+  id: n,
   value: c,
-  onChange: n,
-  id: l,
+  onChange: l,
   label: o,
-  className: a
+  className: a,
+  buttonClassName: s,
+  labelClassName: i,
+  ...m
 }) {
-  return /* @__PURE__ */ t("div", { className: r.container, children: [
+  return /* @__PURE__ */ t("div", { className: r.container + " " + (a || ""), children: [
     /* @__PURE__ */ t(
-      i,
+      b,
       {
-        className: a,
+        className: s || "",
         onClick: () => {
-          n(!c);
+          l(!c);
         },
         children: [
           c ? /* @__PURE__ */ e("span", { className: "material-symbols-outlined", children: "check_box" }) : /* @__PURE__ */ e("span", { className: "material-symbols-outlined", children: "check_box_outline_blank" }),
@@ -25,12 +28,13 @@ function _({
             "input",
             {
               type: "checkbox",
-              id: l,
+              id: n,
               checked: c,
-              onChange: (s) => {
-                n(s.currentTarget.checked);
+              onChange: (h) => {
+                l(h.currentTarget.checked);
               },
-              hidden: !0
+              hidden: !0,
+              ...m
             }
           )
         ]
@@ -39,13 +43,13 @@ function _({
     o && /* @__PURE__ */ e(
       "label",
       {
-        htmlFor: l,
-        className: r.label,
+        htmlFor: n,
+        className: r.label + " " + (i || ""),
         children: o
       }
     )
   ] });
 }
 export {
-  _ as Checkbox
+  p as Checkbox
 };

package/dist/components/Input/Counter/Counter.d.ts

@@ -1,11 +1,15 @@
 type CounterProps = {
-    value: number;
     id: string;
+    value: number;
     increment: () => void;
     decrement: () => void;
-    label: string;
+    min?: number;
     max?: number;
+    label: string;
     disabled?: boolean;
-};
-export declare function Counter({ value, id, increment, decrement, label, max, disabled, }: CounterProps): import("react/jsx-runtime").JSX.Element;
+    className?: string;
+    buttonClassName?: string;
+    inputClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "value" | "onChange" | "type" | "min" | "max" | "disabled">;
+export declare function Counter({ id, value, increment, decrement, min, max, label, disabled, className, buttonClassName, inputClassName, ...props }: CounterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Counter/Counter.js

@@ -1,50 +1,56 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { Button as e } from "../../Button/Button.js";
-import { Input as m } from "../Input.js";
-import '../../../assets/Counter.css';const b = "_container_12kgw_1", p = "_button_12kgw_6", _ = "_buttonDisabled_12kgw_19", d = "_input_12kgw_31", t = {
-  container: b,
-  button: p,
-  buttonDisabled: _,
-  input: d
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { Button as r } from "../../Button/Button.js";
+import { Input as f } from "../Input.js";
+import '../../../assets/Counter.css';const k = "_container_12kgw_1", h = "_button_12kgw_6", D = "_buttonDisabled_12kgw_19", N = "_input_12kgw_31", t = {
+  container: k,
+  button: h,
+  buttonDisabled: D,
+  input: N
 };
-function h({
-  value: s,
-  id: c,
-  increment: r,
-  decrement: a,
-  label: l,
-  max: i,
-  disabled: n = !1
+function j({
+  id: a,
+  value: i,
+  increment: u,
+  decrement: l,
+  min: s,
+  max: e,
+  label: m,
+  disabled: n,
+  className: b,
+  buttonClassName: c,
+  inputClassName: p,
+  ..._
 }) {
-  return /* @__PURE__ */ u("div", { className: t.container, children: [
+  return /* @__PURE__ */ d("div", { className: t.container + " " + (b || ""), children: [
     /* @__PURE__ */ o(
-      e,
+      r,
       {
-        className: t.button + " " + (n ? t.buttonDisabled : ""),
+        className: t.button + " " + (n ? t.buttonDisabled : "") + " " + (c || ""),
         onClick: () => {
-          s > 0 && a();
+          (s === void 0 || i > s) && l();
         },
         disabled: n,
         children: /* @__PURE__ */ o("span", { className: "material-symbols-outlined", children: "remove" })
       }
     ),
     /* @__PURE__ */ o(
-      m,
+      f,
       {
-        id: c,
-        value: s,
-        label: l,
+        id: a,
+        value: i,
+        label: m,
         disabled: n,
-        className: t.input,
-        type: "number"
+        className: t.input + " " + (p || ""),
+        type: "number",
+        ..._
       }
     ),
     /* @__PURE__ */ o(
-      e,
+      r,
       {
-        className: t.button + " " + (n ? t.buttonDisabled : ""),
+        className: t.button + " " + (n ? t.buttonDisabled : "") + " " + (c || ""),
         onClick: () => {
-          (i === void 0 || s < i) && r();
+          (e === void 0 || i < e) && u();
         },
         disabled: n,
         children: /* @__PURE__ */ o("span", { className: "material-symbols-outlined", children: "add" })
@@ -53,5 +59,5 @@ function h({
   ] });
 }
 export {
-  h as Counter
+  j as Counter
 };

package/dist/components/Input/Input.d.ts

@@ -1,19 +1,18 @@
-type InputProps = {
+export type InputProps = {
+    id: string;
     value: string | number;
     onChange?: (value: string) => void;
     type?: "text" | "password" | "email" | "number" | "search";
-    id: string;
+    label?: string;
+    helperText?: string;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
-    label?: string;
     error?: boolean;
-    helperText?: string;
     disabled?: boolean;
     className?: string;
     outlineClassName?: string;
+    inputClassName?: string;
     labelClassName?: string;
     helperTextClassName?: string;
-    inputClassName?: string;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-export declare function Input({ value, onChange, type, id, startIcon, endIcon, label, error, helperText, disabled, className, outlineClassName, labelClassName, helperTextClassName, inputClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
-export {};
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "value" | "onChange" | "type" | "disabled" | "className">;
+export declare function Input({ id, value, onChange, type, label, helperText, startIcon, endIcon, error, disabled, className, outlineClassName, inputClassName, labelClassName, helperTextClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;