@liujip0/components 0.0.2 → 0.2.0

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

@@ -0,0 +1,53 @@
+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 = {
+  container: m,
+  label: u
+};
+function b({
+  selected: r,
+  onChange: e,
+  name: o,
+  id: t,
+  label: c,
+  className: l
+}) {
+  return /* @__PURE__ */ a("div", { className: i.container, children: [
+    /* @__PURE__ */ a(
+      d,
+      {
+        className: l,
+        onClick: () => {
+          e && e(!r);
+        },
+        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(
+            "input",
+            {
+              type: "radio",
+              name: o,
+              id: t,
+              checked: r,
+              onChange: (s) => {
+                e && e(s.currentTarget.checked);
+              },
+              hidden: !0
+            }
+          )
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ n(
+      "label",
+      {
+        htmlFor: t,
+        className: i.label,
+        children: c
+      }
+    )
+  ] });
+}
+export {
+  b 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 t } from "react/jsx-runtime";
+import l from "react";
+import '../../../assets/RadioGroup.css';const x = "_container_1ygqk_1", d = "_outline_1ygqk_6", T = "_label_1ygqk_12", y = "_helperText_1ygqk_17", E = "_helperTextError_1ygqk_24", r = {
+  container: x,
+  outline: d,
+  label: T,
+  helperText: y,
+  helperTextError: E
+};
+function k({
+  children: a,
+  name: i,
+  label: n,
+  error: c,
+  helperText: o,
+  className: p,
+  value: _,
+  onChange: s
+}) {
+  const m = l.Children.map(a, (e) => l.isValidElement(e) ? l.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: [
+    n && /* @__PURE__ */ t("p", { className: r.label, children: n }),
+    /* @__PURE__ */ t("div", { className: r.outline, children: m }),
+    o && /* @__PURE__ */ t(
+      "p",
+      {
+        className: r.helperText + " " + (c ? r.helperTextError : ""),
+        children: o
+      }
+    )
+  ] });
+}
+export {
+  k 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 p, 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
+};
+function O({
+  id: t,
+  value: o,
+  children: _,
+  className: a,
+  label: r,
+  onChange: c,
+  disabled: s,
+  helperText: i,
+  error: n
+}) {
+  return /* @__PURE__ */ p("div", { className: e.container + " " + (a || ""), children: [
+    r && /* @__PURE__ */ l(
+      "label",
+      {
+        htmlFor: t,
+        className: e.label,
+        children: r
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: e.outline + " " + (n ? e.errorOutline : ""),
+        children: /* @__PURE__ */ l(
+          "select",
+          {
+            id: t,
+            className: e.select + " " + (s ? e.selectDisabled : ""),
+            value: o,
+            onChange: (h) => {
+              c && c(h.target.value);
+            },
+            disabled: s,
+            children: _
+          }
+        )
+      }
+    ),
+    i && /* @__PURE__ */ l(
+      "p",
+      {
+        className: e.helperText + " " + (n ? e.helperTextError : ""),
+        children: i
+      }
+    )
+  ] });
+}
+export {
+  O 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-C7oR_KDs.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 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
+};
+function d({
+  open: s,
+  autoHideDuration: e,
+  onClose: r,
+  message: m,
+  action: t
+}) {
+  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: m }),
+    /* @__PURE__ */ c("div", { children: t })
+  ] }) : /* @__PURE__ */ c(l, {});
+}
+export {
+  d 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 l = "_table_10gvy_1", s = "_tableHead_10gvy_8", c = "_th_10gvy_21", d = "_td_10gvy_33", a = {
+  table: l,
+  tableHead: s,
+  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 u({ children: t }) {
+  return /* @__PURE__ */ e("td", { className: a.td, children: t });
+}
+export {
+  _ as Table,
+  b as TableHead,
+  u as Td,
+  r as Th
+};

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

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

package/dist/components/Tabs/Tab.js

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

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+type TabBarProps = {
+    value: string;
+    onChange: (value: string) => void;
+    children: React.ReactNode;
+};
+export declare function TabBar({ value, onChange, children }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/TabBar.js

@@ -0,0 +1,17 @@
+import { jsx as s } from "react/jsx-runtime";
+import r from "react";
+import '../../assets/TabBar.css';const l = "_tabBar_1oym3_1", m = {
+  tabBar: l
+};
+function c({ value: t, onChange: a, children: n }) {
+  const o = r.Children.map(n, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+    selected: t === e.props.value,
+    onClick: () => {
+      a(e.props.value);
+    }
+  }) : e);
+  return /* @__PURE__ */ s("div", { className: m.tabBar, children: o });
+}
+export {
+  c 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,34 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Tab as s } from "./Tab.js";
+import { TabBar as m } from "./TabBar.js";
+import '../../assets/Tabs.css';const l = "_container_1q694_1", u = "_contentContainer_1q694_6", o = {
+  container: l,
+  contentContainer: u
+};
+function f({ tabs: e }) {
+  const [r, c] = i(Object.keys(e)[0]);
+  return /* @__PURE__ */ a("div", { className: o.container, children: [
+    /* @__PURE__ */ t(
+      m,
+      {
+        value: r,
+        onChange: (n) => {
+          c(n);
+        },
+        children: Object.keys(e).map((n) => /* @__PURE__ */ t(
+          s,
+          {
+            value: n,
+            children: n
+          },
+          n
+        ))
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: o.contentContainer, children: e[r] })
+  ] });
+}
+export {
+  f 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 _, jsx as n } from "react/jsx-runtime";
+import i from "react";
+import '../../assets/Tooltip.css';const m = "_container_147qb_1", f = "_tooltipContainer_147qb_7", b = "_tooltip_147qb_7", t = {
+  container: m,
+  tooltipContainer: f,
+  tooltip: b
+};
+function C({ 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__ */ _(
+    "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 {
+  C as Tooltip
+};

package/dist/main.d.ts

@@ -2,3 +2,18 @@ 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 { Tab } from './components/Tabs/Tab.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,46 @@
-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 i, DialogActions as l, DialogContent as n, 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 { Tab as J } from "./components/Tabs/Tab.js";
+import { TabBar as L } from "./components/Tabs/TabBar.js";
+import { Tabs as N } from "./components/Tabs/Tabs.js";
+import { Tooltip as P } from "./components/Tooltip/Tooltip.js";
+import './assets/main.css';export {
+  t as Button,
+  h as Checkbox,
+  s as Counter,
+  i as Dialog,
+  l as DialogActions,
+  n 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 Tab,
+  L as TabBar,
+  w as Table,
+  y as TableHead,
+  N as Tabs,
+  z as Td,
+  D as TextArea,
+  E as Th,
+  f as ToggleButton,
+  a as ToggleButtonGroup,
+  P as Tooltip
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujip0/components",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.2.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",