tintora 1.1.0 → 1.3.0

package/README.md

@@ -68,6 +68,21 @@ Tintora is dark by default and follows the OS preference. Force a theme with `da
 
 Colours, radii, type and shadows are CSS custom properties prefixed `--tintora-`, so you can override them in your own CSS.
 
+### Server Components
+
+Components that use hooks or context ship with `'use client'`, and the rest (`Alert`, `Button`, `Card`, `Chip`, `Dot`, `IconButton`, `Link`, `SearchInput`, `SettingsRow`, `Skeleton`, `Spinner`, `Tag`) are plain. So you can import any of them in a Next.js Server Component without adding the directive yourself:
+
+```tsx
+// app/loading.tsx, a Server Component
+import { Spinner } from 'tintora';
+
+export default function Loading() {
+    return <Spinner />;
+}
+```
+
+Props passed from a Server Component must be serialisable, so event handlers (`onClick`, `onClose`) belong in a Client Component.
+
 ### Controlled overlays
 
 Modal, Drawer, BottomSheet and Popover are controlled: your state owns `open`.
@@ -113,6 +128,7 @@ Every component has a story with all its variants in the [Storybook](https://fel
 | ------------ | ------------------------------------------------------------------------------ |
 | `Button`     | `primary`, `secondary`, `outline` and `ghost`, with icons and a loading state. |
 | `IconButton` | A round, field or nav button with an icon and a required `aria-label`.         |
+| `Link`       | An `<a>`, or any component via `as` (e.g. Next's `Link`), in Tintora's style.  |
 | `Chip`       | A pill button, or a toggle when `selected` is set.                             |
 | `Toggle`     | A two-option segmented control (`ToggleItem`), such as light and dark.         |
 | `Tabs`       | A tab list (`Tab`), as a segmented pill or an underline. Arrow-key navigation. |

package/dist/Alert/Alert2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css        */let t=require("react/jsx-runtime");var n={info:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01`}),success:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8`}),warning:(0,t.jsx)(`path`,{d:`M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01`}),error:(0,t.jsx)(`path`,{d:`M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6`})},r=({status:e})=>(0,t.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,fill:`none`,stroke:`var(--tintora-status-${e}-fg)`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,style:{flex:`0 0 auto`,marginTop:1},children:n[e]});function i({status:n=`info`,variant:i=`alert`,title:a,children:o,action:s,onDismiss:c,className:l,...u}){return(0,t.jsxs)(`div`,{...u,role:i===`alert`&&n===`error`?`alert`:`status`,className:e.clsx(`tintora-alert`,i===`announcement`?`tintora-alert--announcement`:`tintora-alert--${n}`,l),children:[i===`alert`&&(0,t.jsx)(r,{status:n}),(0,t.jsxs)(`div`,{className:e.clsx(`tintora-alert__content`,i===`announcement`&&`tintora-alert__content--announcement`),children:[a&&(0,t.jsx)(`span`,{className:`tintora-alert__content__title`,children:a}),o&&(0,t.jsx)(`span`,{className:`tintora-alert__content__sub-title`,children:o}),s&&(0,t.jsx)(`button`,{type:`button`,onClick:s.onClick,className:e.clsx(`tintora-alert__content__action`,i===`alert`&&`tintora-alert__content__action--${n}`),children:s.label})]}),i===`alert`&&c&&(0,t.jsx)(`button`,{type:`button`,"aria-label":`Dismiss`,className:`tintora-alert__close`,onClick:c,children:(0,t.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,"aria-hidden":`true`,children:(0,t.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})})})]})}exports.Alert=i;

package/dist/Alert/Alert2.js

@@ -0,0 +1,73 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css      */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/Alert/Alert.tsx
+var r = {
+	info: /* @__PURE__ */ t("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01" }),
+	success: /* @__PURE__ */ t("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12.5l2.7 2.7L16 9.8" }),
+	warning: /* @__PURE__ */ t("path", { d: "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01" }),
+	error: /* @__PURE__ */ t("path", { d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM15 9l-6 6M9 9l6 6" })
+}, i = ({ status: e }) => /* @__PURE__ */ t("svg", {
+	width: "22",
+	height: "22",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: `var(--tintora-status-${e}-fg)`,
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	style: {
+		flex: "0 0 auto",
+		marginTop: 1
+	},
+	children: r[e]
+});
+function a({ status: r = "info", variant: a = "alert", title: o, children: s, action: c, onDismiss: l, className: u, ...d }) {
+	return /* @__PURE__ */ n("div", {
+		...d,
+		role: a === "alert" && r === "error" ? "alert" : "status",
+		className: e("tintora-alert", a === "announcement" ? "tintora-alert--announcement" : `tintora-alert--${r}`, u),
+		children: [
+			a === "alert" && /* @__PURE__ */ t(i, { status: r }),
+			/* @__PURE__ */ n("div", {
+				className: e("tintora-alert__content", a === "announcement" && "tintora-alert__content--announcement"),
+				children: [
+					o && /* @__PURE__ */ t("span", {
+						className: "tintora-alert__content__title",
+						children: o
+					}),
+					s && /* @__PURE__ */ t("span", {
+						className: "tintora-alert__content__sub-title",
+						children: s
+					}),
+					c && /* @__PURE__ */ t("button", {
+						type: "button",
+						onClick: c.onClick,
+						className: e("tintora-alert__content__action", a === "alert" && `tintora-alert__content__action--${r}`),
+						children: c.label
+					})
+				]
+			}),
+			a === "alert" && l && /* @__PURE__ */ t("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				className: "tintora-alert__close",
+				onClick: l,
+				children: /* @__PURE__ */ t("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ t("path", { d: "M18 6L6 18M6 6l12 12" })
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { a as Alert };

package/dist/Avatar/Avatar2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs");;/* empty css         */const t=require("./utils.cjs");let n=require("react/jsx-runtime"),r=require("react");function i({name:i,src:a,size:o=`medium`,className:s,...c}){let[l,u]=(0,r.useState)(),d=!!a&&a!==l;return(0,n.jsx)(`span`,{role:`img`,"aria-label":i,...c,className:e.clsx(`tintora-avatar`,`tintora-avatar--${o}`,s),children:d?(0,n.jsx)(`img`,{src:a,alt:``,onError:()=>u(a)}):t.getCapitalFirstLetters(i)})}exports.Avatar=i;

package/dist/Avatar/Avatar2.js

@@ -0,0 +1,23 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+/* empty css       */
+import { getCapitalFirstLetters as t } from "./utils.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/Avatar/Avatar.tsx
+function i({ name: i, src: a, size: o = "medium", className: s, ...c }) {
+	let [l, u] = r(), d = !!a && a !== l;
+	return /* @__PURE__ */ n("span", {
+		role: "img",
+		"aria-label": i,
+		...c,
+		className: e("tintora-avatar", `tintora-avatar--${o}`, s),
+		children: d ? /* @__PURE__ */ n("img", {
+			src: a,
+			alt: "",
+			onError: () => u(a)
+		}) : t(i)
+	});
+}
+//#endregion
+export { i as Avatar };

package/dist/Avatar/utils.cjs

@@ -0,0 +1 @@
+function e(e){if(!e.length)return``;let t=e.trim().split(/\s+/).map(e=>e.match(/\p{L}\p{M}*/u)?.[0]).filter(e=>!!e);return`${t[0]??``}${t.length>1?t.at(-1)??``:``}`.toLocaleUpperCase()}exports.getCapitalFirstLetters=e;

package/dist/Avatar/utils.js

@@ -0,0 +1,8 @@
+//#region src/Avatar/utils.ts
+function e(e) {
+	if (!e.length) return "";
+	let t = e.trim().split(/\s+/).map((e) => e.match(/\p{L}\p{M}*/u)?.[0]).filter((e) => !!e);
+	return `${t[0] ?? ""}${t.length > 1 ? t.at(-1) ?? "" : ""}`.toLocaleUpperCase();
+}
+//#endregion
+export { e as getCapitalFirstLetters };

package/dist/BottomSheet/BottomSheet2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../Drawer/Drawer2.cjs");;/* empty css              */let n=require("react/jsx-runtime"),r=require("react");function i({title:i,children:a,className:o,...s}){let c=(0,r.useId)();return(0,n.jsxs)(t.Drawer,{...s,from:`bottom`,"aria-labelledby":c,className:e.clsx(`tintora-bottom-sheet`,o),children:[(0,n.jsx)(`span`,{className:`tintora-bottom-sheet__grabber`,"aria-hidden":`true`}),(0,n.jsx)(`div`,{id:c,className:`tintora-bottom-sheet__title`,children:i}),a]})}function a({selected:t=!1,className:r,children:i,...a}){return(0,n.jsxs)(`button`,{type:`button`,...a,"aria-pressed":t,className:e.clsx(`tintora-bottom-sheet__option`,r),children:[(0,n.jsx)(`span`,{children:i}),(0,n.jsx)(`svg`,{className:`tintora-bottom-sheet__check`,width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.4`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})})]})}exports.BottomSheet=i,exports.BottomSheetOption=a;

package/dist/BottomSheet/BottomSheet2.js

@@ -0,0 +1,51 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { Drawer as t } from "../Drawer/Drawer2.js";
+/* empty css            */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+//#region src/BottomSheet/BottomSheet.tsx
+function a({ title: a, children: o, className: s, ...c }) {
+	let l = i();
+	return /* @__PURE__ */ r(t, {
+		...c,
+		from: "bottom",
+		"aria-labelledby": l,
+		className: e("tintora-bottom-sheet", s),
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "tintora-bottom-sheet__grabber",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("div", {
+				id: l,
+				className: "tintora-bottom-sheet__title",
+				children: a
+			}),
+			o
+		]
+	});
+}
+function o({ selected: t = !1, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		...o,
+		"aria-pressed": t,
+		className: e("tintora-bottom-sheet__option", i),
+		children: [/* @__PURE__ */ n("span", { children: a }), /* @__PURE__ */ n("svg", {
+			className: "tintora-bottom-sheet__check",
+			width: "18",
+			height: "18",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ n("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+		})]
+	});
+}
+//#endregion
+export { a as BottomSheet, o as BottomSheetOption };

package/dist/Button/Button2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs"),t=require("../Spinner/Spinner2.cjs");;/* empty css         */let n=require("react/jsx-runtime");function r({children:r,className:i,variant:a,disabled:o,leadingIcon:s,trailingIcon:c,size:l=`medium`,type:u=`button`,loading:d=!1,fullWidth:f=!1,...p}){return(0,n.jsxs)(`button`,{type:u,className:e.clsx(`tintora-button`,`tintora-button--${a}`,`tintora-button--${l}`,{"tintora-button--leading-icon":!!s||d,"tintora-button--loading":d,"tintora-button--trailing-icon":!!c,"tintora-button--full-width":f},i),disabled:o||d,"aria-busy":d||void 0,...p,children:[d&&(0,n.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:(0,n.jsx)(t.Spinner,{size:`small`,color:`current`})}),!d&&s&&(0,n.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:s}),r,c&&(0,n.jsx)(`span`,{className:`tintora-button__icon`,"aria-hidden":`true`,children:c})]})}exports.Button=r;

package/dist/Button/Button2.js

@@ -0,0 +1,42 @@
+import { clsx as e } from "../utils/clsx.js";
+import { Spinner as t } from "../Spinner/Spinner2.js";
+/* empty css       */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
+function i({ children: i, className: a, variant: o, disabled: s, leadingIcon: c, trailingIcon: l, size: u = "medium", type: d = "button", loading: f = !1, fullWidth: p = !1, ...m }) {
+	return /* @__PURE__ */ r("button", {
+		type: d,
+		className: e("tintora-button", `tintora-button--${o}`, `tintora-button--${u}`, {
+			"tintora-button--leading-icon": !!c || f,
+			"tintora-button--loading": f,
+			"tintora-button--trailing-icon": !!l,
+			"tintora-button--full-width": p
+		}, a),
+		disabled: s || f,
+		"aria-busy": f || void 0,
+		...m,
+		children: [
+			f && /* @__PURE__ */ n("span", {
+				className: "tintora-button__icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ n(t, {
+					size: "small",
+					color: "current"
+				})
+			}),
+			!f && c && /* @__PURE__ */ n("span", {
+				className: "tintora-button__icon",
+				"aria-hidden": "true",
+				children: c
+			}),
+			i,
+			l && /* @__PURE__ */ n("span", {
+				className: "tintora-button__icon",
+				"aria-hidden": "true",
+				children: l
+			})
+		]
+	});
+}
+//#endregion
+export { i as Button };

package/dist/Card/Card2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css       */let t=require("react/jsx-runtime");function n({as:n=`article`,variant:r=`surface`,className:i,...a}){return(0,t.jsx)(n,{...a,className:e.clsx(`tintora-card`,`tintora-card--${r}`,i)})}function r({selected:n=!1,className:r,...i}){return(0,t.jsx)(`button`,{...i,type:`button`,"aria-pressed":n,className:e.clsx(`tintora-card`,`tintora-card--surface`,`tintora-card--selectable`,n&&`tintora-card--selected`,r)})}exports.Card=n,exports.SelectableCard=r;

package/dist/Card/Card2.js

@@ -0,0 +1,20 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Card/Card.tsx
+function n({ as: n = "article", variant: r = "surface", className: i, ...a }) {
+	return /* @__PURE__ */ t(n, {
+		...a,
+		className: e("tintora-card", `tintora-card--${r}`, i)
+	});
+}
+function r({ selected: n = !1, className: r, ...i }) {
+	return /* @__PURE__ */ t("button", {
+		...i,
+		type: "button",
+		"aria-pressed": n,
+		className: e("tintora-card", "tintora-card--surface", "tintora-card--selectable", n && "tintora-card--selected", r)
+	});
+}
+//#endregion
+export { n as Card, r as SelectableCard };

package/dist/Checkbox/Checkbox2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useCheckedState.cjs");;/* empty css           */let n=require("react/jsx-runtime"),r=require("react");function i({checked:i,defaultChecked:a,onCheckedChange:o,indeterminate:s=!1,className:c,...l}){let u=(0,r.useRef)(null),d=t.useCheckedState({checked:i,defaultChecked:a,onCheckedChange:o});return(0,r.useLayoutEffect)(()=>{u.current&&(u.current.indeterminate=s)}),(0,n.jsxs)(`span`,{className:e.clsx(`tintora-checkbox`,c),children:[(0,n.jsx)(`input`,{...l,ref:u,type:`checkbox`,className:`tintora-checkbox__input`,checked:d.checked,onChange:d.onChange}),(0,n.jsxs)(`span`,{className:`tintora-checkbox__box`,"aria-hidden":`true`,children:[(0,n.jsx)(`svg`,{className:`tintora-checkbox__check`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,n.jsx)(`path`,{d:`M5 12.5l4.5 4.5L19 7.5`})}),(0,n.jsx)(`svg`,{className:`tintora-checkbox__dash`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,strokeWidth:`3.2`,strokeLinecap:`round`,children:(0,n.jsx)(`path`,{d:`M6 12h12`})})]})]})}exports.Checkbox=i;

package/dist/Checkbox/Checkbox2.js

@@ -0,0 +1,52 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useCheckedState as t } from "../hooks/useCheckedState.js";
+/* empty css         */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useLayoutEffect as i, useRef as a } from "react";
+//#region src/Checkbox/Checkbox.tsx
+function o({ checked: o, defaultChecked: s, onCheckedChange: c, indeterminate: l = !1, className: u, ...d }) {
+	let f = a(null), p = t({
+		checked: o,
+		defaultChecked: s,
+		onCheckedChange: c
+	});
+	return i(() => {
+		f.current && (f.current.indeterminate = l);
+	}), /* @__PURE__ */ r("span", {
+		className: e("tintora-checkbox", u),
+		children: [/* @__PURE__ */ n("input", {
+			...d,
+			ref: f,
+			type: "checkbox",
+			className: "tintora-checkbox__input",
+			checked: p.checked,
+			onChange: p.onChange
+		}), /* @__PURE__ */ r("span", {
+			className: "tintora-checkbox__box",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ n("svg", {
+				className: "tintora-checkbox__check",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				strokeWidth: "3.2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ n("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+			}), /* @__PURE__ */ n("svg", {
+				className: "tintora-checkbox__dash",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				strokeWidth: "3.2",
+				strokeLinecap: "round",
+				children: /* @__PURE__ */ n("path", { d: "M6 12h12" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { o as Checkbox };

package/dist/Chip/Chip2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css       */let t=require("react/jsx-runtime");function n({children:n,selected:r,className:i,"aria-pressed":a,...o}){return(0,t.jsx)(`button`,{...o,type:`button`,className:e.clsx(`tintora-chip`,i),"aria-pressed":r??a,children:n})}exports.Chip=n;

package/dist/Chip/Chip2.js

@@ -0,0 +1,15 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Chip/Chip.tsx
+function n({ children: n, selected: r, className: i, "aria-pressed": a, ...o }) {
+	return /* @__PURE__ */ t("button", {
+		...o,
+		type: "button",
+		className: e("tintora-chip", i),
+		"aria-pressed": r ?? a,
+		children: n
+	});
+}
+//#endregion
+export { n as Chip };

package/dist/Dot/Dot2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css      */let t=require("react/jsx-runtime");function n({variant:n=`unread`,label:r,className:i,...a}){return(0,t.jsx)(`span`,{...a,className:e.clsx(`tintora-dot`,`tintora-dot--${n}`,i),role:r?`img`:void 0,"aria-label":r,"aria-hidden":!r||void 0})}exports.Dot=n;

package/dist/Dot/Dot2.js

@@ -0,0 +1,15 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css    */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Dot/Dot.tsx
+function n({ variant: n = "unread", label: r, className: i, ...a }) {
+	return /* @__PURE__ */ t("span", {
+		...a,
+		className: e("tintora-dot", `tintora-dot--${n}`, i),
+		role: r ? "img" : void 0,
+		"aria-label": r,
+		"aria-hidden": !r || void 0
+	});
+}
+//#endregion
+export { n as Dot };

package/dist/Drawer/Drawer2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../utils/outside.cjs");;/* empty css         */let n=require("react/jsx-runtime"),r=require("react");var i=e=>typeof e==`number`?`${e}px`:e;function a({open:a,from:o=`right`,width:s,height:c,children:l,onClose:u,className:d,...f}){let p=(0,r.useRef)(null);(0,r.useEffect)(()=>{let e=p.current;e&&(a&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!a&&e.open&&e.close())},[a]);let m={...f.style,...s!==void 0&&{"--tintora-drawer-width":i(s)},...c!==void 0&&{"--tintora-drawer-height":i(c)}};return(0,n.jsx)(`dialog`,{...f,ref:p,className:e.clsx(`tintora-drawer`,`tintora-drawer--from-${o}`,d),onCancel:e=>{e.preventDefault(),u()},onClick:e=>t.isOutsideElementClicked(e,u),style:m,children:l})}exports.Drawer=a;

package/dist/Drawer/Drawer2.js

@@ -0,0 +1,33 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { isOutsideElementClicked as t } from "../utils/outside.js";
+/* empty css       */
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i } from "react";
+//#region src/Drawer/Drawer.tsx
+var a = (e) => typeof e == "number" ? `${e}px` : e;
+function o({ open: o, from: s = "right", width: c, height: l, children: u, onClose: d, className: f, ...p }) {
+	let m = i(null);
+	r(() => {
+		let e = m.current;
+		e && (o && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !o && e.open && e.close());
+	}, [o]);
+	let h = {
+		...p.style,
+		...c !== void 0 && { "--tintora-drawer-width": a(c) },
+		...l !== void 0 && { "--tintora-drawer-height": a(l) }
+	};
+	return /* @__PURE__ */ n("dialog", {
+		...p,
+		ref: m,
+		className: e("tintora-drawer", `tintora-drawer--from-${s}`, f),
+		onCancel: (e) => {
+			e.preventDefault(), d();
+		},
+		onClick: (e) => t(e, d),
+		style: h,
+		children: u
+	});
+}
+//#endregion
+export { o as Drawer };

package/dist/IconButton/IconButton2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs"),t=require("../Button/Button2.cjs");;/* empty css             */let n=require("react/jsx-runtime");var r={round:`secondary`,field:`secondary`,nav:`ghost`};function i({icon:i,variant:a=`round`,size:o,selected:s,className:c,...l}){let u=a===`round`?o??`large`:void 0;return(0,n.jsx)(t.Button,{...l,variant:r[a],"aria-current":s?`page`:void 0,className:e.clsx(`tintora-icon-button`,`tintora-icon-button--${a}`,u&&`tintora-icon-button--${u}`,c),...u&&{size:u},children:(0,n.jsx)(`span`,{className:`tintora-icon-button__icon`,"aria-hidden":`true`,children:i})})}exports.IconButton=i;

package/dist/IconButton/IconButton2.js

@@ -0,0 +1,27 @@
+import { clsx as e } from "../utils/clsx.js";
+import { Button as t } from "../Button/Button2.js";
+/* empty css           */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/IconButton/IconButton.tsx
+var r = {
+	round: "secondary",
+	field: "secondary",
+	nav: "ghost"
+};
+function i({ icon: i, variant: a = "round", size: o, selected: s, className: c, ...l }) {
+	let u = a === "round" ? o ?? "large" : void 0;
+	return /* @__PURE__ */ n(t, {
+		...l,
+		variant: r[a],
+		"aria-current": s ? "page" : void 0,
+		className: e("tintora-icon-button", `tintora-icon-button--${a}`, u && `tintora-icon-button--${u}`, c),
+		...u && { size: u },
+		children: /* @__PURE__ */ n("span", {
+			className: "tintora-icon-button__icon",
+			"aria-hidden": "true",
+			children: i
+		})
+	});
+}
+//#endregion
+export { i as IconButton };

package/dist/Link/Link.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+import './Link.css';
+export type LinkProps<C extends ElementType = 'a'> = {
+    /**
+     * What to render: `'a'`, or a router's link such as Next's `Link`. Its own
+     * props (`href`, `to`, `prefetch`, ...) are then accepted and type-checked.
+     * @default 'a'
+     */
+    as?: C;
+    /**
+     * `accent` and `white` are coloured and underlined. `transparent` applies
+     * no style (it inherits the colour and has no underline), for wrapping a
+     * card or any block; only the keyboard focus ring stays.
+     * @default 'accent'
+     */
+    variant?: 'accent' | 'white' | 'transparent';
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'variant' | 'className'>;
+/**
+ * Tintora's link style on an `<a>`, or on any component that takes
+ * `className` and `children`, so a router link keeps client-side navigation.
+ */
+export declare function Link<C extends ElementType = 'a'>({ as, variant, className, ...props }: LinkProps<C>): import("react").JSX.Element;

package/dist/Link/Link2.cjs

@@ -0,0 +1 @@
+const e=require("../utils/clsx.cjs");;/* empty css       */let t=require("react/jsx-runtime");function n({as:n,variant:r=`accent`,className:i,...a}){return(0,t.jsx)(n??`a`,{...a,className:e.clsx(`tintora-link`,`tintora-link--${r}`,i)})}exports.Link=n;

package/dist/Link/Link2.js

@@ -0,0 +1,12 @@
+import { clsx as e } from "../utils/clsx.js";
+/* empty css     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/Link/Link.tsx
+function n({ as: n, variant: r = "accent", className: i, ...a }) {
+	return /* @__PURE__ */ t(n ?? "a", {
+		...a,
+		className: e("tintora-link", `tintora-link--${r}`, i)
+	});
+}
+//#endregion
+export { n as Link };

package/dist/Modal/Modal2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../utils/outside.cjs"),n=require("../IconButton/IconButton2.cjs");;/* empty css        */let r=require("react/jsx-runtime"),i=require("react");var a=()=>(0,r.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,children:(0,r.jsx)(`path`,{d:`M18 6L6 18M6 6l12 12`})});function o({open:o,onClose:s,title:c,description:l,icon:u,status:d=`info`,actions:f,size:p=`md`,align:m=`start`,role:h=`dialog`,closeButton:g=!0,className:_,children:v,...y}){let b=(0,i.useRef)(null),x=(0,i.useId)(),S=(0,i.useId)();return(0,i.useEffect)(()=>{let e=b.current;e&&(o&&!e.open?(e.showModal(),e.querySelector(`[data-autofocus]`)?.focus()):!o&&e.open&&e.close())},[o]),(0,r.jsxs)(`dialog`,{...y,ref:b,role:h,"aria-labelledby":x,"aria-describedby":l?S:void 0,className:e.clsx(`tintora-modal`,`tintora-modal--${p}`,m===`center`&&`tintora-modal--center`,_),onCancel:e=>{e.preventDefault(),s()},onClick:e=>{h===`dialog`&&t.isOutsideElementClicked(e,s)},children:[u&&(0,r.jsx)(`span`,{className:e.clsx(`tintora-modal__icon`,`tintora-modal__icon--${d}`),"aria-hidden":`true`,children:u}),(0,r.jsxs)(`div`,{className:`tintora-modal__text`,children:[(0,r.jsx)(`h2`,{id:x,className:`tintora-modal__title`,children:c}),l&&(0,r.jsx)(`p`,{id:S,className:`tintora-modal__description`,children:l})]}),g&&(0,r.jsx)(n.IconButton,{className:`tintora-modal__close`,size:`medium`,"aria-label":`Close`,icon:(0,r.jsx)(a,{}),onClick:s}),v,f&&(0,r.jsx)(`div`,{className:`tintora-modal__actions`,children:f})]})}exports.Modal=o;

package/dist/Modal/Modal2.js

@@ -0,0 +1,71 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { isOutsideElementClicked as t } from "../utils/outside.js";
+import { IconButton as n } from "../IconButton/IconButton2.js";
+/* empty css      */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useEffect as a, useId as o, useRef as s } from "react";
+//#region src/Modal/Modal.tsx
+var c = () => /* @__PURE__ */ r("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ r("path", { d: "M18 6L6 18M6 6l12 12" })
+});
+function l({ open: l, onClose: u, title: d, description: f, icon: p, status: m = "info", actions: h, size: g = "md", align: _ = "start", role: v = "dialog", closeButton: y = !0, className: b, children: x, ...S }) {
+	let C = s(null), w = o(), T = o();
+	return a(() => {
+		let e = C.current;
+		e && (l && !e.open ? (e.showModal(), e.querySelector("[data-autofocus]")?.focus()) : !l && e.open && e.close());
+	}, [l]), /* @__PURE__ */ i("dialog", {
+		...S,
+		ref: C,
+		role: v,
+		"aria-labelledby": w,
+		"aria-describedby": f ? T : void 0,
+		className: e("tintora-modal", `tintora-modal--${g}`, _ === "center" && "tintora-modal--center", b),
+		onCancel: (e) => {
+			e.preventDefault(), u();
+		},
+		onClick: (e) => {
+			v === "dialog" && t(e, u);
+		},
+		children: [
+			p && /* @__PURE__ */ r("span", {
+				className: e("tintora-modal__icon", `tintora-modal__icon--${m}`),
+				"aria-hidden": "true",
+				children: p
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "tintora-modal__text",
+				children: [/* @__PURE__ */ r("h2", {
+					id: w,
+					className: "tintora-modal__title",
+					children: d
+				}), f && /* @__PURE__ */ r("p", {
+					id: T,
+					className: "tintora-modal__description",
+					children: f
+				})]
+			}),
+			y && /* @__PURE__ */ r(n, {
+				className: "tintora-modal__close",
+				size: "medium",
+				"aria-label": "Close",
+				icon: /* @__PURE__ */ r(c, {}),
+				onClick: u
+			}),
+			x,
+			h && /* @__PURE__ */ r("div", {
+				className: "tintora-modal__actions",
+				children: h
+			})
+		]
+	});
+}
+//#endregion
+export { l as Modal };

package/dist/Popover/Popover2.cjs

@@ -0,0 +1 @@
+"use client";const e=require("../utils/clsx.cjs"),t=require("../hooks/useEscapeKey.cjs"),n=require("../hooks/useOutsidePress.cjs"),r=require("../hooks/useTopLayerPosition.cjs"),i=require("../utils/placement.cjs");;/* empty css          */let a=require("react/jsx-runtime"),o=require("react");var s=[`button:not([disabled])`,`[href]`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`, `);function c({open:c,onOpenChange:l,trigger:u,title:d,children:f,role:p=`dialog`,size:m=`md`,placement:h=`bottom`,className:g}){let _=(0,o.useId)(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=(0,o.useRef)(!1),x=()=>l(!1);t.useEscapeKey(c,x),n.useOutsidePress(c,v,x);let S=e=>{u.props.onClick?.(e),e.defaultPrevented||l(!c)},C=r.useTopLayerPosition(c,y,()=>{let e=y.current,t=v.current?.firstElementChild;return!e||!t?null:i.getPosition(t.getBoundingClientRect(),{width:e.offsetWidth,height:e.offsetHeight},h,void 0,{gap:12})},[h,d,f]),w=C?{top:C.top,left:C.left,"--tintora-popover-arrow-offset":`${C.arrowOffset}px`}:{visibility:`hidden`},T=C!==null;return(0,o.useLayoutEffect)(()=>{let e=y.current;c&&T&&e&&(e.querySelector(`[data-autofocus]`)??e.querySelector(s)??e).focus()},[c,T]),(0,o.useEffect)(()=>{if(b.current&&!c){let e=document.activeElement;(!e||e===document.body)&&v.current?.querySelector(`*`)?.focus()}b.current=c},[c]),(0,a.jsxs)(`span`,{ref:v,className:`tintora-popover-root`,children:[(0,o.cloneElement)(u,{"aria-haspopup":`dialog`,"aria-expanded":c,"aria-controls":c?_:void 0,onClick:S}),c&&(0,a.jsx)(`div`,{id:_,ref:y,role:p,"aria-label":d,popover:`manual`,tabIndex:-1,className:e.clsx(`tintora-popover`,`tintora-popover--${m}`,`tintora-popover--${C?.placement??h}`,g),style:w,children:f})]})}exports.Popover=c;

package/dist/Popover/Popover2.js

@@ -0,0 +1,70 @@
+"use client";
+import { clsx as e } from "../utils/clsx.js";
+import { useEscapeKey as t } from "../hooks/useEscapeKey.js";
+import { useOutsidePress as n } from "../hooks/useOutsidePress.js";
+import { useTopLayerPosition as r } from "../hooks/useTopLayerPosition.js";
+import { getPosition as i } from "../utils/placement.js";
+/* empty css        */
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cloneElement as s, useEffect as c, useId as l, useLayoutEffect as u, useRef as d } from "react";
+//#region src/Popover/Popover.tsx
+var f = [
+	"button:not([disabled])",
+	"[href]",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+function p({ open: p, onOpenChange: m, trigger: h, title: g, children: _, role: v = "dialog", size: y = "md", placement: b = "bottom", className: x }) {
+	let S = l(), C = d(null), w = d(null), T = d(!1), E = () => m(!1);
+	t(p, E), n(p, C, E);
+	let D = (e) => {
+		h.props.onClick?.(e), e.defaultPrevented || m(!p);
+	}, O = r(p, w, () => {
+		let e = w.current, t = C.current?.firstElementChild;
+		return !e || !t ? null : i(t.getBoundingClientRect(), {
+			width: e.offsetWidth,
+			height: e.offsetHeight
+		}, b, void 0, { gap: 12 });
+	}, [
+		b,
+		g,
+		_
+	]), k = O ? {
+		top: O.top,
+		left: O.left,
+		"--tintora-popover-arrow-offset": `${O.arrowOffset}px`
+	} : { visibility: "hidden" }, A = O !== null;
+	return u(() => {
+		let e = w.current;
+		p && A && e && (e.querySelector("[data-autofocus]") ?? e.querySelector(f) ?? e).focus();
+	}, [p, A]), c(() => {
+		if (T.current && !p) {
+			let e = document.activeElement;
+			(!e || e === document.body) && C.current?.querySelector("*")?.focus();
+		}
+		T.current = p;
+	}, [p]), /* @__PURE__ */ o("span", {
+		ref: C,
+		className: "tintora-popover-root",
+		children: [s(h, {
+			"aria-haspopup": "dialog",
+			"aria-expanded": p,
+			"aria-controls": p ? S : void 0,
+			onClick: D
+		}), p && /* @__PURE__ */ a("div", {
+			id: S,
+			ref: w,
+			role: v,
+			"aria-label": g,
+			popover: "manual",
+			tabIndex: -1,
+			className: e("tintora-popover", `tintora-popover--${y}`, `tintora-popover--${O?.placement ?? b}`, x),
+			style: k,
+			children: _
+		})]
+	});
+}
+//#endregion
+export { p as Popover };