@liujip0/components 0.2.2 → 0.2.3

package/dist/components/Input/Input.js

@@ -1,48 +1,48 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { s as e } from "../../Input.module-C7oR_KDs.js";
 function g({
+  id: t,
   value: m,
-  onChange: t,
+  onChange: l,
   type: o = "text",
-  id: l,
+  label: s,
+  helperText: n,
   startIcon: u,
   endIcon: p,
-  label: s,
-  error: n,
-  helperText: a,
+  error: a,
   disabled: i,
   className: h,
   outlineClassName: x,
-  labelClassName: N,
-  helperTextClassName: d,
-  inputClassName: f,
+  inputClassName: N,
+  labelClassName: d,
+  helperTextClassName: f,
   ...v
 }) {
   return /* @__PURE__ */ c("div", { className: e.container + " " + (h || ""), children: [
     s && /* @__PURE__ */ r(
       "label",
       {
-        htmlFor: l,
-        className: e.label + " " + (N || ""),
+        htmlFor: t,
+        className: e.label + " " + (d || ""),
         children: s
       }
     ),
     /* @__PURE__ */ c(
       "div",
       {
-        className: e.outline + " " + (x || "") + " " + (n ? e.errorOutline : ""),
+        className: e.outline + " " + (x || "") + " " + (a ? e.errorOutline : ""),
         children: [
           u,
           /* @__PURE__ */ r(
             "input",
             {
-              className: e.input + " " + (f || "") + " " + (i ? e.inputDisabled : ""),
+              className: e.input + " " + (N || "") + " " + (i ? e.inputDisabled : ""),
               value: m,
               onChange: (j) => {
-                t && t(j.currentTarget.value);
+                l && l(j.currentTarget.value);
               },
               type: o,
-              id: l,
+              id: t,
               disabled: i,
               ...v
             }
@@ -51,11 +51,11 @@ function g({
         ]
       }
     ),
-    a && /* @__PURE__ */ r(
+    n && /* @__PURE__ */ r(
       "p",
       {
-        className: e.helperText + " " + (d || "") + " " + (n ? e.helperTextError : ""),
-        children: a
+        className: e.helperText + " " + (f || "") + " " + (a ? e.helperTextError : ""),
+        children: n
       }
     )
   ] });

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

@@ -1,10 +1,15 @@
 export type RadioProps = {
-    selected?: boolean;
-    onChange?: (value: boolean) => void;
     id: string;
     value: string;
-    name?: string;
+    onChange?: (value: boolean) => void;
     label?: string | React.ReactNode;
     className?: string;
-};
-export declare function Radio({ selected, onChange, name, id, label, className, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    buttonClassName?: string;
+    labelClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "value" | "selected" | "onChange" | "className">;
+export type RadioPropsAsChild = {
+    selected?: boolean;
+} & RadioProps;
+export declare function RadioInternal({ id, onChange, label, className, buttonClassName, labelClassName, }: RadioProps): React.ReactNode;
+export declare function RadioInternal({ selected }: RadioPropsAsChild): React.ReactNode;
+export declare function Radio({ ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Radio/Radio.js

@@ -1,53 +1,58 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { IconButton as d } from "../../Button/IconButton/IconButton.js";
-import '../../../assets/Radio.css';const m = "_container_12u6r_1", u = "_label_12u6r_7", i = {
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { IconButton as u } from "../../Button/IconButton/IconButton.js";
+import '../../../assets/Radio.css';const m = "_container_12u6r_1", _ = "_label_12u6r_7", a = {
   container: m,
-  label: u
+  label: _
 };
-function b({
-  selected: r,
-  onChange: e,
-  name: o,
-  id: t,
-  label: c,
-  className: l
+function h({
+  id: c,
+  onChange: n,
+  label: l,
+  className: r,
+  buttonClassName: d,
+  labelClassName: s,
+  ...e
 }) {
-  return /* @__PURE__ */ a("div", { className: i.container, children: [
-    /* @__PURE__ */ a(
-      d,
+  return /* @__PURE__ */ i("div", { className: a.container + " " + (r || ""), children: [
+    /* @__PURE__ */ i(
+      u,
       {
-        className: l,
+        className: d || "",
         onClick: () => {
-          e && e(!r);
+          n && "selected" in e && n(!e.selected);
         },
         children: [
-          r ? /* @__PURE__ */ n("span", { className: "material-symbols-outlined", children: "radio_button_checked" }) : /* @__PURE__ */ n("span", { className: "material-symbols-outlined", children: "radio_button_unchecked" }),
-          /* @__PURE__ */ n(
+          "selected" in e && e.selected ? /* @__PURE__ */ t("span", { className: "material-symbols-outlined", children: "radio_button_checked" }) : /* @__PURE__ */ t("span", { className: "material-symbols-outlined", children: "radio_button_unchecked" }),
+          /* @__PURE__ */ t(
             "input",
             {
               type: "radio",
-              name: o,
-              id: t,
-              checked: r,
-              onChange: (s) => {
-                e && e(s.currentTarget.checked);
+              id: c,
+              checked: "selected" in e && e.selected,
+              onChange: (o) => {
+                n && n(o.currentTarget.checked);
               },
-              hidden: !0
+              hidden: !0,
+              ...e
             }
           )
         ]
       }
     ),
-    c && /* @__PURE__ */ n(
+    l && /* @__PURE__ */ t(
       "label",
       {
-        htmlFor: t,
-        className: i.label,
-        children: c
+        htmlFor: c,
+        className: a.label + " " + (s || ""),
+        children: l
       }
     )
   ] });
 }
+function k({ ...c }) {
+  return /* @__PURE__ */ t(h, { ...c });
+}
 export {
-  b as Radio
+  k as Radio,
+  h as RadioInternal
 };

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

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 type RadioGroupProps = {
-    children?: React.ReactNode;
     name: string;
+    value: string;
+    onChange: (value: string) => void;
+    children?: React.ReactNode;
     label?: string;
-    error?: boolean;
     helperText?: string;
+    error?: boolean;
     className?: string;
-    value: string;
-    onChange: (value: string) => void;
 };
-export declare function RadioGroup({ children, name, label, error, helperText, className, value, onChange, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup({ name, value, onChange, children, label, helperText, error, className, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Radio/RadioGroup.js

@@ -8,30 +8,30 @@ import '../../../assets/RadioGroup.css';const x = "_container_1ygqk_1", d = "_ou
   helperTextError: E
 };
 function k({
-  children: a,
-  name: i,
-  label: n,
-  error: c,
-  helperText: o,
-  className: p,
-  value: _,
-  onChange: s
+  name: a,
+  value: i,
+  onChange: n,
+  children: c,
+  label: o,
+  helperText: s,
+  error: p,
+  className: _
 }) {
-  const m = l.Children.map(a, (e) => l.isValidElement(e) ? l.cloneElement(e, {
-    name: i,
-    selected: _ === e.props.value,
+  const m = l.Children.map(c, (e) => l.isValidElement(e) ? l.cloneElement(e, {
+    name: a,
+    selected: i === e.props.value,
     onChange: (u) => {
-      s(u ? e.props.value : "");
+      n(u ? e.props.value : "");
     }
   }) : e);
-  return /* @__PURE__ */ h("div", { className: r.container + " " + (p || ""), children: [
-    n && /* @__PURE__ */ t("p", { className: r.label, children: n }),
+  return /* @__PURE__ */ h("div", { className: r.container + " " + (_ || ""), children: [
+    o && /* @__PURE__ */ t("p", { className: r.label, children: o }),
     /* @__PURE__ */ t("div", { className: r.outline, children: m }),
-    o && /* @__PURE__ */ t(
+    s && /* @__PURE__ */ t(
       "p",
       {
-        className: r.helperText + " " + (c ? r.helperTextError : ""),
-        children: o
+        className: r.helperText + " " + (p ? r.helperTextError : ""),
+        children: s
       }
     )
   ] });

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

@@ -2,13 +2,17 @@ import { default as React } from 'react';
 type SelectProps = {
     id: string;
     value: string;
+    onChange?: (value: string) => void;
     children?: React.ReactNode;
-    className?: string;
     label?: string;
-    onChange?: (value: string) => void;
-    disabled?: boolean;
     helperText?: string;
     error?: boolean;
-};
-export declare function Select({ id, value, children, className, label, onChange, disabled, helperText, error, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    disabled?: boolean;
+    className?: string;
+    outlineClassName?: string;
+    selectClassName?: string;
+    labelClassName?: string;
+    helperTextClassName?: string;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "id" | "value" | "onChange" | "disabled" | "className">;
+export declare function Select({ id, value, onChange, children, label, helperText, error, disabled, className, outlineClassName, selectClassName, labelClassName, helperTextClassName, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/Select/Select.js

@@ -1,63 +1,69 @@
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import "react";
-import '../../../assets/Select.css';const u = "_container_14cji_1", j = "_outline_14cji_6", x = "_errorOutline_14cji_18", m = "_select_14cji_22", b = "_selectDisabled_14cji_39", d = "_helperText_14cji_51", T = "_helperTextError_14cji_58", N = "_label_14cji_62", e = {
-  container: u,
-  outline: j,
-  errorOutline: x,
-  select: m,
-  selectDisabled: b,
-  helperText: d,
-  helperTextError: T,
-  label: N
+import '../../../assets/Select.css';const d = "_container_14cji_1", T = "_outline_14cji_6", N = "_errorOutline_14cji_18", D = "_select_14cji_22", E = "_selectDisabled_14cji_39", O = "_helperText_14cji_51", f = "_helperTextError_14cji_58", v = "_label_14cji_62", e = {
+  container: d,
+  outline: T,
+  errorOutline: N,
+  select: D,
+  selectDisabled: E,
+  helperText: O,
+  helperTextError: f,
+  label: v
 };
-function O({
+function C({
   id: t,
   value: o,
-  children: _,
-  className: a,
-  label: r,
-  onChange: c,
-  disabled: s,
-  helperText: i,
-  error: n
+  onChange: r,
+  children: a,
+  label: c,
+  helperText: s,
+  error: i,
+  disabled: n,
+  className: _,
+  outlineClassName: h,
+  selectClassName: p,
+  labelClassName: u,
+  helperTextClassName: j,
+  ...m
 }) {
-  return /* @__PURE__ */ p("div", { className: e.container + " " + (a || ""), children: [
-    r && /* @__PURE__ */ l(
+  return /* @__PURE__ */ b("div", { className: e.container + " " + (_ || ""), children: [
+    c && /* @__PURE__ */ l(
       "label",
       {
         htmlFor: t,
-        className: e.label,
-        children: r
+        className: e.label + " " + (e.labelClassName || "") + " " + (u || ""),
+        children: c
       }
     ),
     /* @__PURE__ */ l(
       "div",
       {
-        className: e.outline + " " + (n ? e.errorOutline : ""),
+        className: e.outline + " " + (i ? e.errorOutline : "") + " " + (h || ""),
         children: /* @__PURE__ */ l(
           "select",
           {
             id: t,
-            className: e.select + " " + (s ? e.selectDisabled : ""),
+            className: e.select + " " + (n ? e.selectDisabled : "") + " " + (p || ""),
             value: o,
-            onChange: (h) => {
-              c && c(h.target.value);
+            onChange: (x) => {
+              r && r(x.target.value);
             },
-            disabled: s,
-            children: _
+            disabled: n,
+            ...m,
+            children: a
           }
         )
       }
     ),
-    i && /* @__PURE__ */ l(
+    s && /* @__PURE__ */ l(
       "p",
       {
-        className: e.helperText + " " + (n ? e.helperTextError : ""),
-        children: i
+        className: e.helperText + " " + (i ? e.helperTextError : "") + " " + (j || ""),
+        children: s
       }
     )
   ] });
 }
 export {
-  O as Select
+  C as Select
 };

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

@@ -1,16 +1,16 @@
 type TextAreaProps = {
+    id: string;
     value: string | number;
     onChange?: (value: string) => void;
-    id: string;
     label?: string;
-    error?: boolean;
     helperText?: string;
+    error?: boolean;
     disabled?: boolean;
     className?: string;
     outlineClassName?: string;
+    textAreaClassName?: string;
     labelClassName?: string;
     helperTextClassName?: string;
-    textAreaClassName?: string;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare function TextArea({ value, onChange, id, label, error, helperText, disabled, className, outlineClassName, labelClassName, helperTextClassName, textAreaClassName, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "id" | "value" | "onChange" | "disabled" | "className">;
+export declare function TextArea({ id, value, onChange, label, helperText, error, disabled, className, outlineClassName, textAreaClassName, labelClassName, helperTextClassName, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Input/TextArea.js

@@ -1,53 +1,53 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { s as e } from "../../Input.module-C7oR_KDs.js";
 function T({
+  id: a,
   value: c,
-  onChange: a,
-  id: t,
+  onChange: t,
   label: l,
-  error: s,
-  helperText: i,
+  helperText: s,
+  error: i,
   disabled: n,
   className: m,
   outlineClassName: o,
-  labelClassName: u,
-  helperTextClassName: p,
-  textAreaClassName: h,
+  textAreaClassName: u,
+  labelClassName: p,
+  helperTextClassName: h,
   ...x
 }) {
   return /* @__PURE__ */ d("div", { className: e.container + " " + (m || ""), children: [
     l && /* @__PURE__ */ r(
       "label",
       {
-        htmlFor: t,
-        className: e.label + " " + (u || ""),
+        htmlFor: a,
+        className: e.label + " " + (p || ""),
         children: l
       }
     ),
     /* @__PURE__ */ r(
       "div",
       {
-        className: e.outline + " " + (s ? e.errorOutline : "") + " " + (o || ""),
+        className: e.outline + " " + (i ? e.errorOutline : "") + " " + (o || ""),
         children: /* @__PURE__ */ r(
           "textarea",
           {
-            className: e.input + " " + (h || "") + " " + (n ? e.inputDisabled : ""),
+            className: e.input + " " + (u || "") + " " + (n ? e.inputDisabled : ""),
             value: c,
             onChange: (N) => {
-              a && a(N.currentTarget.value);
+              t && t(N.currentTarget.value);
             },
-            id: t,
+            id: a,
             disabled: n,
             ...x
           }
         )
       }
     ),
-    i && /* @__PURE__ */ r(
+    s && /* @__PURE__ */ r(
       "p",
       {
-        className: e.helperText + " " + (p || "") + " " + (s ? e.helperTextError : ""),
-        children: i
+        className: e.helperText + " " + (h || "") + " " + (i ? e.helperTextError : ""),
+        children: s
       }
     )
   ] });

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,9 +1,12 @@
 type SnackbarProps = {
     open: boolean;
-    autoHideDuration?: number;
     onClose?: () => void;
+    autoHideDuration?: number;
     message?: string;
     action?: React.ReactNode;
+    className?: string;
+    messageClassName?: string;
+    actionClassName?: string;
 };
-export declare function Snackbar({ open, autoHideDuration, onClose, message, action, }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Snackbar({ open, onClose, autoHideDuration, message, action, className, messageClassName, actionClassName, }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Snackbar/Snackbar.js

@@ -1,28 +1,31 @@
-import { jsxs as i, jsx as c, Fragment as l } from "react/jsx-runtime";
-import { useEffect as f } from "react";
-import '../../assets/Snackbar.css';const _ = "_snackbar_tl00m_1", b = "_message_tl00m_18", a = {
-  snackbar: _,
-  message: b
+import { jsxs as _, jsx as c, Fragment as b } from "react/jsx-runtime";
+import { useEffect as g } from "react";
+import '../../assets/Snackbar.css';const k = "_snackbar_tl00m_1", d = "_message_tl00m_18", r = {
+  snackbar: k,
+  message: d
 };
-function d({
+function N({
   open: s,
-  autoHideDuration: e,
-  onClose: r,
+  onClose: e,
+  autoHideDuration: a,
   message: m,
-  action: t
+  action: t,
+  className: n,
+  messageClassName: i,
+  actionClassName: l
 }) {
-  return f(() => {
-    if (s && e && r) {
-      const n = setTimeout(() => {
-        r();
-      }, e);
-      return () => clearTimeout(n);
+  return g(() => {
+    if (s && a && e) {
+      const f = setTimeout(() => {
+        e();
+      }, a);
+      return () => clearTimeout(f);
     }
-  }, [s, e, r]), s ? /* @__PURE__ */ i("div", { className: a.snackbar, children: [
-    /* @__PURE__ */ c("p", { className: a.message, children: m }),
-    /* @__PURE__ */ c("div", { children: t })
-  ] }) : /* @__PURE__ */ c(l, {});
+  }, [s, a, e]), s ? /* @__PURE__ */ _("div", { className: r.snackbar + " " + (n || ""), children: [
+    /* @__PURE__ */ c("p", { className: r.message + " " + (i || ""), children: m }),
+    /* @__PURE__ */ c("div", { className: l || "", children: t })
+  ] }) : /* @__PURE__ */ c(b, {});
 }
 export {
-  d as Snackbar
+  N as Snackbar
 };

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

@@ -5,14 +5,17 @@ type TableProps = {
 export declare function Table({ children, className }: TableProps): import("react/jsx-runtime").JSX.Element;
 type TableHeadProps = {
     children?: React.ReactNode;
+    className?: string;
 };
-export declare function TableHead({ children }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ children, className }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
 type ThProps = {
     children?: React.ReactNode;
+    className?: string;
 };
-export declare function Th({ children }: ThProps): import("react/jsx-runtime").JSX.Element;
+export declare function Th({ children, className }: ThProps): import("react/jsx-runtime").JSX.Element;
 type TdProps = {
     children?: React.ReactNode;
+    className?: string;
 };
-export declare function Td({ children }: TdProps): import("react/jsx-runtime").JSX.Element;
+export declare function Td({ children, className }: TdProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Table.js

@@ -1,21 +1,21 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../assets/Table.css';const l = "_table_10gvy_1", s = "_tableHead_10gvy_8", c = "_th_10gvy_21", d = "_td_10gvy_33", a = {
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/Table.css';const l = "_table_10gvy_1", s = "_tableHead_10gvy_8", c = "_th_10gvy_21", d = "_td_10gvy_33", n = {
   table: l,
   tableHead: s,
   th: c,
   td: d
 };
-function _({ children: t, className: n }) {
-  return /* @__PURE__ */ e("table", { className: a.table + " " + (n || ""), children: t });
+function _({ children: t, className: e }) {
+  return /* @__PURE__ */ a("table", { className: n.table + " " + (e || ""), children: t });
 }
-function b({ children: t }) {
-  return /* @__PURE__ */ e("thead", { className: a.tableHead, children: t });
+function b({ children: t, className: e }) {
+  return /* @__PURE__ */ a("thead", { className: n.tableHead + " " + (e || ""), children: t });
 }
-function r({ children: t }) {
-  return /* @__PURE__ */ e("th", { className: a.th, children: t });
+function r({ children: t, className: e }) {
+  return /* @__PURE__ */ a("th", { className: n.th + " " + (e || ""), children: t });
 }
-function u({ children: t }) {
-  return /* @__PURE__ */ e("td", { className: a.td, children: t });
+function u({ children: t, className: e }) {
+  return /* @__PURE__ */ a("td", { className: n.td + " " + (e || ""), children: t });
 }
 export {
   _ as Table,

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

@@ -1,9 +1,8 @@
 export type TabProps = {
     value: string;
-    children: React.ReactNode;
     selected?: boolean;
     onClick?: () => void;
+    children: React.ReactNode;
     className?: string;
-    style?: React.CSSProperties;
-};
-export declare function Tab({ children, selected, onClick, className, style, }: TabProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "onClick">;
+export declare function Tab({ selected, onClick, children, className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tab.js

@@ -4,19 +4,19 @@ import '../../assets/Tab.css';const i = "_tab_1m0oo_1", n = "_activeTab_1m0oo_15
   activeTab: n
 };
 function m({
-  children: a,
-  selected: o,
-  onClick: b,
+  selected: a,
+  onClick: o,
+  children: b,
   className: c,
-  style: e
+  ...e
 }) {
   return /* @__PURE__ */ s(
     "div",
     {
-      className: t.tab + " " + (c || "") + " " + (o ? t.activeTab : ""),
-      onClick: b,
-      style: e,
-      children: a
+      className: t.tab + " " + (c || "") + " " + (a ? t.activeTab : ""),
+      onClick: o,
+      ...e,
+      children: b
     }
   );
 }

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

@@ -3,6 +3,7 @@ type TabBarProps = {
     value: string;
     onChange: (value: string) => void;
     children: React.ReactNode;
+    className?: string;
 };
-export declare function TabBar({ value, onChange, children }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabBar({ value, onChange, children, className }: TabBarProps): import("react/jsx-runtime").JSX.Element;
 export {};