solid-tiny-ui 0.5.0 → 0.6.0

package/dist/icons/subtract.d.ts

@@ -0,0 +1,7 @@
+import { IconProps } from "./common.js";
+import * as solid_js12 from "solid-js";
+
+//#region src/icons/subtract.d.ts
+declare function IconSubtract(props: IconProps): solid_js12.JSX.Element;
+//#endregion
+export { IconSubtract };

package/dist/icons/subtract.js

@@ -0,0 +1,13 @@
+import { SvgWrapper } from "./common.js";
+import { createComponent, mergeProps, template } from "solid-js/web";
+
+//#region src/icons/subtract.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg><path d="M4 12h16"stroke=currentColor stroke-width=4></svg>`, false, true, false);
+function IconSubtract(props) {
+	return createComponent(SvgWrapper, mergeProps(props, { get children() {
+		return _tmpl$();
+	} }));
+}
+
+//#endregion
+export { IconSubtract };

package/dist/icons/subtract.jsx

@@ -0,0 +1,11 @@
+import { SvgWrapper } from "./common.jsx";
+
+//#region src/icons/subtract.tsx
+function IconSubtract(props) {
+	return <SvgWrapper {...props}>
+      <path d="M4 12h16" stroke="currentColor" stroke-width="4" />
+    </SvgWrapper>;
+}
+
+//#endregion
+export { IconSubtract };

package/dist/index.d.ts

@@ -1,16 +1,29 @@
 import { ClassNames, GlobalToken, Styles } from "./utils/types.js";
+import { Alert, AlertState, AlertStatus, AlertVariant } from "./components/alert/alert.js";
+import "./components/alert/index.js";
 import { Button, ButtonColors, ButtonFields, ButtonProps, ButtonState, ButtonVariants } from "./components/buttons/basic-button/basic-button.js";
 import { StateButton, StateButtonProps } from "./components/buttons/state-button/state-button.js";
 import "./components/buttons/index.js";
-import { Combobox, ComboboxProps } from "./components/combobox/combobox.js";
-import "./components/combobox/index.js";
-import { Input, InputProps } from "./components/input/input.js";
-import "./components/input/index.js";
 import { Flex } from "./layout/flex/index.js";
-import { InputCompact } from "./layout/input-compact/index.js";
 import "./layout/index.js";
+import { DrawerHelper } from "./components/drawer/helpers.js";
+import { Drawer } from "./components/drawer/index.js";
+import { Field } from "./components/field/index.js";
+import { Checkbox } from "./components/form-components/checkbox/checkbox.js";
+import { CheckboxGroup, CheckboxOption } from "./components/form-components/checkbox-group/checkbox-group.js";
+import { Combobox, ComboboxProps } from "./components/form-components/combobox/combobox.js";
+import { NumberInput, NumberInputProps } from "./components/form-components/number-input/number-input.js";
+import { PasswordInput, PasswordInputProps } from "./components/form-components/password-input/password-input.js";
+import { RadioGroup, RadioOption } from "./components/form-components/radio-group/radio-group.js";
+import { Switcher } from "./components/form-components/switcher/switcher.js";
+import { TextField, TextFieldProps } from "./components/form-components/text-field/text-field.js";
+import { Textarea } from "./components/form-components/textarea/textarea.js";
+import { TimePicker } from "./components/form-components/time-picker/index.js";
+import "./components/form-components/index.js";
 import { ModalHelper } from "./components/modal/helpers.js";
 import { Modal } from "./components/modal/index.js";
+import { Pagination, PaginationSize } from "./components/pagination/pagination.js";
+import "./components/pagination/index.js";
 import { Popover } from "./components/popover/index.js";
 import { CircleProgress } from "./components/progress/circle-progress.js";
 import { LineProgress, LineProgressState } from "./components/progress/line-progress.js";
@@ -20,13 +33,14 @@ import { Spin } from "./components/spin/spin.js";
 import { SpinRing } from "./components/spin/spin-ring.js";
 import "./components/spin/index.js";
 import { TabItem, Tabs, TabsProps } from "./components/tabs/index.js";
-import { Textarea } from "./components/textarea/textarea.js";
-import "./components/textarea/index.js";
-import { TimePicker } from "./components/time-picker/index.js";
+import { Toast, ToastPosition, ToastType } from "./components/toaster/type.js";
+import { TinyToasterProvider } from "./components/toaster/provider.js";
+import { useToaster } from "./components/toaster/use-toaster.js";
+import "./components/toaster/index.js";
 import { Tooltip, TooltipProps } from "./components/tooltip/tooltip.js";
 import "./components/tooltip/index.js";
 import { context } from "./root-provider/context.js";
 import { RootProvider } from "./root-provider/provider.js";
 import "./root-provider/index.js";
 import { getGlobalToken } from "./utils/index.js";
-export { Button, ButtonColors, ButtonFields, ButtonProps, ButtonState, ButtonVariants, CircleProgress, type ClassNames, Combobox, ComboboxProps, Flex, type GlobalToken, Input, InputCompact, InputProps, LineProgress, LineProgressState, LoadingBar, Modal, ModalHelper, Popover, Spin, SpinRing, StateButton, StateButtonProps, type Styles, TabItem, Tabs, TabsProps, Textarea, TimePicker, RootProvider as TinyUiProvider, Tooltip, TooltipProps, getGlobalToken, context as tinyUiContext };
+export { Alert, AlertState, AlertStatus, AlertVariant, Button, ButtonColors, ButtonFields, ButtonProps, ButtonState, ButtonVariants, Checkbox, CheckboxGroup, CheckboxOption, CircleProgress, type ClassNames, Combobox, ComboboxProps, Drawer, DrawerHelper, Field, Flex, type GlobalToken, LineProgress, LineProgressState, LoadingBar, Modal, ModalHelper, NumberInput, NumberInputProps, Pagination, PaginationSize, PasswordInput, PasswordInputProps, Popover, RadioGroup, RadioOption, Spin, SpinRing, StateButton, StateButtonProps, type Styles, Switcher, TabItem, Tabs, TabsProps, TextField, TextFieldProps, Textarea, TimePicker, TinyToasterProvider, RootProvider as TinyUiProvider, Toast, ToastPosition, ToastType, Tooltip, TooltipProps, getGlobalToken, context as tinyUiContext, useToaster };

package/dist/index.js

@@ -1,4 +1,6 @@
 import { getGlobalToken } from "./utils/index.js";
+import { Alert } from "./components/alert/alert.js";
+import "./components/alert/index.js";
 import { Button } from "./components/buttons/basic-button/basic-button.js";
 import { SpinRing } from "./components/spin/spin-ring.js";
 import { Spin } from "./components/spin/spin.js";
@@ -7,26 +9,37 @@ import { Tooltip } from "./components/tooltip/tooltip.js";
 import "./components/tooltip/index.js";
 import { StateButton } from "./components/buttons/state-button/state-button.js";
 import "./components/buttons/index.js";
-import { Popover } from "./components/popover/index.js";
-import { Combobox } from "./components/combobox/combobox.js";
-import "./components/combobox/index.js";
-import { Input } from "./components/input/input.js";
-import "./components/input/index.js";
 import { Flex } from "./layout/flex/index.js";
-import { InputCompact } from "./layout/input-compact/index.js";
 import "./layout/index.js";
+import { DrawerHelper } from "./components/drawer/helpers.js";
+import { Drawer } from "./components/drawer/index.js";
+import { Field } from "./components/field/index.js";
+import { Checkbox } from "./components/form-components/checkbox/checkbox.js";
+import { CheckboxGroup } from "./components/form-components/checkbox-group/checkbox-group.js";
+import { Popover } from "./components/popover/index.js";
+import { Combobox } from "./components/form-components/combobox/combobox.js";
+import { NumberInput } from "./components/form-components/number-input/number-input.js";
+import { PasswordInput } from "./components/form-components/password-input/password-input.js";
+import { RadioGroup } from "./components/form-components/radio-group/radio-group.js";
+import { Switcher } from "./components/form-components/switcher/switcher.js";
+import { TextField } from "./components/form-components/text-field/text-field.js";
+import { Textarea } from "./components/form-components/textarea/textarea.js";
+import { TimePicker } from "./components/form-components/time-picker/index.js";
+import "./components/form-components/index.js";
 import { ModalHelper } from "./components/modal/helpers.js";
 import { Modal } from "./components/modal/index.js";
+import { Pagination } from "./components/pagination/pagination.js";
+import "./components/pagination/index.js";
 import { CircleProgress } from "./components/progress/circle-progress.js";
 import { LineProgress } from "./components/progress/line-progress.js";
 import { LoadingBar } from "./components/progress/loading-bar.js";
 import "./components/progress/index.js";
 import { Tabs } from "./components/tabs/index.js";
-import { Textarea } from "./components/textarea/textarea.js";
-import "./components/textarea/index.js";
-import { TimePicker } from "./components/time-picker/index.js";
+import { TinyToasterProvider } from "./components/toaster/provider.js";
+import { useToaster } from "./components/toaster/use-toaster.js";
+import "./components/toaster/index.js";
 import { context } from "./root-provider/context.js";
 import { RootProvider } from "./root-provider/provider.js";
 import "./root-provider/index.js";
 
-export { Button, CircleProgress, Combobox, Flex, Input, InputCompact, LineProgress, LoadingBar, Modal, ModalHelper, Popover, Spin, SpinRing, StateButton, Tabs, Textarea, TimePicker, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext };
+export { Alert, Button, Checkbox, CheckboxGroup, CircleProgress, Combobox, Drawer, DrawerHelper, Field, Flex, LineProgress, LoadingBar, Modal, ModalHelper, NumberInput, Pagination, PasswordInput, Popover, RadioGroup, Spin, SpinRing, StateButton, Switcher, Tabs, TextField, Textarea, TimePicker, TinyToasterProvider, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext, useToaster };

package/dist/index.jsx

@@ -1,4 +1,6 @@
 import { getGlobalToken } from "./utils/index.jsx";
+import { Alert } from "./components/alert/alert.jsx";
+import "./components/alert/index.jsx";
 import { Button } from "./components/buttons/basic-button/basic-button.jsx";
 import { SpinRing } from "./components/spin/spin-ring.jsx";
 import { Spin } from "./components/spin/spin.jsx";
@@ -7,26 +9,37 @@ import { Tooltip } from "./components/tooltip/tooltip.jsx";
 import "./components/tooltip/index.jsx";
 import { StateButton } from "./components/buttons/state-button/state-button.jsx";
 import "./components/buttons/index.jsx";
-import { Popover } from "./components/popover/index.jsx";
-import { Combobox } from "./components/combobox/combobox.jsx";
-import "./components/combobox/index.jsx";
-import { Input } from "./components/input/input.jsx";
-import "./components/input/index.jsx";
 import { Flex } from "./layout/flex/index.jsx";
-import { InputCompact } from "./layout/input-compact/index.jsx";
 import "./layout/index.jsx";
+import { DrawerHelper } from "./components/drawer/helpers.jsx";
+import { Drawer } from "./components/drawer/index.jsx";
+import { Field } from "./components/field/index.jsx";
+import { Checkbox } from "./components/form-components/checkbox/checkbox.jsx";
+import { CheckboxGroup } from "./components/form-components/checkbox-group/checkbox-group.jsx";
+import { Popover } from "./components/popover/index.jsx";
+import { Combobox } from "./components/form-components/combobox/combobox.jsx";
+import { NumberInput } from "./components/form-components/number-input/number-input.jsx";
+import { PasswordInput } from "./components/form-components/password-input/password-input.jsx";
+import { RadioGroup } from "./components/form-components/radio-group/radio-group.jsx";
+import { Switcher } from "./components/form-components/switcher/switcher.jsx";
+import { TextField } from "./components/form-components/text-field/text-field.jsx";
+import { Textarea } from "./components/form-components/textarea/textarea.jsx";
+import { TimePicker } from "./components/form-components/time-picker/index.jsx";
+import "./components/form-components/index.jsx";
 import { ModalHelper } from "./components/modal/helpers.jsx";
 import { Modal } from "./components/modal/index.jsx";
+import { Pagination } from "./components/pagination/pagination.jsx";
+import "./components/pagination/index.jsx";
 import { CircleProgress } from "./components/progress/circle-progress.jsx";
 import { LineProgress } from "./components/progress/line-progress.jsx";
 import { LoadingBar } from "./components/progress/loading-bar.jsx";
 import "./components/progress/index.jsx";
 import { Tabs } from "./components/tabs/index.jsx";
-import { Textarea } from "./components/textarea/textarea.jsx";
-import "./components/textarea/index.jsx";
-import { TimePicker } from "./components/time-picker/index.jsx";
+import { TinyToasterProvider } from "./components/toaster/provider.jsx";
+import { useToaster } from "./components/toaster/use-toaster.jsx";
+import "./components/toaster/index.jsx";
 import { context } from "./root-provider/context.jsx";
 import { RootProvider } from "./root-provider/provider.jsx";
 import "./root-provider/index.jsx";
 
-export { Button, CircleProgress, Combobox, Flex, Input, InputCompact, LineProgress, LoadingBar, Modal, ModalHelper, Popover, Spin, SpinRing, StateButton, Tabs, Textarea, TimePicker, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext };
+export { Alert, Button, Checkbox, CheckboxGroup, CircleProgress, Combobox, Drawer, DrawerHelper, Field, Flex, LineProgress, LoadingBar, Modal, ModalHelper, NumberInput, Pagination, PasswordInput, Popover, RadioGroup, Spin, SpinRing, StateButton, Switcher, Tabs, TextField, Textarea, TimePicker, TinyToasterProvider, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext, useToaster };

package/dist/layout/flex/index.d.ts

@@ -1,18 +1,19 @@
+import { OmitComponentProps } from "../../utils/types.js";
 import { JSX, ValidComponent } from "solid-js";
 
 //#region src/layout/flex/index.d.ts
-declare function Flex(props: {
+declare function Flex<T extends ValidComponent>(props: {
   children: JSX.Element;
   vertical?: boolean;
+  reverse?: boolean;
   wrap?: boolean;
   justify?: JSX.CSSProperties["justify-content"];
   align?: JSX.CSSProperties["align-items"];
   gap?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | number;
   flex?: JSX.CSSProperties["flex"];
-  as?: ValidComponent;
-  class?: string;
+  as?: T;
   style?: JSX.CSSProperties | string;
   inline?: boolean;
-}): JSX.Element;
+} & OmitComponentProps<T, "children">): JSX.Element;
 //#endregion
 export { Flex };

package/dist/layout/flex/index.js

@@ -1,6 +1,6 @@
 import { getGlobalToken } from "../../utils/index.js";
-import { Dynamic, createComponent, memo } from "solid-js/web";
-import { createMemo } from "solid-js";
+import { Dynamic, createComponent, memo, mergeProps } from "solid-js/web";
+import { createMemo, splitProps } from "solid-js";
 import { combineStyle, isString } from "solid-tiny-utils";
 
 //#region src/layout/flex/index.tsx
@@ -10,28 +10,38 @@ function Flex(props) {
 		if (isString(gapProp)) return getGlobalToken(`space-${gapProp}`);
 		return `${gapProp}px`;
 	});
-	return createComponent(Dynamic, {
-		get ["class"]() {
-			return props.class;
-		},
+	const [local, others] = splitProps(props, [
+		"children",
+		"vertical",
+		"wrap",
+		"justify",
+		"align",
+		"gap",
+		"flex",
+		"as",
+		"style",
+		"inline",
+		"reverse"
+	]);
+	return createComponent(Dynamic, mergeProps(others, {
 		get component() {
 			return props.as ?? "div";
 		},
 		get style() {
 			return combineStyle({
-				display: props.inline ? "inline-flex" : "flex",
-				"flex-direction": props.vertical ? "column" : "row",
-				"flex-wrap": props.wrap ? "wrap" : "nowrap",
-				"justify-content": props.justify,
-				"align-items": props.align,
+				display: local.inline ? "inline-flex" : "flex",
+				"flex-direction": local.vertical ? `column${local.reverse ? "-reverse" : ""}` : `row${local.reverse ? "-reverse" : ""}`,
+				"flex-wrap": local.wrap ? "wrap" : "nowrap",
+				"justify-content": local.justify,
+				"align-items": local.align,
 				gap: gap(),
-				flex: props.flex
-			}, props.style);
+				flex: local.flex
+			}, local.style);
 		},
 		get children() {
-			return props.children;
+			return local.children;
 		}
-	});
+	}));
 }
 
 //#endregion

package/dist/layout/flex/index.jsx

@@ -1,5 +1,5 @@
 import { getGlobalToken } from "../../utils/index.jsx";
-import { createMemo } from "solid-js";
+import { createMemo, splitProps } from "solid-js";
 import { combineStyle, isString } from "solid-tiny-utils";
 import { Dynamic } from "solid-js/web";
 
@@ -10,16 +10,29 @@ function Flex(props) {
 		if (isString(gapProp)) return getGlobalToken(`space-${gapProp}`);
 		return `${gapProp}px`;
 	});
-	return <Dynamic class={props.class} component={props.as ?? "div"} style={combineStyle({
-		display: props.inline ? "inline-flex" : "flex",
-		"flex-direction": props.vertical ? "column" : "row",
-		"flex-wrap": props.wrap ? "wrap" : "nowrap",
-		"justify-content": props.justify,
-		"align-items": props.align,
+	const [local, others] = splitProps(props, [
+		"children",
+		"vertical",
+		"wrap",
+		"justify",
+		"align",
+		"gap",
+		"flex",
+		"as",
+		"style",
+		"inline",
+		"reverse"
+	]);
+	return <Dynamic {...others} component={props.as ?? "div"} style={combineStyle({
+		display: local.inline ? "inline-flex" : "flex",
+		"flex-direction": local.vertical ? `column${local.reverse ? "-reverse" : ""}` : `row${local.reverse ? "-reverse" : ""}`,
+		"flex-wrap": local.wrap ? "wrap" : "nowrap",
+		"justify-content": local.justify,
+		"align-items": local.align,
 		gap: gap(),
-		flex: props.flex
-	}, props.style)}>
-      {props.children}
+		flex: local.flex
+	}, local.style)}>
+      {local.children}
     </Dynamic>;
 }
 

package/dist/layout/index.d.ts

@@ -1,2 +1 @@
-import { Flex } from "./flex/index.js";
-import { InputCompact } from "./input-compact/index.js";
+import { Flex } from "./flex/index.js";

package/dist/layout/index.js

@@ -1,2 +1 @@
 import { Flex } from "./flex/index.js";
-import { InputCompact } from "./input-compact/index.js";

package/dist/layout/index.jsx

@@ -1,2 +1 @@
 import { Flex } from "./flex/index.jsx";
-import { InputCompact } from "./input-compact/index.jsx";

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

@@ -1,13 +1,13 @@
-import * as solid_js13 from "solid-js";
+import * as solid_js31 from "solid-js";
 import * as solid_tiny_context1 from "solid-tiny-context";
-import * as solid_js_store5 from "solid-js/store";
+import * as solid_js_store11 from "solid-js/store";
 
 //#region src/primitives/animated-group/context.d.ts
 declare const context: {
   useContext: () => [Readonly<{
     active: string;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store5.SetStoreFunction<{
+    setState: solid_js_store11.SetStoreFunction<{
       active: string;
     }>;
   }, {}];
@@ -15,14 +15,14 @@ declare const context: {
     active: string;
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js13.JSX.Element;
-    }): solid_js13.JSX.Element;
+      children?: solid_js31.JSX.Element;
+    }): solid_js31.JSX.Element;
     value: [Readonly<{
       active: string;
     } & {}>, Omit<ThisType<solid_tiny_context1.RealContextThis<{
       active: string;
     }, {}, {}, {}>>, "setState"> & {
-      setState: solid_js_store5.SetStoreFunction<{
+      setState: solid_js_store11.SetStoreFunction<{
         active: string;
       }>;
     }, {}];

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_js8 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_js8.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 };