@liujip0/components 0.0.0 → 0.1.0

package/README.md

@@ -1,69 +1,3 @@
-# React + TypeScript + Vite
+# @liujip0/components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+Just a simple components library for my own personal use!

package/dist/Input.module-D9zadJal.js

@@ -0,0 +1,13 @@
+import './assets/Input.css';const e = "_container_82euj_1", t = "_outline_82euj_6", r = "_errorOutline_82euj_18", n = "_input_82euj_22", _ = "_inputDisabled_82euj_38", l = "_helperText_82euj_42", o = "_helperTextError_82euj_49", u = "_label_82euj_53", i = {
+  container: e,
+  outline: t,
+  errorOutline: r,
+  input: n,
+  inputDisabled: _,
+  helperText: l,
+  helperTextError: o,
+  label: u
+};
+export {
+  i as s
+};

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_p3w70_1{min-width:64px;padding:6px 16px;border:none;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;gap:4px;font-size:1.25rem;font-family:var(--text-font-family);text-transform:uppercase;font-weight:500;line-height:1.75;letter-spacing:.02857em;cursor:pointer}._button_p3w70_1:hover{filter:var(--hover-dim)}
+._button_7qhy4_1{min-width:64px;padding:6px 16px;border:none;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;gap:4px;font-size:1.25rem;font-family:var(--text-font-family);text-transform:uppercase;font-weight:500;line-height:1.75;letter-spacing:.02857em;cursor:pointer}._button_7qhy4_1:hover{filter:var(--hover-dim)}

package/dist/assets/Counter.css

@@ -0,0 +1 @@
+._container_whykh_1{display:flex;align-items:flex-end}._button_whykh_6{height:var(--input-height);width:var(--input-height);min-width:0;min-height:0;background-color:var(--color-primary);color:var(--color-primary-contrastText);border:none}._buttonDisabled_whykh_16{background-color:color-mix(in srgb,var(--color-primary) 50%,#888);cursor:default}._buttonDisabled_whykh_16:hover{filter:none}._input_whykh_24{flex:1}

package/dist/assets/Dialog.css

@@ -0,0 +1 @@
+._screenDarken_17c5i_1{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:var(--z-index-modal)}._dialog_17c5i_16{max-width:80vw;max-height:80vh;display:flex;flex-direction:column;padding:24px;background-color:var(--color-paper-background);border-radius:var(--border-radius);border:var(--button-border-width) solid var(--color-primary)}._dialogTitle_17c5i_28{margin-bottom:16px;font-family:var(--text-font-family);font-size:var(--text-h2-size)}._dialogContent_17c5i_35{flex:1;overflow-y:auto}._dialogActions_17c5i_40{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

package/dist/assets/Divider.css

@@ -0,0 +1 @@
+._divider_nvu4k_1{border-width:.5px;border-style:solid;border-color:var(--color-primary);margin:8px}._horizontalDivider_nvu4k_8{width:100%;height:0}._verticalDivider_nvu4k_13{height:100%;width:0}

package/dist/assets/IconButton.css

@@ -1 +1 @@
-._button_osttw_1{display:flex;align-items:center;justify-content:center;padding:6px;border:none;color:var(--color-primary);background-color:var(--color-background);cursor:pointer;clip-path:circle(50%)}._button_osttw_1:hover{filter:var(--hover-dim)}
+._button_rs8jj_1{display:flex;align-items:center;justify-content:center;padding:6px;border:none;color:var(--color-primary);background-color:var(--color-background);cursor:pointer;clip-path:circle(50%)}._button_rs8jj_1:hover{filter:var(--hover-dim)}

package/dist/assets/Input.css

@@ -0,0 +1 @@
+._container_82euj_1{display:flex;flex-direction:column}._outline_82euj_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:var(--button-border-width);border-style:solid;border-color:var(--color-primary);border-radius:var(--border-radius)}._errorOutline_82euj_18{border-color:var(--color-error)}._input_82euj_22{min-width:1em;flex:1;padding:6px;width:100%;height:100%;border:none;background-color:transparent;color:var(--color-background-contrastText);font-family:var(--text-font-family);font-size:var(--text-body-size)}._input_82euj_22:focus{outline:none}._inputDisabled_82euj_38{color:color-mix(in srgb,var(--color-background-contrastText) 50%,#888)}._helperText_82euj_42{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_82euj_49{color:var(--color-error)}._label_82euj_53{font-family:var(--text-font-family);font-size:var(--text-label-size)}

package/dist/assets/Radio.css

@@ -0,0 +1 @@
+._container_bc6cu_1{display:flex;align-items:center;gap:8px}._label_bc6cu_7{font-family:var(--text-font-family);font-size:var(--text-body-size);cursor:pointer}

package/dist/assets/RadioGroup.css

@@ -0,0 +1 @@
+._container_qo0l5_1{display:flex;flex-direction:column}._outline_qo0l5_6{display:flex;flex-direction:column;gap:4px}._label_qo0l5_12{font-family:var(--text-font-family);font-size:var(--text-label-size)}._helperText_qo0l5_17{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_qo0l5_24{color:var(--color-error)}

package/dist/assets/Select.css

@@ -0,0 +1 @@
+._container_6qy7m_1{display:flex;flex-direction:column}._outline_6qy7m_6{display:flex;padding:4px 8px;gap:4px;align-items:center;width:100%;border-width:1px;border-style:solid;border-color:var(--color-primary);border-radius:var(--border-radius)}._errorOutline_6qy7m_18{border-color:var(--color-error)}._select_6qy7m_22{min-width:1em;flex:1;padding:6px;border:none;background-color:transparent;color:var(--color-background-contrastText);font-family:var(--text-font-family);font-size:var(--text-body-size)}._select_6qy7m_22:focus{outline:none}._selectDisabled_6qy7m_36{color:color-mix(in srgb,var(--color-background-contrastText) 50%,#888)}._helperText_6qy7m_40{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_6qy7m_47{color:var(--color-error)}._label_6qy7m_51{font-family:var(--text-font-family);font-size:var(--text-label-size)}

package/dist/assets/Snackbar.css

@@ -0,0 +1 @@
+._snackbar_b5ton_1{position:fixed;bottom:16px;left:16px;display:flex;gap:16px;padding:8px 16px;align-items:center;max-width:500px;z-index:var(--z-index-snackbar);background-color:var(--color-paper-background);border:var(--button-border-width) solid var(--color-primary);border-radius:var(--border-radius)}._message_b5ton_17{font-family:var(--text-font-family);font-size:var(--text-label-size);color:var(--color-paper-background-contrastText)}

package/dist/assets/TabBar.css

@@ -0,0 +1 @@
+._tabBar_1gpqs_1{display:flex;width:100%}._tab_1gpqs_1{padding:.5em;cursor:pointer;color:var(--color-primary);font-family:var(--text-font-family);font-size:var(--text-body-size);text-transform:uppercase;font-weight:500;background-color:var(--color-background)}._tab_1gpqs_1:hover{filter:var(--hover-dim)}._activeTab_1gpqs_20{font-weight:700;border-bottom:4px solid var(--color-primary)}

package/dist/assets/Table.css

@@ -0,0 +1 @@
+._table_1sfmn_1{--table-cell-padding: 8px;--table-border-width: 3px;--table-cell-border-width: 2px;border-collapse:separate;border:var(--table-border-width) solid var(--color-primary);border-spacing:0}._tableHead_1sfmn_11{position:sticky;top:var(--table-cell-border-width);z-index:1;background-color:var(--color-background);outline:var(--table-cell-border-width) solid var(--color-primary)}._th_1sfmn_20{padding:var(--table-cell-padding);font-family:var(--text-font-family);font-size:var(--text-body-size);font-weight:700;border-style:solid;border-color:var(--color-primary);border-width:var(--table-border-width) var(--table-cell-border-width)}._td_1sfmn_31{padding:var(--table-cell-padding);font-family:var(--text-font-family);font-size:var(--text-body-size);border:var(--table-cell-border-width) solid var(--color-primary)}

package/dist/assets/Tabs.css

@@ -0,0 +1 @@
+._container_1q694_1{display:flex;flex-direction:column}._contentContainer_1q694_6{flex-grow:1}

package/dist/assets/ToggleButton.css

@@ -1 +1 @@
-._buttonFalse_upi8f_1{color:var(--color-primary);border:var(--button-border-width) solid var(--color-primary);background-color:var(--color-background)}._buttonTrue_upi8f_13{color:var(--color-primary-contrastText);border:none;background-color:var(--color-primary)}
+._buttonFalse_1ssvl_1{color:var(--color-primary);border:var(--button-border-width) solid var(--color-primary);background-color:var(--color-background)}._buttonTrue_1ssvl_7{color:var(--color-primary-contrastText);border:none;background-color:var(--color-primary)}

package/dist/assets/ToggleButtonGroup.css

@@ -1 +1 @@
-._container_1lbeu_1{display:flex;flex-direction:column}._outline_1lbeu_11{display:flex;gap:4px}._label_1lbeu_21{font-family:var(--text-font-family);font-size:var(--text-label-size)}._helperText_1lbeu_31{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_1lbeu_45{color:var(--color-error)}
+._container_12l5n_1{display:flex;flex-direction:column}._outline_12l5n_6{display:flex;gap:4px}._label_12l5n_11{font-family:var(--text-font-family);font-size:var(--text-label-size)}._helperText_12l5n_16{margin:4px 8px;font-family:var(--text-font-family);font-size:.75em;color:var(--color-primary)}._helperTextError_12l5n_23{color:var(--color-error)}

package/dist/assets/Tooltip.css

@@ -0,0 +1 @@
+._container_1rv9k_1{display:inline;position:static}._tooltipContainer_1rv9k_7{position:fixed;transform:translate(-50%)}._tooltip_1rv9k_7{position:absolute;padding:4px;left:-50%;background-color:#000;opacity:.8;z-index:var(--z-index-tooltip);border-radius:var(--border-radius);font-size:var(--text-label-size)}._tooltip_1rv9k_7:after{content:"";position:absolute}

package/dist/assets/main.css

@@ -0,0 +1 @@
+.material-symbols-outlined{font-variation-settings:"FILL" 1}

package/dist/components/Button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import '../../assets/Button.css';const b = "_button_p3w70_1", r = {
+import '../../assets/Button.css';const b = "_button_7qhy4_1", r = {
   button: b
 };
 function e({ children: t, className: o, ref: n, ...u }) {

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

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

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

@@ -1,28 +1,28 @@
-import { jsx as b } from "react/jsx-runtime";
-import { Button as s } from "../Button.js";
-import '../../../assets/ToggleButton.css';const f = "_buttonFalse_upi8f_1", C = "_buttonTrue_upi8f_13", e = {
-  buttonFalse: f,
-  buttonTrue: C
+import { jsx as a } from "react/jsx-runtime";
+import { Button as b } from "../Button.js";
+import '../../../assets/ToggleButton.css';const C = "_buttonFalse_1ssvl_1", _ = "_buttonTrue_1ssvl_7", e = {
+  buttonFalse: C,
+  buttonTrue: _
 };
 function m({
   value: n,
   children: o,
-  className: u,
-  classNameTrue: i,
-  classNameFalse: l,
-  disabled: c,
-  ref: a,
+  className: l,
+  classNameTrue: u,
+  classNameFalse: i,
+  disabled: s,
+  ref: c,
   ...t
 }) {
-  return /* @__PURE__ */ b(
-    s,
+  return /* @__PURE__ */ a(
+    b,
     {
-      ref: a,
-      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (i || "") : e.buttonFalse + " " + (l || "")) + " " + (u || ""),
+      ref: c,
+      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (u || "") : e.buttonFalse + " " + (i || "")) + " " + (l || ""),
       onClick: () => {
         "onChange" in t && t.onChange !== void 0 ? t.onChange(!n) : "onClick" in t && t.onClick !== void 0 && t.onClick();
       },
-      disabled: c,
+      disabled: s,
       children: o
     }
   );

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

@@ -1,14 +1,14 @@
-import { jsxs as _, jsx as l } from "react/jsx-runtime";
-import t from "react";
-import '../../../assets/ToggleButtonGroup.css';const m = "_container_1lbeu_1", x = "_outline_1lbeu_11", b = "_label_1lbeu_21", h = "_helperText_1lbeu_31", T = "_helperTextError_1lbeu_45", r = {
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import n from "react";
+import '../../../assets/ToggleButtonGroup.css';const m = "_container_12l5n_1", x = "_outline_12l5n_6", h = "_label_12l5n_11", T = "_helperText_12l5n_16", E = "_helperTextError_12l5n_23", r = {
   container: m,
   outline: x,
-  label: b,
-  helperText: h,
-  helperTextError: T
+  label: h,
+  helperText: T,
+  helperTextError: E
 };
-function f({
-  value: n,
+function v({
+  value: t,
   onChange: o,
   children: c,
   label: s,
@@ -16,15 +16,15 @@ function f({
   helperText: p,
   className: a
 }) {
-  const u = t.Children.map(c, (e) => t.isValidElement(e) ? t.cloneElement(e, {
-    selected: n === e.props.value,
+  const _ = n.Children.map(c, (e) => n.isValidElement(e) ? n.cloneElement(e, {
+    selected: t === e.props.value,
     onClick: () => {
-      n === e.props.value ? o("") : o(e.props.value);
+      t === e.props.value ? o("") : o(e.props.value);
     }
   }) : e);
-  return /* @__PURE__ */ _("div", { className: r.container + " " + (a || ""), children: [
+  return /* @__PURE__ */ u("div", { className: r.container + " " + (a || ""), children: [
     s && /* @__PURE__ */ l("p", { className: r.label, children: s }),
-    /* @__PURE__ */ l("div", { className: r.outline, children: u }),
+    /* @__PURE__ */ l("div", { className: r.outline, children: _ }),
     p && /* @__PURE__ */ l(
       "p",
       {
@@ -35,5 +35,5 @@ function f({
   ] });
 }
 export {
-  f as ToggleButtonGroup
+  v as ToggleButtonGroup
 };

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

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

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,44 @@
+import { jsx as o, Fragment as l } from "react/jsx-runtime";
+import '../../assets/Dialog.css';const c = "_screenDarken_17c5i_1", s = "_dialog_17c5i_16", g = "_dialogTitle_17c5i_28", r = "_dialogContent_17c5i_35", d = "_dialogActions_17c5i_40", n = {
+  screenDarken: c,
+  dialog: s,
+  dialogTitle: g,
+  dialogContent: r,
+  dialogActions: d
+};
+function m({ open: i, onClose: t, children: a }) {
+  return i ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: n.screenDarken,
+      onClick: () => {
+        t && t();
+      },
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: n.dialog,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: a
+        }
+      )
+    }
+  ) : /* @__PURE__ */ o(l, {});
+}
+function u({ children: i }) {
+  return /* @__PURE__ */ o("h2", { className: n.dialogTitle, children: i });
+}
+function D({ children: i }) {
+  return /* @__PURE__ */ o("div", { className: n.dialogContent, children: i });
+}
+function f({ children: i }) {
+  return /* @__PURE__ */ o("div", { className: n.dialogActions, children: i });
+}
+export {
+  m as Dialog,
+  f as DialogActions,
+  D as DialogContent,
+  u as DialogTitle
+};

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

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

package/dist/components/Divider/Divider.js

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

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

@@ -0,0 +1,9 @@
+type CheckboxProps = {
+    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;
+export {};

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

@@ -0,0 +1,51 @@
+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 b = "_container_bc6cu_1", h = "_label_bc6cu_7", r = {
+  container: b,
+  label: h
+};
+function _({
+  value: c,
+  onChange: n,
+  id: l,
+  label: o,
+  className: a
+}) {
+  return /* @__PURE__ */ t("div", { className: r.container, children: [
+    /* @__PURE__ */ t(
+      i,
+      {
+        className: a,
+        onClick: () => {
+          n(!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" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              id: l,
+              checked: c,
+              onChange: (s) => {
+                n(s.currentTarget.checked);
+              },
+              hidden: !0
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ e(
+      "label",
+      {
+        htmlFor: l,
+        className: r.label,
+        children: o
+      }
+    )
+  ] });
+}
+export {
+  _ as Checkbox
+};

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

@@ -0,0 +1,11 @@
+type CounterProps = {
+    value: number;
+    id: string;
+    increment: () => void;
+    decrement: () => void;
+    label: string;
+    max?: number;
+    disabled?: boolean;
+};
+export declare function Counter({ value, id, increment, decrement, label, max, disabled, }: CounterProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+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_whykh_1", h = "_button_whykh_6", p = "_buttonDisabled_whykh_16", _ = "_input_whykh_24", t = {
+  container: b,
+  button: h,
+  buttonDisabled: p,
+  input: _
+};
+function k({
+  value: s,
+  id: c,
+  increment: r,
+  decrement: a,
+  label: l,
+  max: i,
+  disabled: n = !1
+}) {
+  return /* @__PURE__ */ u("div", { className: t.container, children: [
+    /* @__PURE__ */ o(
+      e,
+      {
+        className: t.button + " " + (n ? t.buttonDisabled : ""),
+        onClick: () => {
+          s > 0 && a();
+        },
+        disabled: n,
+        children: /* @__PURE__ */ o("span", { className: "material-symbols-outlined", children: "remove" })
+      }
+    ),
+    /* @__PURE__ */ o(
+      m,
+      {
+        id: c,
+        value: s,
+        label: l,
+        disabled: n,
+        className: t.input,
+        type: "number"
+      }
+    ),
+    /* @__PURE__ */ o(
+      e,
+      {
+        className: t.button + " " + (n ? t.buttonDisabled : ""),
+        onClick: () => {
+          (i === void 0 || s < i) && r();
+        },
+        disabled: n,
+        children: /* @__PURE__ */ o("span", { className: "material-symbols-outlined", children: "add" })
+      }
+    )
+  ] });
+}
+export {
+  k as Counter
+};

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

@@ -0,0 +1,17 @@
+type InputProps = {
+    value: string | number;
+    onChange?: (event: string) => void;
+    type?: "text" | "password" | "email" | "number" | "search";
+    id: string;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    placeholder?: string;
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function Input({ value, onChange, type, id, onKeyDown, startIcon, endIcon, placeholder, label, error, helperText, disabled, className, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input/Input.js

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

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

@@ -0,0 +1,10 @@
+export type RadioProps = {
+    selected?: boolean;
+    onChange?: (value: boolean) => void;
+    id: string;
+    value: string;
+    name?: string;
+    label?: string | React.ReactNode;
+    className?: string;
+};
+export declare function Radio({ selected, onChange, name, id, label, className, }: RadioProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+type RadioGroupProps = {
+    children?: React.ReactNode;
+    name: string;
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    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 {};

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

@@ -0,0 +1,41 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import o from "react";
+import '../../../assets/RadioGroup.css';const x = "_container_qo0l5_1", d = "_outline_qo0l5_6", T = "_label_qo0l5_12", E = "_helperText_qo0l5_17", f = "_helperTextError_qo0l5_24", r = {
+  container: x,
+  outline: d,
+  label: T,
+  helperText: E,
+  helperTextError: f
+};
+function N({
+  children: a,
+  name: i,
+  label: t,
+  error: c,
+  helperText: n,
+  className: p,
+  value: _,
+  onChange: s
+}) {
+  const m = o.Children.map(a, (e) => o.isValidElement(e) ? o.cloneElement(e, {
+    name: i,
+    selected: _ === e.props.value,
+    onChange: (u) => {
+      s(u ? e.props.value : "");
+    }
+  }) : e);
+  return /* @__PURE__ */ h("div", { className: r.container + " " + (p || ""), children: [
+    t && /* @__PURE__ */ l("p", { className: r.label, children: t }),
+    /* @__PURE__ */ l("div", { className: r.outline, children: m }),
+    n && /* @__PURE__ */ l(
+      "p",
+      {
+        className: r.helperText + " " + (c ? r.helperTextError : ""),
+        children: n
+      }
+    )
+  ] });
+}
+export {
+  N as RadioGroup
+};

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+type SelectProps = {
+    id: string;
+    value: string;
+    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;
+export {};

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

@@ -0,0 +1,63 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import "react";
+import '../../../assets/Select.css';const p = "_container_6qy7m_1", u = "_outline_6qy7m_6", x = "_errorOutline_6qy7m_18", y = "_select_6qy7m_22", q = "_selectDisabled_6qy7m_36", b = "_helperText_6qy7m_40", d = "_helperTextError_6qy7m_47", T = "_label_6qy7m_51", e = {
+  container: p,
+  outline: u,
+  errorOutline: x,
+  select: y,
+  selectDisabled: q,
+  helperText: b,
+  helperTextError: d,
+  label: T
+};
+function E({
+  id: t,
+  value: i,
+  children: _,
+  className: a,
+  label: r,
+  onChange: s,
+  disabled: c,
+  helperText: n,
+  error: o
+}) {
+  return /* @__PURE__ */ h("div", { className: e.container + " " + (a || ""), children: [
+    r && /* @__PURE__ */ l(
+      "label",
+      {
+        htmlFor: t,
+        className: e.label,
+        children: r
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: e.outline + " " + (o ? e.errorOutline : ""),
+        children: /* @__PURE__ */ l(
+          "select",
+          {
+            id: t,
+            className: e.select + " " + (c ? e.selectDisabled : ""),
+            value: i,
+            onChange: (m) => {
+              s && s(m.target.value);
+            },
+            disabled: c,
+            children: _
+          }
+        )
+      }
+    ),
+    n && /* @__PURE__ */ l(
+      "p",
+      {
+        className: e.helperText + " " + (o ? e.helperTextError : ""),
+        children: n
+      }
+    )
+  ] });
+}
+export {
+  E as Select
+};

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

@@ -0,0 +1,15 @@
+type TextAreaProps = {
+    value: string | number;
+    onChange?: (event: string) => void;
+    id: string;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    className?: string;
+    outlineClassName?: string;
+};
+export declare function TextArea({ value, onChange, id, onKeyDown, placeholder, label, error, helperText, disabled, className, outlineClassName, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input/TextArea.js

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

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

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

package/dist/components/Snackbar/Snackbar.js

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

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

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

package/dist/components/Table/Table.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/Table.css';const s = "_table_1sfmn_1", l = "_tableHead_1sfmn_11", c = "_th_1sfmn_20", d = "_td_1sfmn_31", a = {
+  table: s,
+  tableHead: l,
+  th: c,
+  td: d
+};
+function _({ children: t, className: n }) {
+  return /* @__PURE__ */ e("table", { className: a.table + " " + (n || ""), children: t });
+}
+function b({ children: t }) {
+  return /* @__PURE__ */ e("thead", { className: a.tableHead, children: t });
+}
+function r({ children: t }) {
+  return /* @__PURE__ */ e("th", { className: a.th, children: t });
+}
+function m({ children: t }) {
+  return /* @__PURE__ */ e("td", { className: a.td, children: t });
+}
+export {
+  _ as Table,
+  b as TableHead,
+  m as Td,
+  r as Th
+};

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

@@ -0,0 +1,7 @@
+type TabBarProps = {
+    value: string;
+    onChange: (value: string) => void;
+    tabs: string[];
+};
+export declare function TabBar({ value, onChange, tabs }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/TabBar.js

@@ -0,0 +1,22 @@
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/TabBar.css';const i = "_tabBar_1gpqs_1", b = "_tab_1gpqs_1", n = "_activeTab_1gpqs_20", t = {
+  tabBar: i,
+  tab: b,
+  activeTab: n
+};
+function _({ value: s, onChange: r, tabs: e }) {
+  return /* @__PURE__ */ c("div", { className: t.tabBar, children: e.map((a) => /* @__PURE__ */ c(
+    "div",
+    {
+      className: t.tab + " " + (a === s ? t.activeTab : ""),
+      onClick: () => {
+        r(a);
+      },
+      children: a
+    },
+    a
+  )) });
+}
+export {
+  _ as TabBar
+};

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

@@ -0,0 +1,5 @@
+type TabsProps = {
+    tabs: Record<string, React.ReactNode>;
+};
+export declare function Tabs({ tabs }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,26 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { TabBar as i } from "./TabBar.js";
+import '../../assets/Tabs.css';const m = "_container_1q694_1", l = "_contentContainer_1q694_6", o = {
+  container: m,
+  contentContainer: l
+};
+function b({ tabs: n }) {
+  const [t, r] = s(Object.keys(n)[0]);
+  return /* @__PURE__ */ a("div", { className: o.container, children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        value: t,
+        onChange: (c) => {
+          r(c);
+        },
+        tabs: Object.keys(n)
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: o.contentContainer, children: n[t] })
+  ] });
+}
+export {
+  b as Tabs
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+type TooltipProps = {
+    content: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare function Tooltip({ content, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,42 @@
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import i from "react";
+import '../../assets/Tooltip.css';const _ = "_container_1rv9k_1", m = "_tooltipContainer_1rv9k_7", f = "_tooltip_1rv9k_7", t = {
+  container: _,
+  tooltipContainer: m,
+  tooltip: f
+};
+function y({ content: s, children: l }) {
+  const [r, o] = i.useState(!1), [a, c] = i.useState(
+    {}
+  ), p = (d) => {
+    const e = d.currentTarget.getBoundingClientRect();
+    c({
+      top: e.bottom,
+      left: e.left
+    }), o(!0);
+  }, u = () => {
+    o(!1);
+  };
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: t.container,
+      onMouseEnter: p,
+      onMouseLeave: u,
+      children: [
+        l,
+        r && /* @__PURE__ */ n(
+          "div",
+          {
+            className: t.tooltipContainer,
+            style: a,
+            children: /* @__PURE__ */ n("div", { className: t.tooltip, children: s })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  y as Tooltip
+};

package/dist/main.d.ts

@@ -2,3 +2,17 @@ export { Button } from './components/Button/Button.tsx';
 export { IconButton } from './components/Button/IconButton/IconButton.tsx';
 export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.tsx';
 export { ToggleButtonGroup } from './components/Button/ToggleButton/ToggleButtonGroup.tsx';
+export { Dialog, DialogActions, DialogContent, DialogTitle, } from './components/Dialog/Dialog.tsx';
+export { Divider } from './components/Divider/Divider.tsx';
+export { Input } from './components/Input/Input.tsx';
+export { TextArea } from './components/Input/TextArea.tsx';
+export { Checkbox } from './components/Input/Checkbox/Checkbox.tsx';
+export { Counter } from './components/Input/Counter/Counter.tsx';
+export { Radio } from './components/Input/Radio/Radio.tsx';
+export { RadioGroup } from './components/Input/Radio/RadioGroup.tsx';
+export { Select } from './components/Input/Select/Select.tsx';
+export { Snackbar } from './components/Snackbar/Snackbar.tsx';
+export { Table, TableHead, Td, Th } from './components/Table/Table.tsx';
+export { TabBar } from './components/Tabs/TabBar.tsx';
+export { Tabs } from './components/Tabs/Tabs.tsx';
+export { Tooltip } from './components/Tooltip/Tooltip.tsx';

package/dist/main.js

@@ -1,10 +1,44 @@
-import { Button as r } from "./components/Button/Button.js";
-import { IconButton as n } from "./components/Button/IconButton/IconButton.js";
-import { ToggleButton as u } from "./components/Button/ToggleButton/ToggleButton.js";
-import { ToggleButtonGroup as g } from "./components/Button/ToggleButton/ToggleButtonGroup.js";
-export {
-  r as Button,
-  n as IconButton,
-  u as ToggleButton,
-  g as ToggleButtonGroup
+import { Button as t } from "./components/Button/Button.js";
+import { IconButton as p } from "./components/Button/IconButton/IconButton.js";
+import { ToggleButton as f } from "./components/Button/ToggleButton/ToggleButton.js";
+import { ToggleButtonGroup as a } from "./components/Button/ToggleButton/ToggleButtonGroup.js";
+import { Dialog as l, DialogActions as n, DialogContent as T, DialogTitle as g } from "./components/Dialog/Dialog.js";
+import { Divider as b } from "./components/Divider/Divider.js";
+import { Input as d } from "./components/Input/Input.js";
+import { TextArea as D } from "./components/Input/TextArea.js";
+import { Checkbox as h } from "./components/Input/Checkbox/Checkbox.js";
+import { Counter as s } from "./components/Input/Counter/Counter.js";
+import { Radio as G } from "./components/Input/Radio/Radio.js";
+import { RadioGroup as R } from "./components/Input/Radio/RadioGroup.js";
+import { Select as v } from "./components/Input/Select/Select.js";
+import { Snackbar as j } from "./components/Snackbar/Snackbar.js";
+import { Table as w, TableHead as y, Td as z, Th as E } from "./components/Table/Table.js";
+import { TabBar as J } from "./components/Tabs/TabBar.js";
+import { Tabs as L } from "./components/Tabs/Tabs.js";
+import { Tooltip as N } from "./components/Tooltip/Tooltip.js";
+import './assets/main.css';export {
+  t as Button,
+  h as Checkbox,
+  s as Counter,
+  l as Dialog,
+  n as DialogActions,
+  T as DialogContent,
+  g as DialogTitle,
+  b as Divider,
+  p as IconButton,
+  d as Input,
+  G as Radio,
+  R as RadioGroup,
+  v as Select,
+  j as Snackbar,
+  J as TabBar,
+  w as Table,
+  y as TableHead,
+  L as Tabs,
+  z as Td,
+  D as TextArea,
+  E as Th,
+  f as ToggleButton,
+  a as ToggleButtonGroup,
+  N as Tooltip
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujip0/components",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -9,13 +9,13 @@
     "dist"
   ],
   "peerDependencies": {
+    "@material-symbols/font-400": "^0.33.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "@eslint/js": "^9.30.1",
+    "@material-symbols/font-400": "^0.33.0",
     "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
@@ -26,6 +26,8 @@
     "glob": "^11.0.3",
     "globals": "^16.3.0",
     "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",