solid-tiny-ui 0.4.0 → 0.5.0

package/dist/components/time-picker/panel.jsx

@@ -0,0 +1,108 @@
+import { CheckLine } from "../../icons/check-line.jsx";
+import { CloseLine } from "../../icons/close-line.jsx";
+import "../../icons/index.jsx";
+import { FakeScrollListCore } from "../../primitives/fake-scroll-list/index.jsx";
+import "../../primitives/index.jsx";
+import { Show, createMemo } from "solid-js";
+import { createWatch, list } from "solid-tiny-utils";
+import { createStore } from "solid-js/store";
+
+//#region src/components/time-picker/panel.tsx
+function CommonTimeList(props) {
+	return <FakeScrollListCore inViewIndex={props.inViewItem} itemHeight={props.itemHeight} items={props.items.map((v) => v.toString().padStart(2, "0"))} onInViewIndexChange={(i) => {
+		props.onChange(i);
+	}} visibleItemsCount={7}>
+      <FakeScrollListCore.Listbox>
+        {(label, key) => <FakeScrollListCore.Item class="tiny-time-picker__listbox-item" key={key}>
+            {label}
+          </FakeScrollListCore.Item>}
+      </FakeScrollListCore.Listbox>
+    </FakeScrollListCore>;
+}
+function HourList(props) {
+	return <CommonTimeList inViewItem={props.hour} itemHeight={props.itemHeight} items={list(0, 23)} onChange={(hour) => {
+		props.onChange(hour);
+	}} />;
+}
+function MinuteList(props) {
+	return <CommonTimeList inViewItem={props.minute} itemHeight={props.itemHeight} items={list(0, 59)} onChange={(minute) => {
+		props.onChange(minute);
+	}} />;
+}
+function SecondList(props) {
+	return <CommonTimeList inViewItem={props.second} itemHeight={props.itemHeight} items={list(0, 59)} onChange={(second) => {
+		props.onChange(second);
+	}} />;
+}
+function TimePanel(props) {
+	const [time, setTime] = createStore({
+		hour: 0,
+		minute: 0,
+		second: 0
+	});
+	createWatch(() => [
+		props.hour,
+		props.minute,
+		props.second
+	], ([hour, minute, second]) => {
+		setTime({
+			hour,
+			minute,
+			second
+		});
+	});
+	createWatch(() => [
+		time.hour,
+		time.minute,
+		time.second
+	], ([hour, minute, second]) => {
+		if (hour === props.hour && minute === props.minute && second === props.second) return;
+		props.onChange(hour, minute, second);
+	});
+	const typeIndex = createMemo(() => {
+		return [
+			"hour",
+			"minute",
+			"second"
+		].indexOf(props.type);
+	});
+	return <div style={{
+		width: `${props.width}px`,
+		display: "flex",
+		"flex-direction": "column",
+		position: "relative"
+	}}>
+      <div class="tiny-time-picker__thumb" style={{
+		"--tiny-time-picker-thumb-height": `${props.itemHeight}px`,
+		"--tiny-time-picker-thumb-top": `${props.itemHeight * 7 / 2 - props.itemHeight / 2}px`
+	}} />
+      <div style={{
+		width: "100%",
+		display: "flex",
+		position: "relative"
+	}}>
+        <HourList hour={time.hour} itemHeight={props.itemHeight} onChange={(hour) => setTime("hour", hour)} />
+        <Show when={typeIndex() > 0}>
+          <MinuteList itemHeight={props.itemHeight} minute={time.minute} onChange={(minute) => setTime("minute", minute)} />
+        </Show>
+        <Show when={typeIndex() > 1}>
+          <SecondList itemHeight={props.itemHeight} onChange={(second) => setTime("second", second)} second={time.second} />
+        </Show>
+      </div>
+      <div class="tiny-time-picker__action">
+        <button onClick={() => {
+		props.onCancel(time.hour, time.minute, time.second);
+	}} type="button">
+          <CloseLine />
+        </button>
+        <button onClick={() => {
+		props.onConfirm(time.hour, time.minute, time.second);
+	}} type="button">
+          <CheckLine />
+        </button>
+      </div>
+    </div>;
+}
+
+//#endregion
+export { TimePanel };

package/dist/components/time-picker/trigger.js

@@ -0,0 +1,64 @@
+import { VisuallyHidden } from "../visually-hidden/index.js";
+import { createComponent, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { Show, createMemo } from "solid-js";
+import { dataIf } from "solid-tiny-utils";
+
+//#region src/components/time-picker/trigger.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input readonly tabindex=-1 type=text>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-time-picker-trigger__item>`), _tmpl$3 = /* @__PURE__ */ template(`<button class="tiny-time-picker-trigger tiny-time-picker-trigger-vars"type=button><div class=tiny-time-picker-trigger__item>`);
+function TimeTrigger(props) {
+	const typeIndex = createMemo(() => [
+		"hour",
+		"minute",
+		"second"
+	].indexOf(props.type));
+	const toStr = (num) => {
+		if (num === null) return "";
+		return num.toString().padStart(2, "0");
+	};
+	return (() => {
+		var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
+		insert(_el$, createComponent(VisuallyHidden, { get children() {
+			var _el$2 = _tmpl$();
+			effect(() => _el$2.disabled = props.disabled);
+			return _el$2;
+		} }), _el$3);
+		insert(_el$3, () => toStr(props.hour) || "hh");
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return typeIndex() > 0;
+			},
+			get children() {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => toStr(props.minute) || "mm");
+				effect(() => setAttribute(_el$4, "data-empty", dataIf(props.minute === null)));
+				return _el$4;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return typeIndex() > 1;
+			},
+			get children() {
+				var _el$5 = _tmpl$2();
+				insert(_el$5, () => toStr(props.second) || "ss");
+				effect(() => setAttribute(_el$5, "data-empty", dataIf(props.second === null)));
+				return _el$5;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = dataIf(props.disabled), _v$2 = props.size, _v$3 = dataIf(props.hour === null);
+			_v$ !== _p$.e && setAttribute(_el$, "data-disabled", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-size", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$3, "data-empty", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+
+//#endregion
+export { TimeTrigger };

package/dist/components/time-picker/trigger.jsx

@@ -0,0 +1,37 @@
+import { VisuallyHidden } from "../visually-hidden/index.jsx";
+import { Show, createMemo } from "solid-js";
+import { dataIf } from "solid-tiny-utils";
+
+//#region src/components/time-picker/trigger.tsx
+function TimeTrigger(props) {
+	const typeIndex = createMemo(() => [
+		"hour",
+		"minute",
+		"second"
+	].indexOf(props.type));
+	const toStr = (num) => {
+		if (num === null) return "";
+		return num.toString().padStart(2, "0");
+	};
+	return <button class="tiny-time-picker-trigger tiny-time-picker-trigger-vars" data-disabled={dataIf(props.disabled)} data-size={props.size} type="button">
+      <VisuallyHidden>
+        <input disabled={props.disabled} readonly tabIndex={-1} type="text" />
+      </VisuallyHidden>
+      <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.hour === null)}>
+        {toStr(props.hour) || "hh"}
+      </div>
+      <Show when={typeIndex() > 0}>
+        <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.minute === null)}>
+          {toStr(props.minute) || "mm"}
+        </div>
+      </Show>
+      <Show when={typeIndex() > 1}>
+        <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.second === null)}>
+          {toStr(props.second) || "ss"}
+        </div>
+      </Show>
+    </button>;
+}
+
+//#endregion
+export { TimeTrigger };

package/dist/components/visually-hidden/index.js

@@ -0,0 +1,17 @@
+import visually_hidden_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/visually-hidden/visually-hidden.js";
+import { insert, template } from "solid-js/web";
+import { mountStyle } from "solid-tiny-utils";
+
+//#region src/components/visually-hidden/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span class=tiny-visually-hidden>`);
+function VisuallyHidden(props) {
+	mountStyle(visually_hidden_default, "tiny-visually-hidden");
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		return _el$;
+	})();
+}
+
+//#endregion
+export { VisuallyHidden };

package/dist/components/visually-hidden/index.jsx

@@ -0,0 +1,11 @@
+import visually_hidden_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/visually-hidden/visually-hidden.jsx";
+import { mountStyle } from "solid-tiny-utils";
+
+//#region src/components/visually-hidden/index.tsx
+function VisuallyHidden(props) {
+	mountStyle(visually_hidden_default, "tiny-visually-hidden");
+	return <span class="tiny-visually-hidden">{props.children}</span>;
+}
+
+//#endregion
+export { VisuallyHidden };

package/dist/icons/check-line.d.ts

@@ -0,0 +1,6 @@
+import * as solid_js1 from "solid-js";
+
+//#region src/icons/check-line.d.ts
+declare function CheckLine(): solid_js1.JSX.Element;
+//#endregion
+export { CheckLine };

package/dist/icons/check-line.js

@@ -0,0 +1,13 @@
+import { SvgWrapper } from "./common.js";
+import { createComponent, template } from "solid-js/web";
+
+//#region src/icons/check-line.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg><path d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"fill=currentColor></svg>`, false, true, false);
+function CheckLine() {
+	return createComponent(SvgWrapper, { get children() {
+		return _tmpl$();
+	} });
+}
+
+//#endregion
+export { CheckLine };

package/dist/icons/check-line.jsx

@@ -0,0 +1,11 @@
+import { SvgWrapper } from "./common.jsx";
+
+//#region src/icons/check-line.tsx
+function CheckLine() {
+	return <SvgWrapper>
+      <path d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z" fill="currentColor" />
+    </SvgWrapper>;
+}
+
+//#endregion
+export { CheckLine };

package/dist/icons/index.d.ts

@@ -1,3 +1,4 @@
 import { ArrowDownSLine } from "./arrow-down-s-line.js";
+import { CheckLine } from "./check-line.js";
 import { CloseLine } from "./close-line.js";
-export { ArrowDownSLine, CloseLine };
+export { ArrowDownSLine, CheckLine, CloseLine };

package/dist/icons/index.js

@@ -1,4 +1,5 @@
 import { ArrowDownSLine } from "./arrow-down-s-line.js";
+import { CheckLine } from "./check-line.js";
 import { CloseLine } from "./close-line.js";
 
-export { ArrowDownSLine, CloseLine };
+export { ArrowDownSLine, CheckLine, CloseLine };

package/dist/icons/index.jsx

@@ -1,4 +1,5 @@
 import { ArrowDownSLine } from "./arrow-down-s-line.jsx";
+import { CheckLine } from "./check-line.jsx";
 import { CloseLine } from "./close-line.jsx";
 
-export { ArrowDownSLine, CloseLine };
+export { ArrowDownSLine, CheckLine, CloseLine };

package/dist/index.d.ts

@@ -22,10 +22,11 @@ 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 { 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, RootProvider as TinyUiProvider, Tooltip, TooltipProps, getGlobalToken, context as tinyUiContext };
+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 };

package/dist/index.js

@@ -24,8 +24,9 @@ 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 { 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, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext };
+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 };

package/dist/index.jsx

@@ -24,8 +24,9 @@ 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 { 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, RootProvider as TinyUiProvider, Tooltip, getGlobalToken, context as tinyUiContext };
+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 };

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

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

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_js8 from "solid-js";
 
 //#region src/primitives/animated-group/root.d.ts
 declare function Root(props: {
   children: MaybeContextChild<typeof context>;
   activeKey?: string;
   onChange?: (key: string) => void;
-}): solid_js6.JSX.Element;
+}): solid_js8.JSX.Element;
 //#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 };

package/dist/primitives/fake-scroll-list/context.jsx

@@ -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 };

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

@@ -0,0 +1,52 @@
+import { Item } from "./item.js";
+import { Listbox } from "./listbox.js";
+import { Root } from "./root.js";
+import * as solid_js_store1 from "solid-js/store";
+
+//#region src/primitives/fake-scroll-list/index.d.ts
+
+/**
+ * create a fake scroll list component
+ *
+ * @example
+ * ```tsx
+ * <FakeScrollListCore
+ *   items={items}
+ *   visibleItemsCount={5}
+ *   itemHeight={30}
+ *   inViewIndex={inViewIndex}
+ *   onInViewIndexChange={(index) => setInViewIndex(index)}
+ * >
+ *   <FakeScrollListCore.Listbox>
+ *     {(label, index) => (
+ *       <FakeScrollListCore.Item index={index()}>
+ *         {label}
+ *       </FakeScrollListCore.Item>
+ *     )}
+ *   </FakeScrollListCore.Listbox>
+ * </FakeScrollListCore>
+ * ```
+ */
+declare const FakeScrollListCore: typeof Root & {
+  Item: typeof Item;
+  Listbox: typeof Listbox;
+  useContext: () => [Readonly<{
+    inViewIndex: number;
+    visibleItemsCount: number;
+    itemHeight: number;
+    items: string[];
+  } & {
+    shouldFake: boolean;
+    overScan: number;
+    fixedInViewIndex: number;
+  }>, Omit<{}, "setState" | "shouldFake" | "overScan" | "fixedInViewIndex"> & {
+    setState: solid_js_store1.SetStoreFunction<{
+      inViewIndex: number;
+      visibleItemsCount: number;
+      itemHeight: number;
+      items: string[];
+    }>;
+  }, {}];
+};
+//#endregion
+export { FakeScrollListCore };

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

@@ -0,0 +1,36 @@
+import { context } from "./context.js";
+import { Item } from "./item.js";
+import { Listbox } from "./listbox.js";
+import { Root } from "./root.js";
+
+//#region src/primitives/fake-scroll-list/index.ts
+/**
+* create a fake scroll list component
+*
+* @example
+* ```tsx
+* <FakeScrollListCore
+*   items={items}
+*   visibleItemsCount={5}
+*   itemHeight={30}
+*   inViewIndex={inViewIndex}
+*   onInViewIndexChange={(index) => setInViewIndex(index)}
+* >
+*   <FakeScrollListCore.Listbox>
+*     {(label, index) => (
+*       <FakeScrollListCore.Item index={index()}>
+*         {label}
+*       </FakeScrollListCore.Item>
+*     )}
+*   </FakeScrollListCore.Listbox>
+* </FakeScrollListCore>
+* ```
+*/
+const FakeScrollListCore = Object.assign(Root, {
+	Item,
+	Listbox,
+	useContext: context.useContext
+});
+
+//#endregion
+export { FakeScrollListCore };

package/dist/primitives/fake-scroll-list/index.jsx

@@ -0,0 +1,36 @@
+import { context } from "./context.jsx";
+import { Item } from "./item.jsx";
+import { Listbox } from "./listbox.jsx";
+import { Root } from "./root.jsx";
+
+//#region src/primitives/fake-scroll-list/index.ts
+/**
+* create a fake scroll list component
+*
+* @example
+* ```tsx
+* <FakeScrollListCore
+*   items={items}
+*   visibleItemsCount={5}
+*   itemHeight={30}
+*   inViewIndex={inViewIndex}
+*   onInViewIndexChange={(index) => setInViewIndex(index)}
+* >
+*   <FakeScrollListCore.Listbox>
+*     {(label, index) => (
+*       <FakeScrollListCore.Item index={index()}>
+*         {label}
+*       </FakeScrollListCore.Item>
+*     )}
+*   </FakeScrollListCore.Listbox>
+* </FakeScrollListCore>
+* ```
+*/
+const FakeScrollListCore = Object.assign(Root, {
+	Item,
+	Listbox,
+	useContext: context.useContext
+});
+
+//#endregion
+export { FakeScrollListCore };

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

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+
+//#region src/primitives/fake-scroll-list/item.d.ts
+declare function Item(props: {
+  class?: string;
+  style?: JSX.CSSProperties | string;
+  children: JSX.Element;
+  key: string;
+}): JSX.Element;
+//#endregion
+export { Item };

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

@@ -0,0 +1,30 @@
+import { context } from "./context.js";
+import { className, effect, insert, setAttribute, style, template } from "solid-js/web";
+import { combineStyle, dataIf } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/item.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function Item(props) {
+	const [state] = context.useContext();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = props.class, _v$2 = dataIf(props.key === `${state.fixedInViewIndex}`), _v$3 = props.key, _v$4 = combineStyle({ height: `${state.itemHeight}px` }, props.style);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-in-view", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "data-key", _p$.a = _v$3);
+			_p$.o = style(_el$, _v$4, _p$.o);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+}
+
+//#endregion
+export { Item };

package/dist/primitives/fake-scroll-list/item.jsx

@@ -0,0 +1,13 @@
+import { context } from "./context.jsx";
+import { combineStyle, dataIf } from "solid-tiny-utils";
+
+//#region src/primitives/fake-scroll-list/item.tsx
+function Item(props) {
+	const [state] = context.useContext();
+	return <div class={props.class} data-in-view={dataIf(props.key === `${state.fixedInViewIndex}`)} data-key={props.key} style={combineStyle({ height: `${state.itemHeight}px` }, props.style)}>
+      {props.children}
+    </div>;
+}
+
+//#endregion
+export { Item };

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

@@ -0,0 +1,8 @@
+import { JSX } from "solid-js";
+
+//#region src/primitives/fake-scroll-list/listbox.d.ts
+declare function Listbox(props: {
+  children: (label: string, key: string) => JSX.Element;
+}): JSX.Element;
+//#endregion
+export { Listbox };