@simple-base/solid 0.1.0

package/dist/index.jsx

@@ -0,0 +1,563 @@
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { cn } from "cn";
+import { badgeDefaults, buttonDefaults } from "@simple-base/contracts";
+import { Portal } from "solid-js/web";
+import * as combobox from "@zag-js/combobox";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/solid";
+import * as select from "@zag-js/select";
+//#region src/components/AlertDialog.tsx
+const AlertDialogContext = createContext(null);
+function useAlertDialog() {
+	const context = useContext(AlertDialogContext);
+	if (!context) throw new Error("useAlertDialog must be used within an AlertDialogRoot");
+	return context;
+}
+function AlertDialogRoot(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const id = createUniqueId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return <AlertDialogContext.Provider value={{
+		titleId,
+		descriptionId
+	}}>
+      <dialog {...rest} role="alertdialog" aria-labelledby={titleId} aria-describedby={descriptionId} class={cn("sb-alert-dialog", local.class)} />
+    </AlertDialogContext.Provider>;
+}
+function AlertDialogIcon(props) {
+	const [local, rest] = splitProps(props, ["class", "aria-hidden"]);
+	return <div {...rest} aria-hidden={local["aria-hidden"] ?? true} class={cn("sb-alert-dialog-icon", local.class)} />;
+}
+function AlertDialogContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <div {...rest} class={cn("sb-alert-dialog-content", local.class)} />;
+}
+function AlertDialogKicker(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <p {...rest} class={cn("sb-alert-dialog-kicker", local.class)} />;
+}
+function AlertDialogTitle(props) {
+	const { titleId } = useAlertDialog();
+	const [local, rest] = splitProps(props, ["class"]);
+	return <h3 {...rest} id={titleId} class={cn("sb-alert-dialog-title", local.class)} />;
+}
+function AlertDialogDescription(props) {
+	const { descriptionId } = useAlertDialog();
+	const [local, rest] = splitProps(props, ["class"]);
+	return <p {...rest} id={descriptionId} class={cn("sb-alert-dialog-description", local.class)} />;
+}
+function AlertDialogActions(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <div {...rest} class={cn("sb-alert-dialog-actions", local.class)} />;
+}
+const AlertDialog = Object.assign(AlertDialogRoot, {
+	Icon: AlertDialogIcon,
+	Content: AlertDialogContent,
+	Kicker: AlertDialogKicker,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription,
+	Actions: AlertDialogActions
+});
+//#endregion
+//#region src/components/Badge.tsx
+function Badge(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return <span {...rest} class={cn("sb-badge", local.class)} data-variant={local.variant ?? badgeDefaults.variant} data-size={local.size ?? badgeDefaults.size} />;
+}
+//#endregion
+//#region src/components/Button.tsx
+function Button(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return <button {...rest} class={cn("sb-button", local.class)} data-variant={local.variant ?? buttonDefaults.variant} data-size={local.size ?? buttonDefaults.size} />;
+}
+//#endregion
+//#region src/components/Switch.tsx
+function Switch(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <input {...rest} type="checkbox" role="switch" class={cn("sb-switch", local.class)} />;
+}
+//#endregion
+//#region src/components/Checkbox.tsx
+function Checkbox(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <input {...rest} type="checkbox" class={cn("sb-checkbox", local.class)} />;
+}
+//#endregion
+//#region src/components/Input.tsx
+function Input(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <input {...rest} class={cn("sb-input", local.class)} />;
+}
+//#endregion
+//#region src/components/Radio.tsx
+function Radio(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <input {...rest} type="radio" class={cn("sb-radio", local.class)} />;
+}
+//#endregion
+//#region src/components/TextArea.tsx
+function TextArea(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <textarea {...rest} class={cn("sb-textarea", local.class)} />;
+}
+//#endregion
+//#region src/mergeWidgetProps.ts
+const hyphenate = (property) => property.startsWith("--") ? property : property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+const serializeStyle = (style) => {
+	if (typeof style === "string") return style;
+	let css = "";
+	for (const property in style) {
+		const value = style[property];
+		if (value == null || value === "") continue;
+		const declaration = `${hyphenate(property)}: ${value}`;
+		css = css ? `${css};${declaration}` : declaration;
+	}
+	return css;
+};
+const composeStyles = (widgetStyle, consumerStyle) => {
+	if (consumerStyle == null) return widgetStyle;
+	if (widgetStyle == null) return consumerStyle;
+	const widgetCss = serializeStyle(widgetStyle);
+	const consumerCss = serializeStyle(consumerStyle);
+	if (!widgetCss) return consumerStyle;
+	if (!consumerCss) return widgetStyle;
+	return `${widgetCss};${consumerCss}`;
+};
+function mergeWidgetProps(behavior, props) {
+	const normalized = new Proxy(props, { get(target, key, receiver) {
+		const value = Reflect.get(target, key, receiver);
+		if (typeof key === "string" && key.startsWith("on") && Array.isArray(value) && typeof value[0] === "function") return (event) => value[0](value[1], event);
+		return value;
+	} });
+	const { style: widgetStyle, ...behaviorProps } = behavior;
+	const { style: consumerStyle, ...consumerProps } = normalized;
+	const merged = mergeProps(behaviorProps, consumerProps);
+	const style = composeStyles(widgetStyle, consumerStyle);
+	return style === void 0 ? merged : {
+		...merged,
+		style
+	};
+}
+//#endregion
+//#region src/components/Combobox.tsx
+const ComboboxContext = createContext(null);
+function useCombobox() {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("useCombobox must be used within a Combobox");
+	return context;
+}
+function ComboboxRoot(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"id",
+		"label",
+		"name",
+		"placeholder",
+		"options",
+		"value",
+		"disabled",
+		"placement",
+		"invalid",
+		"required",
+		"onValueChange",
+		"onOpenChange"
+	]);
+	const [query, setQuery] = createSignal("");
+	const options = createMemo(() => {
+		const search = query().toLowerCase();
+		return local.options.filter((option) => option.label.toLowerCase().includes(search));
+	});
+	const collection = createMemo(() => combobox.collection({
+		items: options(),
+		itemToValue: (item) => item.value,
+		itemToString: (item) => item.label,
+		isItemDisabled: (item) => item.disabled ?? false
+	}));
+	const positioning = createMemo(() => local.placement ? { placement: local.placement } : void 0);
+	const service = useMachine(combobox.machine, {
+		get id() {
+			return local.id;
+		},
+		get ids() {
+			return { root: local.id };
+		},
+		get name() {
+			return local.name;
+		},
+		get placeholder() {
+			return local.placeholder;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get invalid() {
+			return local.invalid;
+		},
+		get required() {
+			return local.required;
+		},
+		get value() {
+			if (local.value === void 0) return void 0;
+			return local.value === "" ? [] : [local.value];
+		},
+		get positioning() {
+			return positioning();
+		},
+		get collection() {
+			return collection();
+		},
+		onOpenChange({ open, reason }) {
+			if (open && reason !== "input-change") setQuery("");
+			local.onOpenChange?.(open);
+		},
+		onInputValueChange({ inputValue, reason }) {
+			setQuery(reason === "input-change" ? inputValue : "");
+		},
+		onValueChange({ value }) {
+			local.onValueChange(value[0] ?? "");
+		}
+	});
+	const api = createMemo(() => combobox.connect(service, normalizeProps));
+	return <ComboboxContext.Provider value={{
+		label: () => local.label,
+		options,
+		api
+	}}>
+      <div {...mergeWidgetProps(api().getRootProps(), rest)} class={cn("sb-combobox", local.class)}>
+        {local.children}
+      </div>
+    </ComboboxContext.Provider>;
+}
+function ComboboxLabel(props) {
+	const { api, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <label {...mergeWidgetProps(api().getLabelProps(), rest)} class={cn("sb-combobox-label", local.class)}>
+      {local.children ?? label()}
+    </label>;
+}
+function ComboboxControl(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div {...mergeWidgetProps(api().getControlProps(), rest)} class={cn("sb-combobox-control", local.class)}>
+      {local.children}
+    </div>;
+}
+function ComboboxInput(props) {
+	const { api, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class"]);
+	return <input aria-label={label()} {...mergeWidgetProps(api().getInputProps(), rest)} class={cn("sb-combobox-input", local.class)} />;
+}
+function ComboboxTrigger(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <button {...mergeWidgetProps(api().getTriggerProps(), rest)} class={cn("sb-combobox-trigger", local.class)}>
+      {local.children}
+    </button>;
+}
+function ComboboxPortal(props) {
+	return <Portal mount={props.mount}>{props.children}</Portal>;
+}
+function ComboboxPositioner(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div {...mergeWidgetProps(api().getPositionerProps(), rest)} class={cn("sb-combobox-positioner", local.class)}>
+      {local.children}
+    </div>;
+}
+function ComboboxContent(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div hidden={!api().open} {...rest} class={cn("sb-combobox-content", local.class)}>
+      {local.children}
+    </div>;
+}
+function ComboboxList(props) {
+	const { api, options, label } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <ul aria-label={label()} {...mergeWidgetProps(api().getContentProps(), rest)} class={cn("sb-combobox-list", local.class)}>
+      <For each={options()}>{(option) => local.children(option)}</For>
+    </ul>;
+}
+function ComboboxEmpty(props) {
+	const { api, options } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <Show when={api().open && options().length === 0}>
+      <div {...rest} role="status" class={cn("sb-combobox-empty", local.class)}>
+        {local.children}
+      </div>
+    </Show>;
+}
+function ComboboxItem(props) {
+	const { api } = useCombobox();
+	const [local, rest] = splitProps(props, ["class", "option"]);
+	return <li {...mergeWidgetProps(api().getItemProps({ item: local.option }), rest)} class={cn("sb-combobox-item", local.class)}>
+      {local.option.label}
+    </li>;
+}
+const Combobox = Object.assign(ComboboxRoot, {
+	Root: ComboboxRoot,
+	Label: ComboboxLabel,
+	Control: ComboboxControl,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Portal: ComboboxPortal,
+	Positioner: ComboboxPositioner,
+	Content: ComboboxContent,
+	List: ComboboxList,
+	Empty: ComboboxEmpty,
+	Item: ComboboxItem
+});
+//#endregion
+//#region src/components/Select.tsx
+const SelectContext = createContext(null);
+function useSelect() {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("useSelect must be used within a Select");
+	return context;
+}
+function SelectRoot(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"id",
+		"label",
+		"name",
+		"placeholder",
+		"options",
+		"value",
+		"disabled",
+		"placement",
+		"invalid",
+		"required",
+		"onValueChange",
+		"onOpenChange"
+	]);
+	const collection = createMemo(() => select.collection({
+		items: local.options,
+		itemToValue: (item) => item.value,
+		itemToString: (item) => item.label,
+		isItemDisabled: (item) => item.disabled ?? false
+	}));
+	const positioning = createMemo(() => local.placement ? { placement: local.placement } : void 0);
+	const service = useMachine(select.machine, {
+		get id() {
+			return local.id;
+		},
+		get ids() {
+			return { root: local.id };
+		},
+		get name() {
+			return local.name;
+		},
+		get disabled() {
+			return local.disabled;
+		},
+		get invalid() {
+			return local.invalid;
+		},
+		get required() {
+			return local.required;
+		},
+		get value() {
+			if (local.value === void 0) return void 0;
+			return local.value === "" ? [] : [local.value];
+		},
+		get positioning() {
+			return positioning();
+		},
+		get collection() {
+			return collection();
+		},
+		onOpenChange({ open }) {
+			local.onOpenChange?.(open);
+		},
+		onValueChange({ value }) {
+			local.onValueChange(value[0] ?? "");
+		}
+	});
+	const api = createMemo(() => select.connect(service, normalizeProps));
+	let hiddenSelect;
+	const syncHiddenSelect = () => {
+		hiddenSelect.value = api().value[0] ?? "";
+	};
+	createEffect(on([collection, () => api().value], syncHiddenSelect));
+	onMount(() => {
+		const form = hiddenSelect.form;
+		let resetFrame = 0;
+		const handleReset = () => {
+			cancelAnimationFrame(resetFrame);
+			resetFrame = requestAnimationFrame(syncHiddenSelect);
+		};
+		form?.addEventListener("reset", handleReset);
+		onCleanup(() => {
+			form?.removeEventListener("reset", handleReset);
+			cancelAnimationFrame(resetFrame);
+		});
+	});
+	return <SelectContext.Provider value={{
+		label: () => local.label,
+		placeholder: () => local.placeholder,
+		options: () => local.options,
+		api
+	}}>
+      <div {...mergeWidgetProps(api().getRootProps(), rest)} class={cn("sb-select-root", local.class)}>
+        <select ref={(element) => {
+		hiddenSelect = element;
+	}} {...api().getHiddenSelectProps()}>
+          <For each={local.options}>
+            {(option) => <option value={option.value}>{option.label}</option>}
+          </For>
+        </select>
+        {local.children}
+      </div>
+    </SelectContext.Provider>;
+}
+function SelectLabel(props) {
+	const { api, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <label {...mergeWidgetProps(api().getLabelProps(), rest)} class={cn("sb-select-label", local.class)}>
+      {local.children ?? label()}
+    </label>;
+}
+function SelectControl(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div {...mergeWidgetProps(api().getControlProps(), rest)} class={cn("sb-select-control", local.class)}>
+      {local.children}
+    </div>;
+}
+function SelectTrigger(props) {
+	const { api, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <button aria-label={label()} {...mergeWidgetProps(api().getTriggerProps(), rest)} class={cn("sb-select-trigger", local.class)}>
+      {local.children}
+    </button>;
+}
+function SelectValueText(props) {
+	const { api, placeholder } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <span {...mergeWidgetProps(api().getValueTextProps(), rest)} class={cn("sb-select-value-text", local.class)}>
+      {local.children ?? (api().valueAsString || placeholder())}
+    </span>;
+}
+function SelectIndicator(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <span {...mergeWidgetProps(api().getIndicatorProps(), rest)} aria-hidden="true" class={cn("sb-select-indicator", local.class)}>
+      {local.children}
+    </span>;
+}
+function SelectPortal(props) {
+	return <Portal mount={props.mount}>{props.children}</Portal>;
+}
+function SelectPositioner(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div {...mergeWidgetProps(api().getPositionerProps(), rest)} class={cn("sb-select-positioner", local.class)}>
+      {local.children}
+    </div>;
+}
+function SelectContent(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <div hidden={!api().open} {...rest} class={cn("sb-select-content", local.class)}>
+      {local.children}
+    </div>;
+}
+function SelectList(props) {
+	const { api, options, label } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <ul aria-label={label()} {...mergeWidgetProps(api().getContentProps(), rest)} class={cn("sb-select-list", local.class)}>
+      <For each={options()}>{(option) => local.children(option)}</For>
+    </ul>;
+}
+function SelectEmpty(props) {
+	const { api, options } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return <Show when={api().open && options().length === 0}>
+      <div {...rest} role="status" class={cn("sb-select-empty", local.class)}>
+        {local.children}
+      </div>
+    </Show>;
+}
+function SelectItem(props) {
+	const { api } = useSelect();
+	const [local, rest] = splitProps(props, ["class", "option"]);
+	return <li {...mergeWidgetProps(api().getItemProps({ item: local.option }), rest)} class={cn("sb-select-item", local.class)}>
+      {local.option.label}
+    </li>;
+}
+const Select = Object.assign(SelectRoot, {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Control: SelectControl,
+	Trigger: SelectTrigger,
+	ValueText: SelectValueText,
+	Indicator: SelectIndicator,
+	Portal: SelectPortal,
+	Positioner: SelectPositioner,
+	Content: SelectContent,
+	List: SelectList,
+	Empty: SelectEmpty,
+	Item: SelectItem
+});
+//#endregion
+//#region src/components/Table.tsx
+function TableRoot(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <table {...rest} class={cn("sb-table", local.class)} />;
+}
+function TableWrap(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return <div {...rest} class={cn("sb-table-wrap", local.class)} />;
+}
+function TableCaption(props) {
+	return <caption {...props} />;
+}
+function TableHeader(props) {
+	return <thead {...props} />;
+}
+function TableBody(props) {
+	return <tbody {...props} />;
+}
+function TableFooter(props) {
+	return <tfoot {...props} />;
+}
+function TableRow(props) {
+	return <tr {...props} />;
+}
+function TableColumnHeader(props) {
+	const [local, rest] = splitProps(props, ["scope"]);
+	return <th {...rest} scope={local.scope ?? "col"} />;
+}
+function TableRowHeader(props) {
+	const [local, rest] = splitProps(props, ["scope"]);
+	return <th {...rest} scope={local.scope ?? "row"} />;
+}
+function TableCell(props) {
+	const [local, rest] = splitProps(props, ["variant"]);
+	return <td {...rest} data-variant={local.variant} />;
+}
+const Table = Object.assign(TableRoot, {
+	Root: TableRoot,
+	Wrap: TableWrap,
+	Caption: TableCaption,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	ColumnHeader: TableColumnHeader,
+	RowHeader: TableRowHeader,
+	Cell: TableCell
+});
+//#endregion
+export { AlertDialog, Badge, Button, Checkbox, Combobox, Input, Radio, Select, Switch, Table, TextArea };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@simple-base/solid",
+  "version": "0.1.0",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "solid": "./dist/index.jsx",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@simple-base/contracts": "0.1.0",
+    "@zag-js/combobox": "^1.43.3",
+    "@zag-js/select": "^1.43.3",
+    "@zag-js/solid": "^1.43.3",
+    "cn": "^0.2.5"
+  },
+  "devDependencies": {
+    "@types/node": "^25.8.0",
+    "rolldown-plugin-solid": "^0.2.1",
+    "solid-js": "^1.9.13",
+    "tsdown": "^0.23.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.12"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "typecheck": "tsc --noEmit"
+  }
+}