@stamcat/craftsman 0.0.27 → 0.0.29

package/AGENTS.md

@@ -30,7 +30,9 @@ import { Select } from "@stamcat/craftsman/Select";
 import { Text } from "@stamcat/craftsman/Text";
 import { Textarea } from "@stamcat/craftsman/Textarea";
 import { TimePicker } from "@stamcat/craftsman/TimePicker";
+import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
 import { Toggle } from "@stamcat/craftsman/Toggle";
+import { Tooltip } from "@stamcat/craftsman/Tooltip";
 import { Notice } from "@stamcat/craftsman/Notice";
 import { SortableList } from "@stamcat/craftsman/SortableList";
 ```

package/README.md

@@ -1,6 +1,12 @@
 # @stamcat/craftsman
 
-Craftsman design system components and styling utilities.
+A lightweight, themeable React component library and design-system toolkit. Craftsman ships accessible, ready-to-style form controls, overlays, and layout primitives — plus a small set of theming and styling utilities — so you can build a consistent UI without pulling in a heavyweight framework.
+
+- **Themeable by design** — override look and feel with a single `ThemeProvider` and CSS custom properties, no CSS-in-JS runtime required.
+- **Tree-shakeable component entry points** — import only what you use (`@stamcat/craftsman/Button`, `@stamcat/craftsman/Input`, etc.).
+- **React Server Component friendly** — works with Next.js App Router and other RSC setups.
+
+📖 Full component documentation and live examples: [stamcat.github.io/craftsman](https://stamcat.github.io/craftsman)
 
 ## Installation
 
@@ -8,12 +14,37 @@ Craftsman design system components and styling utilities.
 npm install @stamcat/craftsman
 ```
 
-## RSC-safe setup
+## Getting started
+
+1. Import the package's global styles once at the root of your app.
+2. Wrap your app in `ThemeProvider`, optionally passing a theme object to customize CSS variables.
+3. Import components from their individual entry points and use them like any other React component.
+
+```tsx
+import { ThemeProvider } from "@stamcat/craftsman/styles";
+import { Button } from "@stamcat/craftsman/Button";
+import { Input } from "@stamcat/craftsman/Input";
+import "@stamcat/craftsman/styles/globalStyles";
+
+const appTheme = {
+	root: {
+		"--w-gutter": "16px",
+	},
+};
+
+export default function App() {
+	return (
+		<ThemeProvider theme={appTheme}>
+			<Input label="Name" placeholder="Jane Doe" />
+			<Button>Submit</Button>
+		</ThemeProvider>
+	);
+}
+```
 
-Use this pattern in React Server Component architectures (for example Next.js App Router):
+### RSC-safe setup
 
-1. Import package global styles once at the application root.
-2. Render `ThemeProvider` at the root with your theme object.
+Use this pattern in React Server Component architectures (for example Next.js App Router). Render `ThemeProvider` at the root with your theme object, and import global styles once at the application root.
 
 ```tsx
 import { ThemeProvider } from "@stamcat/craftsman/styles";
@@ -36,15 +67,35 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-## Component imports
+## Available components
 
-Use component entry points:
+Each component has its own package entry point, e.g. `@stamcat/craftsman/Button`.
 
-```tsx
-import { Button } from "@stamcat/craftsman/Button";
-import { Input } from "@stamcat/craftsman/Input";
-import { Modal } from "@stamcat/craftsman/Modal";
-```
+| Component | Entry point |
+| --- | --- |
+| Button | `@stamcat/craftsman/Button` |
+| Carousel | `@stamcat/craftsman/Carousel` |
+| Checkbox | `@stamcat/craftsman/Checkbox` |
+| DatePicker | `@stamcat/craftsman/DatePicker` |
+| DateRangePicker | `@stamcat/craftsman/DateRangePicker` |
+| DateTimePicker | `@stamcat/craftsman/DateTimePicker` |
+| Input | `@stamcat/craftsman/Input` |
+| InputNumber | `@stamcat/craftsman/InputNumber` |
+| InputPassword | `@stamcat/craftsman/InputPassword` |
+| InputPhone | `@stamcat/craftsman/InputPhone` |
+| Loader | `@stamcat/craftsman/Loader` |
+| Modal | `@stamcat/craftsman/Modal` |
+| Notice | `@stamcat/craftsman/Notice` |
+| Pagination | `@stamcat/craftsman/Pagination` |
+| Progress | `@stamcat/craftsman/Progress` |
+| RadioButton | `@stamcat/craftsman/RadioButton` |
+| Select | `@stamcat/craftsman/Select` |
+| SortableList | `@stamcat/craftsman/SortableList` |
+| Text | `@stamcat/craftsman/Text` |
+| Textarea | `@stamcat/craftsman/Textarea` |
+| TimePicker | `@stamcat/craftsman/TimePicker` |
+| Toggle | `@stamcat/craftsman/Toggle` |
+| Tooltip | `@stamcat/craftsman/Tooltip` |
 
 ## Styling notes
 

package/_virtual/_rolldown/runtime.esm.js

@@ -1,23 +1,11 @@
 //#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
+var e = Object.defineProperty, t = (t, n) => {
 	let r = {};
-	for (var i in e) t(r, i, {
-		get: e[i],
+	for (var i in t) e(r, i, {
+		get: t[i],
 		enumerable: !0
 	});
-	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
-}, c = (e, i, o, s) => {
-	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
-		get: ((e) => i[e]).bind(null, d),
-		enumerable: !(s = n(i, d)) || s.enumerable
-	});
-	return e;
-}, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
-	value: n,
-	enumerable: !0
-}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
 //#endregion
-export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };
+export { t as __exportAll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -30,12 +30,9 @@
     "country-flag-icons": "1.6.20",
     "dompurify": "3.4.13",
     "embla-carousel-react": "8.6.0",
-    "pure-react-carousel": "1.35.0",
-    "react": "19.2.7",
     "react-date-picker": "12.0.2",
     "react-datetime-picker": "7.0.2",
     "react-device-detect": "2.2.3",
-    "react-dom": "19.2.7",
     "react-icons": "5.7.0",
     "react-international-phone": "4.8.0",
     "react-intl": "10.1.20",
@@ -45,6 +42,10 @@
     "typescript-plugin-css-modules": "5.2.0",
     "zod": "4.4.3"
   },
+  "peerDependencies": {
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
   "devDependencies": {},
   "overrides": {
     "postcss": "8.5.23",

package/src/components/Carousel/Carousel2.esm.js

@@ -1,68 +1,68 @@
 "use client";
 import { Button as e } from "../Button/Button.esm.js";
 import { Pagination as t } from "../Pagination/Pagination2.esm.js";
-import n from "../../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.esm.js";
 import './Carousel.css';/* empty css             */
-import r from "clsx";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useSyncExternalStore as s } from "react";
-import { FaAngleLeft as c, FaAngleRight as l, FaCircle as u, FaRegCircle as d } from "react-icons/fa6";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useSyncExternalStore as o } from "react";
+import { FaAngleLeft as s, FaAngleRight as c, FaCircle as l, FaRegCircle as u } from "react-icons/fa6";
+import d from "embla-carousel-react";
 //#region src/components/Carousel/Carousel.tsx
 var f = (f) => {
-	let { slides: p = [], className: m, style: h, buttons: g = !0, pagination: _ = "dots", ...v } = f, [y, b] = n(v), x = o((e) => b ? (b.on("select", e).on("reInit", e), () => {
+	let { slides: p = [], className: m, style: h, buttons: g = !0, pagination: _ = "dots", ...v } = f, [y, b] = d(v), x = a((e) => b ? (b.on("select", e).on("reInit", e), () => {
 		b.off("select", e), b.off("reInit", e);
-	}) : () => {}, [b]), S = s(x, () => !!b?.canScrollPrev(), () => !1), C = s(x, () => !!b?.canScrollNext(), () => !1), w = s(x, () => b?.selectedScrollSnap() ?? 0, () => 0), T = () => b?.scrollPrev(), E = () => b?.scrollNext(), D = (e) => {
+	}) : () => {}, [b]), S = o(x, () => !!b?.canScrollPrev(), () => !1), C = o(x, () => !!b?.canScrollNext(), () => !1), w = o(x, () => b?.selectedScrollSnap() ?? 0, () => 0), T = () => b?.scrollPrev(), E = () => b?.scrollNext(), D = (e) => {
 		let t = parseInt(e.currentTarget.value, 10) || 0;
 		b?.scrollTo(t);
 	};
-	return /* @__PURE__ */ a("div", {
-		className: r("carousel", m),
+	return /* @__PURE__ */ i("div", {
+		className: n("carousel", m),
 		style: h,
-		children: [/* @__PURE__ */ i("div", {
+		children: [/* @__PURE__ */ r("div", {
 			className: "carousel__viewport",
 			ref: y,
-			children: /* @__PURE__ */ i("div", {
+			children: /* @__PURE__ */ r("div", {
 				className: "carousel__container",
-				children: p.map((e, t) => /* @__PURE__ */ i("div", {
+				children: p.map((e, t) => /* @__PURE__ */ r("div", {
 					className: "carousel__slide",
 					children: e
 				}, `slide-${t}`))
 			})
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ i("div", {
 			className: "carousel__controls",
 			children: [
-				g && /* @__PURE__ */ a("div", {
+				g && /* @__PURE__ */ i("div", {
 					className: "carousel__buttons",
-					children: [/* @__PURE__ */ i(e, {
+					children: [/* @__PURE__ */ r(e, {
 						variant: "text",
 						onClick: T,
 						disabled: !S,
 						name: "prev",
-						children: /* @__PURE__ */ i(c, {
+						children: /* @__PURE__ */ r(s, {
 							size: 24,
 							"aria-label": "prev"
 						})
-					}), /* @__PURE__ */ i(e, {
+					}), /* @__PURE__ */ r(e, {
 						variant: "text",
 						onClick: E,
 						disabled: !C,
 						name: "next",
-						children: /* @__PURE__ */ i(l, {
+						children: /* @__PURE__ */ r(c, {
 							size: 24,
 							"aria-label": "next"
 						})
 					})]
 				}),
-				_ === "dots" && /* @__PURE__ */ i("div", {
+				_ === "dots" && /* @__PURE__ */ r("div", {
 					className: "carousel__dots",
-					children: p.map((t, n) => /* @__PURE__ */ i(e, {
+					children: p.map((t, n) => /* @__PURE__ */ r(e, {
 						variant: "text",
 						value: n,
 						onClick: D,
-						children: i(w === n ? u : d, { size: 16 })
+						children: r(w === n ? l : u, { size: 16 })
 					}, `dot-${n}`))
 				}),
-				_ === "numbers" && /* @__PURE__ */ i(t, {
+				_ === "numbers" && /* @__PURE__ */ r(t, {
 					total: p.length,
 					current: w,
 					onChange: D

package/src/components/DateRangePicker/DateRangePicker2.esm.js

@@ -2,25 +2,25 @@
 import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
 import './DateRangePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
 /* empty css                    */
-import t from "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.esm.js";
-import n from "clsx";
-import { jsx as r } from "react/jsx-runtime";
-import { useId as i } from "react";
-import { FaRegCalendar as a, FaX as o } from "react-icons/fa6";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import { FaRegCalendar as i, FaX as a } from "react-icons/fa6";
+import { DateRangePicker as o } from "@wojtekmaj/react-daterange-picker";
 //#region src/components/DateRangePicker/DateRangePicker.tsx
 var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
-	let h = i();
-	return /* @__PURE__ */ r(e, {
+	let h = r();
+	return /* @__PURE__ */ n(e, {
 		id: c || h,
-		className: n("dateRangePicker", p),
+		className: t("dateRangePicker", p),
 		label: s,
 		labelPosition: l,
 		error: d,
 		required: u,
 		style: f,
-		children: /* @__PURE__ */ r(t, {
-			calendarIcon: /* @__PURE__ */ r(a, { size: 16 }),
-			clearIcon: /* @__PURE__ */ r(o, { size: 14 }),
+		children: /* @__PURE__ */ n(o, {
+			calendarIcon: /* @__PURE__ */ n(i, { size: 16 }),
+			clearIcon: /* @__PURE__ */ n(a, { size: 14 }),
 			...m
 		})
 	});

package/src/components/DateTimePicker/DateTimePicker2.esm.js

@@ -4,17 +4,17 @@ import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
 import './DateTimePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css                              */
 import { resolveLocale as n } from "../TimePicker/utilities.esm.js";
 import { TimePickerDisplay as r } from "../TimePicker/TimePickerDisplay.esm.js";
-import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
 /* empty css                   */
-import a from "clsx";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
-import { FaRegCalendar as f, FaX as p } from "react-icons/fa6";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { FaRegCalendar as d, FaX as f } from "react-icons/fa6";
+import { isMobile as p } from "react-device-detect";
 import { DateTimePicker as m } from "react-datetime-picker";
 //#region src/components/DateTimePicker/DateTimePicker.tsx
-var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
-	let O = l(), k = g || O, A = u(null), [j, M] = d(!1), N = n(S);
-	c(() => {
+var h = ({ label: h, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
+	let O = c(), k = g || O, A = l(null), [j, M] = u(!1), N = n(S);
+	s(() => {
 		if (!j) return;
 		let e = (e) => {
 			let t = e.target;
@@ -25,7 +25,7 @@ var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1,
 		};
 	}, [j]);
 	let P = () => {
-		if (!h.isMobile && T instanceof Date) {
+		if (!p && T instanceof Date) {
 			M(!0);
 			return;
 		}
@@ -33,40 +33,40 @@ var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1,
 	}, F = (e) => {
 		e.target instanceof HTMLInputElement && P();
 	}, I = (e) => {
-		h.isMobile && e.key === "Enter" && M(!1);
+		p && e.key === "Enter" && M(!1);
 	}, L = (e) => {
 		let [t, n] = e.split(":"), r = Number(t), i = Number(n);
 		if (Number.isNaN(r) || Number.isNaN(i)) return;
 		let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
 		a.setHours(r, i, 0, 0), E?.(a);
 	};
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ a("div", {
 		ref: A,
 		className: "dateTimePicker",
 		onKeyDown: I,
-		children: /* @__PURE__ */ s(t, {
+		children: /* @__PURE__ */ o(t, {
 			id: k,
 			onFocus: F,
-			className: a(x, "dateTimePicker_wrapper"),
-			label: i,
+			className: i(x, "dateTimePicker_wrapper"),
+			label: h,
 			labelPosition: _,
 			error: y,
 			required: v,
 			style: b,
 			value: T instanceof Date ? T.toISOString() : void 0,
-			children: [/* @__PURE__ */ o(m, {
+			children: [/* @__PURE__ */ a(m, {
 				isClockOpen: !1,
 				onClockOpen: P,
 				onClockClose: () => {},
 				onCalendarOpen: () => M(!1),
-				calendarIcon: /* @__PURE__ */ o(f, { size: 16 }),
-				clearIcon: /* @__PURE__ */ o(p, { size: 14 }),
+				calendarIcon: /* @__PURE__ */ a(d, { size: 16 }),
+				clearIcon: /* @__PURE__ */ a(f, { size: 14 }),
 				value: T,
 				onChange: E,
 				...D
-			}), j && /* @__PURE__ */ o("div", {
+			}), j && /* @__PURE__ */ a("div", {
 				className: "dateTimePicker__time-display",
-				children: /* @__PURE__ */ o(r, {
+				children: /* @__PURE__ */ a(r, {
 					value: e(T, S),
 					onChange: L,
 					locale: N,
@@ -79,4 +79,4 @@ var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1,
 	});
 };
 //#endregion
-export { g as DateTimePicker };
+export { h as DateTimePicker };

package/src/components/SortableList/ListItem.esm.js

@@ -1,14 +1,14 @@
 "use client";
-import { combine as e } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.esm.js";
-import { draggable as t, dropTargetForElements as n } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.esm.js";
-import { isItemData as r } from "./utilities.esm.js";
-import i from "clsx";
-import { jsx as a } from "react/jsx-runtime";
-import { useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { isItemData as e } from "./utilities.esm.js";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { draggable as s, dropTargetForElements as c } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
+import { combine as l } from "@atlaskit/pragmatic-drag-and-drop/utils/combine";
 //#region src/components/SortableList/ListItem.tsx
 function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h }) {
-	let [g, _] = l(null), [v, y] = l(null), [b, x] = l(!1), [S, C] = l(null), w = c(null), T = c(null), E = f(u, d);
-	return s(() => {
+	let [g, _] = o(null), [v, y] = o(null), [b, x] = o(!1), [S, C] = o(null), w = a(null), T = a(null), E = f(u, d);
+	return i(() => {
 		w.current = g;
 		let e = w.current;
 		if (!e) return;
@@ -18,24 +18,24 @@ function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h
 		!r || window.matchMedia("(prefers-reduced-motion: reduce)").matches || (e.style.transition = "none", e.style.transform = `translateY(${r}px)`, requestAnimationFrame(() => {
 			e.style.transition = "", e.style.transform = "";
 		}));
-	}, [g, d]), o(() => {
+	}, [g, d]), r(() => {
 		if (!g || m) return;
-		let i = {
+		let t = {
 			key: E,
 			index: d,
 			listId: h,
 			item: u
 		};
-		return e(t({
+		return l(s({
 			element: g,
 			dragHandle: v ?? void 0,
-			getInitialData: () => i,
+			getInitialData: () => t,
 			onDragStart: () => x(!0),
 			onDrop: () => x(!1)
-		}), n({
+		}), c({
 			element: g,
-			getData: () => i,
-			canDrop: ({ source: e }) => r(e.data) && e.data.key !== E,
+			getData: () => t,
+			canDrop: ({ source: t }) => e(t.data) && t.data.key !== E,
 			onDrag: ({ location: e }) => {
 				let t = g.getBoundingClientRect(), n = e.current.input.clientY > t.top + t.height / 2;
 				C(n ? "bottom" : "top");
@@ -51,9 +51,9 @@ function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h
 		m,
 		h,
 		u
-	]), /* @__PURE__ */ a("li", {
+	]), /* @__PURE__ */ n("li", {
 		ref: _,
-		className: i("sortable-list-item", b && "dragging", S && `drop-${S}`),
+		className: t("sortable-list-item", b && "dragging", S && `drop-${S}`),
 		children: p({
 			item: u,
 			index: d,

package/src/components/SortableList/SortableList2.esm.js

@@ -1,20 +1,20 @@
 "use client";
-import { monitorForElements as e } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.esm.js";
-import { reorder as t } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/reorder.esm.js";
 import './SortableList.css';/* empty css                 */
-import { isItemData as n } from "./utilities.esm.js";
-import { SortableListItem as r } from "./ListItem.esm.js";
-import i from "clsx";
-import { jsx as a } from "react/jsx-runtime";
-import { useEffect as o, useId as s } from "react";
+import { isItemData as e } from "./utilities.esm.js";
+import { SortableListItem as t } from "./ListItem.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useEffect as i, useId as a } from "react";
+import { monitorForElements as o } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
+import { reorder as s } from "@atlaskit/pragmatic-drag-and-drop/utils/reorder";
 //#region src/components/SortableList/SortableList.tsx
 var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, className: p, style: m, listId: h, onReceive: g }) => {
-	let _ = s(), v = h ?? _, y = (e, n) => {
-		let r = c.findIndex((t, n) => l(t, n) === e), i = c.findIndex((e, t) => l(e, t) === n);
-		r === -1 || i === -1 || r === i || d(t({
+	let _ = a(), v = h ?? _, y = (e, t) => {
+		let n = c.findIndex((t, n) => l(t, n) === e), r = c.findIndex((e, n) => l(e, n) === t);
+		n === -1 || r === -1 || n === r || d(s({
 			list: c,
-			startIndex: r,
-			finishIndex: i
+			startIndex: n,
+			finishIndex: r
 		}));
 	}, b = (e) => {
 		let t = c.findIndex((t, n) => l(t, n) === e);
@@ -23,12 +23,12 @@ var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, classN
 		let n = c.findIndex((e, n) => l(e, n) === t);
 		g?.(e, n === -1 ? c.length : n);
 	};
-	return o(() => {
-		if (!f) return e({ onDrop: ({ source: e, location: t }) => {
-			let r = t.current.dropTargets[0];
-			if (!r || !n(e.data) || !n(r.data)) return;
-			let i = e.data.listId, a = r.data.listId, o = i === v, s = a === v;
-			o && s ? y(e.data.key, r.data.key) : o ? b(e.data.key) : s && g && x(e.data.item, r.data.key);
+	return i(() => {
+		if (!f) return o({ onDrop: ({ source: t, location: n }) => {
+			let r = n.current.dropTargets[0];
+			if (!r || !e(t.data) || !e(r.data)) return;
+			let i = t.data.listId, a = r.data.listId, o = i === v, s = a === v;
+			o && s ? y(t.data.key, r.data.key) : o ? b(t.data.key) : s && g && x(t.data.item, r.data.key);
 		} });
 	}, [
 		c,
@@ -37,17 +37,17 @@ var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, classN
 		f,
 		v,
 		g
-	]), /* @__PURE__ */ a("ul", {
-		className: i("sortable-list", p),
+	]), /* @__PURE__ */ r("ul", {
+		className: n("sortable-list", p),
 		style: m,
-		children: c.map((e, t) => /* @__PURE__ */ a(r, {
+		children: c.map((e, n) => /* @__PURE__ */ r(t, {
 			item: e,
-			index: t,
+			index: n,
 			getKey: l,
 			renderItem: u,
 			disabled: f,
 			listId: v
-		}, l(e, t)))
+		}, l(e, n)))
 	});
 };
 //#endregion

package/src/components/TimePicker/TimePicker2.esm.js

@@ -4,29 +4,29 @@ import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
 import './TimePicker.css';/* empty css               */
 import { resolveLocale as n } from "./utilities.esm.js";
 import { TimePickerDisplay as r } from "./TimePickerDisplay.esm.js";
-import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useEffect as s, useState as c } from "react";
-import { FaClock as l, FaRegClock as u, FaX as d } from "react-icons/fa6";
-import { autoUpdate as f, flip as p, offset as m, shift as h, useFloating as g } from "@floating-ui/react-dom";
-import { TimePicker as _ } from "react-time-picker";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as o, useState as s } from "react";
+import { FaClock as c, FaRegClock as l, FaX as u } from "react-icons/fa6";
+import { autoUpdate as d, flip as f, offset as p, shift as m, useFloating as h } from "@floating-ui/react-dom";
+import { TimePicker as g } from "react-time-picker";
+import { isMobile as _ } from "react-device-detect";
 //#region src/components/TimePicker/TimePicker.tsx
-var v = i(), y = (i) => {
-	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = i, [A, j] = c(null), [M, N] = c(null), { floatingStyles: P } = g({
+var v = (v) => {
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = s(null), [M, N] = s(null), { floatingStyles: P } = h({
 		placement: "bottom-start",
 		strategy: "absolute",
-		whileElementsMounted: f,
+		whileElementsMounted: d,
 		middleware: [
-			m(4),
-			p(),
-			h()
+			p(4),
+			f(),
+			m()
 		],
 		elements: {
 			reference: A,
 			floating: M
 		}
-	}), [F, I] = c(!1), L = n(b);
-	return s(() => {
+	}), [F, I] = s(!1), L = n(b);
+	return o(() => {
 		if (!F) return;
 		let e = (e) => {
 			A?.contains(e.target) || M?.contains(e.target) || I(!1);
@@ -38,50 +38,50 @@ var v = i(), y = (i) => {
 		F,
 		A,
 		M
-	]), /* @__PURE__ */ o("div", {
+	]), /* @__PURE__ */ a("div", {
 		className: "timePicker",
 		ref: j,
 		onFocus: (e) => {
-			v.isMobile || e.target instanceof HTMLInputElement && I(!0);
+			_ || e.target instanceof HTMLInputElement && I(!0);
 		},
 		onKeyDown: (e) => {
 			e.key === "Enter" && I(!1);
 		},
 		children: [
-			O && /* @__PURE__ */ a("input", {
+			O && /* @__PURE__ */ i("input", {
 				type: "hidden",
 				name: O,
 				value: typeof S == "string" ? S : "",
 				readOnly: !0
 			}),
-			/* @__PURE__ */ a(t, {
+			/* @__PURE__ */ i(t, {
 				label: w,
 				labelPosition: T,
 				error: E,
 				required: D,
-				children: /* @__PURE__ */ o("div", {
+				children: /* @__PURE__ */ a("div", {
 					className: "timePicker__field",
-					children: [/* @__PURE__ */ a(_, {
+					children: [/* @__PURE__ */ i(g, {
 						...k,
 						value: S,
 						onChange: C,
 						locale: L,
 						required: D,
 						disableClock: !0,
-						clearIcon: /* @__PURE__ */ a(d, { size: 14 })
-					}), !v.isMobile && /* @__PURE__ */ a(e, {
+						clearIcon: /* @__PURE__ */ i(u, { size: 14 })
+					}), !_ && /* @__PURE__ */ i(e, {
 						type: "button",
 						variant: "text",
 						onClick: () => I((e) => !e),
 						"aria-label": F ? "Hide time picker" : "Show time picker",
 						"aria-pressed": F,
-						disabled: i.disabled,
+						disabled: v.disabled,
 						className: "input-view-toggle",
-						children: a(F ? l : u, { size: 16 })
+						children: i(F ? c : l, { size: 16 })
 					})]
 				})
 			}),
-			!v.isMobile && /* @__PURE__ */ a(r, {
+			!_ && /* @__PURE__ */ i(r, {
 				value: S,
 				onChange: (e) => C?.(e),
 				locale: L,
@@ -95,4 +95,4 @@ var v = i(), y = (i) => {
 	});
 };
 //#endregion
-export { y as TimePicker };
+export { v as TimePicker };

package/src/components/TimePicker/TimePickerWheel.esm.js

@@ -1,24 +1,24 @@
 "use client";
-import e from "../../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.esm.js";
 import "./constants.esm.js";
-import { inactivateEmblaTransform as t, setContainerStyles as n, setSlideStyles as r, snapOnPointerUp as i } from "./utilities.esm.js";
-import a from "clsx";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useCallback as c, useEffect as l, useLayoutEffect as u, useRef as d } from "react";
+import { inactivateEmblaTransform as e, setContainerStyles as t, setSlideStyles as n, snapOnPointerUp as r } from "./utilities.esm.js";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u } from "react";
+import d from "embla-carousel-react";
 //#region src/components/TimePicker/TimePickerWheel.tsx
 var f = (f) => {
-	let { slideCount: p, perspective: m, label: h, loop: g = !1, offset: _ = 0, slides: v, selectedIndex: y, onSelect: b, disabled: x } = f, [S, C] = e({
+	let { slideCount: p, perspective: m, label: h, loop: g = !1, offset: _ = 0, slides: v, selectedIndex: y, onSelect: b, disabled: x } = f, [S, C] = d({
 		loop: g,
 		axis: "y",
 		dragFree: !0,
 		containScroll: !1
-	}), w = d(null), T = d(b);
-	u(() => {
+	}), w = u(null), T = u(b);
+	l(() => {
 		T.current = b;
 	});
-	let E = p * 20, D = g ? 0 : 20, O = c((e) => {
-		n(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, n) => {
-			r(e, n, g, p, E);
+	let E = p * 20, D = g ? 0 : 20, O = s((e) => {
+		t(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, r) => {
+			n(e, r, g, p, E);
 		});
 	}, [
 		g,
@@ -26,32 +26,32 @@ var f = (f) => {
 		D,
 		E
 	]);
-	return l(() => {
+	return c(() => {
 		if (!C) return () => {};
-		let e = (e) => T.current?.(e.selectedScrollSnap());
-		return C.on("pointerUp", i), C.on("scroll", O), C.on("reInit", t), C.on("reInit", O), C.on("select", e), t(C), O(C), () => {
-			C.off("pointerUp", i), C.off("scroll", O), C.off("reInit", t), C.off("reInit", O), C.off("select", e);
+		let t = (e) => T.current?.(e.selectedScrollSnap());
+		return C.on("pointerUp", r), C.on("scroll", O), C.on("reInit", e), C.on("reInit", O), C.on("select", t), e(C), O(C), () => {
+			C.off("pointerUp", r), C.off("scroll", O), C.off("reInit", e), C.off("reInit", O), C.off("select", t);
 		};
-	}, [C, O]), l(() => {
+	}, [C, O]), c(() => {
 		!C || y === void 0 || C.selectedScrollSnap() !== y && C.scrollTo(y);
-	}, [C, y]), /* @__PURE__ */ s("div", {
-		className: a("ios-picker", { "ios-picker--disabled": x }),
+	}, [C, y]), /* @__PURE__ */ o("div", {
+		className: i("ios-picker", { "ios-picker--disabled": x }),
 		"aria-disabled": x,
-		children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ a("div", {
 			className: "ios-picker__scene",
 			ref: w,
-			children: /* @__PURE__ */ o("div", {
+			children: /* @__PURE__ */ a("div", {
 				className: `ios-picker__viewport ios-picker__viewport--perspective-${m}`,
 				ref: S,
-				children: /* @__PURE__ */ o("div", {
+				children: /* @__PURE__ */ a("div", {
 					className: "ios-picker__container",
-					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ o("div", {
+					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ a("div", {
 						className: "ios-picker__slide",
 						children: v ? v[t] : t + _
 					}, t))
 				})
 			})
-		}), /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ a("div", {
 			className: "ios-picker__label",
 			children: h
 		})]