@danalazar/metro-ui 0.0.3 → 0.0.4

package/README.md

@@ -0,0 +1,33 @@
+# Metro UI Library
+
+## Descriere
+
+`metro-ui` este o librărie de componente React reutilizabile, construită cu TypeScript și SASS modules. Librăria oferă componente UI modulare, tipate și gata de folosit în orice aplicație React.
+
+Componente incluse în prezent in metro-calc:
+
+- `Button` – suportă variante, dimensiuni, states (disabled, loading)
+- `Input` – suportă variante, dimensiuni, states (disabled)
+- `Modal` – generic, utilizabil pentru conținut custom
+- `Keypad` – tastatură numerică + operații
+- Alte componente: Select, InputWithActions, Form Field, Spinner
+
+Scop: oferirea unui set de componente reutilizabile pentru aplicații multiple.
+
+---
+
+## Instalare
+
+```
+git clone https://github.com/DanaLazar/metro-ui.git
+cd metro-ui
+npm install
+npm run storybook
+
+## Decizii arhitecturale
+- TypeScript pentru tipare stricte și siguranță în folosirea componentelor
+- SASS modules pentru styling customizabil și consistent
+- Stories cu Storybook pentru vizualizare și test manual
+- Componente independente, fără dependențe inutile
+- States suportate: disabled, loading, error (unde este relevant)
+```

package/dist/{button-DTU9l2Gg.js → button-D2IRRUFN.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clsx-ROFf4vs9.js";
-import { t } from "./spinner-Co2caOhH.js";
+import { t as e } from "./clsx-CVy0r8TU.js";
+import { t } from "./spinner-BThkQA3X.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import './assets/button.css';//#region src/components/button/button.module.sass
 var i = "_button_1wl47_1", a = "_hidden_1wl47_82", o = "_spinnerWrapper_1wl47_86", s = "_spinner_1wl47_86", c = "_spin_1wl47_86", l = "_loadingContent_1wl47_101", u = {

package/dist/components/button/button.d.ts

@@ -1,5 +1,5 @@
 export type ButtonVariant = "primary" | "secondary" | "danger" | "dark" | "ghost";
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     children?: React.ReactNode;
     variant?: ButtonVariant;
     size?: "sm" | "md" | "lg";

package/dist/components/button/button.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../button-DTU9l2Gg.js";
-import "../../spinner-Co2caOhH.js";
+import { t as e } from "../../button-D2IRRUFN.js";
+import "../../spinner-BThkQA3X.js";
 export { e as Button };

package/dist/components/formField/formField.d.ts

@@ -1,8 +1,13 @@
+import { default as React } from 'react';
+type InputLikeProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    error?: boolean;
+};
 export interface FormFieldProps {
     label?: string;
     error?: string;
     helperText?: string;
-    children?: React.ReactElement;
+    children?: React.ReactElement<InputLikeProps>;
     id: string;
 }
 export declare const FormField: ({ label, error, helperText, children, id, }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/formField/formField.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../formField-BdRLOA0x.js";
+import { t as e } from "../../formField-CYd3ghXm.js";
 export { e as FormField };

package/dist/components/input/input.d.ts

@@ -1,11 +1,5 @@
-export interface InputProps {
-    id: string;
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    type?: "text" | "email" | "password" | "number";
-    disabled?: boolean;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: "sm" | "md" | "lg";
-    className?: string;
+    error?: boolean;
 }
-export declare const Input: ({ id, value, onChange, placeholder, type, disabled, size, className, }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../input-q5h2lA4L.js";
+import { t as e } from "../../input-B4hjpmbq.js";
 export { e as Input };

package/dist/components/inputWithActions/inputWithAction.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../inputWithAction-VBlCurUV.js";
+import { t as e } from "../../inputWithAction-DrO4FktP.js";
 export { e as InputWithAction };

package/dist/components/keypad/keypad.d.ts

@@ -5,12 +5,7 @@ export type KeypadButton = {
     span?: number;
 };
 type KeypadProps = {
-    onNumberClick: (value: string) => void;
-    onOperationClick: (label: string) => void;
-    onClear: () => void;
-    onDecimalClick: () => void;
-    onEqualsClick: () => void;
-    onBackspaceClick: () => void;
+    onKeyPress: (key: KeypadButton) => void;
 };
-export declare const Keypad: ({ onNumberClick, onClear, onOperationClick, onDecimalClick, onEqualsClick, onBackspaceClick, }: KeypadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Keypad: ({ onKeyPress }: KeypadProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/keypad/keypad.js

@@ -1,4 +1,4 @@
-import "../../button-DTU9l2Gg.js";
-import "../../spinner-Co2caOhH.js";
-import { t as e } from "../../keypad-Bu5TjaRH.js";
+import "../../button-D2IRRUFN.js";
+import "../../spinner-BThkQA3X.js";
+import { t as e } from "../../keypad-CrTKdzrB.js";
 export { e as Keypad };

package/dist/components/modal/modal.js

@@ -1,4 +1,4 @@
-import "../../button-DTU9l2Gg.js";
-import "../../spinner-Co2caOhH.js";
-import { t as e } from "../../modal-mu0n0R19.js";
+import "../../button-D2IRRUFN.js";
+import "../../spinner-BThkQA3X.js";
+import { t as e } from "../../modal-BcJDY1O7.js";
 export { e as Modal };

package/dist/components/select/select.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../select-NHAc5xjZ.js";
+import { t as e } from "../../select-DmezR35h.js";
 export { e as Select };

package/dist/components/spinner/spinner.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../spinner-Co2caOhH.js";
+import { t as e } from "../../spinner-BThkQA3X.js";
 export { e as Spinner };

package/dist/formField-CYd3ghXm.js

@@ -0,0 +1,39 @@
+import { t as e } from "./clsx-CVy0r8TU.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "react";
+import './assets/formField.css';//#region src/components/formField/formField.module.sass
+var i = "_wrapper_10d1v_1", a = "_label_10d1v_11", o = "_control_10d1v_17", s = "_message_10d1v_29", c = "_error_10d1v_34", l = {
+	wrapper: i,
+	label: a,
+	control: o,
+	"control--error": "_control--error_10d1v_25",
+	message: s,
+	error: c
+}, u = ({ label: i, error: a, helperText: o, children: s, id: c }) => {
+	let u = `${c}-message`;
+	return /* @__PURE__ */ n("div", {
+		className: l.wrapper,
+		children: [
+			i && /* @__PURE__ */ t("label", {
+				htmlFor: c,
+				className: l.label,
+				children: i
+			}),
+			/* @__PURE__ */ t("div", {
+				className: e(l.control, { [l["control--error"]]: a }),
+				children: s && r.cloneElement(s, {
+					id: c,
+					error: !!a,
+					"aria-describedby": a || o ? u : void 0
+				})
+			}),
+			(a || o) && /* @__PURE__ */ t("span", {
+				id: u,
+				className: e(l.message, { [l.error]: a }),
+				children: a || o
+			})
+		]
+	});
+};
+//#endregion
+export { u as t };

package/dist/input-B4hjpmbq.js

@@ -0,0 +1,20 @@
+import { t as e } from "./clsx-CVy0r8TU.js";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import './assets/input.css';var r = {
+	input: "_input_1838g_1",
+	"input--disabled": "_input--disabled_1838g_13",
+	"input--sm": "_input--sm_1838g_17",
+	"input--md": "_input--md_1838g_20",
+	"input--lg": "_input--lg_1838g_23"
+}, i = n(({ size: n = "md", className: i, disabled: a, error: o, value: s, onChange: c, ...l }, u) => /* @__PURE__ */ t("input", {
+	ref: u,
+	value: s,
+	onChange: c,
+	"data-size": n,
+	"aria-invalid": o || void 0,
+	className: e(r.input, r[`input--${n}`], { [r["input--disabled"]]: a }, i),
+	...l
+}));
+//#endregion
+export { i as t };

package/dist/{inputWithAction-VBlCurUV.js → inputWithAction-DrO4FktP.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-ROFf4vs9.js";
+import { t as e } from "./clsx-CVy0r8TU.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/inputWithAction.css';var n = { wrapper: "_wrapper_kdbo2_1" }, r = ({ children: r, className: i }) => /* @__PURE__ */ t("div", {
 	className: e(n.wrapper, i),

package/dist/{keypad-Bu5TjaRH.js → keypad-CrTKdzrB.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./button-DTU9l2Gg.js";
+import { t as e } from "./button-D2IRRUFN.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/keypad.css';var n = {
 	keypad: "_keypad_1d13x_1",
@@ -97,39 +97,15 @@ import './assets/keypad.css';var n = {
 		case "backspace": return "danger";
 		default: return "secondary";
 	}
-}, a = ({ onNumberClick: a, onClear: o, onOperationClick: s, onDecimalClick: c, onEqualsClick: l, onBackspaceClick: u }) => {
-	let d = (e) => {
-		switch (e.type) {
-			case "number":
-				a(e.value);
-				break;
-			case "operation":
-				s(e.label);
-				break;
-			case "clear":
-				o();
-				break;
-			case "decimal":
-				c();
-				break;
-			case "equals":
-				l();
-				break;
-			case "backspace":
-				u();
-				break;
-		}
-	};
-	return /* @__PURE__ */ t("div", {
-		className: n.keypad,
-		children: r.map((r, a) => /* @__PURE__ */ t(e, {
-			variant: i(r.type),
-			size: "md",
-			className: r.span === 2 ? n["col-span-2"] : "",
-			onClick: () => d(r),
-			children: r.label
-		}, a))
-	});
-};
+}, a = ({ onKeyPress: a }) => /* @__PURE__ */ t("div", {
+	className: n.keypad,
+	children: r.map((r) => /* @__PURE__ */ t(e, {
+		variant: i(r.type),
+		size: "md",
+		className: r.span === 2 ? n["col-span-2"] : "",
+		onClick: () => a(r),
+		children: r.label
+	}, r.label))
+});
 //#endregion
 export { a as t };

package/dist/main.js

@@ -1,9 +1,9 @@
-import { t as e } from "./button-DTU9l2Gg.js";
-import { t } from "./spinner-Co2caOhH.js";
-import { t as n } from "./inputWithAction-VBlCurUV.js";
-import { t as r } from "./modal-mu0n0R19.js";
-import { t as i } from "./select-NHAc5xjZ.js";
-import { t as a } from "./input-q5h2lA4L.js";
-import { t as o } from "./formField-BdRLOA0x.js";
-import { t as s } from "./keypad-Bu5TjaRH.js";
+import { t as e } from "./button-D2IRRUFN.js";
+import { t } from "./spinner-BThkQA3X.js";
+import { t as n } from "./inputWithAction-DrO4FktP.js";
+import { t as r } from "./modal-BcJDY1O7.js";
+import { t as i } from "./select-DmezR35h.js";
+import { t as a } from "./input-B4hjpmbq.js";
+import { t as o } from "./formField-CYd3ghXm.js";
+import { t as s } from "./keypad-CrTKdzrB.js";
 export { e as Button, o as FormField, a as Input, n as InputWithAction, s as Keypad, r as Modal, i as Select, t as Spinner };

package/dist/{modal-mu0n0R19.js → modal-BcJDY1O7.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./button-DTU9l2Gg.js";
+import { t as e } from "./button-D2IRRUFN.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import r from "react";
 import './assets/modal.css';//#region src/components/modal/modal.module.sass

package/dist/{select-NHAc5xjZ.js → select-DmezR35h.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-ROFf4vs9.js";
+import { t as e } from "./clsx-CVy0r8TU.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/select.css';var n = {
 	select: "_select_1azes_1",

package/dist/{spinner-Co2caOhH.js → spinner-BThkQA3X.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-ROFf4vs9.js";
+import { t as e } from "./clsx-CVy0r8TU.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/spinner.css';var n = {
 	spinner: "_spinner_wbe75_1",