@liujip0/components 0.0.0

package/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+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...
+    },
+  },
+])
+```

package/dist/assets/Button.css

@@ -0,0 +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)}

package/dist/assets/IconButton.css

@@ -0,0 +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)}

package/dist/assets/ToggleButton.css

@@ -0,0 +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)}

package/dist/assets/ToggleButtonGroup.css

@@ -0,0 +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)}

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

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

package/dist/components/Button/Button.js

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+type ToggleButtonProps = {
+    children?: React.ReactNode;
+    className?: string;
+    classNameTrue?: string;
+    classNameFalse?: string;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+type ToggleButtonPropsAsStandalone = {
+    value: boolean;
+    onChange: (value: boolean) => void;
+} & ToggleButtonProps;
+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 {};

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

@@ -0,0 +1,32 @@
+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
+};
+function m({
+  value: n,
+  children: o,
+  className: u,
+  classNameTrue: i,
+  classNameFalse: l,
+  disabled: c,
+  ref: a,
+  ...t
+}) {
+  return /* @__PURE__ */ b(
+    s,
+    {
+      ref: a,
+      className: (("selected" in t ? t.selected : n) ? e.buttonTrue + " " + (i || "") : e.buttonFalse + " " + (l || "")) + " " + (u || ""),
+      onClick: () => {
+        "onChange" in t && t.onChange !== void 0 ? t.onChange(!n) : "onClick" in t && t.onClick !== void 0 && t.onClick();
+      },
+      disabled: c,
+      children: o
+    }
+  );
+}
+export {
+  m as ToggleButton
+};

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

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

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

@@ -0,0 +1,39 @@
+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 = {
+  container: m,
+  outline: x,
+  label: b,
+  helperText: h,
+  helperTextError: T
+};
+function f({
+  value: n,
+  onChange: o,
+  children: c,
+  label: s,
+  error: i,
+  helperText: p,
+  className: a
+}) {
+  const u = t.Children.map(c, (e) => t.isValidElement(e) ? t.cloneElement(e, {
+    selected: n === e.props.value,
+    onClick: () => {
+      n === e.props.value ? o("") : o(e.props.value);
+    }
+  }) : e);
+  return /* @__PURE__ */ _("div", { className: r.container + " " + (a || ""), children: [
+    s && /* @__PURE__ */ l("p", { className: r.label, children: s }),
+    /* @__PURE__ */ l("div", { className: r.outline, children: u }),
+    p && /* @__PURE__ */ l(
+      "p",
+      {
+        className: r.helperText + " " + (i ? r.helperTextError : ""),
+        children: p
+      }
+    )
+  ] });
+}
+export {
+  f as ToggleButtonGroup
+};

package/dist/main.d.ts

@@ -0,0 +1,4 @@
+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';

package/dist/main.js

@@ -0,0 +1,10 @@
+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
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@liujip0/components",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@eslint/js": "^9.30.1",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "glob": "^11.0.3",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  }
+}