tembro 3.1.16 → 4.0.0

package/dist/src/showcase/premium/select/types.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/src/showcase/premium/signature-pad/index.cjs

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

package/dist/src/showcase/premium/signature-pad/index.js

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

package/dist/src/showcase/premium/signature-pad/mock.cjs

@@ -1,10 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { SignaturePad } from "tembro"
-
-export function Example() {
-  return (
-    <SignaturePad
-      onValueChange={(strokes) => console.log(strokes)}
-      onStrokeEnd={(stroke) => console.log(stroke)}
-    />
-  )
-}`,cliCommand:`npx tembro add signature-pad`,highlights:[`Controlled normalized stroke data`,`Undo, clear, pointer capture, and PNG export API`],scenarios:[{title:`Approval flow`,description:`Capture a signature without coupling form state to canvas pixels.`},{title:`Delivery proof`,description:`Store normalized strokes or export the rendered signature as PNG.`}]};exports.signaturePadMock=e;

package/dist/src/showcase/premium/signature-pad/mock.js

@@ -1,15 +0,0 @@
-//#region src/showcase/premium/signature-pad/mock.ts
-var e = {
-	code: "import { SignaturePad } from \"tembro\"\n\nexport function Example() {\n  return (\n    <SignaturePad\n      onValueChange={(strokes) => console.log(strokes)}\n      onStrokeEnd={(stroke) => console.log(stroke)}\n    />\n  )\n}",
-	cliCommand: "npx tembro add signature-pad",
-	highlights: ["Controlled normalized stroke data", "Undo, clear, pointer capture, and PNG export API"],
-	scenarios: [{
-		title: "Approval flow",
-		description: "Capture a signature without coupling form state to canvas pixels."
-	}, {
-		title: "Delivery proof",
-		description: "Store normalized strokes or export the rendered signature as PNG."
-	}]
-};
-//#endregion
-export { e as signaturePadMock };

package/dist/src/showcase/premium/signature-pad/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/signature-pad.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState([]);return(0,r.jsxs)(`div`,{className:`mx-auto grid w-full max-w-xl gap-3`,children:[(0,r.jsx)(t.SignaturePad,{value:e,onValueChange:i}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[e.length,` stroke`,e.length===1?``:`s`,` captured`]})]})}exports.SignaturePadShowcase=i;

package/dist/src/showcase/premium/signature-pad/showcase.js

@@ -1,24 +0,0 @@
-import { SignaturePad as e } from "../../../components/inputs/signature-pad.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/signature-pad/showcase.tsx
-function i() {
-	let [i, a] = t.useState([]);
-	return /* @__PURE__ */ r("div", {
-		className: "mx-auto grid w-full max-w-xl gap-3",
-		children: [/* @__PURE__ */ n(e, {
-			value: i,
-			onValueChange: a
-		}), /* @__PURE__ */ r("p", {
-			className: "text-sm text-muted-foreground",
-			children: [
-				i.length,
-				" stroke",
-				i.length === 1 ? "" : "s",
-				" captured"
-			]
-		})]
-	});
-}
-//#endregion
-export { i as SignaturePadShowcase };

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

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

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

@@ -1,3 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,26 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,31 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,19 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,26 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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;