solid-tiny-ui 0.4.0 → 0.6.0

package/dist/primitives/animated-group/panel.js

@@ -1,4 +1,5 @@
 import { extraAriasAndDatasets } from "../../utils/index.js";
+import { getAnimationDurationMs } from "../../utils/duration.js";
 import { context } from "./context.js";
 import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
 import { Show, createSignal } from "solid-js";
@@ -15,15 +16,15 @@ function Content(props) {
 			get ["class"]() {
 				return props.class;
 			},
-			get ["data-closing"]() {
-				return dataIf(props.status === "closing");
+			get ["data-entering"]() {
+				return dataIf(["pre-enter", "entering"].includes(props.presencePhase));
+			},
+			get ["data-exiting"]() {
+				return dataIf(props.presencePhase === "exiting");
 			},
 			get ["data-key"]() {
 				return props.key;
 			},
-			get ["data-opening"]() {
-				return dataIf(props.status === "opening");
-			},
 			get style() {
 				return props.style;
 			}
@@ -35,20 +36,20 @@ function Content(props) {
 function Panel(props) {
 	const [state] = context.useContext();
 	const [ref, setRef] = createSignal();
-	const [show, presenceState] = createPresence({
-		show: () => state.active === props.key,
-		element: ref
+	const presence = createPresence(() => state.active === props.key, {
+		enterDuration: () => getAnimationDurationMs(ref()),
+		exitDuration: () => getAnimationDurationMs(ref())
 	});
 	return createComponent(Show, {
 		get when() {
-			return show();
+			return presence.isMounted();
 		},
 		get children() {
 			return createComponent(Content, mergeProps(props, {
-				ref: setRef,
-				get status() {
-					return presenceState();
-				}
+				get presencePhase() {
+					return presence.phase();
+				},
+				ref: setRef
 			}));
 		}
 	});

package/dist/primitives/animated-group/panel.jsx

@@ -1,23 +1,24 @@
 import { extraAriasAndDatasets } from "../../utils/index.jsx";
+import { getAnimationDurationMs } from "../../utils/duration.jsx";
 import { context } from "./context.jsx";
 import { Show, createSignal } from "solid-js";
 import { createPresence, dataIf } from "solid-tiny-utils";
 
 //#region src/primitives/animated-group/panel.tsx
 function Content(props) {
-	return <div {...extraAriasAndDatasets(props)} class={props.class} data-closing={dataIf(props.status === "closing")} data-key={props.key} data-opening={dataIf(props.status === "opening")} ref={props.ref} style={props.style}>
+	return <div {...extraAriasAndDatasets(props)} class={props.class} data-entering={dataIf(["pre-enter", "entering"].includes(props.presencePhase))} data-exiting={dataIf(props.presencePhase === "exiting")} data-key={props.key} ref={props.ref} style={props.style}>
       {props.children}
     </div>;
 }
 function Panel(props) {
 	const [state] = context.useContext();
 	const [ref, setRef] = createSignal();
-	const [show, presenceState] = createPresence({
-		show: () => state.active === props.key,
-		element: ref
+	const presence = createPresence(() => state.active === props.key, {
+		enterDuration: () => getAnimationDurationMs(ref()),
+		exitDuration: () => getAnimationDurationMs(ref())
 	});
-	return <Show when={show()}>
-      <Content {...props} ref={setRef} status={presenceState()} />
+	return <Show when={presence.isMounted()}>
+      <Content {...props} presencePhase={presence.phase()} ref={setRef} />
     </Show>;
 }
 

package/dist/primitives/animated-group/root.d.ts

@@ -1,12 +1,12 @@
-import { MaybeContextChild } from "../../utils/types.js";
 import { context } from "./context.js";
-import * as solid_js6 from "solid-js";
+import * as solid_js0 from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
 
 //#region src/primitives/animated-group/root.d.ts
 declare function Root(props: {
-  children: MaybeContextChild<typeof context>;
+  children: MaybeCallableChild<ReturnType<typeof context.useContext>>;
   activeKey?: string;
   onChange?: (key: string) => void;
-}): solid_js6.JSX.Element;
+}): solid_js0.JSX.Element;
 //#endregion
 export { Root };

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

@@ -1,7 +1,6 @@
 import { context } from "./context.js";
-import { callMaybeContextChild } from "../../utils/types.js";
 import { createComponent } from "solid-js/web";
-import { createWatch } from "solid-tiny-utils";
+import { callMaybeCallableChild, createWatch } from "solid-tiny-utils";
 
 //#region src/primitives/animated-group/root.tsx
 function Root(props) {
@@ -11,7 +10,7 @@ function Root(props) {
 		if (active !== props.activeKey) props.onChange?.(active);
 	});
 	return createComponent(Context.Provider, { get children() {
-		return callMaybeContextChild(Context.value, props.children);
+		return callMaybeCallableChild(props.children, ...Context.value);
 	} });
 }
 

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

@@ -1,6 +1,5 @@
 import { context } from "./context.jsx";
-import { callMaybeContextChild } from "../../utils/types.jsx";
-import { createWatch } from "solid-tiny-utils";
+import { callMaybeCallableChild, createWatch } from "solid-tiny-utils";
 
 //#region src/primitives/animated-group/root.tsx
 function Root(props) {
@@ -10,7 +9,7 @@ function Root(props) {
 		if (active !== props.activeKey) props.onChange?.(active);
 	});
 	return <Context.Provider>
-      {callMaybeContextChild(Context.value, props.children)}
+      {callMaybeCallableChild(props.children, ...Context.value)}
     </Context.Provider>;
 }
 

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

@@ -0,0 +1,63 @@
+import * as solid_js33 from "solid-js";
+import * as solid_tiny_context3 from "solid-tiny-context";
+import * as solid_js_store13 from "solid-js/store";
+
+//#region src/primitives/checkbox/context.d.ts
+declare const context: {
+  useContext: () => [Readonly<{
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store13.SetStoreFunction<{
+      checked: boolean;
+      indeterminate: boolean;
+      disabled: boolean;
+      name: string;
+      value: string;
+    }>;
+  }, {}];
+  initial(initialState?: Partial<solid_tiny_context3.MaybeSignals<{
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+  }>> | undefined): {
+    Provider(props: {
+      children?: solid_js33.JSX.Element;
+    }): solid_js33.JSX.Element;
+    value: [Readonly<{
+      checked: boolean;
+      indeterminate: boolean;
+      disabled: boolean;
+      name: string;
+      value: string;
+    } & {}>, Omit<ThisType<solid_tiny_context3.RealContextThis<{
+      checked: boolean;
+      indeterminate: boolean;
+      disabled: boolean;
+      name: string;
+      value: string;
+    }, {}, {}, {}>>, "setState"> & {
+      setState: solid_js_store13.SetStoreFunction<{
+        checked: boolean;
+        indeterminate: boolean;
+        disabled: boolean;
+        name: string;
+        value: string;
+      }>;
+    }, {}];
+  };
+  defaultValue: () => {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+  };
+};
+//#endregion
+export { context };

package/dist/primitives/checkbox/context.js

@@ -0,0 +1,13 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/checkbox/context.ts
+const context = createComponentState({ state: () => ({
+	checked: false,
+	indeterminate: false,
+	disabled: false,
+	name: "",
+	value: "on"
+}) });
+
+//#endregion
+export { context };

package/dist/primitives/checkbox/context.jsx

@@ -0,0 +1,13 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/checkbox/context.ts
+const context = createComponentState({ state: () => ({
+	checked: false,
+	indeterminate: false,
+	disabled: false,
+	name: "",
+	value: "on"
+}) });
+
+//#endregion
+export { context };

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/context.js

@@ -0,0 +1,30 @@
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/fake-scroll-list/context.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: any */
+const context = createComponentState({
+	state: () => ({
+		inViewIndex: 0,
+		visibleItemsCount: 5,
+		itemHeight: 30,
+		items: []
+	}),
+	getters: {
+		shouldFake() {
+			return this.state.items.length > this.state.visibleItemsCount;
+		},
+		overScan() {
+			if (!this.state.shouldFake) return 0;
+			return Math.ceil(this.state.visibleItemsCount / 2) + 3;
+		},
+		fixedInViewIndex() {
+			let index = this.state.inViewIndex;
+			if (index < 0) index = this.state.items.length + index % this.state.items.length;
+			if (index >= this.state.items.length) index %= this.state.items.length;
+			return index;
+		}
+	}
+});
+
+//#endregion
+export { context };