@swell/swell-ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -0,0 +1,80 @@
+import { a as e, c as t, n, r, s as i } from "./chunks/config-C-FYxOaJ.js";
+// src/runtime/loader.ts
+var a = ["swell-ui"], o = (e) => /\/\.swell\/ui\/v\d+\/index\.js$/.test(new URL(e).pathname);
+function s(e, t) {
+	let n = t?.refresh, r = new Map(Object.entries(e)), i = /* @__PURE__ */ new Map(), o, s = new CSSStyleSheet(), c = [...r.keys()].filter((e) => !a.includes(e));
+	c.length > 0 && s.replaceSync(`:is(${c.join(", ")}):not(:defined) { visibility: hidden; }`);
+	let l = new MutationObserver((e) => {
+		for (let t of e) for (let e of t.addedNodes) e instanceof Element && p(e).catch(() => {});
+	});
+	function u(e) {
+		let a = i.get(e);
+		if (a) return a;
+		let s = r.get(e);
+		return s ? (a = s().then(() => {}, (t) => {
+			if (!n) throw t;
+			return o ??= n(), o.then((t) => t.load([e]));
+		}).catch((n) => {
+			throw t && console.error(`Swell UI couldn't load <${e}>.`, n), n;
+		}), i.set(e, a), a) : Promise.reject(/* @__PURE__ */ Error(`Swell UI has no element <${e}>.`));
+	}
+	function d(e) {
+		let t = [...e instanceof Element ? [e] : [], ...e.querySelectorAll(":not(:defined)")];
+		return [...new Set(t.map((e) => e.localName).filter((e) => r.has(e) && !customElements.get(e)))];
+	}
+	let f = (e) => Promise.all(e).then(() => {}), p = (e) => f(d(e).map(u));
+	return {
+		load(e) {
+			if (Array.isArray(e)) return f(e.map(u));
+			let t = e;
+			return !(t instanceof Element) && !t.adoptedStyleSheets.includes(s) && t.adoptedStyleSheets.push(s), l.observe(t, {
+				childList: !0,
+				subtree: !0
+			}), p(t);
+		},
+		ready(e) {
+			return f((e ?? d(document)).map((e) => i.get(e) ?? customElements.whenDefined(e)));
+		}
+	};
+}
+var c = Object.fromEntries(Object.entries(/* @__PURE__ */ Object.assign({
+	"./core/badge/badge.ts": () => import("./chunks/badge-Dt6q8Cqa.js").then((e) => e.n),
+	"./core/button/button.ts": () => import("./chunks/button-C7nCiu-t.js").then((e) => e.n),
+	"./core/card/card.ts": () => import("./chunks/card-CvSQEug8.js").then((e) => e.n),
+	"./core/checkbox/checkbox.ts": () => import("./chunks/checkbox-BRI_A1TP.js").then((e) => e.n),
+	"./core/chip/chip.ts": () => import("./chunks/chip-BtnufSMG.js").then((e) => e.n),
+	"./core/disclosure/disclosure.ts": () => import("./chunks/disclosure-CET8-H6f.js").then((e) => e.n),
+	"./core/divider/divider.ts": () => import("./chunks/divider-BfkO0c1j.js").then((e) => e.n),
+	"./core/input/input.ts": () => import("./chunks/input-Uun-ls2_.js").then((e) => e.n),
+	"./core/link/link.ts": () => import("./chunks/link-8qHFEKQE.js").then((e) => e.n),
+	"./core/lookup/lookup-list.ts": () => import("./chunks/lookup-list-Bw6OJoDS.js").then((e) => e.n),
+	"./core/lookup/lookup-option.ts": () => import("./chunks/lookup-option-Mn3k8W2M.js").then((e) => e.r),
+	"./core/lookup/lookup.ts": () => import("./chunks/lookup-5icr_T6o.js").then((e) => e.n),
+	"./core/popover/popover.ts": () => import("./chunks/popover-D3Ob6slA.js").then((e) => e.n),
+	"./core/quantity/quantity.ts": () => import("./chunks/quantity-h3wqn8tC.js").then((e) => e.n),
+	"./core/radio/radio-option.ts": () => import("./chunks/radio-option-hT29S8Zl.js").then((e) => e.r),
+	"./core/radio/radio.ts": () => import("./chunks/radio-BhFDL3pO.js").then((e) => e.n),
+	"./core/select/select-option.ts": () => import("./chunks/select-option-DoM9GAe0.js").then((e) => e.i),
+	"./core/select/select.ts": () => import("./chunks/select-DS1n_htj.js").then((e) => e.n),
+	"./core/skeleton/skeleton.ts": () => import("./chunks/skeleton-DfPjhls9.js").then((e) => e.n),
+	"./core/status/status.ts": () => import("./chunks/status-B23JZ5RQ.js").then((e) => e.n),
+	"./core/tabs/tab.ts": () => import("./chunks/tab-BpjFUbFO.js").then((e) => e.i),
+	"./core/tabs/tabs.ts": () => import("./chunks/tabs-aWKq1Iaz.js").then((e) => e.n),
+	"./core/text/text.ts": () => import("./chunks/text-ZWPy-iB3.js").then((e) => e.n),
+	"./core/textarea/textarea.ts": () => import("./chunks/textarea-L6_OJ2IN.js").then((e) => e.n),
+	"./core/thumbnail/thumbnail.ts": () => import("./chunks/thumbnail-CLe9AsFg.js").then((e) => e.n),
+	"./core/ui/ui.ts": () => import("./chunks/ui-HcyMKwzs.js").then((e) => e.n)
+})).map(([e, t]) => [`swell-${e.slice(e.lastIndexOf("/") + 1, -3)}`, t])), l = !globalThis.SwellUI, u = s(c, l ? { refresh: o(import.meta.url) ? () => import(
+	/* @vite-ignore */
+	`${import.meta.url}?${Date.now()}`
+) : void 0 } : void 0), d = u.load, f = u.ready;
+globalThis.SwellUI ??= {
+	configure: n,
+	setTheme: i,
+	getConfig: r,
+	onChange: e,
+	version: t,
+	load: d,
+	ready: f
+}, l && d(document).catch(() => {});
+export { n as configure, r as getConfig, d as load, e as onChange, f as ready, i as setTheme, t as version };

package/dist/react/badge.d.ts

@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellBadge as SwellBadgeElement } from "../types/components/core/badge/badge.js";
+
+export declare const SwellBadge: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellBadgeElement>, never> &
+    {
+    "variant"?: string;
+    "appearance"?: "filled" | "outline";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+      children?: ReactNode;
+    } & RefAttributes<SwellBadgeElement>
+>;

package/dist/react/badge.js

@@ -0,0 +1,4 @@
+import "../elements/badge.js";
+import { createComponent } from "./create.js";
+
+export const SwellBadge = createComponent("swell-badge", {}, []);

package/dist/react/button.d.ts

@@ -0,0 +1,16 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellButton as SwellButtonElement } from "../types/components/core/button/button.js";
+
+export declare const SwellButton: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellButtonElement>, "disabled" | "loading" | "success" | "type"> &
+    Partial<Pick<SwellButtonElement, "disabled" | "loading" | "success" | "type">> & {
+    "variant"?: string;
+    "appearance"?: "filled" | "outline" | "plain";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "shape"?: "pill";
+    "href"?: string;
+    "target"?: string;
+    "rel"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellButtonElement>
+>;

package/dist/react/button.js

@@ -0,0 +1,4 @@
+import "../elements/button.js";
+import { createComponent } from "./create.js";
+
+export const SwellButton = createComponent("swell-button", {}, ["disabled","loading","success","type"]);

package/dist/react/card.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellCard as SwellCardElement } from "../types/components/core/card/card.js";
+
+export declare const SwellCard: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellCardElement>, never> &
+    {
+    "appearance"?: "outline" | "filled";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+      children?: ReactNode;
+    } & RefAttributes<SwellCardElement>
+>;

package/dist/react/card.js

@@ -0,0 +1,4 @@
+import "../elements/card.js";
+import { createComponent } from "./create.js";
+
+export const SwellCard = createComponent("swell-card", {}, []);

package/dist/react/checkbox.d.ts

@@ -0,0 +1,14 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellCheckbox as SwellCheckboxElement } from "../types/components/core/checkbox/checkbox.js";
+
+export declare const SwellCheckbox: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellCheckboxElement>, "onChange" | "checked" | "value" | "disabled" | "required" | "invalid" | "name"> &
+    Partial<Pick<SwellCheckboxElement, "checked" | "value" | "disabled" | "required" | "invalid" | "name">> & {
+    "label"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    onChange?: (event: Event & { currentTarget: SwellCheckboxElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellCheckboxElement>
+>;

package/dist/react/checkbox.js

@@ -0,0 +1,4 @@
+import "../elements/checkbox.js";
+import { createComponent } from "./create.js";
+
+export const SwellCheckbox = createComponent("swell-checkbox", {"onChange":"change"}, ["checked","value","disabled","required","invalid","name"]);

package/dist/react/chip.d.ts

@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellChip as SwellChipElement } from "../types/components/core/chip/chip.js";
+
+export declare const SwellChip: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellChipElement>, "onRemove" | "disabled"> &
+    Partial<Pick<SwellChipElement, "disabled">> & {
+    "remove-label"?: string;
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    onRemove?: (event: Event & { currentTarget: SwellChipElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellChipElement>
+>;

package/dist/react/chip.js

@@ -0,0 +1,4 @@
+import "../elements/chip.js";
+import { createComponent } from "./create.js";
+
+export const SwellChip = createComponent("swell-chip", {"onRemove":"remove"}, ["disabled"]);

package/dist/react/create.js

@@ -0,0 +1,49 @@
+import { createElement as e, forwardRef as t, useCallback as n, useLayoutEffect as r, useRef as i } from "react";
+// src/react/create.ts
+var a = (e) => typeof e == "string" ? e : JSON.stringify(e);
+function o(o, s, c) {
+	let l = new Set(c), u = t((t, c) => {
+		let u = i(null), d = i({}), f = i({}), p = i({}), m = {}, h = {}, g = {}, _ = {}, v = customElements.get(o)?.prototype;
+		for (let [e, n] of Object.entries(t)) e === "children" ? h[e] = n : e in s ? m[e] = n : !l.has(e) && v && e in v && !(e in HTMLElement.prototype) ? _[e] = n : l.has(e) || typeof n == "boolean" && e in HTMLElement.prototype ? g[e] = n : e === "className" ? h.class = n : h[e] = /^(aria|data)-/.test(e) ? n == null ? n : a(n) : typeof n == "boolean" ? n ? "" : void 0 : n;
+		r(() => {
+			d.current = m;
+			let e = u.current;
+			if (!e) return;
+			for (let t of /* @__PURE__ */ new Set([...Object.keys(f.current), ...Object.keys(g)])) {
+				let n = f.current[t], r = g[t];
+				r === void 0 ? typeof n == "boolean" && (e[t] = !1) : Object.is(n, r) || (e[t] = r);
+			}
+			f.current = g;
+			let t = u.current;
+			for (let e of /* @__PURE__ */ new Set([...Object.keys(p.current), ...Object.keys(_)])) {
+				let n = _[e];
+				n == null || n === !1 ? t?.removeAttribute(e) : t?.setAttribute(e, n === !0 ? "" : a(n));
+			}
+			p.current = _;
+		}), r(() => {
+			let e = u.current;
+			if (!e) return;
+			let t = Object.entries(s).map(([e, t]) => [t, (t) => d.current[e]?.(t)]);
+			for (let [n, r] of t) e.addEventListener(n, r);
+			return () => {
+				for (let [n, r] of t) e.removeEventListener(n, r);
+			};
+		}, []);
+		let y = n((e) => {
+			if (u.current = e, typeof c != "function") {
+				c && (c.current = e);
+				return;
+			}
+			let t = c(e);
+			return typeof t == "function" ? () => {
+				u.current = null, t();
+			} : void 0;
+		}, [c]);
+		return e(o, {
+			...h,
+			ref: y
+		});
+	});
+	return u.displayName = o, u;
+}
+export { o as createComponent };

package/dist/react/disclosure.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellDisclosure as SwellDisclosureElement } from "../types/components/core/disclosure/disclosure.js";
+
+export declare const SwellDisclosure: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellDisclosureElement>, "onToggle" | "open"> &
+    Partial<Pick<SwellDisclosureElement, "open">> & {
+    "toggle"?: boolean;
+    onToggle?: (event: ToggleEvent & { currentTarget: SwellDisclosureElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellDisclosureElement>
+>;

package/dist/react/disclosure.js

@@ -0,0 +1,4 @@
+import "../elements/disclosure.js";
+import { createComponent } from "./create.js";
+
+export const SwellDisclosure = createComponent("swell-disclosure", {"onToggle":"toggle"}, ["open"]);

package/dist/react/divider.d.ts

@@ -0,0 +1,9 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellDivider as SwellDividerElement } from "../types/components/core/divider/divider.js";
+
+export declare const SwellDivider: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellDividerElement>, never> &
+    {
+      children?: ReactNode;
+    } & RefAttributes<SwellDividerElement>
+>;

package/dist/react/divider.js

@@ -0,0 +1,4 @@
+import "../elements/divider.js";
+import { createComponent } from "./create.js";
+
+export const SwellDivider = createComponent("swell-divider", {}, []);

package/dist/react/index.d.ts

@@ -0,0 +1,26 @@
+export { SwellBadge } from "./badge.js";
+export { SwellButton } from "./button.js";
+export { SwellCard } from "./card.js";
+export { SwellCheckbox } from "./checkbox.js";
+export { SwellChip } from "./chip.js";
+export { SwellDisclosure } from "./disclosure.js";
+export { SwellDivider } from "./divider.js";
+export { SwellLink } from "./link.js";
+export { SwellInput } from "./input.js";
+export { SwellLookupList } from "./lookup-list.js";
+export { SwellLookupOption } from "./lookup-option.js";
+export { SwellLookup } from "./lookup.js";
+export { SwellPopover } from "./popover.js";
+export { SwellQuantity } from "./quantity.js";
+export { SwellRadioOption } from "./radio-option.js";
+export { SwellRadio } from "./radio.js";
+export { SwellSelectOption } from "./select-option.js";
+export { SwellSelect } from "./select.js";
+export { SwellSkeleton } from "./skeleton.js";
+export { SwellStatus } from "./status.js";
+export { SwellTab } from "./tab.js";
+export { SwellTabs } from "./tabs.js";
+export { SwellText } from "./text.js";
+export { SwellTextarea } from "./textarea.js";
+export { SwellThumbnail } from "./thumbnail.js";
+export { SwellUi } from "./ui.js";

package/dist/react/index.js

@@ -0,0 +1,26 @@
+export { SwellBadge } from "./badge.js";
+export { SwellButton } from "./button.js";
+export { SwellCard } from "./card.js";
+export { SwellCheckbox } from "./checkbox.js";
+export { SwellChip } from "./chip.js";
+export { SwellDisclosure } from "./disclosure.js";
+export { SwellDivider } from "./divider.js";
+export { SwellLink } from "./link.js";
+export { SwellInput } from "./input.js";
+export { SwellLookupList } from "./lookup-list.js";
+export { SwellLookupOption } from "./lookup-option.js";
+export { SwellLookup } from "./lookup.js";
+export { SwellPopover } from "./popover.js";
+export { SwellQuantity } from "./quantity.js";
+export { SwellRadioOption } from "./radio-option.js";
+export { SwellRadio } from "./radio.js";
+export { SwellSelectOption } from "./select-option.js";
+export { SwellSelect } from "./select.js";
+export { SwellSkeleton } from "./skeleton.js";
+export { SwellStatus } from "./status.js";
+export { SwellTab } from "./tab.js";
+export { SwellTabs } from "./tabs.js";
+export { SwellText } from "./text.js";
+export { SwellTextarea } from "./textarea.js";
+export { SwellThumbnail } from "./thumbnail.js";
+export { SwellUi } from "./ui.js";

package/dist/react/input.d.ts

@@ -0,0 +1,28 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellInput as SwellInputElement } from "../types/components/core/input/input.js";
+
+export declare const SwellInput: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellInputElement>, "onInput" | "onChange" | "value" | "disabled" | "required" | "readOnly" | "invalid" | "name"> &
+    Partial<Pick<SwellInputElement, "value" | "disabled" | "required" | "readOnly" | "invalid" | "name">> & {
+    "label"?: string;
+    "optional"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "type"?: "text" | "email" | "tel" | "password" | "number" | "search" | "url";
+    "appearance"?: "outline" | "filled" | "underline";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "readonly"?: boolean;
+    "placeholder"?: string;
+    "autocomplete"?: string;
+    "inputmode"?: string;
+    "minlength"?: number;
+    "maxlength"?: number;
+    "pattern"?: string;
+    "min"?: string;
+    "max"?: string;
+    "step"?: string;
+    onInput?: (event: Event & { currentTarget: SwellInputElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellInputElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellInputElement>
+>;

package/dist/react/input.js

@@ -0,0 +1,4 @@
+import "../elements/input.js";
+import { createComponent } from "./create.js";
+
+export const SwellInput = createComponent("swell-input", {"onInput":"input","onChange":"change"}, ["value","disabled","required","readOnly","invalid","name"]);

package/dist/react/link.d.ts

@@ -0,0 +1,15 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellLink as SwellLinkElement } from "../types/components/core/link/link.js";
+
+export declare const SwellLink: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellLinkElement>, never> &
+    {
+    "href"?: string;
+    "target"?: string;
+    "rel"?: string;
+    "variant"?: string;
+    "appearance"?: "underline" | "plain";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+      children?: ReactNode;
+    } & RefAttributes<SwellLinkElement>
+>;

package/dist/react/link.js

@@ -0,0 +1,4 @@
+import "../elements/link.js";
+import { createComponent } from "./create.js";
+
+export const SwellLink = createComponent("swell-link", {}, []);

package/dist/react/lookup-list.d.ts

@@ -0,0 +1,9 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellLookupList as SwellLookupListElement } from "../types/components/core/lookup/lookup-list.js";
+
+export declare const SwellLookupList: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellLookupListElement>, never> &
+    {
+      children?: ReactNode;
+    } & RefAttributes<SwellLookupListElement>
+>;

package/dist/react/lookup-list.js

@@ -0,0 +1,4 @@
+import "../elements/lookup-list.js";
+import { createComponent } from "./create.js";
+
+export const SwellLookupList = createComponent("swell-lookup-list", {}, []);

package/dist/react/lookup-option.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellLookupOption as SwellLookupOptionElement } from "../types/components/core/lookup/lookup-option.js";
+
+export declare const SwellLookupOption: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellLookupOptionElement>, "value" | "disabled"> &
+    Partial<Pick<SwellLookupOptionElement, "value" | "disabled">> & {
+    "hint"?: string;
+    "hidden"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellLookupOptionElement>
+>;

package/dist/react/lookup-option.js

@@ -0,0 +1,4 @@
+import "../elements/lookup-option.js";
+import { createComponent } from "./create.js";
+
+export const SwellLookupOption = createComponent("swell-lookup-option", {}, ["value","disabled"]);

package/dist/react/lookup.d.ts

@@ -0,0 +1,28 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellLookup as SwellLookupElement } from "../types/components/core/lookup/lookup.js";
+
+export declare const SwellLookup: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellLookupElement>, "onInput" | "onChange" | "value" | "disabled" | "required" | "readOnly" | "invalid" | "name"> &
+    Partial<Pick<SwellLookupElement, "value" | "disabled" | "required" | "readOnly" | "invalid" | "name">> & {
+    "label"?: string;
+    "optional"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "type"?: "text" | "email" | "tel" | "password" | "number" | "search" | "url";
+    "appearance"?: "outline" | "filled" | "underline";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "readonly"?: boolean;
+    "placeholder"?: string;
+    "autocomplete"?: string;
+    "inputmode"?: string;
+    "minlength"?: number;
+    "maxlength"?: number;
+    "pattern"?: string;
+    "min"?: string;
+    "max"?: string;
+    "step"?: string;
+    onInput?: (event: Event & { currentTarget: SwellLookupElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellLookupElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellLookupElement>
+>;

package/dist/react/lookup.js

@@ -0,0 +1,4 @@
+import "../elements/lookup.js";
+import { createComponent } from "./create.js";
+
+export const SwellLookup = createComponent("swell-lookup", {"onInput":"input","onChange":"change"}, ["value","disabled","required","readOnly","invalid","name"]);

package/dist/react/popover.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellPopover as SwellPopoverElement } from "../types/components/core/popover/popover.js";
+
+export declare const SwellPopover: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellPopoverElement>, "onToggle" | "open"> &
+    Partial<Pick<SwellPopoverElement, "open">> & {
+    "aria-label"?: string;
+    onToggle?: (event: ToggleEvent & { currentTarget: SwellPopoverElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellPopoverElement>
+>;

package/dist/react/popover.js

@@ -0,0 +1,4 @@
+import "../elements/popover.js";
+import { createComponent } from "./create.js";
+
+export const SwellPopover = createComponent("swell-popover", {"onToggle":"toggle"}, ["open"]);

package/dist/react/quantity.d.ts

@@ -0,0 +1,15 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellQuantity as SwellQuantityElement } from "../types/components/core/quantity/quantity.js";
+
+export declare const SwellQuantity: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellQuantityElement>, "onInput" | "onChange" | "value" | "name" | "disabled" | "busy"> &
+    Partial<Pick<SwellQuantityElement, "value" | "name" | "disabled" | "busy">> & {
+    "min"?: number;
+    "max"?: number;
+    "step"?: number;
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    onInput?: (event: Event & { currentTarget: SwellQuantityElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellQuantityElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellQuantityElement>
+>;

package/dist/react/quantity.js

@@ -0,0 +1,4 @@
+import "../elements/quantity.js";
+import { createComponent } from "./create.js";
+
+export const SwellQuantity = createComponent("swell-quantity", {"onInput":"input","onChange":"change"}, ["value","name","disabled","busy"]);

package/dist/react/radio-option.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellRadioOption as SwellRadioOptionElement } from "../types/components/core/radio/radio-option.js";
+
+export declare const SwellRadioOption: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellRadioOptionElement>, "value" | "disabled"> &
+    Partial<Pick<SwellRadioOptionElement, "value" | "disabled">> & {
+    "hint"?: string;
+    "hidden"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellRadioOptionElement>
+>;

package/dist/react/radio-option.js

@@ -0,0 +1,4 @@
+import "../elements/radio-option.js";
+import { createComponent } from "./create.js";
+
+export const SwellRadioOption = createComponent("swell-radio-option", {}, ["value","disabled"]);

package/dist/react/radio.d.ts

@@ -0,0 +1,18 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellRadio as SwellRadioElement } from "../types/components/core/radio/radio.js";
+
+export declare const SwellRadio: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellRadioElement>, "onInput" | "onChange" | "value" | "name" | "required" | "disabled" | "invalid"> &
+    Partial<Pick<SwellRadioElement, "value" | "name" | "required" | "disabled" | "invalid">> & {
+    "label"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "aria-label"?: string;
+    "indicator-position"?: "start" | "end";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "appearance"?: "plain" | "outline" | "segmented" | "button";
+    onInput?: (event: Event & { currentTarget: SwellRadioElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellRadioElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellRadioElement>
+>;

package/dist/react/radio.js

@@ -0,0 +1,4 @@
+import "../elements/radio.js";
+import { createComponent } from "./create.js";
+
+export const SwellRadio = createComponent("swell-radio", {"onInput":"input","onChange":"change"}, ["value","name","required","disabled","invalid"]);

package/dist/react/select-option.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellSelectOption as SwellSelectOptionElement } from "../types/components/core/select/select-option.js";
+
+export declare const SwellSelectOption: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellSelectOptionElement>, "value" | "disabled"> &
+    Partial<Pick<SwellSelectOptionElement, "value" | "disabled">> & {
+    "hint"?: string;
+    "hidden"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellSelectOptionElement>
+>;

package/dist/react/select-option.js

@@ -0,0 +1,4 @@
+import "../elements/select-option.js";
+import { createComponent } from "./create.js";
+
+export const SwellSelectOption = createComponent("swell-select-option", {}, ["value","disabled"]);

package/dist/react/select.d.ts

@@ -0,0 +1,20 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellSelect as SwellSelectElement } from "../types/components/core/select/select.js";
+
+export declare const SwellSelect: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellSelectElement>, "onInput" | "onChange" | "value" | "name" | "required" | "disabled" | "invalid"> &
+    Partial<Pick<SwellSelectElement, "value" | "name" | "required" | "disabled" | "invalid">> & {
+    "label"?: string;
+    "optional"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "placeholder"?: string;
+    "autocomplete"?: string;
+    "aria-label"?: string;
+    "appearance"?: "outline" | "filled" | "underline";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    onInput?: (event: Event & { currentTarget: SwellSelectElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellSelectElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellSelectElement>
+>;

package/dist/react/select.js

@@ -0,0 +1,4 @@
+import "../elements/select.js";
+import { createComponent } from "./create.js";
+
+export const SwellSelect = createComponent("swell-select", {"onInput":"input","onChange":"change"}, ["value","name","required","disabled","invalid"]);

package/dist/react/skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellSkeleton as SwellSkeletonElement } from "../types/components/core/skeleton/skeleton.js";
+
+export declare const SwellSkeleton: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellSkeletonElement>, never> &
+    {
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "appearance"?: "card";
+      children?: ReactNode;
+    } & RefAttributes<SwellSkeletonElement>
+>;

package/dist/react/skeleton.js

@@ -0,0 +1,4 @@
+import "../elements/skeleton.js";
+import { createComponent } from "./create.js";
+
+export const SwellSkeleton = createComponent("swell-skeleton", {}, []);

package/dist/react/status.d.ts

@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellStatus as SwellStatusElement } from "../types/components/core/status/status.js";
+
+export declare const SwellStatus: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellStatusElement>, never> &
+    {
+    "type"?: "danger" | "success" | "warning";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "appearance"?: "filled" | "outline" | "plain" | "quiet";
+      children?: ReactNode;
+    } & RefAttributes<SwellStatusElement>
+>;