solid-tiny-ui 0.4.0 → 0.6.0

package/dist/components/drawer/helpers.jsx

@@ -0,0 +1,60 @@
+import { CloseLine } from "../../icons/close-line.jsx";
+import { ModalCore } from "../../primitives/modal/index.jsx";
+import drawer_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/drawer/drawer-helper.jsx";
+import { Flex } from "../../layout/flex/index.jsx";
+import "../../layout/index.jsx";
+import "../../primitives/index.jsx";
+import { Show, onMount, splitProps } from "solid-js";
+import { combineClass, combineStyle, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/drawer/helpers.tsx
+function Root(props) {
+	mountStyle(drawer_helper_default, "tiny-drawer-helper");
+	const [local, others] = splitProps(props, ["class", "style"]);
+	return <Flex vertical {...others} class={combineClass("tiny-drawer-helper", local.class)} style={combineStyle({ height: "100%" }, local.style)} />;
+}
+function Header(props) {
+	return <div class="tiny-drawer__header">
+      {props.title}
+      <Show when={props.closable}>
+        <Close>
+          <button class="tiny-drawer__header-close" type="button">
+            <CloseLine />
+          </button>
+        </Close>
+      </Show>
+    </div>;
+}
+function Body(props) {
+	return <div class="tiny-drawer__body">{props.children}</div>;
+}
+function Footer(props) {
+	const [local, others] = splitProps(props, [
+		"gap",
+		"justify",
+		"align",
+		"class",
+		"style"
+	]);
+	return <Flex {...others} align={local.align ?? "center"} class={combineClass("tiny-drawer__footer", local.class)} gap={local.gap ?? "sm"} justify={local.justify ?? "flex-end"} style={combineStyle({}, local.style)} />;
+}
+function Close(props) {
+	const [, actions] = ModalCore.useContext();
+	let ref;
+	onMount(() => {
+		makeEventListener(ref, "click", () => {
+			actions.setState("open", false);
+		});
+	});
+	return <Ref ref={ref}>{props.children}</Ref>;
+}
+const DrawerHelper = Object.assign(Root, {
+	Header,
+	Body,
+	Footer,
+	Close
+});
+
+//#endregion
+export { DrawerHelper };

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,42 @@
+import { ClassNames, Styles } from "../../utils/types.js";
+import { Trigger } from "../../primitives/modal/trigger.js";
+import { ModalCore } from "../../primitives/modal/index.js";
+import { DrawerHelper } from "./helpers.js";
+import { JSX } from "solid-js";
+import * as solid_tiny_utils2 from "solid-tiny-utils";
+import * as solid_js_store8 from "solid-js/store";
+
+//#region src/components/drawer/index.d.ts
+declare function Root(props: Parameters<typeof ModalCore>[0]): JSX.Element;
+declare function Content(props: {
+  children: JSX.Element;
+  placement?: "left" | "right" | "top" | "bottom";
+  /**
+   * width or height can be set according to the placement
+   */
+  size?: string;
+  classNames?: ClassNames<"mask" | "wrapper" | "content">;
+  styles?: Styles<"mask" | "wrapper" | "content">;
+}): JSX.Element;
+declare const Drawer: typeof Root & {
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  useContext: () => [Readonly<{
+    open: boolean;
+    refContent: HTMLElement | null;
+    closeOnClickMask: boolean;
+    closeOnEsc: boolean;
+  } & {}>, Omit<{}, "setState"> & {
+    setState: solid_js_store8.SetStoreFunction<{
+      open: boolean;
+      refContent: HTMLElement | null;
+      closeOnClickMask: boolean;
+      closeOnEsc: boolean;
+    }>;
+  }, {
+    isMounted: () => boolean;
+    presencePhase: () => solid_tiny_utils2.PresencePhase;
+  }];
+};
+//#endregion
+export { Drawer };

package/dist/components/drawer/index.js

@@ -0,0 +1,95 @@
+import { createClassStyles } from "../../utils/index.js";
+import drawer_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/drawer/drawer.js";
+import { ModalCore } from "../../primitives/modal/index.js";
+import { DrawerHelper } from "./helpers.js";
+import { createComponent } from "solid-js/web";
+import { createMemo } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/drawer/index.tsx
+function Root(props) {
+	return createComponent(ModalCore, props);
+}
+function Content(props) {
+	mountStyle(drawer_default, "tiny-drawer");
+	const [, , { presencePhase }] = ModalCore.useContext();
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles);
+	const placement = () => props.placement || "right";
+	const isEntering = createMemo(() => ["pre-enter", "entering"].includes(presencePhase()));
+	const isExiting = createMemo(() => ["exiting"].includes(presencePhase()));
+	const getSize = () => {
+		if (placement() === "left" || placement() === "right") return {
+			width: props.size || "378px",
+			height: "100%"
+		};
+		return {
+			width: "100%",
+			height: props.size || "378px"
+		};
+	};
+	const translateFrom = createMemo(() => {
+		switch (placement()) {
+			case "left": return "-100%, 0";
+			case "right": return "100%, 0";
+			case "top": return "0, -100%";
+			case "bottom": return "0, 100%";
+			default: return "";
+		}
+	});
+	return createComponent(ModalCore.Portal, { get children() {
+		return [createComponent(ModalCore.Mask, {
+			get ["class"]() {
+				return combineClass("tiny-drawer__mask", classes().mask);
+			},
+			get ["data-entering"]() {
+				return dataIf(isEntering());
+			},
+			get ["data-exiting"]() {
+				return dataIf(isExiting());
+			},
+			get style() {
+				return styles().mask;
+			}
+		}), createComponent(ModalCore.ContentWrapper, {
+			get ["class"]() {
+				return combineClass("tiny-drawer__wrapper", classes().wrapper);
+			},
+			get style() {
+				return combineStyle({}, styles().wrapper);
+			},
+			get children() {
+				return createComponent(ModalCore.Content, {
+					get ["class"]() {
+						return combineClass("tiny-drawer__content", classes().content);
+					},
+					get ["data-entering"]() {
+						return dataIf(isEntering());
+					},
+					get ["data-exiting"]() {
+						return dataIf(isExiting());
+					},
+					get ["data-placement"]() {
+						return placement();
+					},
+					get style() {
+						return combineStyle({
+							...getSize(),
+							"--translate-from": translateFrom()
+						}, styles().content);
+					},
+					get children() {
+						return props.children;
+					}
+				});
+			}
+		})];
+	} });
+}
+const Drawer = Object.assign(Root, {
+	Trigger: ModalCore.Trigger,
+	Content,
+	useContext: ModalCore.useContext
+});
+
+//#endregion
+export { Drawer };

package/dist/components/drawer/index.jsx

@@ -0,0 +1,57 @@
+import { createClassStyles } from "../../utils/index.jsx";
+import drawer_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/drawer/drawer.jsx";
+import { ModalCore } from "../../primitives/modal/index.jsx";
+import { DrawerHelper } from "./helpers.jsx";
+import { createMemo } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/drawer/index.tsx
+function Root(props) {
+	return <ModalCore {...props} />;
+}
+function Content(props) {
+	mountStyle(drawer_default, "tiny-drawer");
+	const [, , { presencePhase }] = ModalCore.useContext();
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles);
+	const placement = () => props.placement || "right";
+	const isEntering = createMemo(() => ["pre-enter", "entering"].includes(presencePhase()));
+	const isExiting = createMemo(() => ["exiting"].includes(presencePhase()));
+	const getSize = () => {
+		if (placement() === "left" || placement() === "right") return {
+			width: props.size || "378px",
+			height: "100%"
+		};
+		return {
+			width: "100%",
+			height: props.size || "378px"
+		};
+	};
+	const translateFrom = createMemo(() => {
+		switch (placement()) {
+			case "left": return "-100%, 0";
+			case "right": return "100%, 0";
+			case "top": return "0, -100%";
+			case "bottom": return "0, 100%";
+			default: return "";
+		}
+	});
+	return <ModalCore.Portal>
+      <ModalCore.Mask class={combineClass("tiny-drawer__mask", classes().mask)} data-entering={dataIf(isEntering())} data-exiting={dataIf(isExiting())} style={styles().mask} />
+      <ModalCore.ContentWrapper class={combineClass("tiny-drawer__wrapper", classes().wrapper)} style={combineStyle({}, styles().wrapper)}>
+        <ModalCore.Content class={combineClass("tiny-drawer__content", classes().content)} data-entering={dataIf(isEntering())} data-exiting={dataIf(isExiting())} data-placement={placement()} style={combineStyle({
+		...getSize(),
+		"--translate-from": translateFrom()
+	}, styles().content)}>
+          {props.children}
+        </ModalCore.Content>
+      </ModalCore.ContentWrapper>
+    </ModalCore.Portal>;
+}
+const Drawer = Object.assign(Root, {
+	Trigger: ModalCore.Trigger,
+	Content,
+	useContext: ModalCore.useContext
+});
+
+//#endregion
+export { Drawer };

package/dist/components/field/index.d.ts

@@ -0,0 +1,10 @@
+import { Description, RequiredIndicator, Root, Title } from "./parts.js";
+
+//#region src/components/field/index.d.ts
+declare const Field: typeof Root & {
+  Title: typeof Title;
+  Description: typeof Description;
+  RequiredIndicator: typeof RequiredIndicator;
+};
+//#endregion
+export { Field };

package/dist/components/field/index.js

@@ -0,0 +1,11 @@
+import { Description, RequiredIndicator, Root, Title } from "./parts.js";
+
+//#region src/components/field/index.ts
+const Field = Object.assign(Root, {
+	Title,
+	Description,
+	RequiredIndicator
+});
+
+//#endregion
+export { Field };

package/dist/components/field/index.jsx

@@ -0,0 +1,11 @@
+import { Description, RequiredIndicator, Root, Title } from "./parts.jsx";
+
+//#region src/components/field/index.ts
+const Field = Object.assign(Root, {
+	Title,
+	Description,
+	RequiredIndicator
+});
+
+//#endregion
+export { Field };

package/dist/components/field/parts.d.ts

@@ -0,0 +1,24 @@
+import { OmitComponentProps } from "../../utils/types.js";
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import { JSX } from "solid-js";
+import { MaybeCallableChild } from "solid-tiny-utils";
+
+//#region src/components/field/parts.d.ts
+declare function Root(props: {
+  orientation?: "horizontal" | "vertical";
+  children?: MaybeCallableChild<[{
+    uniqueId: string;
+  }]>;
+} & OmitComponentProps<typeof Flex, "vertical" | "children">): JSX.Element;
+declare function Title(props: {
+  children?: JSX.Element;
+} & OmitComponentProps<typeof Flex<"label">, "children">): JSX.Element;
+declare function RequiredIndicator(props: {
+  show?: boolean;
+}): JSX.Element;
+declare function Description(props: {
+  children?: JSX.Element;
+}): JSX.Element;
+//#endregion
+export { Description, RequiredIndicator, Root, Title };

package/dist/components/field/parts.js

@@ -0,0 +1,69 @@
+import { Flex } from "../../layout/flex/index.js";
+import "../../layout/index.js";
+import field_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/field/field.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Show, createUniqueId, splitProps } from "solid-js";
+import { callMaybeCallableChild, combineClass, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/field/parts.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span aria-hidden=true class=tiny-field__required-indicator>*`), _tmpl$2 = /* @__PURE__ */ template(`<p class=tiny-field__description>`);
+function Root(props) {
+	mountStyle(field_default, "tiny-field");
+	const [local, others] = splitProps(props, [
+		"orientation",
+		"children",
+		"gap"
+	]);
+	return createComponent(Flex, mergeProps(others, {
+		get gap() {
+			return local.gap ?? "sm";
+		},
+		get vertical() {
+			return local.orientation !== "horizontal";
+		},
+		get children() {
+			return callMaybeCallableChild(local.children, { uniqueId: `field_${createUniqueId()}` });
+		}
+	}));
+}
+function Title(props) {
+	const [local, others] = splitProps(props, [
+		"children",
+		"class",
+		"gap"
+	]);
+	return createComponent(Flex, mergeProps(others, {
+		get as() {
+			return others.for ? "label" : "div";
+		},
+		get ["class"]() {
+			return combineClass("tiny-field__label", local.class);
+		},
+		get gap() {
+			return local.gap ?? "xs";
+		},
+		get children() {
+			return local.children;
+		}
+	}));
+}
+function RequiredIndicator(props) {
+	return createComponent(Show, {
+		get when() {
+			return props.show;
+		},
+		get children() {
+			return _tmpl$();
+		}
+	});
+}
+function Description(props) {
+	return (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, () => props.children);
+		return _el$2;
+	})();
+}
+
+//#endregion
+export { Description, RequiredIndicator, Root, Title };

package/dist/components/field/parts.jsx

@@ -0,0 +1,41 @@
+import { Flex } from "../../layout/flex/index.jsx";
+import "../../layout/index.jsx";
+import field_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/field/field.jsx";
+import { Show, createUniqueId, splitProps } from "solid-js";
+import { callMaybeCallableChild, combineClass, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/field/parts.tsx
+function Root(props) {
+	mountStyle(field_default, "tiny-field");
+	const [local, others] = splitProps(props, [
+		"orientation",
+		"children",
+		"gap"
+	]);
+	return <Flex {...others} gap={local.gap ?? "sm"} vertical={local.orientation !== "horizontal"}>
+      {callMaybeCallableChild(local.children, { uniqueId: `field_${createUniqueId()}` })}
+    </Flex>;
+}
+function Title(props) {
+	const [local, others] = splitProps(props, [
+		"children",
+		"class",
+		"gap"
+	]);
+	return <Flex {...others} as={others.for ? "label" : "div"} class={combineClass("tiny-field__label", local.class)} gap={local.gap ?? "xs"}>
+      {local.children}
+    </Flex>;
+}
+function RequiredIndicator(props) {
+	return <Show when={props.show}>
+      <span aria-hidden="true" class="tiny-field__required-indicator">
+        *
+      </span>
+    </Show>;
+}
+function Description(props) {
+	return <p class="tiny-field__description">{props.children}</p>;
+}
+
+//#endregion
+export { Description, RequiredIndicator, Root, Title };

package/dist/components/form-components/checkbox/checkbox.d.ts

@@ -0,0 +1,26 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/form-components/checkbox/checkbox.d.ts
+declare function Checkbox(props: {
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  value?: string;
+  name?: string;
+  id?: string;
+  children?: JSX.Element;
+  indeterminate?: boolean;
+  classNames?: ClassNames<"root" | "box" | "indicator" | "label", {
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+  }>;
+  styles?: Styles<"root" | "box" | "indicator" | "label", {
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+  }>;
+}): JSX.Element;
+//#endregion
+export { Checkbox };

package/dist/components/form-components/checkbox/checkbox.js

@@ -0,0 +1,118 @@
+import { CheckBold } from "../../../icons/check-bold.js";
+import { IconSubtract } from "../../../icons/subtract.js";
+import "../../../icons/index.js";
+import { createClassStyles } from "../../../utils/index.js";
+import { CheckboxCore } from "../../../primitives/checkbox/index.js";
+import "../../../primitives/index.js";
+import checkbox_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/checkbox/checkbox.js";
+import { className, createComponent, effect, insert, style, template } from "solid-js/web";
+import { Show, children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/checkbox/checkbox.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function Checkbox(props) {
+	mountStyle(checkbox_default, "tiny-checkbox");
+	const label = children(() => props.children);
+	return createComponent(CheckboxCore, {
+		get checked() {
+			return props.checked;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get indeterminate() {
+			return props.indeterminate;
+		},
+		get name() {
+			return props.name;
+		},
+		get onChange() {
+			return props.onChange;
+		},
+		get value() {
+			return props.value;
+		},
+		children: (state) => {
+			const [stateClasses, stateStyles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+				checked: state.checked,
+				disabled: state.disabled,
+				indeterminate: state.indeterminate
+			}));
+			return createComponent(CheckboxCore.Label, {
+				get ["class"]() {
+					return combineClass("tiny-checkbox", stateClasses().root);
+				},
+				get ["data-checked"]() {
+					return dataIf(state.checked);
+				},
+				get ["data-disabled"]() {
+					return dataIf(state.disabled);
+				},
+				get ["data-indeterminate"]() {
+					return dataIf(state.indeterminate);
+				},
+				get style() {
+					return combineStyle({}, stateStyles().root);
+				},
+				get children() {
+					return [
+						createComponent(CheckboxCore.Input, { get id() {
+							return props.id;
+						} }),
+						(() => {
+							var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+							insert(_el$2, createComponent(Show, {
+								get fallback() {
+									return createComponent(IconSubtract, { size: "100%" });
+								},
+								get when() {
+									return !props.indeterminate;
+								},
+								get children() {
+									return createComponent(CheckBold, { size: "100%" });
+								}
+							}));
+							effect((_p$) => {
+								var _v$ = combineClass("tiny-checkbox-box", stateClasses().box), _v$2 = combineStyle({}, stateStyles().box), _v$3 = combineClass("tiny-checkbox-indicator", stateClasses().indicator), _v$4 = combineStyle({}, stateStyles().indicator);
+								_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+								_p$.t = style(_el$, _v$2, _p$.t);
+								_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+								_p$.o = style(_el$2, _v$4, _p$.o);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0
+							});
+							return _el$;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return label();
+							},
+							get children() {
+								var _el$3 = _tmpl$2();
+								insert(_el$3, label);
+								effect((_p$) => {
+									var _v$5 = combineClass("tiny-checkbox-label", stateClasses().label), _v$6 = combineStyle({}, stateStyles().label);
+									_v$5 !== _p$.e && className(_el$3, _p$.e = _v$5);
+									_p$.t = style(_el$3, _v$6, _p$.t);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0
+								});
+								return _el$3;
+							}
+						})
+					];
+				}
+			});
+		}
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/components/form-components/checkbox/checkbox.jsx

@@ -0,0 +1,42 @@
+import { CheckBold } from "../../../icons/check-bold.jsx";
+import { IconSubtract } from "../../../icons/subtract.jsx";
+import "../../../icons/index.jsx";
+import { createClassStyles } from "../../../utils/index.jsx";
+import { CheckboxCore } from "../../../primitives/checkbox/index.jsx";
+import "../../../primitives/index.jsx";
+import checkbox_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/checkbox/checkbox.jsx";
+import { Show, children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/checkbox/checkbox.tsx
+function Checkbox(props) {
+	mountStyle(checkbox_default, "tiny-checkbox");
+	const label = children(() => props.children);
+	return <CheckboxCore checked={props.checked} disabled={props.disabled} indeterminate={props.indeterminate} name={props.name} onChange={props.onChange} value={props.value}>
+      {(state) => {
+		const [stateClasses, stateStyles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+			checked: state.checked,
+			disabled: state.disabled,
+			indeterminate: state.indeterminate
+		}));
+		return <CheckboxCore.Label class={combineClass("tiny-checkbox", stateClasses().root)} data-checked={dataIf(state.checked)} data-disabled={dataIf(state.disabled)} data-indeterminate={dataIf(state.indeterminate)} style={combineStyle({}, stateStyles().root)}>
+            <CheckboxCore.Input id={props.id} />
+            <div class={combineClass("tiny-checkbox-box", stateClasses().box)} style={combineStyle({}, stateStyles().box)}>
+              <div class={combineClass("tiny-checkbox-indicator", stateClasses().indicator)} style={combineStyle({}, stateStyles().indicator)}>
+                <Show fallback={<IconSubtract size="100%" />} when={!props.indeterminate}>
+                  <CheckBold size="100%" />
+                </Show>
+              </div>
+            </div>
+            <Show when={label()}>
+              <span class={combineClass("tiny-checkbox-label", stateClasses().label)} style={combineStyle({}, stateStyles().label)}>
+                {label()}
+              </span>
+            </Show>
+          </CheckboxCore.Label>;
+	}}
+    </CheckboxCore>;
+}
+
+//#endregion
+export { Checkbox };

package/dist/components/form-components/checkbox/index.d.ts

@@ -0,0 +1 @@
+import { Checkbox } from "./checkbox.js";

package/dist/components/form-components/checkbox/index.js

@@ -0,0 +1 @@
+import { Checkbox } from "./checkbox.js";

package/dist/components/form-components/checkbox/index.jsx

@@ -0,0 +1 @@
+import { Checkbox } from "./checkbox.jsx";

package/dist/components/form-components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,26 @@
+import { ClassNames, OmitComponentProps, Styles } from "../../../utils/types.js";
+import { Flex } from "../../../layout/flex/index.js";
+import "../../../layout/index.js";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/components/form-components/checkbox-group/checkbox-group.d.ts
+interface CheckboxOption<T> {
+  label: JSX.Element;
+  value: T;
+  disabled?: boolean;
+}
+declare function CheckboxGroup<T extends string | number>(props: {
+  options?: CheckboxOption<T>[];
+  value?: T[];
+  onChange?: (value: T[]) => void;
+  disabled?: boolean;
+  name?: string;
+  classNames?: ClassNames<"root", {
+    disabled: boolean;
+  }>;
+  styles?: Styles<"root", {
+    disabled: boolean;
+  }>;
+} & OmitComponentProps<typeof Flex, "children">): JSX.Element;
+//#endregion
+export { CheckboxGroup, CheckboxOption };