@danalazar/metro-ui 0.0.1 → 0.0.3

package/dist/assets/button.css

@@ -1 +1 @@
-._button_6di44_1{color:#fff;background-color:#00f}
+._button_1wl47_1{cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;height:32px;padding:0 16px;font-weight:500;transition:all .2s;display:flex;position:relative;box-shadow:0 2px 4px #0000001a}._button_1wl47_1:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}._button_1wl47_1:active{transform:scale(.95)}._button--primary_1wl47_22{color:#fff;background:#0077a6}._button--primary_1wl47_22:hover{background:#00668f}._button--secondary_1wl47_29{color:#111827;background:0 0;border:2px solid #e5e7eb}._button--secondary_1wl47_29:hover{background:#f9fafb}._button--danger_1wl47_37{color:#fff;background:#d9482f}._button--danger_1wl47_37:hover{background:#b93e28}._button--dark_1wl47_44{color:#fff;background:#003d7a}._button--dark_1wl47_44:hover{background:#002d5a}._button--ghost_1wl47_51{color:#fff;background:0 0;border:2px solid #ffffff4d}._button--ghost_1wl47_51:hover{background:#ffffff1a}._button--sm_1wl47_59{height:32px;padding:0 12px;font-size:.875rem}._button--md_1wl47_64{height:40px;padding:0 16px;font-size:1rem}._button--lg_1wl47_69{height:48px;padding:0 20px;font-size:1.125rem}._button--disabled_1wl47_74{opacity:.5;cursor:not-allowed}._button--loading_1wl47_78{pointer-events:none}._hidden_1wl47_82{visibility:hidden}._spinnerWrapper_1wl47_86{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._spinner_1wl47_86{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;animation:.8s linear infinite _spin_1wl47_86}._loadingContent_1wl47_101{align-items:center;gap:8px;display:flex}

package/dist/assets/formField.css

@@ -0,0 +1 @@
+._wrapper_10d1v_1{flex-direction:column;align-items:stretch;gap:4px;display:flex}._wrapper_10d1v_1 input{flex:1}._label_10d1v_11{color:#374151;font-size:.875rem;font-weight:500}._control_10d1v_17{align-items:stretch;display:flex}._control_10d1v_17>*{align-items:center;display:flex}._control--error_10d1v_25 input{border-color:#d9482f}._message_10d1v_29{color:#374151;font-size:.75rem}._error_10d1v_34{color:#d9482f}

package/dist/assets/input.css

@@ -0,0 +1 @@
+._input_1838g_1{border:2px solid #e5e7eb;border-radius:4px;outline:none;padding:0 1rem;font-size:1rem;transition:all .2s}._input_1838g_1:focus{border-color:#0077a6;box-shadow:0 0 0 2px #0077a633}._input--disabled_1838g_13{opacity:.6;cursor:not-allowed}._input--sm_1838g_17{height:32px}._input--md_1838g_20{height:40px}._input--lg_1838g_23{height:48px}

package/dist/assets/inputWithAction.css

@@ -0,0 +1 @@
+._wrapper_kdbo2_1{align-items:center;gap:8px;width:100%;display:flex}._wrapper_kdbo2_1>*{flex-shrink:0}._wrapper_kdbo2_1 input{flex:1}

package/dist/assets/keypad.css

@@ -0,0 +1 @@
+._keypad_1d13x_1{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}._keypad__btn_1d13x_6{font-size:1.125rem}._keypad_1d13x_1 ._col-span-2_1d13x_9{grid-column:span 2}

package/dist/assets/modal.css

@@ -0,0 +1 @@
+._metro-modal-overlay_1s4mh_1{z-index:9999;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}._metro-modal_1s4mh_1{background-color:#fff;border-radius:4px;flex-direction:column;width:100%;max-width:520px;display:flex;overflow:hidden;box-shadow:0 10px 25px #0003}._metro-modal-header_1s4mh_22{color:#fff;background-color:#003d7a;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}._metro-modal-header_1s4mh_22 h2{margin:0;font-size:1.25rem;font-weight:600}._metro-modal-header_1s4mh_22 button{cursor:pointer;color:#fff;background:0 0;border:none;justify-content:center;align-items:center;font-size:1.25rem;display:flex}._metro-modal-header_1s4mh_22 button:hover{opacity:.8}._metro-modal-content_1s4mh_49{flex-direction:column;gap:20px;padding:24px;display:flex}._expression-box_1s4mh_56{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:2px;padding:16px}._expression-box_1s4mh_56 p{color:#374151;margin:0}._expression-box_1s4mh_56 strong{color:#111827;margin-top:8px;font-size:1.125rem;display:block}._input-label_1s4mh_73{color:#374151;margin-bottom:6px;font-size:.875rem}._metro-modal-buttons_1s4mh_79{justify-content:space-between;gap:12px;padding:16px 24px;display:flex}._metro-modal-buttons_1s4mh_79 button{flex:1}

package/dist/assets/select.css

@@ -0,0 +1 @@
+._select_1azes_1{appearance:none;cursor:pointer;background-color:#fff;border:1px solid #e5e7eb;border-radius:4px;height:32px;padding:0 16px;font-size:.875rem;transition:all .2s}._select_1azes_1:focus{outline:none;box-shadow:0 0 0 2px #0077a633}._select--primary_1azes_16{border-color:#0077a6}._select--secondary_1azes_19{background:#f9fafb;border-color:#e5e7eb}._select--ghost_1azes_23{color:#fff;background:0 0;border:1px solid #ffffff4d}._select--disabled_1azes_28{opacity:.5;cursor:not-allowed}._select--sm_1azes_32{height:32px}._select--md_1azes_35{height:40px}._select--lg_1azes_38{height:48px}

package/dist/assets/spinner.css

@@ -0,0 +1 @@
+._spinner_wbe75_1{border:3px solid #0000;border-top-color:currentColor;border-radius:50%;animation:.8s linear infinite _spin_wbe75_1}._spinner--primary_wbe75_7{color:#0077a6}._spinner--secondary_wbe75_10{color:#111827}._spinner--white_wbe75_13{color:#fff}._spinner--sm_wbe75_16{width:16px;height:16px}._spinner--md_wbe75_20{width:24px;height:24px}._spinner--lg_wbe75_24{width:32px;height:32px}@keyframes _spin_wbe75_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/button-DTU9l2Gg.js

@@ -0,0 +1,44 @@
+import { t as e } from "./clsx-ROFf4vs9.js";
+import { t } from "./spinner-Co2caOhH.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 = {
+	button: i,
+	"button--primary": "_button--primary_1wl47_22",
+	"button--secondary": "_button--secondary_1wl47_29",
+	"button--danger": "_button--danger_1wl47_37",
+	"button--dark": "_button--dark_1wl47_44",
+	"button--ghost": "_button--ghost_1wl47_51",
+	"button--sm": "_button--sm_1wl47_59",
+	"button--md": "_button--md_1wl47_64",
+	"button--lg": "_button--lg_1wl47_69",
+	"button--disabled": "_button--disabled_1wl47_74",
+	"button--loading": "_button--loading_1wl47_78",
+	hidden: a,
+	spinnerWrapper: o,
+	spinner: s,
+	spin: c,
+	loadingContent: l
+}, d = ({ children: i, variant: a = "primary", disabled: o, size: s = "md", isLoading: c = !1, loadingText: l, className: d, onClick: f, ...p }) => {
+	let m = o || c, h = () => a === "dark" ? "white" : a === "ghost" ? "primary" : "white";
+	return /* @__PURE__ */ n("button", {
+		"data-variant": a,
+		"data-size": s,
+		className: e(u.button, u[`button--${a}`], u[`button--${s}`], {
+			[u["button--disabled"]]: m,
+			[u["button--loading"]]: c
+		}, d),
+		disabled: m,
+		onClick: f,
+		...p,
+		children: c ? /* @__PURE__ */ r("span", {
+			className: u.loadingContent,
+			children: [/* @__PURE__ */ n(t, {
+				size: "sm",
+				variant: h()
+			}), /* @__PURE__ */ n("span", { children: l || i })]
+		}) : i
+	});
+};
+//#endregion
+export { d as t };

package/dist/clsx-ROFf4vs9.js

@@ -0,0 +1,16 @@
+//#region node_modules/clsx/dist/clsx.mjs
+function e(t) {
+	var n, r, i = "";
+	if (typeof t == "string" || typeof t == "number") i += t;
+	else if (typeof t == "object") if (Array.isArray(t)) {
+		var a = t.length;
+		for (n = 0; n < a; n++) t[n] && (r = e(t[n])) && (i && (i += " "), i += r);
+	} else for (r in t) t[r] && (i && (i += " "), i += r);
+	return i;
+}
+function t() {
+	for (var t, n, r = 0, i = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (n = e(t)) && (i && (i += " "), i += n);
+	return i;
+}
+//#endregion
+export { t };

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

@@ -1,5 +1,10 @@
-type ButtonProps = Readonly<{
-    children: string;
-}>;
-export declare const Button: (props: ButtonProps) => void;
-export {};
+export type ButtonVariant = "primary" | "secondary" | "danger" | "dark" | "ghost";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    loadingText?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Button: ({ children, variant, disabled, size, isLoading, loadingText, className, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button/button.js

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

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

@@ -0,0 +1,48 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ children, variant, disabled, size, isLoading, loadingText, className, onClick, ...props }: import('./button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        onClick: {
+            action: string;
+            description: string;
+        };
+    };
+    args: {
+        children: string;
+        variant: "primary";
+        size: "md";
+        disabled: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Danger: Story;
+export declare const Dark: Story;
+export declare const Ghost: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Disabled: Story;
+export declare const GhostLoading: Story;
+export declare const DarkLoadingWithText: Story;

package/dist/components/button/button.stories.js

@@ -0,0 +1,82 @@
+import { t as e } from "../../button-DTU9l2Gg.js";
+import "../../spinner-Co2caOhH.js";
+//#region src/components/button/button.stories.ts
+var t = {
+	title: "Components/Button",
+	component: e,
+	parameters: { layout: "centered" },
+	tags: ["autodocs"],
+	argTypes: {
+		variant: {
+			control: "select",
+			options: [
+				"primary",
+				"secondary",
+				"danger",
+				"dark",
+				"ghost"
+			],
+			description: "Button style variant"
+		},
+		size: {
+			control: "select",
+			options: [
+				"sm",
+				"md",
+				"lg"
+			],
+			description: "Button size"
+		},
+		disabled: {
+			control: "boolean",
+			description: "Disable the button"
+		},
+		onClick: {
+			action: "clicked",
+			description: "Callback when button is clicked"
+		}
+	},
+	args: {
+		children: "Button",
+		variant: "primary",
+		size: "md",
+		disabled: !1
+	}
+}, n = { args: {
+	variant: "primary",
+	children: "Primary Button"
+} }, r = { args: {
+	variant: "secondary",
+	children: "Secondary Button"
+} }, i = { args: {
+	variant: "danger",
+	children: "Danger Button"
+} }, a = { args: {
+	variant: "dark",
+	children: "Dark Button"
+} }, o = { args: {
+	variant: "ghost",
+	children: "Ghost Button"
+} }, s = { args: {
+	size: "sm",
+	children: "Small Button"
+} }, c = { args: {
+	size: "md",
+	children: "Medium Button"
+} }, l = { args: {
+	size: "lg",
+	children: "Large Button"
+} }, u = { args: {
+	disabled: !0,
+	children: "Disabled Button"
+} }, d = { args: {
+	variant: "ghost",
+	isLoading: !0,
+	children: "Ghost"
+} }, f = { args: {
+	variant: "dark",
+	isLoading: !0,
+	children: "Loading..."
+} };
+//#endregion
+export { i as Danger, a as Dark, f as DarkLoadingWithText, u as Disabled, o as Ghost, d as GhostLoading, l as Large, c as Medium, n as Primary, r as Secondary, s as Small, t as default };

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

@@ -0,0 +1 @@
+export {};

package/dist/components/button/button.test.js

@@ -0,0 +1,42 @@
+import "../../lib-JrI87syO.js";
+import { t as e } from "../../button-DTU9l2Gg.js";
+import "../../spinner-Co2caOhH.js";
+import { i as t, n, o as r, r as i, s as a } from "../../react.esm-CQZuoo0_.js";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/button/button.test.tsx
+r("Button Component", () => {
+	a("renders children correctly", () => {
+		n(/* @__PURE__ */ o(e, { children: "Click me" })), t(i.getByText("Click me")).toBeInTheDocument();
+	}), a("applies primary variant by default", () => {
+		n(/* @__PURE__ */ o(e, { children: "Test" })), t(i.getByRole("button")).toHaveAttribute("data-variant", "primary");
+	}), a("applies disabled state when disabled prop is true", () => {
+		n(/* @__PURE__ */ o(e, {
+			disabled: !0,
+			children: "Test"
+		})), t(i.getByRole("button")).toBeDisabled();
+	}), a("renders with different variants", () => {
+		let { rerender: r } = n(/* @__PURE__ */ o(e, {
+			variant: "secondary",
+			children: "Secondary"
+		})), a = i.getByRole("button");
+		t(a).toHaveAttribute("data-variant", "secondary"), r(/* @__PURE__ */ o(e, {
+			variant: "danger",
+			children: "Danger"
+		})), a = i.getByRole("button"), t(a).toHaveAttribute("data-variant", "danger");
+	}), a("renders with different sizes", () => {
+		let { rerender: r } = n(/* @__PURE__ */ o(e, {
+			size: "sm",
+			children: "Small"
+		})), a = i.getByRole("button");
+		t(a).toHaveAttribute("data-size", "sm"), r(/* @__PURE__ */ o(e, {
+			size: "lg",
+			children: "Large"
+		})), a = i.getByRole("button"), t(a).toHaveAttribute("data-size", "lg");
+	}), a("shows spinner when loading", () => {
+		n(/* @__PURE__ */ o(e, {
+			isLoading: !0,
+			children: "Click"
+		})), t(i.getByRole("button")).toBeDisabled();
+	});
+});
+//#endregion

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

@@ -0,0 +1,8 @@
+export interface FormFieldProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    children?: React.ReactElement;
+    id: string;
+}
+export declare const FormField: ({ label, error, helperText, children, id, }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/formField/formField.js

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

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

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ label, error, helperText, children, id, }: import('./formField').FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Error: Story;
+export declare const HelperText: Story;
+export declare const WithAction: Story;

package/dist/components/formField/formField.stories.js

@@ -0,0 +1,77 @@
+import { t as e } from "../../input-q5h2lA4L.js";
+import { t } from "../../formField-BdRLOA0x.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/components/formField/formField.stories.tsx
+var i = {
+	title: "Components/FormField",
+	component: t,
+	parameters: { layout: "centered" },
+	tags: ["autodocs"]
+}, a = {
+	args: { id: "formField-default" },
+	render: (i) => {
+		let [a, o] = r("");
+		return /* @__PURE__ */ n(t, {
+			...i,
+			label: "Name",
+			children: /* @__PURE__ */ n(e, {
+				id: "formField-default-input",
+				value: a,
+				onChange: (e) => o(e)
+			})
+		});
+	}
+}, o = {
+	args: { id: "formField-error" },
+	render: (i) => {
+		let [a, o] = r("");
+		return /* @__PURE__ */ n(t, {
+			...i,
+			label: "Email",
+			error: "Invalid email",
+			children: /* @__PURE__ */ n(e, {
+				id: "formField-error-input",
+				value: a,
+				onChange: (e) => o(e)
+			})
+		});
+	}
+}, s = {
+	args: { id: "formField-helperText" },
+	render: (i) => {
+		let [a, o] = r("");
+		return /* @__PURE__ */ n(t, {
+			...i,
+			label: "Password",
+			helperText: "Must be at least 8 characters",
+			children: /* @__PURE__ */ n(e, {
+				id: "formField-helperText-input",
+				value: a,
+				onChange: (e) => o(e)
+			})
+		});
+	}
+}, c = {
+	args: { id: "formField-withAction" },
+	render: (i) => {
+		let [a, o] = r("");
+		return /* @__PURE__ */ n(t, {
+			...i,
+			label: "Search",
+			children: /* @__PURE__ */ n("div", {
+				style: {
+					display: "flex",
+					gap: "8px"
+				},
+				children: /* @__PURE__ */ n(e, {
+					id: "formField-withAction-input",
+					value: a,
+					onChange: (e) => o(e)
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { a as Default, o as Error, s as HelperText, c as WithAction, i as default };

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

@@ -0,0 +1 @@
+export {};

package/dist/components/formField/formField.test.js

@@ -0,0 +1,40 @@
+import "../../lib-JrI87syO.js";
+import { n as e, t } from "../../formField-BdRLOA0x.js";
+import { i as n, n as r, o as i, r as a, s as o } from "../../react.esm-CQZuoo0_.js";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/formField/formField.test.tsx
+i("FormField", () => {
+	o("renders label", () => {
+		r(/* @__PURE__ */ s(t, {
+			label: "Email",
+			id: "email",
+			children: /* @__PURE__ */ s("input", {})
+		})), n(a.getByText("Email")).toBeInTheDocument();
+	}), o("renders children", () => {
+		r(/* @__PURE__ */ s(t, {
+			id: "test",
+			children: /* @__PURE__ */ s("input", { placeholder: "test" })
+		})), n(a.getByPlaceholderText("test")).toBeInTheDocument();
+	}), o("renders error message", () => {
+		r(/* @__PURE__ */ s(t, {
+			error: "Required",
+			id: "test",
+			children: /* @__PURE__ */ s("input", {})
+		})), n(a.getByText("Required")).toBeInTheDocument();
+	}), o("renders helper text when no error", () => {
+		r(/* @__PURE__ */ s(t, {
+			helperText: "Helpful info",
+			id: "test",
+			children: /* @__PURE__ */ s("input", {})
+		})), n(a.getByText("Helpful info")).toBeInTheDocument();
+	}), o("applies error class when error exists", () => {
+		r(/* @__PURE__ */ s(t, {
+			error: "Error",
+			id: "test",
+			children: /* @__PURE__ */ s("input", { "data-testid": "input" })
+		}));
+		let i = a.getByTestId("input").parentElement;
+		n(i).toHaveClass(e["control--error"]);
+	});
+});
+//#endregion

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

@@ -0,0 +1,11 @@
+export interface InputProps {
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type?: "text" | "email" | "password" | "number";
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+export declare const Input: ({ id, value, onChange, placeholder, type, disabled, size, className, }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/input/input.js

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

package/dist/components/inputWithActions/inputWithAction.d.ts

@@ -0,0 +1,5 @@
+export interface InputWithActionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const InputWithAction: ({ children, className, }: InputWithActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputWithActions/inputWithAction.js

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

package/dist/components/inputWithActions/inputWithAction.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputWithAction } from './inputWithAction';
+declare const meta: Meta<typeof InputWithAction>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleAction: Story;
+export declare const WithFormField: Story;
+export declare const Confirmation: Story;
+export declare const LoadingAction: Story;

package/dist/components/inputWithActions/inputWithAction.stories.js

@@ -0,0 +1,83 @@
+import { t as e } from "../../button-DTU9l2Gg.js";
+import "../../spinner-Co2caOhH.js";
+import { t } from "../../inputWithAction-VBlCurUV.js";
+import { t as n } from "../../input-q5h2lA4L.js";
+import { t as r } from "../../formField-BdRLOA0x.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+//#region src/components/inputWithActions/inputWithAction.stories.tsx
+var s = {
+	title: "Components/inputWithAction",
+	component: t,
+	parameters: { layout: "centered" },
+	tags: ["autodocs"]
+}, c = { render: () => {
+	let [r, s] = o("");
+	return /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(n, {
+		value: r,
+		onChange: s,
+		placeholder: "Search...",
+		id: "single-action-input"
+	}), /* @__PURE__ */ i(e, {
+		onClick: () => alert(r),
+		children: "Search"
+	})] });
+} }, l = { render: () => {
+	let [s, c] = o(""), [l, u] = o("");
+	return /* @__PURE__ */ i(r, {
+		label: "Search",
+		error: l,
+		id: "with-form-field-input",
+		children: /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(n, {
+			value: s,
+			onChange: c,
+			id: "with-form-field-input"
+		}), /* @__PURE__ */ i(e, {
+			onClick: () => {
+				u(s ? "" : "Field is required");
+			},
+			children: "Search"
+		})] })
+	});
+} }, u = { render: () => {
+	let [s, c] = o(""), [l, u] = o("");
+	return /* @__PURE__ */ i(r, {
+		label: "Type DELETE to confirm",
+		error: l,
+		id: "confirmation-input",
+		children: /* @__PURE__ */ a(t, { children: [
+			/* @__PURE__ */ i(n, {
+				value: s,
+				onChange: c,
+				id: "confirmation-input"
+			}),
+			/* @__PURE__ */ i(e, {
+				variant: "secondary",
+				onClick: () => c(""),
+				children: "Cancel"
+			}),
+			/* @__PURE__ */ i(e, {
+				variant: "danger",
+				onClick: () => {
+					u(s === "DELETE" ? "" : "You must type DELETE");
+				},
+				children: "Delete"
+			})
+		] })
+	});
+} }, d = { render: () => {
+	let [r, s] = o(""), [c, l] = o(!1);
+	return /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(n, {
+		value: r,
+		onChange: s,
+		id: "loading-action-input"
+	}), /* @__PURE__ */ i(e, {
+		isLoading: c,
+		onClick: async () => {
+			l(!0), await new Promise((e) => setTimeout(e, 1e3)), l(!1);
+		},
+		children: "Submit"
+	})] });
+} };
+//#endregion
+export { u as Confirmation, d as LoadingAction, c as SingleAction, l as WithFormField, s as default };

package/dist/components/inputWithActions/inputWithAction.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputWithActions/inputWithAction.test.js

@@ -0,0 +1,9 @@
+import "../../lib-JrI87syO.js";
+import { t as e } from "../../inputWithAction-VBlCurUV.js";
+import { i as t, n, r, s as i } from "../../react.esm-CQZuoo0_.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/inputWithActions/inputWithAction.test.tsx
+i("renders children", () => {
+	n(/* @__PURE__ */ o(e, { children: [/* @__PURE__ */ a("input", {}), /* @__PURE__ */ a("button", { children: "Click" })] })), t(r.getByRole("button")).toBeInTheDocument();
+});
+//#endregion

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

@@ -0,0 +1,16 @@
+export type KeypadButton = {
+    label: string;
+    type: "number" | "operation" | "clear" | "decimal" | "equals" | "backspace";
+    value?: string;
+    span?: number;
+};
+type KeypadProps = {
+    onNumberClick: (value: string) => void;
+    onOperationClick: (label: string) => void;
+    onClear: () => void;
+    onDecimalClick: () => void;
+    onEqualsClick: () => void;
+    onBackspaceClick: () => void;
+};
+export declare const Keypad: ({ onNumberClick, onClear, onOperationClick, onDecimalClick, onEqualsClick, onBackspaceClick, }: KeypadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/keypad/keypad.js

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

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Keypad } from './keypad';
+declare const meta: Meta<typeof Keypad>;
+export default meta;
+type Story = StoryObj<typeof Keypad>;
+export declare const Default: Story;

package/dist/components/keypad/keypad.stories.js

@@ -0,0 +1,17 @@
+import "../../button-DTU9l2Gg.js";
+import "../../spinner-Co2caOhH.js";
+import { t as e } from "../../keypad-Bu5TjaRH.js";
+//#region src/components/keypad/keypad.stories.tsx
+var t = {
+	title: "Components/Keypad",
+	component: e
+}, n = { args: {
+	onNumberClick: (e) => console.log("number:", e),
+	onClear: () => console.log("clear"),
+	onOperationClick: (e) => console.log("operation:", e),
+	onDecimalClick: () => console.log("decimal"),
+	onEqualsClick: () => console.log("equals"),
+	onBackspaceClick: () => console.log("backspace")
+} };
+//#endregion
+export { n as Default, t as default };

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

@@ -0,0 +1 @@
+export {};