@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/form/fields/DatePicker.spec.js

@@ -0,0 +1,89 @@
+import { DatePicker, init_DatePicker } from "./DatePicker.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+import userEvent from "/home/runner/work/web/web/node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/esm/index.js";
+
+//#region src/components/form/fields/DatePicker.spec.tsx
+init_DatePicker();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({ DatePicker: vi.fn(({ date, disabled, onBlur, placeholder, setDate, ...props }) => {
+	const handleChange = (event) => {
+		const dateValue = event.target.value ? new Date(event.target.value) : void 0;
+		setDate?.(dateValue);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"data-testid": "base-date-picker",
+		disabled,
+		onBlur,
+		onChange: handleChange,
+		placeholder,
+		type: "date",
+		value: date ? date.toISOString().split("T")[0] : "",
+		...props
+	});
+}) }));
+describe("DatePicker", () => {
+	afterEach(cleanup);
+	it("renders the base date picker component", () => {
+		render(/* @__PURE__ */ jsx(DatePicker, {
+			name: "testDatePicker",
+			onChange: vi.fn()
+		}));
+		expect(screen.getByTestId("base-date-picker")).toBeInTheDocument();
+	});
+	it("passes date, placeholder, and disabled props to the base date picker", () => {
+		render(/* @__PURE__ */ jsx(DatePicker, {
+			date: /* @__PURE__ */ new Date("2023-10-26T10:00:00.000Z"),
+			disabled: true,
+			name: "testDatePicker",
+			onChange: vi.fn(),
+			placeholder: "Select a date"
+		}));
+		const input = screen.getByTestId("base-date-picker");
+		expect(input).toHaveValue("2023-10-26");
+		expect(input).toHaveAttribute("placeholder", "Select a date");
+		expect(input).toBeDisabled();
+	});
+	it("calls onChange when a date is selected", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(DatePicker, {
+			name: "testDatePicker",
+			onChange: handleChange
+		}));
+		const input = screen.getByTestId("base-date-picker");
+		const newDate = "2024-01-15";
+		await user.type(input, newDate);
+		expect(handleChange).toHaveBeenCalledWith(new Date(newDate));
+	});
+	it("calls onChange with undefined when the input is cleared", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(DatePicker, {
+			date: /* @__PURE__ */ new Date("2023-10-26T10:00:00.000Z"),
+			name: "testDatePicker",
+			onChange: handleChange
+		}));
+		const input = screen.getByTestId("base-date-picker");
+		await user.clear(input);
+		expect(handleChange).toHaveBeenCalledWith(void 0);
+	});
+	it("calls onBlur when the input is blurred", async () => {
+		const user = userEvent.setup();
+		const handleBlur = vi.fn();
+		render(/* @__PURE__ */ jsx(DatePicker, {
+			name: "testDatePicker",
+			onBlur: handleBlur,
+			onChange: vi.fn()
+		}));
+		const input = screen.getByTestId("base-date-picker");
+		await user.click(input);
+		await user.tab();
+		expect(handleBlur).toHaveBeenCalled();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=DatePicker.spec.js.map

package/dist/esm/components/form/fields/DatePicker.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.spec.js","names":[],"sources":["../../../../../src/components/form/fields/DatePicker.spec.tsx"],"sourcesContent":["import { cleanup, render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport React from \"react\";\nimport { afterEach, describe, expect, it, vi } from \"vitest\";\n\nimport { DatePicker } from \"./DatePicker\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Mock the base DatePicker component from ui-core\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  DatePicker: vi.fn(\n    ({ date, disabled, onBlur, placeholder, setDate, ...props }) => {\n      // Simple mock: render an input and simulate date selection via change\n      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const dateValue = event.target.value\n          ? new Date(event.target.value)\n          : undefined;\n        setDate?.(dateValue);\n      };\n      return (\n        <input\n          data-testid=\"base-date-picker\"\n          disabled={disabled}\n          onBlur={onBlur}\n          onChange={handleChange}\n          placeholder={placeholder}\n          type=\"date\" // Use date type for easier simulation\n          value={date ? date.toISOString().split(\"T\")[0] : \"\"} // Format date for input value\n          {...props}\n        />\n      );\n    },\n  ),\n}));\n\ndescribe(\"DatePicker\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the base date picker component\", () => {\n    render(<DatePicker name=\"testDatePicker\" onChange={vi.fn()} />);\n    expect(screen.getByTestId(\"base-date-picker\")).toBeInTheDocument();\n  });\n\n  it(\"passes date, placeholder, and disabled props to the base date picker\", () => {\n    const testDate = new Date(\"2023-10-26T10:00:00.000Z\");\n    render(\n      <DatePicker\n        date={testDate}\n        disabled\n        name=\"testDatePicker\"\n        onChange={vi.fn()}\n        placeholder=\"Select a date\"\n      />,\n    );\n    const input = screen.getByTestId(\"base-date-picker\");\n    expect(input).toHaveValue(\"2023-10-26\"); // Check formatted date value\n    expect(input).toHaveAttribute(\"placeholder\", \"Select a date\");\n    expect(input).toBeDisabled();\n  });\n\n  it(\"calls onChange when a date is selected\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(<DatePicker name=\"testDatePicker\" onChange={handleChange} />);\n\n    const input = screen.getByTestId(\"base-date-picker\");\n    const newDate = \"2024-01-15\";\n    await user.type(input, newDate); // Simulate typing a date\n\n    // The mock converts the string to a Date object\n    expect(handleChange).toHaveBeenCalledWith(new Date(newDate));\n  });\n\n  it(\"calls onChange with undefined when the input is cleared\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    const initialDate = new Date(\"2023-10-26T10:00:00.000Z\");\n    render(\n      <DatePicker\n        date={initialDate}\n        name=\"testDatePicker\"\n        onChange={handleChange}\n      />,\n    );\n\n    const input = screen.getByTestId(\"base-date-picker\");\n    await user.clear(input); // Simulate clearing the input\n\n    expect(handleChange).toHaveBeenCalledWith(undefined);\n  });\n\n  it(\"calls onBlur when the input is blurred\", async () => {\n    const user = userEvent.setup();\n    const handleBlur = vi.fn();\n    render(\n      <DatePicker\n        name=\"testDatePicker\"\n        onBlur={handleBlur}\n        onChange={vi.fn()}\n      />,\n    );\n\n    const input = screen.getByTestId(\"base-date-picker\");\n    await user.click(input); // Focus the input\n    await user.tab(); // Blur the input\n\n    expect(handleBlur).toHaveBeenCalled();\n  });\n});\n"],"mappings":";;;;;;;;iBAK0C;AAG1C,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,GAAG,KAAK,4CAA4C,EAClD,YAAY,GAAG,IACZ,EAAE,MAAM,UAAU,QAAQ,aAAa,SAAS,GAAG,YAAY;CAE9D,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,OAAO,QAC3B,IAAI,KAAK,MAAM,OAAO,MAAM,GAC5B;AACJ,YAAU,UAAU;;AAEtB,QACE,oBAAC;EACC,eAAY;EACF;EACF;EACR,UAAU;EACG;EACb,MAAK;EACL,OAAO,OAAO,KAAK,aAAa,CAAC,MAAM,IAAI,CAAC,KAAK;EACjD,GAAI;GACJ;EAGP,EACF,EAAE;AAEH,SAAS,oBAAoB;AAC3B,WAAU,QAAQ;AAElB,IAAG,gDAAgD;AACjD,SAAO,oBAAC;GAAW,MAAK;GAAiB,UAAU,GAAG,IAAI;IAAI,CAAC;AAC/D,SAAO,OAAO,YAAY,mBAAmB,CAAC,CAAC,mBAAmB;GAClE;AAEF,IAAG,8EAA8E;AAE/E,SACE,oBAAC;GACC,sBAHa,IAAI,KAAK,2BAA2B;GAIjD;GACA,MAAK;GACL,UAAU,GAAG,IAAI;GACjB,aAAY;IACZ,CACH;EACD,MAAM,QAAQ,OAAO,YAAY,mBAAmB;AACpD,SAAO,MAAM,CAAC,YAAY,aAAa;AACvC,SAAO,MAAM,CAAC,gBAAgB,eAAe,gBAAgB;AAC7D,SAAO,MAAM,CAAC,cAAc;GAC5B;AAEF,IAAG,0CAA0C,YAAY;EACvD,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SAAO,oBAAC;GAAW,MAAK;GAAiB,UAAU;IAAgB,CAAC;EAEpE,MAAM,QAAQ,OAAO,YAAY,mBAAmB;EACpD,MAAM,UAAU;AAChB,QAAM,KAAK,KAAK,OAAO,QAAQ;AAG/B,SAAO,aAAa,CAAC,qBAAqB,IAAI,KAAK,QAAQ,CAAC;GAC5D;AAEF,IAAG,2DAA2D,YAAY;EACxE,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAE5B,SACE,oBAAC;GACC,sBAHgB,IAAI,KAAK,2BAA2B;GAIpD,MAAK;GACL,UAAU;IACV,CACH;EAED,MAAM,QAAQ,OAAO,YAAY,mBAAmB;AACpD,QAAM,KAAK,MAAM,MAAM;AAEvB,SAAO,aAAa,CAAC,qBAAqB,OAAU;GACpD;AAEF,IAAG,0CAA0C,YAAY;EACvD,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,aAAa,GAAG,IAAI;AAC1B,SACE,oBAAC;GACC,MAAK;GACL,QAAQ;GACR,UAAU,GAAG,IAAI;IACjB,CACH;EAED,MAAM,QAAQ,OAAO,YAAY,mBAAmB;AACpD,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,KAAK,KAAK;AAEhB,SAAO,WAAW,CAAC,kBAAkB;GACrC;EACF"}

package/dist/esm/components/form/fields/EmailInput.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/form/fields/EmailInput.d.ts
+declare const EmailInput: any;
+declare function registerEmailInput(): void;
+//#endregion
+export { EmailInput, registerEmailInput };
+//# sourceMappingURL=EmailInput.d.ts.map

package/dist/esm/components/form/fields/EmailInput.js

@@ -0,0 +1,32 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { registerFormComponent } from "./registry.js";
+import { FormFieldType } from "./types.js";
+import { init_fields } from "./index.js";
+import { init_components } from "../../index.js";
+import { Input } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/fields/EmailInput.tsx
+function registerEmailInput() {
+	registerFormComponent(FormFieldType.EMAIL, EmailInput);
+}
+var EmailInput;
+var init_EmailInput = __esmMin(() => {
+	init_fields();
+	init_components();
+	EmailInput = React.forwardRef(({ autocomplete, ...props }, ref) => {
+		return /* @__PURE__ */ jsx(Input, {
+			autoComplete: autocomplete,
+			ref,
+			type: "email",
+			...props
+		});
+	});
+	EmailInput.displayName = "EmailInput";
+});
+
+//#endregion
+init_EmailInput();
+export { EmailInput, init_EmailInput, registerEmailInput };
+//# sourceMappingURL=EmailInput.js.map

package/dist/esm/components/form/fields/EmailInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.js","names":[],"sources":["../../../../../src/components/form/fields/EmailInput.tsx"],"sourcesContent":["import { Input } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface EmailInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  autocomplete?: string;\n  className?: string;\n  inputClassName?: string;\n  label?: string;\n  placeholder?: string;\n}\n\nexport const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(\n  ({ autocomplete, ...props }, ref) => {\n    return (\n      <Input autoComplete={autocomplete} ref={ref} type=\"email\" {...props} />\n    );\n  },\n);\nEmailInput.displayName = \"EmailInput\";\n\nexport function registerEmailInput() {\n  registerFormComponent(FormFieldType.EMAIL, EmailInput);\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,qBAAqB;AACnC,uBAAsB,cAAc,OAAO,WAAW;;;;cArBd;kBACG;CAUhC,aAAa,MAAM,YAC7B,EAAE,cAAc,GAAG,SAAS,QAAQ;AACnC,SACE,oBAAC;GAAM,cAAc;GAAmB;GAAK,MAAK;GAAQ,GAAI;IAAS;GAG5E;AACD,YAAW,cAAc"}

package/dist/esm/components/form/fields/EmailInput.spec.d.ts

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

package/dist/esm/components/form/fields/EmailInput.spec.js

@@ -0,0 +1,38 @@
+import { EmailInput, init_EmailInput } from "./EmailInput.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+
+//#region src/components/form/fields/EmailInput.spec.tsx
+init_EmailInput();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({ Input: vi.fn((props) => /* @__PURE__ */ jsx("input", {
+	"data-testid": "base-input",
+	...props
+})) }));
+describe("EmailInput", () => {
+	afterEach(cleanup);
+	it("renders the base input component with type email", () => {
+		render(/* @__PURE__ */ jsx(EmailInput, { name: "testEmail" }));
+		const input = screen.getByTestId("base-input");
+		expect(input).toBeInTheDocument();
+		expect(input).toHaveAttribute("type", "email");
+	});
+	it("passes all props to the base input", () => {
+		render(/* @__PURE__ */ jsx(EmailInput, {
+			className: "test-class",
+			inputClassName: "input-class",
+			name: "testEmail",
+			placeholder: "Enter email",
+			required: true
+		}));
+		const input = screen.getByTestId("base-input");
+		expect(input).toHaveAttribute("name", "testEmail");
+		expect(input).toHaveAttribute("placeholder", "Enter email");
+		expect(input).toBeRequired();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=EmailInput.spec.js.map

package/dist/esm/components/form/fields/EmailInput.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.spec.js","names":[],"sources":["../../../../../src/components/form/fields/EmailInput.spec.tsx"],"sourcesContent":["import { cleanup, render, screen } from \"@testing-library/react\";\nimport React from \"react\";\nimport { afterEach, describe, expect, it, vi } from \"vitest\";\n\nimport { EmailInput } from \"./EmailInput\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Mock the Input component\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  Input: vi.fn((props) => <input data-testid=\"base-input\" {...props} />),\n}));\n\ndescribe(\"EmailInput\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the base input component with type email\", () => {\n    render(<EmailInput name=\"testEmail\" />);\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toBeInTheDocument();\n    expect(input).toHaveAttribute(\"type\", \"email\");\n  });\n\n  it(\"passes all props to the base input\", () => {\n    render(\n      <EmailInput\n        className=\"test-class\"\n        inputClassName=\"input-class\"\n        name=\"testEmail\"\n        placeholder=\"Enter email\"\n        required\n      />,\n    );\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toHaveAttribute(\"name\", \"testEmail\");\n    expect(input).toHaveAttribute(\"placeholder\", \"Enter email\");\n    expect(input).toBeRequired();\n  });\n});\n"],"mappings":";;;;;;;iBAI0C;AAG1C,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,GAAG,KAAK,4CAA4C,EAClD,OAAO,GAAG,IAAI,UAAU,oBAAC;CAAM,eAAY;CAAa,GAAI;EAAS,CAAC,EACvE,EAAE;AAEH,SAAS,oBAAoB;AAC3B,WAAU,QAAQ;AAElB,IAAG,0DAA0D;AAC3D,SAAO,oBAAC,cAAW,MAAK,cAAc,CAAC;EACvC,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,SAAO,MAAM,CAAC,mBAAmB;AACjC,SAAO,MAAM,CAAC,gBAAgB,QAAQ,QAAQ;GAC9C;AAEF,IAAG,4CAA4C;AAC7C,SACE,oBAAC;GACC,WAAU;GACV,gBAAe;GACf,MAAK;GACL,aAAY;GACZ;IACA,CACH;EACD,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,SAAO,MAAM,CAAC,gBAAgB,QAAQ,YAAY;AAClD,SAAO,MAAM,CAAC,gBAAgB,eAAe,cAAc;AAC3D,SAAO,MAAM,CAAC,cAAc;GAC5B;EACF"}

package/dist/esm/components/form/fields/FileInput.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/form/fields/FileInput.d.ts
+declare const FileInput: any;
+declare function registerFileInput(): void;
+//#endregion
+export { FileInput, registerFileInput };
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/esm/components/form/fields/FileInput.js

@@ -0,0 +1,35 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { registerFormComponent } from "./registry.js";
+import { FormFieldType } from "./types.js";
+import { init_fields } from "./index.js";
+import { init_components } from "../../index.js";
+import { Input } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/fields/FileInput.tsx
+function registerFileInput() {
+	registerFormComponent(FormFieldType.FILE, FileInput);
+}
+var FileInput;
+var init_FileInput = __esmMin(() => {
+	init_fields();
+	init_components();
+	FileInput = React.forwardRef(({ autocomplete, ...props }, ref) => {
+		return /* @__PURE__ */ jsx(Input, {
+			autoComplete: autocomplete,
+			disabled: props.disabled,
+			name: props.name,
+			onBlur: props.onBlur,
+			onChange: (e) => props.onChange?.(e.target.files),
+			ref,
+			type: "file"
+		});
+	});
+	FileInput.displayName = "FileInput";
+});
+
+//#endregion
+init_FileInput();
+export { FileInput, init_FileInput, registerFileInput };
+//# sourceMappingURL=FileInput.js.map

package/dist/esm/components/form/fields/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","names":[],"sources":["../../../../../src/components/form/fields/FileInput.tsx"],"sourcesContent":["import { Input } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport type { AutocompleteToken } from \"@/components\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface FileInputProps {\n  autocomplete?: AutocompleteToken;\n  disabled?: boolean;\n  label?: string;\n  name: string;\n  onBlur?: () => void;\n  onChange?: (files: FileList | null) => void;\n  value?: FileList;\n}\n\nexport const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(\n  ({ autocomplete, ...props }, ref) => {\n    return (\n      <Input\n        autoComplete={autocomplete}\n        disabled={props.disabled}\n        name={props.name}\n        onBlur={props.onBlur}\n        onChange={(e) => props.onChange?.(e.target.files)}\n        ref={ref}\n        type=\"file\"\n      />\n    );\n  },\n);\nFileInput.displayName = \"FileInput\";\n\nexport function registerFileInput() {\n  registerFormComponent(FormFieldType.FILE, FileInput);\n}\n"],"mappings":";;;;;;;;;;AAmCA,SAAgB,oBAAoB;AAClC,uBAAsB,cAAc,MAAM,UAAU;;;;cA/BZ;kBACG;CAYhC,YAAY,MAAM,YAC5B,EAAE,cAAc,GAAG,SAAS,QAAQ;AACnC,SACE,oBAAC;GACC,cAAc;GACd,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,QAAQ,MAAM;GACd,WAAW,MAAM,MAAM,WAAW,EAAE,OAAO,MAAM;GAC5C;GACL,MAAK;IACL;GAGP;AACD,WAAU,cAAc"}

package/dist/esm/components/form/fields/FileInput.spec.d.ts

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

package/dist/esm/components/form/fields/FileInput.spec.js

@@ -0,0 +1,61 @@
+import { FileInput, init_FileInput } from "./FileInput.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+import userEvent from "/home/runner/work/web/web/node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/esm/index.js";
+
+//#region src/components/form/fields/FileInput.spec.tsx
+init_FileInput();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({ Input: vi.fn((props) => /* @__PURE__ */ jsx("input", {
+	"data-testid": "base-input",
+	...props
+})) }));
+describe("FileInput", () => {
+	afterEach(cleanup);
+	it("renders the base input component with type file", () => {
+		render(/* @__PURE__ */ jsx(FileInput, { name: "testFileInput" }));
+		const input = screen.getByTestId("base-input");
+		expect(input).toBeInTheDocument();
+		expect(input).toHaveAttribute("type", "file");
+	});
+	it("passes disabled prop to the base input", () => {
+		render(/* @__PURE__ */ jsx(FileInput, {
+			disabled: true,
+			name: "testFileInput"
+		}));
+		expect(screen.getByTestId("base-input")).toBeDisabled();
+	});
+	it("calls onChange with FileList when files are selected", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(FileInput, {
+			name: "testFileInput",
+			onChange: handleChange
+		}));
+		const input = screen.getByTestId("base-input");
+		const file = new File(["hello"], "hello.png", { type: "image/png" });
+		await user.upload(input, file);
+		expect(handleChange).toHaveBeenCalled();
+		const fileList = handleChange.mock.calls[0][0];
+		expect(fileList).toBeInstanceOf(FileList);
+		expect(fileList.length).toBe(1);
+		expect(fileList[0]).toBe(file);
+	});
+	it("calls onBlur when the input is blurred", async () => {
+		const user = userEvent.setup();
+		const handleBlur = vi.fn();
+		render(/* @__PURE__ */ jsx(FileInput, {
+			name: "testFileInput",
+			onBlur: handleBlur
+		}));
+		const input = screen.getByTestId("base-input");
+		await user.click(input);
+		await user.tab();
+		expect(handleBlur).toHaveBeenCalled();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=FileInput.spec.js.map

package/dist/esm/components/form/fields/FileInput.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.spec.js","names":[],"sources":["../../../../../src/components/form/fields/FileInput.spec.tsx"],"sourcesContent":["import { cleanup, render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport React from \"react\";\nimport { afterEach, describe, expect, it, vi } from \"vitest\";\n\nimport { FileInput } from \"./FileInput\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Mock the base Input component from ui-core\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  Input: vi.fn((props) => <input data-testid=\"base-input\" {...props} />),\n}));\n\ndescribe(\"FileInput\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the base input component with type file\", () => {\n    render(<FileInput name=\"testFileInput\" />);\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toBeInTheDocument();\n    expect(input).toHaveAttribute(\"type\", \"file\");\n  });\n\n  it(\"passes disabled prop to the base input\", () => {\n    render(<FileInput disabled name=\"testFileInput\" />);\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toBeDisabled();\n  });\n\n  it(\"calls onChange with FileList when files are selected\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(<FileInput name=\"testFileInput\" onChange={handleChange} />);\n\n    const input = screen.getByTestId(\"base-input\");\n    const file = new File([\"hello\"], \"hello.png\", { type: \"image/png\" });\n\n    await user.upload(input, file);\n\n    // Check if onChange was called with a FileList containing the file\n    expect(handleChange).toHaveBeenCalled();\n    const fileList = handleChange.mock.calls[0][0];\n    expect(fileList).toBeInstanceOf(FileList);\n    expect(fileList.length).toBe(1);\n    expect(fileList[0]).toBe(file);\n  });\n\n  it(\"calls onBlur when the input is blurred\", async () => {\n    const user = userEvent.setup();\n    const handleBlur = vi.fn();\n    render(<FileInput name=\"testFileInput\" onBlur={handleBlur} />);\n\n    const input = screen.getByTestId(\"base-input\");\n    await user.click(input); // Focus the input\n    await user.tab(); // Blur the input\n\n    expect(handleBlur).toHaveBeenCalled();\n  });\n\n  // Note: Testing the 'value' prop for FileList is tricky as input[type=\"file\"].value is read-only\n  // and cannot be programmatically set for security reasons. The component doesn't seem to\n  // rely on setting the value prop on the input itself, but rather receives it from RHF.\n  // A test for how the component *uses* the value prop (e.g., displaying file names)\n  // would require modifying the component to display this information.\n});\n"],"mappings":";;;;;;;;gBAKwC;AAGxC,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,GAAG,KAAK,4CAA4C,EAClD,OAAO,GAAG,IAAI,UAAU,oBAAC;CAAM,eAAY;CAAa,GAAI;EAAS,CAAC,EACvE,EAAE;AAEH,SAAS,mBAAmB;AAC1B,WAAU,QAAQ;AAElB,IAAG,yDAAyD;AAC1D,SAAO,oBAAC,aAAU,MAAK,kBAAkB,CAAC;EAC1C,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,SAAO,MAAM,CAAC,mBAAmB;AACjC,SAAO,MAAM,CAAC,gBAAgB,QAAQ,OAAO;GAC7C;AAEF,IAAG,gDAAgD;AACjD,SAAO,oBAAC;GAAU;GAAS,MAAK;IAAkB,CAAC;AAEnD,SADc,OAAO,YAAY,aAAa,CACjC,CAAC,cAAc;GAC5B;AAEF,IAAG,wDAAwD,YAAY;EACrE,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SAAO,oBAAC;GAAU,MAAK;GAAgB,UAAU;IAAgB,CAAC;EAElE,MAAM,QAAQ,OAAO,YAAY,aAAa;EAC9C,MAAM,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpE,QAAM,KAAK,OAAO,OAAO,KAAK;AAG9B,SAAO,aAAa,CAAC,kBAAkB;EACvC,MAAM,WAAW,aAAa,KAAK,MAAM,GAAG;AAC5C,SAAO,SAAS,CAAC,eAAe,SAAS;AACzC,SAAO,SAAS,OAAO,CAAC,KAAK,EAAE;AAC/B,SAAO,SAAS,GAAG,CAAC,KAAK,KAAK;GAC9B;AAEF,IAAG,0CAA0C,YAAY;EACvD,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,aAAa,GAAG,IAAI;AAC1B,SAAO,oBAAC;GAAU,MAAK;GAAgB,QAAQ;IAAc,CAAC;EAE9D,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,KAAK,KAAK;AAEhB,SAAO,WAAW,CAAC,kBAAkB;GACrC;EAOF"}

package/dist/esm/components/form/fields/Input.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/form/fields/Input.d.ts
+declare const Input: any;
+declare function registerInput(): void;
+//#endregion
+export { Input, registerInput };
+//# sourceMappingURL=Input.d.ts.map

package/dist/esm/components/form/fields/Input.js

@@ -0,0 +1,37 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { registerFormComponent } from "./registry.js";
+import { FormFieldType } from "./types.js";
+import { init_fields } from "./index.js";
+import { init_components } from "../../index.js";
+import { Input as Input$1, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/fields/Input.tsx
+function registerInput() {
+	registerFormComponent(FormFieldType.TEXT, Input);
+	registerFormComponent(FormFieldType.PASSWORD, Input);
+}
+var Input;
+var init_Input = __esmMin(() => {
+	init_fields();
+	init_components();
+	Input = React.forwardRef(({ autocomplete, autoComplete: htmlAutoComplete, inputClassName, onChange, placeholder, type, value, ...props }, ref) => {
+		return /* @__PURE__ */ jsx(Input$1, {
+			autoComplete: autocomplete ?? htmlAutoComplete,
+			className: cn("bg-input h-14 border-none", inputClassName),
+			onChange,
+			placeholder,
+			ref,
+			type,
+			value: value ?? "",
+			...props
+		});
+	});
+	Input.displayName = "Input";
+});
+
+//#endregion
+init_Input();
+export { Input, init_Input, registerInput };
+//# sourceMappingURL=Input.js.map

package/dist/esm/components/form/fields/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["BaseInput"],"sources":["../../../../../src/components/form/fields/Input.tsx"],"sourcesContent":["import { Input as BaseInput, cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  autocomplete?: string;\n  className?: string;\n  inputClassName?: string; // Use inputClassName for the actual input element\n  label?: string;\n  placeholder?: string;\n  // onChange is included via React.InputHTMLAttributes\n  // value is included via React.InputHTMLAttributes\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      autocomplete,\n      autoComplete: htmlAutoComplete,\n      inputClassName,\n      onChange,\n      placeholder,\n      type,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <BaseInput\n        autoComplete={autocomplete ?? htmlAutoComplete}\n        className={cn(\"bg-input h-14 border-none\", inputClassName)}\n        onChange={onChange}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value ?? \"\"} // Use value prop directly, default to empty string\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = \"Input\";\n\nexport function registerInput() {\n  registerFormComponent(FormFieldType.TEXT, Input);\n  registerFormComponent(FormFieldType.PASSWORD, Input);\n}\n"],"mappings":";;;;;;;;;;AA8CA,SAAgB,gBAAgB;AAC9B,uBAAsB,cAAc,MAAM,MAAM;AAChD,uBAAsB,cAAc,UAAU,MAAM;;;;cA7CZ;kBACG;CAYhC,QAAQ,MAAM,YAEvB,EACE,cACA,cAAc,kBACd,gBACA,UACA,aACA,MACA,OACA,GAAG,SAEL,QACG;AACH,SACE,oBAACA;GACC,cAAc,gBAAgB;GAC9B,WAAW,GAAG,6BAA6B,eAAe;GAChD;GACG;GACR;GACC;GACN,OAAO,SAAS;GAChB,GAAI;IACJ;GAGP;AACD,OAAM,cAAc"}

package/dist/esm/components/form/fields/Input.spec.d.ts

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

package/dist/esm/components/form/fields/Input.spec.js

@@ -0,0 +1,71 @@
+import { Input, init_Input } from "./Input.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+import userEvent from "/home/runner/work/web/web/node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/esm/index.js";
+
+//#region src/components/form/fields/Input.spec.tsx
+init_Input();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+const mocks = vi.hoisted(() => ({
+	cn: vi.fn((...classes) => classes.filter(Boolean).join(" ")),
+	Input: vi.fn(({ onChange, value, ...props }) => /* @__PURE__ */ jsx("input", {
+		"data-testid": "base-input",
+		onChange: onChange ?? vi.fn(),
+		readOnly: false,
+		value,
+		...props
+	}))
+}));
+vi.mock("@lumeweb/portal-framework-ui-core", () => mocks);
+describe("Input", () => {
+	afterEach(cleanup);
+	it("renders the base input component", () => {
+		render(/* @__PURE__ */ jsx(Input, { name: "testInput" }));
+		expect(screen.getByTestId("base-input")).toBeInTheDocument();
+	});
+	it("passes placeholder, value, and type to the base input", () => {
+		render(/* @__PURE__ */ jsx(Input, {
+			name: "testInput",
+			onChange: vi.fn(),
+			placeholder: "Enter text",
+			type: "email",
+			value: "Initial value"
+		}));
+		const input = screen.getByTestId("base-input");
+		expect(input).toHaveAttribute("placeholder", "Enter text");
+		expect(input).toHaveValue("Initial value");
+		expect(input).toHaveAttribute("type", "email");
+	});
+	it("handles empty value correctly", () => {
+		render(/* @__PURE__ */ jsx(Input, {
+			name: "testInput",
+			onChange: vi.fn(),
+			value: ""
+		}));
+		expect(screen.getByTestId("base-input")).toHaveValue("");
+	});
+	it("applies inputClassName to the base input", () => {
+		render(/* @__PURE__ */ jsx(Input, {
+			inputClassName: "custom-class",
+			name: "testInput",
+			onChange: vi.fn()
+		}));
+		expect(screen.getByTestId("base-input")).toHaveClass("custom-class");
+	});
+	it("calls onChange when the value changes", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(Input, {
+			name: "testInput",
+			onChange: handleChange
+		}));
+		const input = screen.getByTestId("base-input");
+		await user.type(input, "New text");
+		expect(handleChange).toHaveBeenCalled();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=Input.spec.js.map

package/dist/esm/components/form/fields/Input.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.spec.js","names":[],"sources":["../../../../../src/components/form/fields/Input.spec.tsx"],"sourcesContent":["import { cleanup, render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport React from \"react\";\nimport { afterEach, describe, expect, it, vi } from \"vitest\";\n\nimport { Input } from \"./Input\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Need to get a reference to the mocks object\nconst mocks = vi.hoisted(() => ({\n  cn: vi.fn((...classes) => classes.filter(Boolean).join(\" \")), // Simple mock for classnames\n  Input: vi.fn(({ onChange, value, ...props }) => (\n    <input\n      data-testid=\"base-input\"\n      onChange={onChange ?? vi.fn()}\n      readOnly={false}\n      value={value}\n      {...props}\n    />\n  )),\n}));\n\n// Mock the base components from ui-core using the hoisted mocks\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => mocks);\n\ndescribe(\"Input\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the base input component\", () => {\n    render(<Input name=\"testInput\" />);\n    expect(screen.getByTestId(\"base-input\")).toBeInTheDocument();\n  });\n\n  it(\"passes placeholder, value, and type to the base input\", () => {\n    render(\n      <Input\n        name=\"testInput\"\n        onChange={vi.fn()}\n        placeholder=\"Enter text\"\n        type=\"email\"\n        value=\"Initial value\"\n      />,\n    );\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toHaveAttribute(\"placeholder\", \"Enter text\");\n    expect(input).toHaveValue(\"Initial value\");\n    expect(input).toHaveAttribute(\"type\", \"email\");\n  });\n\n  it(\"handles empty value correctly\", () => {\n    render(<Input name=\"testInput\" onChange={vi.fn()} value=\"\" />);\n    const input = screen.getByTestId(\"base-input\");\n    expect(input).toHaveValue(\"\");\n  });\n\n  it(\"applies inputClassName to the base input\", () => {\n    render(\n      <Input\n        inputClassName=\"custom-class\"\n        name=\"testInput\"\n        onChange={vi.fn()}\n      />,\n    );\n    const input = screen.getByTestId(\"base-input\");\n    // The cn mock will just join classes, so we check for the custom class\n    expect(input).toHaveClass(\"custom-class\");\n  });\n\n  it(\"calls onChange when the value changes\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(<Input name=\"testInput\" onChange={handleChange} />);\n\n    const input = screen.getByTestId(\"base-input\");\n    await user.type(input, \"New text\");\n\n    // React Hook Form's onChange typically passes an event object\n    // We'll check if the mock was called, the exact event structure might vary\n    expect(handleChange).toHaveBeenCalled();\n  });\n});\n"],"mappings":";;;;;;;;YAKgC;AAGhC,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,MAAM,QAAQ,GAAG,eAAe;CAC9B,IAAI,GAAG,IAAI,GAAG,YAAY,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC;CAC5D,OAAO,GAAG,IAAI,EAAE,UAAU,OAAO,GAAG,YAClC,oBAAC;EACC,eAAY;EACZ,UAAU,YAAY,GAAG,IAAI;EAC7B,UAAU;EACH;EACP,GAAI;GACJ,CACF;CACH,EAAE;AAGH,GAAG,KAAK,2CAA2C,MAAM;AAEzD,SAAS,eAAe;AACtB,WAAU,QAAQ;AAElB,IAAG,0CAA0C;AAC3C,SAAO,oBAAC,SAAM,MAAK,cAAc,CAAC;AAClC,SAAO,OAAO,YAAY,aAAa,CAAC,CAAC,mBAAmB;GAC5D;AAEF,IAAG,+DAA+D;AAChE,SACE,oBAAC;GACC,MAAK;GACL,UAAU,GAAG,IAAI;GACjB,aAAY;GACZ,MAAK;GACL,OAAM;IACN,CACH;EACD,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,SAAO,MAAM,CAAC,gBAAgB,eAAe,aAAa;AAC1D,SAAO,MAAM,CAAC,YAAY,gBAAgB;AAC1C,SAAO,MAAM,CAAC,gBAAgB,QAAQ,QAAQ;GAC9C;AAEF,IAAG,uCAAuC;AACxC,SAAO,oBAAC;GAAM,MAAK;GAAY,UAAU,GAAG,IAAI;GAAE,OAAM;IAAK,CAAC;AAE9D,SADc,OAAO,YAAY,aAAa,CACjC,CAAC,YAAY,GAAG;GAC7B;AAEF,IAAG,kDAAkD;AACnD,SACE,oBAAC;GACC,gBAAe;GACf,MAAK;GACL,UAAU,GAAG,IAAI;IACjB,CACH;AAGD,SAFc,OAAO,YAAY,aAAa,CAEjC,CAAC,YAAY,eAAe;GACzC;AAEF,IAAG,yCAAyC,YAAY;EACtD,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SAAO,oBAAC;GAAM,MAAK;GAAY,UAAU;IAAgB,CAAC;EAE1D,MAAM,QAAQ,OAAO,YAAY,aAAa;AAC9C,QAAM,KAAK,KAAK,OAAO,WAAW;AAIlC,SAAO,aAAa,CAAC,kBAAkB;GACvC;EACF"}

package/dist/esm/components/form/fields/RadioGroup.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/form/fields/RadioGroup.d.ts
+declare const RadioGroup: any;
+declare function registerRadioGroup(): void;
+//#endregion
+export { RadioGroup, registerRadioGroup };
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/esm/components/form/fields/RadioGroup.js

@@ -0,0 +1,49 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { registerFormComponent } from "./registry.js";
+import { FormFieldType } from "./types.js";
+import { init_fields } from "./index.js";
+import { init_components } from "../../index.js";
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/fields/RadioGroup.tsx
+function slugify(str) {
+	return str.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function registerRadioGroup() {
+	registerFormComponent(FormFieldType.RADIO, RadioGroup);
+}
+var RadioGroup;
+var init_RadioGroup = __esmMin(() => {
+	init_fields();
+	init_components();
+	RadioGroup = React.forwardRef(({ autocomplete, options, ...props }, ref) => {
+		return /* @__PURE__ */ jsx(RadioGroup$1, {
+			disabled: props.disabled,
+			name: props.name,
+			onBlur: props.onBlur,
+			onValueChange: props.onChange,
+			ref,
+			value: props.value,
+			children: options.map((option) => /* @__PURE__ */ jsxs("div", {
+				className: "radio-option",
+				children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+					id: `${props.name}-${slugify(option)}`,
+					value: option,
+					...autocomplete ? { autoComplete: autocomplete } : {}
+				}), /* @__PURE__ */ jsx("label", {
+					className: props.labelClassName,
+					htmlFor: `${props.name}-${slugify(option)}`,
+					children: option
+				})]
+			}, option))
+		});
+	});
+	RadioGroup.displayName = "RadioGroup";
+});
+
+//#endregion
+init_RadioGroup();
+export { RadioGroup, init_RadioGroup, registerRadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/components/form/fields/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["BaseRadioGroup"],"sources":["../../../../../src/components/form/fields/RadioGroup.tsx"],"sourcesContent":["import {\n  RadioGroup as BaseRadioGroup,\n  RadioGroupItem,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface RadioGroupProps {\n  autocomplete?: string;\n  disabled?: boolean;\n  label?: string;\n  labelClassName?: string;\n  name: string;\n  onBlur?: () => void;\n  onChange?: (value: string) => void;\n  options: string[];\n  value?: string;\n}\n\nfunction slugify(str: string): string {\n  return str\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\");\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  ({ autocomplete, options, ...props }, ref) => {\n    return (\n      <BaseRadioGroup\n        disabled={props.disabled}\n        name={props.name}\n        onBlur={props.onBlur}\n        onValueChange={props.onChange}\n        ref={ref}\n        value={props.value}>\n        {options.map((option) => (\n          <div className=\"radio-option\" key={option}>\n            <RadioGroupItem\n              id={`${props.name}-${slugify(option)}`}\n              value={option}\n              {...(autocomplete ? { autoComplete: autocomplete } : {})}\n            />\n            <label\n              className={props.labelClassName}\n              htmlFor={`${props.name}-${slugify(option)}`}>\n              {option}\n            </label>\n          </div>\n        ))}\n      </BaseRadioGroup>\n    );\n  },\n);\nRadioGroup.displayName = \"RadioGroup\";\n\nexport function registerRadioGroup() {\n  registerFormComponent(FormFieldType.RADIO, RadioGroup);\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAS,QAAQ,KAAqB;AACpC,QAAO,IACJ,aAAa,CACb,QAAQ,eAAe,IAAI,CAC3B,QAAQ,UAAU,GAAG;;AAiC1B,SAAgB,qBAAqB;AACnC,uBAAsB,cAAc,OAAO,WAAW;;;;cArDd;kBACG;CAqBhC,aAAa,MAAM,YAC7B,EAAE,cAAc,SAAS,GAAG,SAAS,QAAQ;AAC5C,SACE,oBAACA;GACC,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,QAAQ,MAAM;GACd,eAAe,MAAM;GAChB;GACL,OAAO,MAAM;aACZ,QAAQ,KAAK,WACZ,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,IAAI,GAAG,MAAM,KAAK,GAAG,QAAQ,OAAO;KACpC,OAAO;KACP,GAAK,eAAe,EAAE,cAAc,cAAc,GAAG,EAAE;MACvD,EACF,oBAAC;KACC,WAAW,MAAM;KACjB,SAAS,GAAG,MAAM,KAAK,GAAG,QAAQ,OAAO;eACxC;MACK;MAVyB,OAW7B,CACN;IACa;GAGtB;AACD,YAAW,cAAc"}

package/dist/esm/components/form/fields/RadioGroup.spec.d.ts

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

package/dist/esm/components/form/fields/RadioGroup.spec.js

@@ -0,0 +1,96 @@
+import { RadioGroup, init_RadioGroup } from "./RadioGroup.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+import userEvent from "/home/runner/work/web/web/node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/esm/index.js";
+
+//#region src/components/form/fields/RadioGroup.spec.tsx
+init_RadioGroup();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.hoisted(() => ({
+	RadioGroup: vi.fn(),
+	RadioGroupItem: vi.fn()
+}));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({
+	RadioGroup: vi.fn(({ children, ...props }) => {
+		return /* @__PURE__ */ jsx("div", {
+			"data-testid": "base-radio-group",
+			...props,
+			children
+		});
+	}),
+	RadioGroupItem: vi.fn(({ value, ...props }) => {
+		return /* @__PURE__ */ jsx("input", {
+			"data-testid": `radio-item-${value}`,
+			type: "radio",
+			value,
+			...props
+		});
+	})
+}));
+describe("RadioGroup", () => {
+	afterEach(cleanup);
+	const options = [
+		"option1",
+		"option2",
+		"option3"
+	];
+	it("renders the base radio group component", () => {
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			name: "testRadioGroup",
+			options
+		}));
+		expect(screen.getByTestId("base-radio-group")).toBeInTheDocument();
+	});
+	it("renders radio items for each option", () => {
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			name: "testRadioGroup",
+			options
+		}));
+		expect(screen.getByTestId("radio-item-option1")).toBeInTheDocument();
+		expect(screen.getByTestId("radio-item-option2")).toBeInTheDocument();
+		expect(screen.getByTestId("radio-item-option3")).toBeInTheDocument();
+	});
+	it("renders labels for each radio item", () => {
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			name: "testRadioGroup",
+			options
+		}));
+		expect(screen.getByLabelText("option1")).toBeInTheDocument();
+		expect(screen.getByLabelText("option2")).toBeInTheDocument();
+		expect(screen.getByLabelText("option3")).toBeInTheDocument();
+	});
+	it.skip("renders the correct radio item as checked when value is provided", () => {
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			name: "testRadioGroup",
+			options,
+			value: "option2"
+		}));
+		expect(screen.getByTestId("radio-item-option2")).toBeChecked();
+	});
+	it.skip("calls onChange when a radio item is selected", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			name: "testRadioGroup",
+			onChange: handleChange,
+			options
+		}));
+		const option2Label = screen.getByLabelText("option2");
+		await user.click(option2Label);
+		await new Promise((resolve) => setTimeout(resolve, 50));
+		expect(handleChange).toHaveBeenCalledWith("option2");
+	});
+	it("disables the radio group when disabled prop is true", () => {
+		render(/* @__PURE__ */ jsx(RadioGroup, {
+			disabled: true,
+			name: "testRadioGroup",
+			options
+		}));
+		expect(screen.getByTestId("base-radio-group")).toHaveAttribute("disabled");
+	});
+});
+
+//#endregion
+//# sourceMappingURL=RadioGroup.spec.js.map