@stamcat/craftsman 0.0.27 → 0.0.28

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -30,7 +30,6 @@
     "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",

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/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
 		})]