solid-tiny-ui 0.5.0 → 0.6.0

package/dist/primitives/checkbox/index.d.ts

@@ -0,0 +1,26 @@
+import { Input, Label } from "./parts.js";
+import { Root } from "./root.js";
+import * as solid_js_store1 from "solid-js/store";
+
+//#region src/primitives/checkbox/index.d.ts
+declare const CheckboxCore: typeof Root & {
+  Input: typeof Input;
+  Label: typeof Label;
+  useContext: () => [Readonly<{
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store1.SetStoreFunction<{
+      checked: boolean;
+      indeterminate: boolean;
+      disabled: boolean;
+      name: string;
+      value: string;
+    }>;
+  }, {}];
+};
+//#endregion
+export { CheckboxCore };

package/dist/primitives/checkbox/index.js

@@ -0,0 +1,13 @@
+import { context } from "./context.js";
+import { Input, Label } from "./parts.js";
+import { Root } from "./root.js";
+
+//#region src/primitives/checkbox/index.ts
+const CheckboxCore = Object.assign(Root, {
+	Input,
+	Label,
+	useContext: context.useContext
+});
+
+//#endregion
+export { CheckboxCore };

package/dist/primitives/checkbox/index.jsx

@@ -0,0 +1,13 @@
+import { context } from "./context.jsx";
+import { Input, Label } from "./parts.jsx";
+import { Root } from "./root.jsx";
+
+//#region src/primitives/checkbox/index.ts
+const CheckboxCore = Object.assign(Root, {
+	Input,
+	Label,
+	useContext: context.useContext
+});
+
+//#endregion
+export { CheckboxCore };

package/dist/primitives/checkbox/parts.d.ts

@@ -0,0 +1,10 @@
+import * as solid_js3 from "solid-js";
+import { ComponentProps } from "solid-js";
+
+//#region src/primitives/checkbox/parts.d.ts
+declare function Input(props: {
+  id?: string;
+}): solid_js3.JSX.Element;
+declare function Label(props: ComponentProps<"label">): solid_js3.JSX.Element;
+//#endregion
+export { Input, Label };

package/dist/primitives/checkbox/parts.js

@@ -0,0 +1,62 @@
+import { context } from "./context.js";
+import { VisuallyHidden } from "../../components/visually-hidden/index.js";
+import { createComponent, spread, template } from "solid-js/web";
+import { createMemo, onMount } from "solid-js";
+import { createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox/parts.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label>`);
+function Input(props) {
+	const [state, actions] = context.useContext();
+	const handleOnChange = (e) => {
+		const checked = e.target.checked;
+		actions.setState({ checked });
+	};
+	let inputRef;
+	onMount(() => {
+		createWatch(() => state.indeterminate, (v) => {
+			if (inputRef) inputRef.indeterminate = v;
+		});
+	});
+	const ariaChecked = createMemo(() => {
+		if (state.indeterminate) return "mixed";
+		return state.checked ? "true" : "false";
+	});
+	return createComponent(VisuallyHidden, {
+		get ["aria-checked"]() {
+			return ariaChecked();
+		},
+		as: "input",
+		get checked() {
+			return state.checked;
+		},
+		get disabled() {
+			return state.disabled;
+		},
+		get id() {
+			return props.id;
+		},
+		get name() {
+			return state.name;
+		},
+		onChange: handleOnChange,
+		ref(r$) {
+			var _ref$ = inputRef;
+			typeof _ref$ === "function" ? _ref$(r$) : inputRef = r$;
+		},
+		type: "checkbox",
+		get value() {
+			return state.value;
+		}
+	});
+}
+function Label(props) {
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, props, false, false);
+		return _el$;
+	})();
+}
+
+//#endregion
+export { Input, Label };

package/dist/primitives/checkbox/parts.jsx

@@ -0,0 +1,28 @@
+import { context } from "./context.jsx";
+import { VisuallyHidden } from "../../components/visually-hidden/index.jsx";
+import { createMemo, onMount } from "solid-js";
+import { createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox/parts.tsx
+function Input(props) {
+	const [state, actions] = context.useContext();
+	const handleOnChange = (e) => {
+		const checked = e.target.checked;
+		actions.setState({ checked });
+	};
+	let inputRef;
+	onMount(() => {
+		createWatch(() => state.indeterminate, (v) => {});
+	});
+	const ariaChecked = createMemo(() => {
+		if (state.indeterminate) return "mixed";
+		return state.checked ? "true" : "false";
+	});
+	return <VisuallyHidden aria-checked={ariaChecked()} as="input" checked={state.checked} disabled={state.disabled} id={props.id} name={state.name} onChange={handleOnChange} ref={inputRef} type="checkbox" value={state.value} />;
+}
+function Label(props) {
+	return <label {...props} />;
+}
+
+//#endregion
+export { Input, Label };

package/dist/primitives/checkbox/root.d.ts

@@ -0,0 +1,16 @@
+import { context } from "./context.js";
+import * as solid_js0 from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox/root.d.ts
+declare function Root(props: {
+  children?: MaybeCallableChild<ReturnType<typeof context.useContext>>;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  name?: string;
+  value?: string;
+  indeterminate?: boolean;
+}): solid_js0.JSX.Element;
+//#endregion
+export { Root };

package/dist/primitives/checkbox/root.js

@@ -0,0 +1,25 @@
+import { context } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		checked: () => props.checked,
+		disabled: () => props.disabled,
+		indeterminate: () => props.indeterminate,
+		value: () => props.value,
+		name: () => props.name || `checkbox_${createUniqueId()}`
+	});
+	const [state] = Context.value;
+	createWatch(() => state.checked, (v) => {
+		if (v !== props.checked) props.onChange?.(v);
+	});
+	return createComponent(Context.Provider, { get children() {
+		return callMaybeCallableChild(props.children, ...Context.value);
+	} });
+}
+
+//#endregion
+export { Root };

package/dist/primitives/checkbox/root.jsx

@@ -0,0 +1,24 @@
+import { context } from "./context.jsx";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		checked: () => props.checked,
+		disabled: () => props.disabled,
+		indeterminate: () => props.indeterminate,
+		value: () => props.value,
+		name: () => props.name || `checkbox_${createUniqueId()}`
+	});
+	const [state] = Context.value;
+	createWatch(() => state.checked, (v) => {
+		if (v !== props.checked) props.onChange?.(v);
+	});
+	return <Context.Provider>
+      {callMaybeCallableChild(props.children, ...Context.value)}
+    </Context.Provider>;
+}
+
+//#endregion
+export { Root };

package/dist/primitives/checkbox-group/context.js

@@ -0,0 +1,21 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/checkbox-group/context.ts
+const context = createComponentState({
+	state: () => ({
+		selectValues: [],
+		name: "",
+		disabled: false
+	}),
+	methods: { toggleValue(value, checked) {
+		const { state, actions } = this;
+		const currentValues = state.selectValues;
+		let newValues;
+		if (checked) newValues = [...currentValues, value];
+		else newValues = currentValues.filter((v) => v !== value);
+		actions.setState({ selectValues: newValues });
+	} }
+});
+
+//#endregion
+export { context };

package/dist/primitives/checkbox-group/context.jsx

@@ -0,0 +1,21 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/checkbox-group/context.ts
+const context = createComponentState({
+	state: () => ({
+		selectValues: [],
+		name: "",
+		disabled: false
+	}),
+	methods: { toggleValue(value, checked) {
+		const { state, actions } = this;
+		const currentValues = state.selectValues;
+		let newValues;
+		if (checked) newValues = [...currentValues, value];
+		else newValues = currentValues.filter((v) => v !== value);
+		actions.setState({ selectValues: newValues });
+	} }
+});
+
+//#endregion
+export { context };

package/dist/primitives/checkbox-group/index.js

@@ -0,0 +1,12 @@
+import { Item, ItemInput, ItemLabel } from "./parts.js";
+import { Root } from "./root.js";
+
+//#region src/primitives/checkbox-group/index.ts
+const CheckboxGroupCore = Object.assign(Root, {
+	Item,
+	ItemInput,
+	ItemLabel
+});
+
+//#endregion
+export { CheckboxGroupCore };

package/dist/primitives/checkbox-group/index.jsx

@@ -0,0 +1,12 @@
+import { Item, ItemInput, ItemLabel } from "./parts.jsx";
+import { Root } from "./root.jsx";
+
+//#region src/primitives/checkbox-group/index.ts
+const CheckboxGroupCore = Object.assign(Root, {
+	Item,
+	ItemInput,
+	ItemLabel
+});
+
+//#endregion
+export { CheckboxGroupCore };

package/dist/primitives/checkbox-group/parts.js

@@ -0,0 +1,33 @@
+import { CheckboxCore } from "../checkbox/index.js";
+import { context } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { createMemo } from "solid-js";
+
+//#region src/primitives/checkbox-group/parts.tsx
+function Item(props) {
+	const [state, actions] = context.useContext();
+	const checked = createMemo(() => state.selectValues.includes(props.value));
+	return createComponent(CheckboxCore, {
+		get checked() {
+			return checked();
+		},
+		get name() {
+			return state.name;
+		},
+		onChange: (c) => {
+			actions.toggleValue(props.value, c);
+		},
+		get value() {
+			return String(props.value);
+		}
+	});
+}
+function ItemInput(props) {
+	return createComponent(CheckboxCore.Input, props);
+}
+function ItemLabel(props) {
+	return createComponent(CheckboxCore.Label, props);
+}
+
+//#endregion
+export { Item, ItemInput, ItemLabel };

package/dist/primitives/checkbox-group/parts.jsx

@@ -0,0 +1,21 @@
+import { CheckboxCore } from "../checkbox/index.jsx";
+import { context } from "./context.jsx";
+import { createMemo } from "solid-js";
+
+//#region src/primitives/checkbox-group/parts.tsx
+function Item(props) {
+	const [state, actions] = context.useContext();
+	const checked = createMemo(() => state.selectValues.includes(props.value));
+	return <CheckboxCore checked={checked()} name={state.name} onChange={(c) => {
+		actions.toggleValue(props.value, c);
+	}} value={String(props.value)} />;
+}
+function ItemInput(props) {
+	return <CheckboxCore.Input {...props} />;
+}
+function ItemLabel(props) {
+	return <CheckboxCore.Label {...props} />;
+}
+
+//#endregion
+export { Item, ItemInput, ItemLabel };

package/dist/primitives/checkbox-group/root.js

@@ -0,0 +1,24 @@
+import { context } from "./context.js";
+import { createComponent } from "solid-js/web";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch, isUndefined } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox-group/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		selectValues: () => props.selectValues,
+		name: () => props.name ?? `checkbox_group_${createUniqueId()}`,
+		disabled: () => props.disabled
+	});
+	const [state] = Context.value;
+	createWatch(() => state.selectValues, (v) => {
+		const propValues = props.selectValues;
+		if (isUndefined(propValues) || JSON.stringify([...v].sort()) !== JSON.stringify([...propValues].sort())) props.onChange?.(v);
+	});
+	return createComponent(Context.Provider, { get children() {
+		return callMaybeCallableChild(props.children, ...Context.value);
+	} });
+}
+
+//#endregion
+export { Root };

package/dist/primitives/checkbox-group/root.jsx

@@ -0,0 +1,23 @@
+import { context } from "./context.jsx";
+import { createUniqueId } from "solid-js";
+import { callMaybeCallableChild, createWatch, isUndefined } from "solid-tiny-utils";
+
+//#region src/primitives/checkbox-group/root.tsx
+function Root(props) {
+	const Context = context.initial({
+		selectValues: () => props.selectValues,
+		name: () => props.name ?? `checkbox_group_${createUniqueId()}`,
+		disabled: () => props.disabled
+	});
+	const [state] = Context.value;
+	createWatch(() => state.selectValues, (v) => {
+		const propValues = props.selectValues;
+		if (isUndefined(propValues) || JSON.stringify([...v].sort()) !== JSON.stringify([...propValues].sort())) props.onChange?.(v);
+	});
+	return <Context.Provider>
+      {callMaybeCallableChild(props.children, ...Context.value)}
+    </Context.Provider>;
+}
+
+//#endregion
+export { Root };

package/dist/primitives/fake-scroll-list/index.d.ts

@@ -1,7 +1,7 @@
 import { Item } from "./item.js";
 import { Listbox } from "./listbox.js";
 import { Root } from "./root.js";
-import * as solid_js_store1 from "solid-js/store";
+import * as solid_js_store0 from "solid-js/store";
 
 //#region src/primitives/fake-scroll-list/index.d.ts
 
@@ -40,7 +40,7 @@ declare const FakeScrollListCore: typeof Root & {
     overScan: number;
     fixedInViewIndex: number;
   }>, Omit<{}, "setState" | "shouldFake" | "overScan" | "fixedInViewIndex"> & {
-    setState: solid_js_store1.SetStoreFunction<{
+    setState: solid_js_store0.SetStoreFunction<{
       inViewIndex: number;
       visibleItemsCount: number;
       itemHeight: number;

package/dist/primitives/fake-scroll-list/listbox.js

@@ -1,6 +1,6 @@
 import { context } from "./context.js";
 import { createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
-import { For, createMemo, onMount } from "solid-js";
+import { For as For$1, createMemo, onMount } from "solid-js";
 import { runAtNextAnimationFrame } from "solid-tiny-utils";
 
 //#region src/primitives/fake-scroll-list/listbox.tsx
@@ -57,7 +57,7 @@ function Listbox(props) {
 		_el$.addEventListener("transitionend", () => {
 			checkPos();
 		});
-		insert(_el$, createComponent(For, {
+		insert(_el$, createComponent(For$1, {
 			get each() {
 				return renderItems();
 			},

package/dist/primitives/floating/content.js

@@ -1,3 +1,4 @@
+import { getAnimationDurationMs } from "../../utils/duration.js";
 import { context } from "./context.js";
 import { runSolidEventHandler as runSolidEventHandler$1 } from "./utils.js";
 import { Portal, createComponent, effect, insert, mergeProps, setStyleProperty, spread, template, use } from "solid-js/web";
@@ -51,17 +52,17 @@ function FloatingContentCore(props) {
 		});
 		typeof _ref$ === "function" && use(_ref$, _el$2);
 		spread(_el$2, mergeProps(otherProps, {
-			get ["data-closing"]() {
-				return dataIf(staticData.presenceState() === "closing");
+			get ["data-entering"]() {
+				return dataIf(["pre-enter", "entering"].includes(staticData.presencePhase()));
 			},
-			get ["data-opening"]() {
-				return dataIf(staticData.presenceState() === "opening");
+			get ["data-exiting"]() {
+				return dataIf(["exiting"].includes(staticData.presencePhase()));
 			},
 			get ["data-placement"]() {
 				return state.placement;
 			},
-			get ["data-status"]() {
-				return staticData.presenceState();
+			get ["data-presence-phase"]() {
+				return staticData.presencePhase();
 			},
 			"onMouseEnter": (e) => {
 				if (state.canHoverContent && state.trigger === "hover") actions.setOpen(true);
@@ -90,14 +91,14 @@ function FloatingContentCore(props) {
 }
 function Content(props) {
 	const [state, , staticData] = context.useContext();
-	const [show, presenceState] = createPresence({
-		show: () => state.open,
-		element: () => state.refContentInner || void 0
+	const presence = createPresence(() => state.open, {
+		enterDuration: () => getAnimationDurationMs(state.refContentInner),
+		exitDuration: () => getAnimationDurationMs(state.refContentInner)
 	});
-	staticData.presenceState = presenceState;
+	staticData.presencePhase = presence.phase;
 	return createComponent(Show, {
 		get when() {
-			return show();
+			return presence.isMounted();
 		},
 		get children() {
 			return createComponent(Portal, {

package/dist/primitives/floating/content.jsx

@@ -1,3 +1,4 @@
+import { getAnimationDurationMs } from "../../utils/duration.jsx";
 import { context } from "./context.jsx";
 import { runSolidEventHandler as runSolidEventHandler$1 } from "./utils.jsx";
 import { Show, onCleanup, onMount, splitProps } from "solid-js";
@@ -52,7 +53,7 @@ function FloatingContentCore(props) {
 		"pointer-events": "auto",
 		opacity: state.initialized ? 1 : 0
 	}}>
-      <div {...otherProps} data-closing={dataIf(staticData.presenceState() === "closing")} data-opening={dataIf(staticData.presenceState() === "opening")} data-placement={state.placement} data-status={staticData.presenceState()} onMouseEnter={(e) => {
+      <div {...otherProps} data-entering={dataIf(["pre-enter", "entering"].includes(staticData.presencePhase()))} data-exiting={dataIf(["exiting"].includes(staticData.presencePhase()))} data-placement={state.placement} data-presence-phase={staticData.presencePhase()} onMouseEnter={(e) => {
 		if (state.canHoverContent && state.trigger === "hover") actions.setOpen(true);
 		runSolidEventHandler$1(e, localProps.onMouseEnter);
 	}} onMouseLeave={(e) => {
@@ -67,12 +68,12 @@ function FloatingContentCore(props) {
 }
 function Content(props) {
 	const [state, , staticData] = context.useContext();
-	const [show, presenceState] = createPresence({
-		show: () => state.open,
-		element: () => state.refContentInner || void 0
+	const presence = createPresence(() => state.open, {
+		enterDuration: () => getAnimationDurationMs(state.refContentInner),
+		exitDuration: () => getAnimationDurationMs(state.refContentInner)
 	});
-	staticData.presenceState = presenceState;
-	return <Show when={show()}>
+	staticData.presencePhase = presence.phase;
+	return <Show when={presence.isMounted()}>
       <Portal mount={document.body}>
         <FloatingContentCore {...props} />
       </Portal>

package/dist/primitives/floating/context.d.ts

@@ -1,8 +1,9 @@
-import * as solid_js23 from "solid-js";
+import * as solid_js35 from "solid-js";
+import { PresencePhase } from "solid-tiny-utils";
 import * as _floating_ui_dom23 from "@floating-ui/dom";
 import { Derivable, OffsetOptions, Placement } from "@floating-ui/dom";
 import * as solid_tiny_context5 from "solid-tiny-context";
-import * as solid_js_store10 from "solid-js/store";
+import * as solid_js_store15 from "solid-js/store";
 import * as _floating_ui_core75 from "@floating-ui/core";
 
 //#region src/primitives/floating/context.d.ts
@@ -129,7 +130,7 @@ declare const context: {
     _setOpen(open: boolean): void;
     updatePos(): Promise<void>;
   }, "setState"> & {
-    setState: solid_js_store10.SetStoreFunction<{
+    setState: solid_js_store15.SetStoreFunction<{
       x: number;
       y: number;
       open: boolean;
@@ -248,7 +249,7 @@ declare const context: {
       };
     }>;
   }, {
-    presenceState: () => string;
+    presencePhase: () => PresencePhase;
   }];
   initial(initialState?: Partial<solid_tiny_context5.MaybeSignals<{
     x: number;
@@ -369,8 +370,8 @@ declare const context: {
     };
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js23.JSX.Element;
-    }): solid_js23.JSX.Element;
+      children?: solid_js35.JSX.Element;
+    }): solid_js35.JSX.Element;
     value: [Readonly<{
       x: number;
       y: number;
@@ -610,13 +611,13 @@ declare const context: {
         }> | undefined;
       };
     }, {
-      presenceState: () => string;
+      presencePhase: () => PresencePhase;
     }, {}, {
       setOpen(open: boolean): void;
       _setOpen(open: boolean): void;
       updatePos(): Promise<void>;
     }>>, "setState"> & {
-      setState: solid_js_store10.SetStoreFunction<{
+      setState: solid_js_store15.SetStoreFunction<{
         x: number;
         y: number;
         open: boolean;
@@ -735,7 +736,7 @@ declare const context: {
         };
       }>;
     }, {
-      presenceState: () => string;
+      presencePhase: () => PresencePhase;
     }];
   };
   defaultValue: () => {

package/dist/primitives/floating/context.js

@@ -80,7 +80,7 @@ const context = createComponentState({
 			});
 		}
 	},
-	nowrapData: () => ({ presenceState: () => "" })
+	nowrapData: () => ({ presencePhase: () => "idle" })
 });
 
 //#endregion

package/dist/primitives/floating/context.jsx

@@ -80,7 +80,7 @@ const context = createComponentState({
 			});
 		}
 	},
-	nowrapData: () => ({ presenceState: () => "" })
+	nowrapData: () => ({ presencePhase: () => "idle" })
 });
 
 //#endregion

package/dist/primitives/floating/index.d.ts

@@ -1,9 +1,10 @@
 import { Trigger } from "./trigger.js";
 import { Content } from "./content.js";
-import { FloatingUiCoreProps, Placement as Placement$1 } from "./types.js";
+import { CloseableStatus, FloatingUiCoreProps, Placement as Placement$1 } from "./types.js";
 import { Root } from "./root.js";
+import * as solid_tiny_utils0 from "solid-tiny-utils";
 import * as _floating_ui_dom0 from "@floating-ui/dom";
-import * as solid_js_store9 from "solid-js/store";
+import * as solid_js_store2 from "solid-js/store";
 import * as _floating_ui_core0 from "@floating-ui/core";
 
 //#region src/primitives/floating/index.d.ts
@@ -132,7 +133,7 @@ declare const FloatingUiCore: typeof Root & {
     _setOpen(open: boolean): void;
     updatePos(): Promise<void>;
   }, "setState"> & {
-    setState: solid_js_store9.SetStoreFunction<{
+    setState: solid_js_store2.SetStoreFunction<{
       x: number;
       y: number;
       open: boolean;
@@ -251,7 +252,7 @@ declare const FloatingUiCore: typeof Root & {
       };
     }>;
   }, {
-    presenceState: () => string;
+    presencePhase: () => solid_tiny_utils0.PresencePhase;
   }];
 };
 //#endregion

package/dist/primitives/floating/trigger.js

@@ -15,7 +15,7 @@ function Trigger(props) {
 			state.trigger === "hover" && actions.setOpen(false);
 		});
 		makeEventListener(refTrigger, "click", () => {
-			state.trigger === "click" && actions.setOpen(staticData.presenceState() === "closed");
+			state.trigger === "click" && actions.setOpen(staticData.presencePhase() === "idle");
 		});
 	});
 	return createComponent(Ref, {

package/dist/primitives/floating/trigger.jsx

@@ -14,7 +14,7 @@ function Trigger(props) {
 			state.trigger === "hover" && actions.setOpen(false);
 		});
 		makeEventListener(refTrigger, "click", () => {
-			state.trigger === "click" && actions.setOpen(staticData.presenceState() === "closed");
+			state.trigger === "click" && actions.setOpen(staticData.presencePhase() === "idle");
 		});
 	});
 	return <Ref ref={mergeRefs(props.ref, (el) => {