tembro 3.0.0 → 3.1.5

package/dist/src/showcase/premium/skeleton/index.js

@@ -0,0 +1,3 @@
+import { skeletonMock as e } from "./mock.js";
+import { SkeletonShowcase as t } from "./showcase.js";
+export { t as SkeletonShowcase, e as skeletonMock };

package/dist/src/showcase/premium/skeleton/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Skeleton, SkeletonCard, SkeletonText } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-10 w-48" />
+      <SkeletonText rows={3} />
+      <SkeletonCard avatar rows={4} />
+    </div>
+  )
+}`,cliCommand:`npx tembro add skeleton`,highlights:[`Base line/block placeholder plus text and card presets`,`Useful while data shape is known but content is still loading`,`Keeps layout stable before real content arrives`],scenarios:[{title:`Header loading`,description:`Reserve title and toolbar space before the API resolves.`},{title:`List row loading`,description:`Prevent layout jump inside dense operational screens.`},{title:`Card loading`,description:`Show content shape without implying final values yet.`}]};exports.skeletonMock=e;

package/dist/src/showcase/premium/skeleton/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/skeleton/mock.ts
+var e = {
+	code: "import { Skeleton, SkeletonCard, SkeletonText } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Skeleton className=\"h-10 w-48\" />\n      <SkeletonText rows={3} />\n      <SkeletonCard avatar rows={4} />\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add skeleton",
+	highlights: [
+		"Base line/block placeholder plus text and card presets",
+		"Useful while data shape is known but content is still loading",
+		"Keeps layout stable before real content arrives"
+	],
+	scenarios: [
+		{
+			title: "Header loading",
+			description: "Reserve title and toolbar space before the API resolves."
+		},
+		{
+			title: "List row loading",
+			description: "Prevent layout jump inside dense operational screens."
+		},
+		{
+			title: "Card loading",
+			description: "Show content shape without implying final values yet."
+		}
+	]
+};
+//#endregion
+export { e as skeletonMock };

package/dist/src/showcase/premium/skeleton/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/skeleton/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Skeleton preserves shape before real data arrives`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use skeletons only when the destination layout is already known. Otherwise prefer a simpler loading state.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Dashboard summary loading`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Toggle the preview to compare loading shape and resolved content.`})]}),(0,a.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>s(e=>!e),children:e?`Show resolved state`:`Show loading state`})]}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-4 xl:grid-cols-3`,children:Array.from({length:3},(t,i)=>(0,a.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:e?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Skeleton,{className:`h-4 w-24`}),(0,a.jsx)(r.Skeleton,{className:`mt-4 h-9 w-32`}),(0,a.jsx)(r.Skeleton,{className:`mt-4 h-3 w-20`})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`p`,{className:`text-sm aui-text-muted`,children:[`Metric `,i+1]}),(0,a.jsx)(`p`,{className:`mt-4 text-3xl font-semibold aui-text-strong`,children:[`24.8k`,`91.4%`,`128`][i]}),(0,a.jsx)(n.Badge,{className:`mt-4`,variant:`secondary`,children:`Live`})]})},i))})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Text and card presets`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:"Use the base primitive for custom shapes, then reach for `SkeletonText` or `SkeletonCard` when the pattern repeats often."}),(0,a.jsxs)(`div`,{className:`mt-5 space-y-4`,children:[(0,a.jsx)(r.SkeletonText,{rows:4}),(0,a.jsx)(r.SkeletonCard,{avatar:!0,rows:4})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Do not animate huge full-page skeleton walls if a calmer page-level loading state would do the job.`}),(0,a.jsx)(`p`,{children:`Keep placeholder geometry close to the final layout. A misleading shape is worse than no skeleton at all.`}),(0,a.jsx)(`p`,{children:`When the loading state is long or uncertain, switch to a clearer status surface with explanation.`})]})]})]})})]})}exports.SkeletonShowcase=s;

package/dist/src/showcase/premium/skeleton/showcase.js

@@ -0,0 +1,116 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Skeleton as n, SkeletonCard as r, SkeletonText as i } from "../../../components/ui/skeleton/index.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/showcase/premium/skeleton/showcase.tsx
+var l = "border-t border-[color:var(--aui-divider)] py-6";
+function u() {
+	let [u, d] = a.useState(!0);
+	return /* @__PURE__ */ c("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ c("section", {
+				className: "pb-6",
+				children: [
+					/* @__PURE__ */ s("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Installed primitive"
+					}),
+					/* @__PURE__ */ s("h3", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: "Skeleton preserves shape before real data arrives"
+					}),
+					/* @__PURE__ */ s("p", {
+						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+						children: "Use skeletons only when the destination layout is already known. Otherwise prefer a simpler loading state."
+					})
+				]
+			}),
+			/* @__PURE__ */ c("section", {
+				className: l,
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Dashboard summary loading"
+					}), /* @__PURE__ */ s("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Toggle the preview to compare loading shape and resolved content."
+					})] }), /* @__PURE__ */ s(e, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => d((e) => !e),
+						children: u ? "Show resolved state" : "Show loading state"
+					})]
+				}), /* @__PURE__ */ s("div", {
+					className: "mt-5 grid gap-4 xl:grid-cols-3",
+					children: Array.from({ length: 3 }, (e, r) => /* @__PURE__ */ s("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: u ? /* @__PURE__ */ c(o, { children: [
+							/* @__PURE__ */ s(n, { className: "h-4 w-24" }),
+							/* @__PURE__ */ s(n, { className: "mt-4 h-9 w-32" }),
+							/* @__PURE__ */ s(n, { className: "mt-4 h-3 w-20" })
+						] }) : /* @__PURE__ */ c(o, { children: [
+							/* @__PURE__ */ c("p", {
+								className: "text-sm aui-text-muted",
+								children: ["Metric ", r + 1]
+							}),
+							/* @__PURE__ */ s("p", {
+								className: "mt-4 text-3xl font-semibold aui-text-strong",
+								children: [
+									"24.8k",
+									"91.4%",
+									"128"
+								][r]
+							}),
+							/* @__PURE__ */ s(t, {
+								className: "mt-4",
+								variant: "secondary",
+								children: "Live"
+							})
+						] })
+					}, r))
+				})]
+			}),
+			/* @__PURE__ */ s("section", {
+				className: l,
+				children: /* @__PURE__ */ c("div", {
+					className: "grid gap-6 xl:grid-cols-[0.9fr_1.1fr]",
+					children: [/* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "text-lg font-semibold aui-text-strong",
+							children: "Text and card presets"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+							children: "Use the base primitive for custom shapes, then reach for `SkeletonText` or `SkeletonCard` when the pattern repeats often."
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "mt-5 space-y-4",
+							children: [/* @__PURE__ */ s(i, { rows: 4 }), /* @__PURE__ */ s(r, {
+								avatar: !0,
+								rows: 4
+							})]
+						})
+					] }), /* @__PURE__ */ c("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ s("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: "Guidance"
+						}), /* @__PURE__ */ c("div", {
+							className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+							children: [
+								/* @__PURE__ */ s("p", { children: "Do not animate huge full-page skeleton walls if a calmer page-level loading state would do the job." }),
+								/* @__PURE__ */ s("p", { children: "Keep placeholder geometry close to the final layout. A misleading shape is worse than no skeleton at all." }),
+								/* @__PURE__ */ s("p", { children: "When the loading state is long or uncertain, switch to a clearer status surface with explanation." })
+							]
+						})]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { u as SkeletonShowcase };

package/dist/src/showcase/premium/slider/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.SliderShowcase=e.SliderShowcase,exports.sliderMock=t.sliderMock;

package/dist/src/showcase/premium/slider/index.js

@@ -0,0 +1,3 @@
+import { SliderShowcase as e } from "./showcase.js";
+import { sliderMock as t } from "./mock.js";
+export { e as SliderShowcase, t as sliderMock };

package/dist/src/showcase/premium/slider/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { RangeSlider, Slider } from "tembro"
+
+export function Example() {
+  const [score, setScore] = React.useState(72)
+  const [windowRange, setWindowRange] = React.useState<[number, number]>([20, 80])
+
+  return (
+    <div className="space-y-4">
+      <Slider label="Alert threshold" value={score} onValueChange={setScore} showValue />
+      <RangeSlider label="Accepted window" value={windowRange} onValueChange={setWindowRange} showValue />
+    </div>
+  )
+}`,highlights:[`Single and range sliders`,`Inline value surfaces`,`Great for tuning thresholds and windows`,`Controlled usage without extra wrapper boilerplate`],scenarios:[{title:`Risk threshold`,description:`Tune alert cutoff for operational monitoring.`},{title:`Accepted score window`,description:`Set min and max limits for review, fraud, or quality flows.`},{title:`Preference controls`,description:`Expose density, volume, or sensitivity adjustments with visible values.`}],capabilityNotes:[`Use a slider only when a continuous range is easier than direct typing.`,`Always label the meaning of the number, not just the number itself.`,`Range sliders are best for constraints and filters, not for arbitrary dual inputs.`]};exports.sliderMock=e;

package/dist/src/showcase/premium/slider/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/slider/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { RangeSlider, Slider } from \"tembro\"\n\nexport function Example() {\n  const [score, setScore] = React.useState(72)\n  const [windowRange, setWindowRange] = React.useState<[number, number]>([20, 80])\n\n  return (\n    <div className=\"space-y-4\">\n      <Slider label=\"Alert threshold\" value={score} onValueChange={setScore} showValue />\n      <RangeSlider label=\"Accepted window\" value={windowRange} onValueChange={setWindowRange} showValue />\n    </div>\n  )\n}",
+	highlights: [
+		"Single and range sliders",
+		"Inline value surfaces",
+		"Great for tuning thresholds and windows",
+		"Controlled usage without extra wrapper boilerplate"
+	],
+	scenarios: [
+		{
+			title: "Risk threshold",
+			description: "Tune alert cutoff for operational monitoring."
+		},
+		{
+			title: "Accepted score window",
+			description: "Set min and max limits for review, fraud, or quality flows."
+		},
+		{
+			title: "Preference controls",
+			description: "Expose density, volume, or sensitivity adjustments with visible values."
+		}
+	],
+	capabilityNotes: [
+		"Use a slider only when a continuous range is easier than direct typing.",
+		"Always label the meaning of the number, not just the number itself.",
+		"Range sliders are best for constraints and filters, not for arbitrary dual inputs."
+	]
+};
+//#endregion
+export { e as sliderMock };

package/dist/src/showcase/premium/slider/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/slider.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(72),[c,l]=r.useState([20,80]);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Range control`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Slider should make thresholds legible, not vague`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use sliders where a continuous range is easier than manual typing. The control needs a visible meaning and clear current value.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Thresholds`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Range windows`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.Slider,{label:`Alert threshold`,description:`Raise or lower the score that triggers manual review.`,value:o,onValueChange:s,showValue:!0,formatValue:e=>`${e}%`})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.RangeSlider,{label:`Accepted score window`,description:`Only scores inside this range pass automatic approval.`,value:c,onValueChange:l,showValue:!0,formatValue:e=>`${e[0]}% - ${e[1]}%`})})]}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current threshold`}),(0,i.jsxs)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:[o,`%`]})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Approval window`}),(0,i.jsxs)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:[c[0],`% - `,c[1],`%`]})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Thresholdni siljitib, keyin range oynasini toraytirib ko‘ring. Demo mahsulotdagi tuning holatiga yaqin ishlaydi.`})}):null]})}exports.SliderShowcase=o;

package/dist/src/showcase/premium/slider/showcase.js

@@ -0,0 +1,108 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { RangeSlider as t, Slider as n } from "../../../components/inputs/slider.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/slider/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function s({ mode: s }) {
+	let [c, l] = r.useState(72), [u, d] = r.useState([20, 80]);
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Range control"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Slider should make thresholds legible, not vague"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Use sliders where a continuous range is easier than manual typing. The control needs a visible meaning and clear current value."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Thresholds"
+						}), /* @__PURE__ */ i(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Range windows"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: o,
+					children: /* @__PURE__ */ i(n, {
+						label: "Alert threshold",
+						description: "Raise or lower the score that triggers manual review.",
+						value: c,
+						onValueChange: l,
+						showValue: !0,
+						formatValue: (e) => `${e}%`
+					})
+				}), /* @__PURE__ */ i("section", {
+					className: o,
+					children: /* @__PURE__ */ i(t, {
+						label: "Accepted score window",
+						description: "Only scores inside this range pass automatic approval.",
+						value: u,
+						onValueChange: d,
+						showValue: !0,
+						formatValue: (e) => `${e[0]}% - ${e[1]}%`
+					})
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current threshold"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: [c, "%"]
+					})]
+				}), /* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Approval window"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: [
+							u[0],
+							"% - ",
+							u[1],
+							"%"
+						]
+					})]
+				})]
+			}),
+			s === "playground" ? /* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i("p", {
+					className: "text-sm aui-text-muted",
+					children: "Thresholdni siljitib, keyin range oynasini toraytirib ko‘ring. Demo mahsulotdagi tuning holatiga yaqin ishlaydi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as SliderShowcase };

package/dist/src/showcase/premium/sortable-list/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.SortableListShowcase=t.SortableListShowcase,exports.sortableListMock=e.sortableListMock;

package/dist/src/showcase/premium/sortable-list/index.js

@@ -0,0 +1,3 @@
+import { sortableListMock as e } from "./mock.js";
+import { SortableListShowcase as t } from "./showcase.js";
+export { t as SortableListShowcase, e as sortableListMock };

package/dist/src/showcase/premium/sortable-list/mock.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { SortableList } from "tembro"
+
+const initialItems = [
+  { id: "brief", label: "Product brief" },
+  { id: "design", label: "Design review" },
+  { id: "release", label: "Release checklist" },
+]
+
+export function Example() {
+  const [items, setItems] = React.useState(initialItems)
+
+  return (
+    <SortableList
+      items={items}
+      getItemId={(item) => item.id}
+      getItemLabel={(item) => item.label}
+      renderItem={(item) => item.label}
+      onItemsChange={setItems}
+    />
+  )
+}`,cliCommand:`npx tembro add sortable-list`,highlights:[`Pointer, touch and keyboard sorting`,`Controlled and uncontrolled state`,`Drag overlay and screen-reader instructions`],scenarios:[{title:`Priority queue`,description:`Reorder work while keeping the resulting array in application state.`},{title:`Form sections`,description:`Let users arrange configurable fields with an explicit drag handle.`}]};exports.sortableListMock=e;

package/dist/src/showcase/premium/sortable-list/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/sortable-list/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { SortableList } from \"tembro\"\n\nconst initialItems = [\n  { id: \"brief\", label: \"Product brief\" },\n  { id: \"design\", label: \"Design review\" },\n  { id: \"release\", label: \"Release checklist\" },\n]\n\nexport function Example() {\n  const [items, setItems] = React.useState(initialItems)\n\n  return (\n    <SortableList\n      items={items}\n      getItemId={(item) => item.id}\n      getItemLabel={(item) => item.label}\n      renderItem={(item) => item.label}\n      onItemsChange={setItems}\n    />\n  )\n}",
+	cliCommand: "npx tembro add sortable-list",
+	highlights: [
+		"Pointer, touch and keyboard sorting",
+		"Controlled and uncontrolled state",
+		"Drag overlay and screen-reader instructions"
+	],
+	scenarios: [{
+		title: "Priority queue",
+		description: "Reorder work while keeping the resulting array in application state."
+	}, {
+		title: "Form sections",
+		description: "Let users arrange configurable fields with an explicit drag handle."
+	}]
+};
+//#endregion
+export { e as sortableListMock };

package/dist/src/showcase/premium/sortable-list/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/dnd/sortable-list.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{id:`brief`,label:`Product brief`,owner:`Azamat`,tone:`Ready`},{id:`design`,label:`Design review`,owner:`Madina`,tone:`Review`},{id:`release`,label:`Release checklist`,owner:`Jasur`,tone:`Blocked`},{id:`docs`,label:`Documentation`,owner:`Nodira`,tone:`Draft`}];function s(){let[e,s]=i.useState(o),[c,l]=i.useState(`No moves yet`);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3`,children:[(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:c}),(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>s(o),children:`Reset order`})]}),(0,a.jsx)(r.SortableList,{items:e,getItemId:e=>e.id,getItemLabel:e=>e.label,onItemsChange:(e,t)=>{s(e),l(`${t.item.label}: ${t.oldIndex+1} → ${t.newIndex+1}`)},renderItem:e=>(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center justify-between gap-3 px-1 py-1.5`,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`div`,{className:`truncate text-sm font-medium`,children:e.label}),(0,a.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`Owner: `,e.owner]})]}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e.tone})]})})]})}exports.SortableListShowcase=s;

package/dist/src/showcase/premium/sortable-list/showcase.js

@@ -0,0 +1,76 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { SortableList as n } from "../../../components/dnd/sortable-list.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/sortable-list/showcase.tsx
+var o = [
+	{
+		id: "brief",
+		label: "Product brief",
+		owner: "Azamat",
+		tone: "Ready"
+	},
+	{
+		id: "design",
+		label: "Design review",
+		owner: "Madina",
+		tone: "Review"
+	},
+	{
+		id: "release",
+		label: "Release checklist",
+		owner: "Jasur",
+		tone: "Blocked"
+	},
+	{
+		id: "docs",
+		label: "Documentation",
+		owner: "Nodira",
+		tone: "Draft"
+	}
+];
+function s() {
+	let [s, c] = r.useState(o), [l, u] = r.useState("No moves yet");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex flex-wrap items-center justify-between gap-3",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-sm text-muted-foreground",
+				children: l
+			}), /* @__PURE__ */ i(e, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				onClick: () => c(o),
+				children: "Reset order"
+			})]
+		}), /* @__PURE__ */ i(n, {
+			items: s,
+			getItemId: (e) => e.id,
+			getItemLabel: (e) => e.label,
+			onItemsChange: (e, t) => {
+				c(e), u(`${t.item.label}: ${t.oldIndex + 1} → ${t.newIndex + 1}`);
+			},
+			renderItem: (e) => /* @__PURE__ */ a("div", {
+				className: "flex min-w-0 items-center justify-between gap-3 px-1 py-1.5",
+				children: [/* @__PURE__ */ a("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ i("div", {
+						className: "truncate text-sm font-medium",
+						children: e.label
+					}), /* @__PURE__ */ a("div", {
+						className: "text-xs text-muted-foreground",
+						children: ["Owner: ", e.owner]
+					})]
+				}), /* @__PURE__ */ i(t, {
+					variant: "outline",
+					children: e.tone
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as SortableListShowcase };

package/dist/src/showcase/premium/spinner/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.SpinnerShowcase=t.SpinnerShowcase,exports.spinnerMock=e.spinnerMock;

package/dist/src/showcase/premium/spinner/index.js

@@ -0,0 +1,3 @@
+import { spinnerMock as e } from "./mock.js";
+import { SpinnerShowcase as t } from "./showcase.js";
+export { t as SpinnerShowcase, e as spinnerMock };

package/dist/src/showcase/premium/spinner/mock.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingOverlay, Spinner } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Spinner size="sm" label="Refreshing" />
+
+      <LoadingOverlay loading label="Saving changes">
+        <div className="rounded-xl border p-6">Content under save</div>
+      </LoadingOverlay>
+    </div>
+  )
+}`,cliCommand:`npx tembro add spinner`,highlights:[`Inline spinner plus overlay mode from the same export`,`Size tokens for dense buttons, cards, and page sections`,`Useful for short-lived async work`],scenarios:[{title:`Inline refresh`,description:`Show immediate feedback inside a compact action row.`},{title:`Section save`,description:`Temporarily lock a panel while preserving its layout.`},{title:`Background fetch`,description:`Signal progress without replacing the whole route.`}]};exports.spinnerMock=e;

package/dist/src/showcase/premium/spinner/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/spinner/mock.ts
+var e = {
+	code: "import { LoadingOverlay, Spinner } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Spinner size=\"sm\" label=\"Refreshing\" />\n\n      <LoadingOverlay loading label=\"Saving changes\">\n        <div className=\"rounded-xl border p-6\">Content under save</div>\n      </LoadingOverlay>\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add spinner",
+	highlights: [
+		"Inline spinner plus overlay mode from the same export",
+		"Size tokens for dense buttons, cards, and page sections",
+		"Useful for short-lived async work"
+	],
+	scenarios: [
+		{
+			title: "Inline refresh",
+			description: "Show immediate feedback inside a compact action row."
+		},
+		{
+			title: "Section save",
+			description: "Temporarily lock a panel while preserving its layout."
+		},
+		{
+			title: "Background fetch",
+			description: "Signal progress without replacing the whole route."
+		}
+	]
+};
+//#endregion
+export { e as spinnerMock };

package/dist/src/showcase/premium/spinner/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/spinner/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Spinner covers short async feedback`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it for quick inline or section-level pending states. If the wait grows, move up to a fuller loading state.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`xs`,label:`Syncing`}),(0,a.jsx)(`span`,{className:`text-sm aui-text-muted`,children:`Syncing tokens`})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`sm`,label:`Refreshing`}),(0,a.jsx)(`span`,{className:`text-sm aui-text-muted`,children:`Refreshing routes`})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`lg`,label:`Publishing`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:`Publishing`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsx)(r.LoadingOverlay,{loading:e,label:`Saving configuration`,children:(0,a.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-5`,children:(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Billing configuration`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Overlay mode blocks edits briefly while keeping the context visible.`})]}),(0,a.jsx)(t.Button,{onClick:()=>{s(!0),window.setTimeout(()=>s(!1),1200)},children:e?`Saving...`:`Save changes`})]})})}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Inline spinners are best when the user already knows what action was triggered.`}),(0,a.jsx)(`p`,{children:`Overlay mode is safer for short locked saves than replacing the whole section with placeholders.`}),(0,a.jsx)(`p`,{children:`Do not leave a spinner alone for long-running uncertain work. Add progress or explanatory copy.`})]})]})]})})]})}exports.SpinnerShowcase=s;