tembro 2.1.13 → 3.1.1

package/dist/src/showcase/premium/radio-group/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/radio-group/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[{value:`starter`,label:`Starter`,description:`Good for single workspace setup.`},{value:`growth`,label:`Growth`,description:`Adds more seats and team workflows.`},{value:`enterprise`,label:`Enterprise`,description:`Advanced controls and support.`,disabled:!0}];function c(){let[e,c]=i.useState(`growth`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Single choice`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Radio group should make one active choice obvious`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep all options visible when users should compare them before selecting one final answer.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visible choices`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single answer`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Workspace plan`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.RadioGroup,{value:e,onValueChange:c,options:s.map(e=>({...e}))})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:s.find(t=>t.value===e)?.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:s.find(t=>t.value===e)?.description})]})]})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current plan: `,e]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n.value?`default`:`secondary`,onClick:()=>c(n.value),children:n.label},n.value))})]}),(0,a.jsx)(`div`,{className:`mt-5`,children:(0,a.jsx)(r.RadioGroup,{invalid:!0,defaultValue:`card`,orientation:`horizontal`,options:[{value:`card`,label:`Card`},{value:`bank`,label:`Bank`},{value:`invoice`,label:`Invoice`,disabled:!0}]})})]})]})}exports.RadioGroupShowcase=c;

package/dist/src/showcase/premium/radio-group/showcase.js

@@ -0,0 +1,149 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { RadioGroup as n } from "../../../components/ui/radio-group/index.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/radio-group/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
+	{
+		value: "starter",
+		label: "Starter",
+		description: "Good for single workspace setup."
+	},
+	{
+		value: "growth",
+		label: "Growth",
+		description: "Adds more seats and team workflows."
+	},
+	{
+		value: "enterprise",
+		label: "Enterprise",
+		description: "Advanced controls and support.",
+		disabled: !0
+	}
+];
+function c() {
+	let [c, l] = r.useState("growth");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ a("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: "Single choice"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Radio group should make one active choice obvious"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Keep all options visible when users should compare them before selecting one final answer."
+						})
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Visible choices"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Single answer"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Controlled"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]",
+				children: [/* @__PURE__ */ a("div", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Workspace plan"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ i(n, {
+							value: c,
+							onValueChange: l,
+							options: s.map((e) => ({ ...e }))
+						})
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: o,
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Selection summary"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 text-lg font-semibold aui-text-strong",
+							children: s.find((e) => e.value === c)?.label
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: s.find((e) => e.value === c)?.description
+						})
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ a("section", {
+			className: o,
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Live state"
+				}), /* @__PURE__ */ a("h4", {
+					className: "mt-2 text-lg font-semibold aui-text-strong",
+					children: ["Current plan: ", c]
+				})] }), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: s.map((t) => /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "sm",
+						variant: c === t.value ? "default" : "secondary",
+						onClick: () => l(t.value),
+						children: t.label
+					}, t.value))
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: "mt-5",
+				children: /* @__PURE__ */ i(n, {
+					invalid: !0,
+					defaultValue: "card",
+					orientation: "horizontal",
+					options: [
+						{
+							value: "card",
+							label: "Card"
+						},
+						{
+							value: "bank",
+							label: "Bank"
+						},
+						{
+							value: "invoice",
+							label: "Invoice",
+							disabled: !0
+						}
+					]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as RadioGroupShowcase };

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

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

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

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

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

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Rating } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState(4)
+
+  return (
+    <Rating
+      value={value}
+      onValueChange={setValue}
+      labels={{ rate: (score) => \`Rate \${score}\` }}
+    />
+  )
+}`,highlights:[`Compact score input`,`Hover and clear behavior`,`Accessible label support`,`Good for reviews, QA, and lightweight feedback`],scenarios:[{title:`QA handoff`,description:`Capture a quick confidence score before shipping a change.`},{title:`Support satisfaction`,description:`Collect a lightweight post-resolution rating.`},{title:`Internal review`,description:`Use a compact score where a full form would slow people down.`}],capabilityNotes:[`Use rating when relative sentiment matters more than exact numeric entry.`,`Allow clear when revising feedback is a normal part of the flow.`,`Keep the label around the score context outside the stars themselves.`]};exports.ratingMock=e;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/rating/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Rating } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(4)\n\n  return (\n    <Rating\n      value={value}\n      onValueChange={setValue}\n      labels={{ rate: (score) => `Rate ${score}` }}\n    />\n  )\n}",
+	highlights: [
+		"Compact score input",
+		"Hover and clear behavior",
+		"Accessible label support",
+		"Good for reviews, QA, and lightweight feedback"
+	],
+	scenarios: [
+		{
+			title: "QA handoff",
+			description: "Capture a quick confidence score before shipping a change."
+		},
+		{
+			title: "Support satisfaction",
+			description: "Collect a lightweight post-resolution rating."
+		},
+		{
+			title: "Internal review",
+			description: "Use a compact score where a full form would slow people down."
+		}
+	],
+	capabilityNotes: [
+		"Use rating when relative sentiment matters more than exact numeric entry.",
+		"Allow clear when revising feedback is a normal part of the flow.",
+		"Keep the label around the score context outside the stars themselves."
+	]
+};
+//#endregion
+export { e as ratingMock };

package/dist/src/showcase/premium/rating/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/rating.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(4);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:`Feedback input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Rating should capture quick sentiment without turning into a full form`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control is best when people need a fast qualitative score and should not be distracted by extra layout or wrapper UI.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Quick score`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Clearable`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.Rating,{value:o,onValueChange:s,labels:{rate:e=>`Rate ${e}`,clear:`Reset score`}})}),(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 score`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:o||`No score`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Typical usage`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Good for support resolution, QA confidence, compact reviews, and places where a full textarea would slow the task down.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Yulduzlar ustiga olib borib hover holatini va shu scorega yana bosib clear bo‘lishini sinab ko‘ring.`})}):null]})}exports.RatingShowcase=o;

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

@@ -0,0 +1,90 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { Rating as t } from "../../../components/inputs/rating.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/rating/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function o({ mode: o }) {
+	let [s, c] = n.useState(4);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Feedback input"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Rating should capture quick sentiment without turning into a full form"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This control is best when people need a fast qualitative score and should not be distracted by extra layout or wrapper UI."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Quick score"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Clearable"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r(t, {
+					value: s,
+					onValueChange: c,
+					labels: {
+						rate: (e) => `Rate ${e}`,
+						clear: "Reset score"
+					}
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current score"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: s || "No score"
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Typical usage"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Good for support resolution, QA confidence, compact reviews, and places where a full textarea would slow the task down."
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Yulduzlar ustiga olib borib hover holatini va shu scorega yana bosib clear bo‘lishini sinab ko‘ring."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as RatingShowcase };

package/dist/src/showcase/premium/resizable-panel/index.cjs

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

package/dist/src/showcase/premium/resizable-panel/index.js

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

package/dist/src/showcase/premium/resizable-panel/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "tembro"
+
+export function Example() {
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={30}>Catalog</ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={70}>Details</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}`,cliCommand:`npx tembro add resizable-panel`,highlights:[`Declarative split layout with customizable handles`,`Supports horizontal and vertical directions`,`Keyboard-accessible resize interactions`],scenarios:[{title:`Code editors`,description:`Split file tree and editor panes.`},{title:`Dashboards`,description:`Resize nav and detail panels interactively.`}]};exports.resizablePanelMock=e;

package/dist/src/showcase/premium/resizable-panel/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/resizable-panel/mock.ts
+var e = {
+	code: "import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"tembro\"\n\nexport function Example() {\n  return (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={30}>Catalog</ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={70}>Details</ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}",
+	cliCommand: "npx tembro add resizable-panel",
+	highlights: [
+		"Declarative split layout with customizable handles",
+		"Supports horizontal and vertical directions",
+		"Keyboard-accessible resize interactions"
+	],
+	scenarios: [{
+		title: "Code editors",
+		description: "Split file tree and editor panes."
+	}, {
+		title: "Dashboards",
+		description: "Resize nav and detail panels interactively."
+	}]
+};
+//#endregion
+export { e as resizablePanelMock };

package/dist/src/showcase/premium/resizable-panel/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/resizable-panel.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(!1);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`button`,{type:`button`,className:`inline-flex rounded-md border px-3 py-1.5 text-sm`,onClick:()=>i(e=>!e),children:[`Direction: `,e?`Vertical`:`Horizontal`]}),(0,r.jsxs)(t.ResizablePanelGroup,{direction:e?`vertical`:`horizontal`,className:`h-56`,children:[(0,r.jsx)(t.ResizablePanel,{defaultSize:35,className:`grid place-items-center`,children:(0,r.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Navigation`})}),(0,r.jsx)(t.ResizableHandle,{}),(0,r.jsx)(t.ResizablePanel,{defaultSize:65,className:`grid place-items-center`,children:(0,r.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Details`})})]})]})}exports.ResizablePanelShowcase=i;

package/dist/src/showcase/premium/resizable-panel/showcase.js

@@ -0,0 +1,40 @@
+import { ResizableHandle as e, ResizablePanel as t, ResizablePanelGroup as n } from "../../../components/modern/resizable-panel.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/resizable-panel/showcase.tsx
+function o() {
+	let [o, s] = r.useState(!1);
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ a("button", {
+			type: "button",
+			className: "inline-flex rounded-md border px-3 py-1.5 text-sm",
+			onClick: () => s((e) => !e),
+			children: ["Direction: ", o ? "Vertical" : "Horizontal"]
+		}), /* @__PURE__ */ a(n, {
+			direction: o ? "vertical" : "horizontal",
+			className: "h-56",
+			children: [
+				/* @__PURE__ */ i(t, {
+					defaultSize: 35,
+					className: "grid place-items-center",
+					children: /* @__PURE__ */ i("span", {
+						className: "text-sm text-muted-foreground",
+						children: "Navigation"
+					})
+				}),
+				/* @__PURE__ */ i(e, {}),
+				/* @__PURE__ */ i(t, {
+					defaultSize: 65,
+					className: "grid place-items-center",
+					children: /* @__PURE__ */ i("span", {
+						className: "text-sm text-muted-foreground",
+						children: "Details"
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { o as ResizablePanelShowcase };

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

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

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

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

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

@@ -0,0 +1,12 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Result } from "tembro"
+
+export function Example() {
+  return (
+    <Result
+      status="success"
+      title="Project created"
+      description="Your new workspace is ready and all checks passed."
+      compact
+    />
+  )
+}`,highlights:[`Semantic statuses`,`Inline action block`,`Compact and full variants`,`Reusable result states for non-page flows`],scenarios:[{title:`Create success`,description:`Use after successful create/update actions.`},{title:`Error outcome`,description:`Show clear recovery action and short guidance.`},{title:`Not found state`,description:`Use for invalid entity pages and missing route scenarios.`}],capabilityNotes:[`Align status text with backend outcomes.`,`Pair each state with primary and optional secondary actions.`,"Keep `description` short and specific to user intent."]};exports.resultMock=e;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/result/mock.ts
+var e = {
+	code: "import { Result } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Result\n      status=\"success\"\n      title=\"Project created\"\n      description=\"Your new workspace is ready and all checks passed.\"\n      compact\n    />\n  )\n}",
+	highlights: [
+		"Semantic statuses",
+		"Inline action block",
+		"Compact and full variants",
+		"Reusable result states for non-page flows"
+	],
+	scenarios: [
+		{
+			title: "Create success",
+			description: "Use after successful create/update actions."
+		},
+		{
+			title: "Error outcome",
+			description: "Show clear recovery action and short guidance."
+		},
+		{
+			title: "Not found state",
+			description: "Use for invalid entity pages and missing route scenarios."
+		}
+	],
+	capabilityNotes: [
+		"Align status text with backend outcomes.",
+		"Pair each state with primary and optional secondary actions.",
+		"Keep `description` short and specific to user intent."
+	]
+};
+//#endregion
+export { e as resultMock };

package/dist/src/showcase/premium/result/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/display/result.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`success`,`error`,`warning`,`info`,`not-found`,`forbidden`,`server-error`],s={success:`The requested action completed.`,error:`The action failed. Review the message and try again.`,warning:`The request completed with warnings. Verify details before proceed.`,info:`An additional state is available for neutral communication.`,"not-found":`The requested resource could not be found.`,forbidden:`You do not have permission to perform this action.`,"server-error":`The server returned an unexpected response.`};function c({mode:e}){let[c,l]=i.useState(`success`),[u,d]=i.useState(e===`playground`),f=c===`success`?`Operation complete`:`Attention required`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Outcome state`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Result should explain what happened next`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use result for decisive page outcomes: success, failure, missing access, or blocked states. It should never read like a decorative alert.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Success`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Failure`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Blocked access`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(`button`,{className:`rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted`,onClick:()=>d(e=>!e),children:u?`Use roomy mode`:`Use compact mode`}),o.map(e=>(0,a.jsx)(`button`,{className:`rounded-full px-4 py-2 text-sm ${c===e?`bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]`:`border border-[color:var(--aui-divider)] aui-text-muted`}`,onClick:()=>l(e),children:e},e))]}):null,(0,a.jsx)(r.Result,{status:c,title:f,compact:u,description:s[c],actions:(0,a.jsx)(t.Button,{size:`sm`,variant:c===`success`?`outline`:`default`,children:c===`success`?`Continue`:`Try again`})})]})}exports.ResultShowcase=c;

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

@@ -0,0 +1,98 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Result as n } from "../../../components/display/result.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/result/showcase.tsx
+var o = [
+	"success",
+	"error",
+	"warning",
+	"info",
+	"not-found",
+	"forbidden",
+	"server-error"
+], s = {
+	success: "The requested action completed.",
+	error: "The action failed. Review the message and try again.",
+	warning: "The request completed with warnings. Verify details before proceed.",
+	info: "An additional state is available for neutral communication.",
+	"not-found": "The requested resource could not be found.",
+	forbidden: "You do not have permission to perform this action.",
+	"server-error": "The server returned an unexpected response."
+};
+function c({ mode: c }) {
+	let [l, u] = r.useState("success"), [d, f] = r.useState(c === "playground"), p = l === "success" ? "Operation complete" : "Attention required";
+	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: "Outcome state"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Result should explain what happened next"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Use result for decisive page outcomes: success, failure, missing access, or blocked states. It should never read like a decorative alert."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Success"
+							}),
+							/* @__PURE__ */ i(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Failure"
+							}),
+							/* @__PURE__ */ i(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Blocked access"
+							})
+						]
+					})]
+				})
+			}),
+			c === "playground" ? /* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ i("button", {
+					className: "rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted",
+					onClick: () => f((e) => !e),
+					children: d ? "Use roomy mode" : "Use compact mode"
+				}), o.map((e) => /* @__PURE__ */ i("button", {
+					className: `rounded-full px-4 py-2 text-sm ${l === e ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`,
+					onClick: () => u(e),
+					children: e
+				}, e))]
+			}) : null,
+			/* @__PURE__ */ i(n, {
+				status: l,
+				title: p,
+				compact: d,
+				description: s[l],
+				actions: /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: l === "success" ? "outline" : "default",
+					children: l === "success" ? "Continue" : "Try again"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as ResultShowcase };

package/dist/src/showcase/premium/right-click-menu/index.cjs

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

package/dist/src/showcase/premium/right-click-menu/index.js

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

package/dist/src/showcase/premium/right-click-menu/mock.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { RightClickMenu } from "tembro"
+
+export function Example() {
+  return (
+    <RightClickMenu
+      items={[
+        { label: "Rename" },
+        { label: "Duplicate" },
+        { label: "Archive" },
+      ]}
+    >
+      <div className="rounded-2xl border border-border bg-card px-4 py-8 text-sm">
+        Right click this surface
+      </div>
+    </RightClickMenu>
+  )
+}`,htmlCode:`<div data-slot="right-click-menu"></div>`,cliCommand:`npx tembro add right-click-menu`,highlights:[`Context actions`,`Pointer workflow`,`Compact menus`,`Workspace interactions`],relatedBlockSlugs:[`users-table`,`crm-dashboard`,`dashboard-starter`],scenarios:[{title:`File-like actions`,description:`Useful where users expect desktop-style context menus.`},{title:`Dense workspaces`,description:`Expose secondary row actions without cluttering the default UI.`},{title:`Power-user flow`,description:`Keep advanced actions one right-click away instead of always visible.`}],capabilityNotes:[`Use RightClickMenu only where pointer-first interaction is expected.`,`Always keep a visible fallback path for touch and keyboard users.`,`Keep labels short so menus remain scannable.`,`Reserve it for secondary actions, not the only way to complete a task.`]};exports.rightClickMenuMock=e;

package/dist/src/showcase/premium/right-click-menu/mock.js

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/right-click-menu/mock.ts
+var e = {
+	code: "import { RightClickMenu } from \"tembro\"\n\nexport function Example() {\n  return (\n    <RightClickMenu\n      items={[\n        { label: \"Rename\" },\n        { label: \"Duplicate\" },\n        { label: \"Archive\" },\n      ]}\n    >\n      <div className=\"rounded-2xl border border-border bg-card px-4 py-8 text-sm\">\n        Right click this surface\n      </div>\n    </RightClickMenu>\n  )\n}",
+	htmlCode: "<div data-slot=\"right-click-menu\"></div>",
+	cliCommand: "npx tembro add right-click-menu",
+	highlights: [
+		"Context actions",
+		"Pointer workflow",
+		"Compact menus",
+		"Workspace interactions"
+	],
+	relatedBlockSlugs: [
+		"users-table",
+		"crm-dashboard",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "File-like actions",
+			description: "Useful where users expect desktop-style context menus."
+		},
+		{
+			title: "Dense workspaces",
+			description: "Expose secondary row actions without cluttering the default UI."
+		},
+		{
+			title: "Power-user flow",
+			description: "Keep advanced actions one right-click away instead of always visible."
+		}
+	],
+	capabilityNotes: [
+		"Use RightClickMenu only where pointer-first interaction is expected.",
+		"Always keep a visible fallback path for touch and keyboard users.",
+		"Keep labels short so menus remain scannable.",
+		"Reserve it for secondary actions, not the only way to complete a task."
+	]
+};
+//#endregion
+export { e as rightClickMenuMock };

package/dist/src/showcase/premium/right-click-menu/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/right-click-menu/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function c(){let[e,c]=i.useState(`Rename`);return(0,o.jsxs)(`div`,{className:`space-y-5`,children:[(0,o.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Context actions`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Right click menu should hide secondary actions until they are needed`}),(0,o.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for workspace-style surfaces where always-visible row actions would create too much noise.`})]}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Pointer workflow`}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact menu`})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,o.jsxs)(`div`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Interactive surface`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.RightClickMenu,{items:[{label:`Rename`,icon:(0,o.jsx)(a.PencilIcon,{}),shortcut:`R`,onSelect:()=>c(`Rename`)},{label:`Duplicate`,icon:(0,o.jsx)(a.CopyIcon,{}),shortcut:`D`,onSelect:()=>c(`Duplicate`)},{label:`Archive`,icon:(0,o.jsx)(a.ArchiveIcon,{}),onSelect:()=>c(`Archive`)},{label:`Remove`,icon:(0,o.jsx)(a.Trash2Icon,{}),variant:`destructive`,onSelect:()=>c(`Remove`)}],children:(0,o.jsx)(`div`,{className:`rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted`,tabIndex:0,children:`Right click, use Shift+F10, or press the context-menu key in this area`})})})]}),(0,o.jsxs)(`div`,{className:s,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last action`}),(0,o.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:e}),(0,o.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Keep a visible fallback action path for keyboard and touch users.`})]})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,o.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Selected action: `,e]})]}),(0,o.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[`Rename`,`Duplicate`,`Archive`].map(n=>(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:n},n))})]})})]})}exports.RightClickMenuShowcase=c;