@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.spec.js","names":[],"sources":["../../../../../src/components/form/fields/RadioGroup.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 { RadioGroup } from \"./RadioGroup\";\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  RadioGroup: vi.fn(),\n  RadioGroupItem: vi.fn(),\n}));\n\n// Mock the base components from ui-core\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  // Mock the base components from ui-core\n  RadioGroup: vi.fn(({ children, ...props }) => {\n    // Simple mock that just renders children\n    return (\n      <div data-testid=\"base-radio-group\" {...props}>\n        {children}\n      </div>\n    );\n  }),\n  RadioGroupItem: vi.fn(({ value, ...props }) => {\n    // Simple mock that just renders an input\n    return (\n      <input\n        data-testid={`radio-item-${value}`}\n        type=\"radio\"\n        value={value}\n        {...props}\n      />\n    );\n  }),\n}));\n\ndescribe(\"RadioGroup\", () => {\n  afterEach(cleanup);\n\n  const options = [\"option1\", \"option2\", \"option3\"];\n\n  it(\"renders the base radio group component\", () => {\n    render(<RadioGroup name=\"testRadioGroup\" options={options} />);\n    expect(screen.getByTestId(\"base-radio-group\")).toBeInTheDocument();\n  });\n\n  it(\"renders radio items for each option\", () => {\n    render(<RadioGroup name=\"testRadioGroup\" options={options} />);\n    expect(screen.getByTestId(\"radio-item-option1\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"radio-item-option2\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"radio-item-option3\")).toBeInTheDocument();\n  });\n\n  it(\"renders labels for each radio item\", () => {\n    render(<RadioGroup name=\"testRadioGroup\" options={options} />);\n    expect(screen.getByLabelText(\"option1\")).toBeInTheDocument();\n    expect(screen.getByLabelText(\"option2\")).toBeInTheDocument();\n    expect(screen.getByLabelText(\"option3\")).toBeInTheDocument();\n  });\n\n  it.skip(\"renders the correct radio item as checked when value is provided\", () => {\n    render(\n      <RadioGroup name=\"testRadioGroup\" options={options} value=\"option2\" />,\n    );\n    const option2Input = screen.getByTestId(\"radio-item-option2\");\n    expect(option2Input).toBeChecked();\n  });\n\n  it.skip(\"calls onChange when a radio item is selected\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <RadioGroup\n        name=\"testRadioGroup\"\n        onChange={handleChange} // This spy is passed as onValueChange to the mock\n        options={options}\n      />,\n    );\n\n    // Interact with the label, which is a more robust way for radio buttons\n    const option2Label = screen.getByLabelText(\"option2\");\n    await user.click(option2Label); // Click the label\n\n    // Add a small delay to see if it helps the spy assertion\n    await new Promise((resolve) => setTimeout(resolve, 50));\n\n    expect(handleChange).toHaveBeenCalledWith(\"option2\");\n  });\n\n  it(\"disables the radio group when disabled prop is true\", () => {\n    render(<RadioGroup disabled name=\"testRadioGroup\" options={options} />);\n    const radioGroup = screen.getByTestId(\"base-radio-group\");\n    expect(radioGroup).toHaveAttribute(\"disabled\");\n  });\n});\n"],"mappings":";;;;;;;;iBAK0C;AAG1C,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGW,GAAG,eAAe;CAC9B,YAAY,GAAG,IAAI;CACnB,gBAAgB,GAAG,IAAI;CACxB,EAAE;AAGH,GAAG,KAAK,4CAA4C;CAElD,YAAY,GAAG,IAAI,EAAE,UAAU,GAAG,YAAY;AAE5C,SACE,oBAAC;GAAI,eAAY;GAAmB,GAAI;GACrC;IACG;GAER;CACF,gBAAgB,GAAG,IAAI,EAAE,OAAO,GAAG,YAAY;AAE7C,SACE,oBAAC;GACC,eAAa,cAAc;GAC3B,MAAK;GACE;GACP,GAAI;IACJ;GAEJ;CACH,EAAE;AAEH,SAAS,oBAAoB;AAC3B,WAAU,QAAQ;CAElB,MAAM,UAAU;EAAC;EAAW;EAAW;EAAU;AAEjD,IAAG,gDAAgD;AACjD,SAAO,oBAAC;GAAW,MAAK;GAA0B;IAAW,CAAC;AAC9D,SAAO,OAAO,YAAY,mBAAmB,CAAC,CAAC,mBAAmB;GAClE;AAEF,IAAG,6CAA6C;AAC9C,SAAO,oBAAC;GAAW,MAAK;GAA0B;IAAW,CAAC;AAC9D,SAAO,OAAO,YAAY,qBAAqB,CAAC,CAAC,mBAAmB;AACpE,SAAO,OAAO,YAAY,qBAAqB,CAAC,CAAC,mBAAmB;AACpE,SAAO,OAAO,YAAY,qBAAqB,CAAC,CAAC,mBAAmB;GACpE;AAEF,IAAG,4CAA4C;AAC7C,SAAO,oBAAC;GAAW,MAAK;GAA0B;IAAW,CAAC;AAC9D,SAAO,OAAO,eAAe,UAAU,CAAC,CAAC,mBAAmB;AAC5D,SAAO,OAAO,eAAe,UAAU,CAAC,CAAC,mBAAmB;AAC5D,SAAO,OAAO,eAAe,UAAU,CAAC,CAAC,mBAAmB;GAC5D;AAEF,IAAG,KAAK,0EAA0E;AAChF,SACE,oBAAC;GAAW,MAAK;GAA0B;GAAS,OAAM;IAAY,CACvE;AAED,SADqB,OAAO,YAAY,qBAAqB,CACzC,CAAC,aAAa;GAClC;AAEF,IAAG,KAAK,gDAAgD,YAAY;EAClE,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SACE,oBAAC;GACC,MAAK;GACL,UAAU;GACD;IACT,CACH;EAGD,MAAM,eAAe,OAAO,eAAe,UAAU;AACrD,QAAM,KAAK,MAAM,aAAa;AAG9B,QAAM,IAAI,SAAS,YAAY,WAAW,SAAS,GAAG,CAAC;AAEvD,SAAO,aAAa,CAAC,qBAAqB,UAAU;GACpD;AAEF,IAAG,6DAA6D;AAC9D,SAAO,oBAAC;GAAW;GAAS,MAAK;GAA0B;IAAW,CAAC;AAEvE,SADmB,OAAO,YAAY,mBAAmB,CACvC,CAAC,gBAAgB,WAAW;GAC9C;EACF"}

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

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

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

@@ -0,0 +1,38 @@
+import { __esmMin } from "../../../_virtual/rolldown_runtime.js";
+import { registerFormComponent } from "./registry.js";
+import { Editor } from "../../editor/Editor.js";
+import { init_editor } from "../../editor/index.js";
+import { FormFieldType } from "./types.js";
+import { init_fields } from "./index.js";
+import { init_components } from "../../index.js";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/fields/RichText.tsx
+function registerRichText() {
+	registerFormComponent(FormFieldType.RICH_TEXT, RichText);
+}
+var RichText;
+var init_RichText = __esmMin(() => {
+	init_editor();
+	init_fields();
+	init_components();
+	RichText = forwardRef(({ autocomplete, enablePreview, onChange, placeholder, required, toolbarOptions, value }, ref) => {
+		return /* @__PURE__ */ jsx(Editor, {
+			enablePreview,
+			onChange,
+			placeholder,
+			ref,
+			required,
+			toolbarOptions,
+			value,
+			...autocomplete ? { autoComplete: autocomplete } : {}
+		});
+	});
+	RichText.displayName = "MarkdownEditor";
+});
+
+//#endregion
+init_RichText();
+export { RichText, init_RichText, registerRichText };
+//# sourceMappingURL=RichText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.js","names":["BaseEditor"],"sources":["../../../../../src/components/form/fields/RichText.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { Editor as BaseEditor, ToolbarOption } from \"@/components/editor\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\nimport { FormComponentProps } from \"./types\";\n\ninterface RichTextProps extends FormComponentProps {\n  autocomplete?: string;\n  enablePreview?: boolean;\n  toolbarOptions?: ToolbarOption[];\n}\n\nexport const RichText = forwardRef<HTMLDivElement, RichTextProps>(\n  (\n    {\n      autocomplete,\n      enablePreview,\n      onChange,\n      placeholder,\n      required,\n      toolbarOptions,\n      value,\n    },\n    ref,\n  ) => {\n    return (\n      <BaseEditor\n        enablePreview={enablePreview}\n        onChange={onChange}\n        placeholder={placeholder}\n        ref={ref}\n        required={required}\n        toolbarOptions={toolbarOptions}\n        value={value}\n        {...(autocomplete ? { autoComplete: autocomplete } : {})}\n      />\n    );\n  },\n);\nRichText.displayName = \"MarkdownEditor\";\n\nexport function registerRichText() {\n  registerFormComponent(FormFieldType.RICH_TEXT, RichText);\n}\n"],"mappings":";;;;;;;;;;;AA2CA,SAAgB,mBAAmB;AACjC,uBAAsB,cAAc,WAAW,SAAS;;;;cA1CgB;cAEhC;kBACG;CAShC,WAAW,YAEpB,EACE,cACA,eACA,UACA,aACA,UACA,gBACA,SAEF,QACG;AACH,SACE,oBAACA;GACgB;GACL;GACG;GACR;GACK;GACM;GACT;GACP,GAAK,eAAe,EAAE,cAAc,cAAc,GAAG,EAAE;IACvD;GAGP;AACD,UAAS,cAAc"}

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

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

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

@@ -0,0 +1,70 @@
+import { RichText, init_RichText } from "./RichText.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/RichText.spec.tsx
+init_RichText();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.mock("@/components/editor", () => ({ Editor: vi.fn(({ enablePreview, onChange, placeholder, required, toolbarOptions, value, ...props }) => {
+	const handleChange = (event) => {
+		onChange?.(event.target.value);
+	};
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-enable-preview": enablePreview,
+		"data-testid": "mock-editor",
+		"data-toolbar-options": JSON.stringify(toolbarOptions),
+		onChange: handleChange,
+		placeholder,
+		required,
+		value,
+		...props
+	});
+}) }));
+describe("RichText", () => {
+	afterEach(cleanup);
+	it("renders the mocked base editor component", () => {
+		render(/* @__PURE__ */ jsx(RichText, { name: "testRichText" }));
+		expect(screen.getByTestId("mock-editor")).toBeInTheDocument();
+	});
+	it("passes props to the base editor", () => {
+		const handleChange = vi.fn();
+		const toolbarOptions = [{
+			action: "bold",
+			name: "bold"
+		}];
+		render(/* @__PURE__ */ jsx(RichText, {
+			enablePreview: true,
+			name: "testRichText",
+			onChange: handleChange,
+			placeholder: "Enter text",
+			required: true,
+			toolbarOptions,
+			value: "Initial value"
+		}));
+		const editor = screen.getByTestId("mock-editor");
+		expect(editor).toHaveValue("Initial value");
+		expect(editor).toHaveAttribute("placeholder", "Enter text");
+		expect(editor).toBeRequired();
+		expect(editor).toHaveAttribute("data-enable-preview", "true");
+		expect(editor).toHaveAttribute("data-toolbar-options", JSON.stringify(toolbarOptions));
+	});
+	it("calls onChange when the value changes", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(RichText, {
+			name: "testRichText",
+			onChange: handleChange
+		}));
+		const editor = screen.getByTestId("mock-editor");
+		await user.type(editor, "New text");
+		expect(handleChange).toHaveBeenCalledWith("N");
+		expect(handleChange).toHaveBeenCalledWith("Ne");
+		expect(handleChange).toHaveBeenCalledWith("New");
+	});
+});
+
+//#endregion
+//# sourceMappingURL=RichText.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.spec.js","names":[],"sources":["../../../../../src/components/form/fields/RichText.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 { RichText } from \"./RichText\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Mock the base editor component\nvi.mock(\"@/components/editor\", () => ({\n  Editor: vi.fn(\n    ({\n      enablePreview,\n      onChange,\n      placeholder,\n      required,\n      toolbarOptions,\n      value,\n      ...props\n    }) => {\n      const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event.target.value);\n      };\n      return (\n        <textarea\n          data-enable-preview={enablePreview}\n          data-testid=\"mock-editor\"\n          data-toolbar-options={JSON.stringify(toolbarOptions)}\n          onChange={handleChange}\n          placeholder={placeholder}\n          required={required}\n          value={value}\n          {...props}\n        />\n      );\n    },\n  ),\n}));\n\ndescribe(\"RichText\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the mocked base editor component\", () => {\n    render(<RichText name=\"testRichText\" />);\n    expect(screen.getByTestId(\"mock-editor\")).toBeInTheDocument();\n  });\n\n  it(\"passes props to the base editor\", () => {\n    const handleChange = vi.fn();\n    const toolbarOptions = [{ action: \"bold\", name: \"bold\" }];\n    render(\n      <RichText\n        enablePreview\n        name=\"testRichText\"\n        onChange={handleChange}\n        placeholder=\"Enter text\"\n        required\n        toolbarOptions={toolbarOptions}\n        value=\"Initial value\"\n      />,\n    );\n\n    const editor = screen.getByTestId(\"mock-editor\");\n    expect(editor).toHaveValue(\"Initial value\");\n    expect(editor).toHaveAttribute(\"placeholder\", \"Enter text\");\n    expect(editor).toBeRequired();\n    expect(editor).toHaveAttribute(\"data-enable-preview\", \"true\");\n    expect(editor).toHaveAttribute(\n      \"data-toolbar-options\",\n      JSON.stringify(toolbarOptions),\n    );\n  });\n\n  it(\"calls onChange when the value changes\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(<RichText name=\"testRichText\" onChange={handleChange} />);\n\n    const editor = screen.getByTestId(\"mock-editor\");\n    await user.type(editor, \"New text\");\n\n    expect(handleChange).toHaveBeenCalledWith(\"N\");\n    expect(handleChange).toHaveBeenCalledWith(\"Ne\");\n    expect(handleChange).toHaveBeenCalledWith(\"New\");\n    // ... and so on for each character\n  });\n});\n"],"mappings":";;;;;;;;eAKsC;AAGtC,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,GAAG,KAAK,8BAA8B,EACpC,QAAQ,GAAG,IACR,EACC,eACA,UACA,aACA,UACA,gBACA,OACA,GAAG,YACC;CACJ,MAAM,gBAAgB,UAAkD;AACtE,aAAW,MAAM,OAAO,MAAM;;AAEhC,QACE,oBAAC;EACC,uBAAqB;EACrB,eAAY;EACZ,wBAAsB,KAAK,UAAU,eAAe;EACpD,UAAU;EACG;EACH;EACH;EACP,GAAI;GACJ;EAGP,EACF,EAAE;AAEH,SAAS,kBAAkB;AACzB,WAAU,QAAQ;AAElB,IAAG,kDAAkD;AACnD,SAAO,oBAAC,YAAS,MAAK,iBAAiB,CAAC;AACxC,SAAO,OAAO,YAAY,cAAc,CAAC,CAAC,mBAAmB;GAC7D;AAEF,IAAG,yCAAyC;EAC1C,MAAM,eAAe,GAAG,IAAI;EAC5B,MAAM,iBAAiB,CAAC;GAAE,QAAQ;GAAQ,MAAM;GAAQ,CAAC;AACzD,SACE,oBAAC;GACC;GACA,MAAK;GACL,UAAU;GACV,aAAY;GACZ;GACgB;GAChB,OAAM;IACN,CACH;EAED,MAAM,SAAS,OAAO,YAAY,cAAc;AAChD,SAAO,OAAO,CAAC,YAAY,gBAAgB;AAC3C,SAAO,OAAO,CAAC,gBAAgB,eAAe,aAAa;AAC3D,SAAO,OAAO,CAAC,cAAc;AAC7B,SAAO,OAAO,CAAC,gBAAgB,uBAAuB,OAAO;AAC7D,SAAO,OAAO,CAAC,gBACb,wBACA,KAAK,UAAU,eAAe,CAC/B;GACD;AAEF,IAAG,yCAAyC,YAAY;EACtD,MAAM,OAAO,UAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SAAO,oBAAC;GAAS,MAAK;GAAe,UAAU;IAAgB,CAAC;EAEhE,MAAM,SAAS,OAAO,YAAY,cAAc;AAChD,QAAM,KAAK,KAAK,QAAQ,WAAW;AAEnC,SAAO,aAAa,CAAC,qBAAqB,IAAI;AAC9C,SAAO,aAAa,CAAC,qBAAqB,KAAK;AAC/C,SAAO,aAAa,CAAC,qBAAqB,MAAM;GAEhD;EACF"}

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

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

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

@@ -0,0 +1,44 @@
+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 { Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/fields/Select.tsx
+function registerSelect() {
+	registerFormComponent(FormFieldType.SELECT, Select);
+}
+var Select;
+var init_Select = __esmMin(() => {
+	init_fields();
+	init_components();
+	Select = React.forwardRef(({ autocomplete, inputClassName, onChange, options, placeholder = "Select...", required, value, ...props }, ref) => {
+		return /* @__PURE__ */ jsxs(Select$1, {
+			onValueChange: onChange,
+			required,
+			value: value || "",
+			...autocomplete ? { autoComplete: autocomplete } : {},
+			...props,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: cn("bg-modal-input text-foreground placeholder:text-foreground/50 h-14 w-full border-none", inputClassName, "data-[placeholder]:text-foreground/50"),
+				ref,
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: (options || []).map((option) => {
+				const value$1 = typeof option === "string" ? option : option.value;
+				return /* @__PURE__ */ jsx(SelectItem, {
+					value: value$1,
+					children: typeof option === "string" ? option : option.label
+				}, value$1);
+			}) })]
+		});
+	});
+	Select.displayName = "Select";
+});
+
+//#endregion
+init_Select();
+export { Select, init_Select, registerSelect };
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["BaseSelect","value"],"sources":["../../../../../src/components/form/fields/Select.tsx"],"sourcesContent":["import {\n  Select as BaseSelect,\n  cn,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport type { FormFieldOption } from \"@/components\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\nexport const Select = React.forwardRef<\n  HTMLButtonElement,\n  {\n    [key: string]: any;\n    autocomplete?: string;\n    className?: string;\n    label?: string;\n    options: FormFieldOption[];\n    placeholder?: string;\n  }\n>(\n  (\n    {\n      autocomplete,\n      inputClassName,\n      onChange,\n      options,\n      placeholder = \"Select...\",\n      required,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <BaseSelect\n        onValueChange={onChange}\n        required={required}\n        value={value || \"\"}\n        {...(autocomplete ? { autoComplete: autocomplete } : {})}\n        {...props}>\n        <SelectTrigger\n          className={cn(\n            \"bg-modal-input text-foreground placeholder:text-foreground/50 h-14 w-full border-none\",\n            inputClassName,\n            \"data-[placeholder]:text-foreground/50\",\n          )}\n          ref={ref}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {(options || []).map((option: FormFieldOption) => {\n            const value = typeof option === \"string\" ? option : option.value;\n            const label = typeof option === \"string\" ? option : option.label;\n            return (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            );\n          })}\n        </SelectContent>\n      </BaseSelect>\n    );\n  },\n);\nSelect.displayName = \"Select\";\n\nexport function registerSelect() {\n  registerFormComponent(FormFieldType.SELECT, Select);\n}\n"],"mappings":";;;;;;;;;;AAwEA,SAAgB,iBAAiB;AAC/B,uBAAsB,cAAc,QAAQ,OAAO;;;;cA7DX;kBACG;CAEhC,SAAS,MAAM,YAYxB,EACE,cACA,gBACA,UACA,SACA,cAAc,aACd,UACA,OACA,GAAG,SAEL,QACG;AACH,SACE,qBAACA;GACC,eAAe;GACL;GACV,OAAO,SAAS;GAChB,GAAK,eAAe,EAAE,cAAc,cAAc,GAAG,EAAE;GACvD,GAAI;cACJ,oBAAC;IACC,WAAW,GACT,yFACA,gBACA,wCACD;IACI;cACL,oBAAC,eAAyB,cAAe;KAC3B,EAChB,oBAAC,4BACG,WAAW,EAAE,EAAE,KAAK,WAA4B;IAChD,MAAMC,UAAQ,OAAO,WAAW,WAAW,SAAS,OAAO;AAE3D,WACE,oBAAC;KAAuB,OAAOA;eAFnB,OAAO,WAAW,WAAW,SAAS,OAAO;OAExCA,QAEJ;KAEf,GACY;IACL;GAGlB;AACD,QAAO,cAAc"}

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

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

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

@@ -0,0 +1,135 @@
+import { Select, init_Select } from "./Select.js";
+import React from "react";
+import { Fragment, jsx, jsxs } 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/Select.spec.tsx
+init_Select();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+const mocks = vi.hoisted(() => ({
+	cn: vi.fn((...classes) => classes.filter(Boolean).join(" ")),
+	Select: vi.fn(),
+	SelectContent: vi.fn(),
+	SelectItem: vi.fn(),
+	SelectTrigger: vi.fn(),
+	SelectValue: vi.fn()
+}));
+vi.mock("@lumeweb/portal-framework-ui-core", () => mocks);
+mocks.Select = vi.fn(({ children, onValueChange, value, ...props }) => {
+	const handleChange = (event) => {
+		onValueChange?.(event.target.value);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("select", {
+		"data-testid": "base-select",
+		onChange: handleChange,
+		value: value ?? "",
+		...props,
+		children: React.Children.map(children, (child) => {
+			const typedChild = child;
+			if (React.isValidElement(typedChild) && typedChild.type === mocks.SelectContent && typedChild.props.children) return React.Children.map(typedChild.props.children, (selectItemChild) => {
+				if (React.isValidElement(selectItemChild) && selectItemChild.type === mocks.SelectItem) return selectItemChild;
+				return null;
+			});
+			return null;
+		})
+	}), React.Children.map(children, (child) => {
+		const typedChild = child;
+		if (React.isValidElement(typedChild) && (typedChild.type === mocks.SelectTrigger || typedChild.type === mocks.SelectValue)) return typedChild;
+		return null;
+	})] });
+});
+mocks.SelectItem = vi.fn(({ children, value, ...props }) => /* @__PURE__ */ jsx("option", {
+	"data-testid": `select-item-${value}`,
+	value,
+	...props,
+	children
+}));
+mocks.SelectContent = vi.fn((props) => /* @__PURE__ */ jsx("div", {
+	"data-testid": "select-content",
+	...props
+}));
+mocks.SelectTrigger = vi.fn(({ children, ...props }) => /* @__PURE__ */ jsx("button", {
+	"data-testid": "select-trigger",
+	...props,
+	children
+}));
+mocks.SelectValue = vi.fn((props) => /* @__PURE__ */ jsx("span", {
+	"data-testid": "select-value",
+	...props
+}));
+describe("Select", () => {
+	afterEach(cleanup);
+	const options = [
+		"option1",
+		{
+			label: "Option Two",
+			value: "option2"
+		},
+		"option3"
+	];
+	it("renders the base select component", () => {
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: vi.fn(),
+			options
+		}));
+		expect(screen.getByTestId("base-select")).toBeInTheDocument();
+	});
+	it("renders select items for each option", () => {
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: vi.fn(),
+			options
+		}));
+		expect(screen.getByTestId("select-item-option1")).toBeInTheDocument();
+		expect(screen.getByTestId("select-item-option2")).toBeInTheDocument();
+		expect(screen.getByTestId("select-item-option3")).toBeInTheDocument();
+	});
+	it("uses option value for item value and label for item text", () => {
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: vi.fn(),
+			options
+		}));
+		expect(screen.getByTestId("select-item-option1")).toHaveValue("option1");
+		expect(screen.getByTestId("select-item-option1")).toHaveTextContent("option1");
+		expect(screen.getByTestId("select-item-option2")).toHaveValue("option2");
+		expect(screen.getByTestId("select-item-option2")).toHaveTextContent("Option Two");
+	});
+	it("passes the correct value to the base select", () => {
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: vi.fn(),
+			options,
+			value: "option2"
+		}));
+		expect(screen.getByTestId("base-select")).toHaveValue("option2");
+	});
+	it("calls onChange when a new option is selected", async () => {
+		const user = userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: handleChange,
+			options
+		}));
+		const selectElement = screen.getByTestId("base-select");
+		await screen.findByTestId("select-item-option2");
+		await user.selectOptions(selectElement, "option2");
+		expect(handleChange).toHaveBeenCalledWith("option2");
+	});
+	it("marks the base select as required when required prop is true", () => {
+		render(/* @__PURE__ */ jsx(Select, {
+			name: "testSelect",
+			onChange: vi.fn(),
+			options,
+			required: true
+		}));
+		expect(screen.getByTestId("base-select")).toBeRequired();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=Select.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.spec.js","names":[],"sources":["../../../../../src/components/form/fields/Select.spec.tsx"],"sourcesContent":["// Mock the base components from ui-core\nimport { 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 { Select } from \"./Select\";\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 to filter children correctly\nconst mocks = vi.hoisted(() => ({\n  cn: vi.fn((...classes) => classes.filter(Boolean).join(\" \")), // Simple mock for classnames\n  Select: vi.fn(),\n  SelectContent: vi.fn(),\n  SelectItem: vi.fn(),\n  SelectTrigger: vi.fn(),\n  SelectValue: vi.fn(),\n}));\n\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => mocks);\n\n// Mock the base components from ui-core\n// The actual mock implementation needs to be defined after the hoisted mocks\nmocks.Select = vi.fn(({ children, onValueChange, value, ...props }) => {\n  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onValueChange?.(event.target.value);\n  };\n\n  // Render a native select element for interaction testing\n  // Render SelectTrigger and SelectValue mocks as siblings\n  return (\n    <>\n      <select\n        data-testid=\"base-select\"\n        onChange={handleChange}\n        // Use value for controlled behavior\n        value={value ?? \"\"} // Ensure value is never undefined for controlled component\n        // Pass relevant props to the native select if needed for testing attributes\n        {...props}>\n        {/* Find SelectContent child and render its SelectItem children inside the select */}\n        {React.Children.map(children, (child) => {\n          // Cast child to React.ReactElement<any> to access props\n          const typedChild = child as React.ReactElement<any>;\n          // Cast typedChild.props to any to access children\n          if (\n            React.isValidElement(typedChild) &&\n            typedChild.type === mocks.SelectContent &&\n            (typedChild.props as any).children\n          ) {\n            // Cast children to React.ReactNode[] before mapping\n            return React.Children.map(\n              (typedChild.props as any).children as React.ReactNode[],\n              (selectItemChild) => {\n                if (\n                  React.isValidElement(selectItemChild) &&\n                  selectItemChild.type === mocks.SelectItem\n                ) {\n                  return selectItemChild;\n                }\n                return null; // Ignore non-SelectItem children within SelectContent\n              },\n            );\n          }\n          return null; // Ignore other top-level children for the native select\n        })}\n      </select>\n      {/* Render SelectTrigger and SelectValue mocks as siblings */}\n      {React.Children.map(children, (child) => {\n        // Cast child to React.ReactElement<any> to access props\n        const typedChild = child as React.ReactElement<any>;\n        if (\n          React.isValidElement(typedChild) &&\n          (typedChild.type === mocks.SelectTrigger ||\n            typedChild.type === mocks.SelectValue)\n        ) {\n          return typedChild; // Render the mock component itself\n        }\n        return null; // Ignore other children at this level (including SelectContent)\n      })}\n    </>\n  );\n});\n\n// Mock SelectItem to render a native option element\nmocks.SelectItem = vi.fn(({ children, value, ...props }) => (\n  <option data-testid={`select-item-${value}`} value={value} {...props}>\n    {children}\n  </option>\n));\n\n// Mock other components as simple divs or null if not needed for interaction\n// These mocks are still needed if the component being tested renders them,\n// but they don't need to be children of the native select in the mock.\nmocks.SelectContent = vi.fn(\n  (\n    props, // Remove children from props\n  ) => (\n    <div data-testid=\"select-content\" {...props}></div> // Do not render children\n  ),\n);\nmocks.SelectTrigger = vi.fn(({ children, ...props }) => (\n  <button data-testid=\"select-trigger\" {...props}>\n    {children}\n  </button>\n));\nmocks.SelectValue = vi.fn((props) => (\n  <span data-testid=\"select-value\" {...props} />\n));\n\ndescribe(\"Select\", () => {\n  afterEach(cleanup);\n\n  const options = [\n    \"option1\",\n    { label: \"Option Two\", value: \"option2\" },\n    \"option3\",\n  ];\n\n  it(\"renders the base select component\", () => {\n    render(<Select name=\"testSelect\" onChange={vi.fn()} options={options} />); // Add dummy onChange\n    expect(screen.getByTestId(\"base-select\")).toBeInTheDocument();\n  });\n\n  // Removed tests for trigger/value rendering as they are no longer direct children of the mocked select\n  // If needed, these could be tested by rendering the Select component and checking for the presence\n  // of the mocked trigger/value elements as siblings or elsewhere in the rendered output.\n\n  it(\"renders select items for each option\", () => {\n    render(<Select name=\"testSelect\" onChange={vi.fn()} options={options} />);\n    expect(screen.getByTestId(\"select-item-option1\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"select-item-option2\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"select-item-option3\")).toBeInTheDocument();\n  });\n\n  it(\"uses option value for item value and label for item text\", () => {\n    render(<Select name=\"testSelect\" onChange={vi.fn()} options={options} />); // Add dummy onChange\n    expect(screen.getByTestId(\"select-item-option1\")).toHaveValue(\"option1\");\n    expect(screen.getByTestId(\"select-item-option1\")).toHaveTextContent(\n      \"option1\",\n    );\n    expect(screen.getByTestId(\"select-item-option2\")).toHaveValue(\"option2\");\n    expect(screen.getByTestId(\"select-item-option2\")).toHaveTextContent(\n      \"Option Two\",\n    );\n  });\n\n  it(\"passes the correct value to the base select\", () => {\n    render(\n      <Select\n        name=\"testSelect\"\n        onChange={vi.fn()}\n        options={options}\n        value=\"option2\"\n      />,\n    );\n    const select = screen.getByTestId(\"base-select\");\n    expect(select).toHaveValue(\"option2\");\n  });\n\n  // Removed tests for placeholder as it's handled by SelectValue mock, not the native select\n\n  it(\"calls onChange when a new option is selected\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <Select name=\"testSelect\" onChange={handleChange} options={options} />,\n    );\n\n    // Interact directly with the mocked native <select> element\n    const selectElement = screen.getByTestId(\"base-select\");\n    // Wait for the options to be available before selecting\n    await screen.findByTestId(\"select-item-option2\");\n    await user.selectOptions(selectElement, \"option2\");\n\n    expect(handleChange).toHaveBeenCalledWith(\"option2\");\n  });\n\n  it(\"marks the base select as required when required prop is true\", () => {\n    render(\n      <Select\n        name=\"testSelect\"\n        onChange={vi.fn()}\n        options={options}\n        required\n      />,\n    );\n    const select = screen.getByTestId(\"base-select\");\n    expect(select).toBeRequired();\n  });\n\n  // Removed test for inputClassName as it's applied to the SelectTrigger mock, not the native select\n});\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,36 @@
+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 { Slider as Slider$1 } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/fields/Slider.tsx
+function registerSlider() {
+	registerFormComponent(FormFieldType.SLIDER, Slider);
+}
+var Slider;
+var init_Slider = __esmMin(() => {
+	init_fields();
+	init_components();
+	Slider = React.forwardRef(({ max = 100, min = 0, onChange, step = 1, value, ...props }, ref) => {
+		return /* @__PURE__ */ jsx(Slider$1, {
+			disabled: props.disabled,
+			max,
+			min,
+			onBlur: props.onBlur,
+			onValueChange: (vals) => onChange?.(vals[0]),
+			ref,
+			step,
+			value: [value || min]
+		});
+	});
+	Slider.displayName = "Slider";
+});
+
+//#endregion
+init_Slider();
+export { Slider, init_Slider, registerSlider };
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["BaseSlider"],"sources":["../../../../../src/components/form/fields/Slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface SliderProps {\n  className?: string;\n  disabled?: boolean;\n  label?: string;\n  max?: number;\n  min?: number;\n  name: string;\n  onBlur?: () => void;\n  onChange?: (value: number) => void;\n  step?: number;\n  value?: number;\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  ({ max = 100, min = 0, onChange, step = 1, value, ...props }, ref) => {\n    return (\n      <BaseSlider\n        disabled={props.disabled}\n        max={max}\n        min={min}\n        onBlur={props.onBlur}\n        onValueChange={(vals) => onChange?.(vals[0])}\n        ref={ref}\n        step={step}\n        value={[value || min]}\n      />\n    );\n  },\n);\nSlider.displayName = \"Slider\";\n\nexport function registerSlider() {\n  registerFormComponent(FormFieldType.SLIDER, Slider);\n}\n"],"mappings":";;;;;;;;;;AAqCA,SAAgB,iBAAiB;AAC/B,uBAAsB,cAAc,QAAQ,OAAO;;;;cAnCX;kBACG;CAehC,SAAS,MAAM,YACzB,EAAE,MAAM,KAAK,MAAM,GAAG,UAAU,OAAO,GAAG,OAAO,GAAG,SAAS,QAAQ;AACpE,SACE,oBAACA;GACC,UAAU,MAAM;GACX;GACA;GACL,QAAQ,MAAM;GACd,gBAAgB,SAAS,WAAW,KAAK,GAAG;GACvC;GACC;GACN,OAAO,CAAC,SAAS,IAAI;IACrB;GAGP;AACD,QAAO,cAAc"}

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

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

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

@@ -0,0 +1,82 @@
+import { Slider, init_Slider } from "./Slider.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, fireEvent, 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/Slider.spec.tsx
+init_Slider();
+vi.mock("./index", () => ({ registerFormComponent: vi.fn() }));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({ Slider: vi.fn(({ onValueChange, value, ...props }) => {
+	const handleChange = (event) => {
+		onValueChange?.([parseFloat(event.target.value)]);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		"data-testid": "base-slider",
+		onChange: handleChange,
+		type: "range",
+		value: value?.[0] ?? props.min ?? 0,
+		...props
+	});
+}) }));
+describe("Slider", () => {
+	afterEach(cleanup);
+	it("renders the base slider component", () => {
+		render(/* @__PURE__ */ jsx(Slider, { name: "testSlider" }));
+		expect(screen.getByTestId("base-slider")).toBeInTheDocument();
+	});
+	it("passes min, max, step, and value to the base slider", () => {
+		render(/* @__PURE__ */ jsx(Slider, {
+			max: 50,
+			min: 10,
+			name: "testSlider",
+			step: 5,
+			value: 25
+		}));
+		const slider = screen.getByTestId("base-slider");
+		expect(slider).toHaveAttribute("min", "10");
+		expect(slider).toHaveAttribute("max", "50");
+		expect(slider).toHaveAttribute("step", "5");
+		expect(slider).toHaveValue("25");
+	});
+	it("uses default min, max, and step if not provided", () => {
+		render(/* @__PURE__ */ jsx(Slider, { name: "testSlider" }));
+		const slider = screen.getByTestId("base-slider");
+		expect(slider).toHaveAttribute("min", "0");
+		expect(slider).toHaveAttribute("max", "100");
+		expect(slider).toHaveAttribute("step", "1");
+		expect(slider).toHaveValue("0");
+	});
+	it("handles undefined value by using min", () => {
+		render(/* @__PURE__ */ jsx(Slider, {
+			min: 5,
+			name: "testSlider"
+		}));
+		expect(screen.getByTestId("base-slider")).toHaveValue("5");
+	});
+	it("calls onChange when the slider value changes", async () => {
+		userEvent.setup();
+		const handleChange = vi.fn();
+		render(/* @__PURE__ */ jsx(Slider, {
+			max: 100,
+			min: 0,
+			name: "testSlider",
+			onChange: handleChange
+		}));
+		const slider = screen.getByTestId("base-slider");
+		const newValue = "50";
+		fireEvent.change(slider, { target: { value: newValue } });
+		expect(handleChange).toHaveBeenCalledWith(parseFloat(newValue));
+	});
+	it("disables the slider when disabled prop is true", () => {
+		render(/* @__PURE__ */ jsx(Slider, {
+			disabled: true,
+			name: "testSlider"
+		}));
+		expect(screen.getByTestId("base-slider")).toBeDisabled();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=Slider.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.spec.js","names":[],"sources":["../../../../../src/components/form/fields/Slider.spec.tsx"],"sourcesContent":["import { cleanup, fireEvent, render, screen } from \"@testing-library/react\"; // Import fireEvent\nimport userEvent from \"@testing-library/user-event\";\nimport React from \"react\";\nimport { afterEach, describe, expect, it, vi } from \"vitest\";\n\nimport { Slider } from \"./Slider\";\n\n// Mock the registerFormComponent to prevent side effects\nvi.mock(\"./index\", () => ({\n  registerFormComponent: vi.fn(),\n}));\n\n// Mock the base components from ui-core\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  Slider: vi.fn(({ onValueChange, value, ...props }) => {\n    // Simple mock: render a range input and simulate change\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      // Call onValueChange with an array containing the number value\n      onValueChange?.([parseFloat(event.target.value)]);\n    };\n    return (\n      <input\n        data-testid=\"base-slider\"\n        onChange={handleChange}\n        type=\"range\"\n        value={value?.[0] ?? props.min ?? 0} // Ensure value is a number or string representation\n        {...props}\n      />\n    );\n  }),\n}));\n\ndescribe(\"Slider\", () => {\n  afterEach(cleanup);\n\n  it(\"renders the base slider component\", () => {\n    render(<Slider name=\"testSlider\" />);\n    expect(screen.getByTestId(\"base-slider\")).toBeInTheDocument();\n  });\n\n  it(\"passes min, max, step, and value to the base slider\", () => {\n    render(<Slider max={50} min={10} name=\"testSlider\" step={5} value={25} />);\n    const slider = screen.getByTestId(\"base-slider\");\n    expect(slider).toHaveAttribute(\"min\", \"10\");\n    expect(slider).toHaveAttribute(\"max\", \"50\");\n    expect(slider).toHaveAttribute(\"step\", \"5\");\n    expect(slider).toHaveValue(\"25\");\n  });\n\n  it(\"uses default min, max, and step if not provided\", () => {\n    render(<Slider name=\"testSlider\" />);\n    const slider = screen.getByTestId(\"base-slider\");\n    expect(slider).toHaveAttribute(\"min\", \"0\");\n    expect(slider).toHaveAttribute(\"max\", \"100\");\n    expect(slider).toHaveAttribute(\"step\", \"1\");\n    expect(slider).toHaveValue(\"0\"); // Default value should be min\n  });\n\n  it(\"handles undefined value by using min\", () => {\n    render(<Slider min={5} name=\"testSlider\" />);\n    const slider = screen.getByTestId(\"base-slider\");\n    expect(slider).toHaveValue(\"5\");\n  });\n\n  it(\"calls onChange when the slider value changes\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <Slider max={100} min={0} name=\"testSlider\" onChange={handleChange} />,\n    );\n\n    const slider = screen.getByTestId(\"base-slider\");\n    const newValue = \"50\"; // Example new value\n\n    // Simulate changing the slider value using fireEvent\n    // This is more reliable for range inputs than userEvent.type or pointer\n    fireEvent.change(slider, { target: { value: newValue } });\n\n    // Check if onChange was called with the correct number value\n    // The mock calls onValueChange with an array, and the component calls onChange with the first element\n    // So the test spy should be called with the number.\n    expect(handleChange).toHaveBeenCalledWith(parseFloat(newValue));\n  });\n\n  it(\"disables the slider when disabled prop is true\", () => {\n    render(<Slider disabled name=\"testSlider\" />);\n    const slider = screen.getByTestId(\"base-slider\");\n    expect(slider).toBeDisabled();\n  });\n});\n"],"mappings":";;;;;;;;aAKkC;AAGlC,GAAG,KAAK,kBAAkB,EACxB,uBAAuB,GAAG,IAAI,EAC/B,EAAE;AAGH,GAAG,KAAK,4CAA4C,EAClD,QAAQ,GAAG,IAAI,EAAE,eAAe,OAAO,GAAG,YAAY;CAEpD,MAAM,gBAAgB,UAA+C;AAEnE,kBAAgB,CAAC,WAAW,MAAM,OAAO,MAAM,CAAC,CAAC;;AAEnD,QACE,oBAAC;EACC,eAAY;EACZ,UAAU;EACV,MAAK;EACL,OAAO,QAAQ,MAAM,MAAM,OAAO;EAClC,GAAI;GACJ;EAEJ,EACH,EAAE;AAEH,SAAS,gBAAgB;AACvB,WAAU,QAAQ;AAElB,IAAG,2CAA2C;AAC5C,SAAO,oBAAC,UAAO,MAAK,eAAe,CAAC;AACpC,SAAO,OAAO,YAAY,cAAc,CAAC,CAAC,mBAAmB;GAC7D;AAEF,IAAG,6DAA6D;AAC9D,SAAO,oBAAC;GAAO,KAAK;GAAI,KAAK;GAAI,MAAK;GAAa,MAAM;GAAG,OAAO;IAAM,CAAC;EAC1E,MAAM,SAAS,OAAO,YAAY,cAAc;AAChD,SAAO,OAAO,CAAC,gBAAgB,OAAO,KAAK;AAC3C,SAAO,OAAO,CAAC,gBAAgB,OAAO,KAAK;AAC3C,SAAO,OAAO,CAAC,gBAAgB,QAAQ,IAAI;AAC3C,SAAO,OAAO,CAAC,YAAY,KAAK;GAChC;AAEF,IAAG,yDAAyD;AAC1D,SAAO,oBAAC,UAAO,MAAK,eAAe,CAAC;EACpC,MAAM,SAAS,OAAO,YAAY,cAAc;AAChD,SAAO,OAAO,CAAC,gBAAgB,OAAO,IAAI;AAC1C,SAAO,OAAO,CAAC,gBAAgB,OAAO,MAAM;AAC5C,SAAO,OAAO,CAAC,gBAAgB,QAAQ,IAAI;AAC3C,SAAO,OAAO,CAAC,YAAY,IAAI;GAC/B;AAEF,IAAG,8CAA8C;AAC/C,SAAO,oBAAC;GAAO,KAAK;GAAG,MAAK;IAAe,CAAC;AAE5C,SADe,OAAO,YAAY,cAAc,CAClC,CAAC,YAAY,IAAI;GAC/B;AAEF,IAAG,gDAAgD,YAAY;AAChD,YAAU,OAAO;EAC9B,MAAM,eAAe,GAAG,IAAI;AAC5B,SACE,oBAAC;GAAO,KAAK;GAAK,KAAK;GAAG,MAAK;GAAa,UAAU;IAAgB,CACvE;EAED,MAAM,SAAS,OAAO,YAAY,cAAc;EAChD,MAAM,WAAW;AAIjB,YAAU,OAAO,QAAQ,EAAE,QAAQ,EAAE,OAAO,UAAU,EAAE,CAAC;AAKzD,SAAO,aAAa,CAAC,qBAAqB,WAAW,SAAS,CAAC;GAC/D;AAEF,IAAG,wDAAwD;AACzD,SAAO,oBAAC;GAAO;GAAS,MAAK;IAAe,CAAC;AAE7C,SADe,OAAO,YAAY,cAAc,CAClC,CAAC,cAAc;GAC7B;EACF"}

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

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

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

@@ -0,0 +1,40 @@
+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 { Label, Switch as Switch$1, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/fields/Switch.tsx
+function registerSwitch() {
+	registerFormComponent(FormFieldType.SWITCH, Switch, { handlesLabel: true });
+}
+var Switch;
+var init_Switch = __esmMin(() => {
+	init_fields();
+	init_components();
+	Switch = React.forwardRef(({ autocomplete, label, ...props }, ref) => {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Switch$1, {
+			checked: props.value,
+			disabled: props.disabled,
+			id: props.name,
+			name: props.name,
+			onBlur: props.onBlur,
+			onCheckedChange: props.onChange,
+			ref,
+			...autocomplete ? { autoComplete: autocomplete } : {}
+		}), label && /* @__PURE__ */ jsx(Label, {
+			className: cn("text-foreground", props.labelClassName),
+			htmlFor: props.name,
+			children: label
+		})] });
+	});
+	Switch.displayName = "Switch";
+});
+
+//#endregion
+init_Switch();
+export { Switch, init_Switch, registerSwitch };
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["BaseSwitch"],"sources":["../../../../../src/components/form/fields/Switch.tsx"],"sourcesContent":["import {\n  Switch as BaseSwitch,\n  cn,\n  Label,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport { registerFormComponent } from \".\";\nimport { FormFieldType } from \"@/components\";\n\ninterface SwitchProps {\n  autocomplete?: string;\n  disabled?: boolean;\n  label?: string;\n  labelClassName?: string;\n  name: string;\n  onBlur?: () => void;\n  onChange?: (checked: boolean) => void;\n  value?: boolean;\n}\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ autocomplete, label, ...props }, ref) => {\n    return (\n      <>\n        <BaseSwitch\n          checked={props.value}\n          disabled={props.disabled}\n          id={props.name}\n          name={props.name}\n          onBlur={props.onBlur}\n          onCheckedChange={props.onChange}\n          ref={ref}\n          {...(autocomplete ? { autoComplete: autocomplete } : {})}\n        />\n        {label && (\n          <Label\n            className={cn(\"text-foreground\", props.labelClassName)}\n            htmlFor={props.name}>\n            {label}\n          </Label>\n        )}\n      </>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n\nexport function registerSwitch() {\n  registerFormComponent(FormFieldType.SWITCH, Switch, { handlesLabel: true });\n}\n"],"mappings":";;;;;;;;;;AAgDA,SAAgB,iBAAiB;AAC/B,uBAAsB,cAAc,QAAQ,QAAQ,EAAE,cAAc,MAAM,CAAC;;;;cA1CnC;kBACG;CAahC,SAAS,MAAM,YACzB,EAAE,cAAc,OAAO,GAAG,SAAS,QAAQ;AAC1C,SACE,4CACE,oBAACA;GACC,SAAS,MAAM;GACf,UAAU,MAAM;GAChB,IAAI,MAAM;GACV,MAAM,MAAM;GACZ,QAAQ,MAAM;GACd,iBAAiB,MAAM;GAClB;GACL,GAAK,eAAe,EAAE,cAAc,cAAc,GAAG,EAAE;IACvD,EACD,SACC,oBAAC;GACC,WAAW,GAAG,mBAAmB,MAAM,eAAe;GACtD,SAAS,MAAM;aACd;IACK,IAET;GAGR;AACD,QAAO,cAAc"}

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

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