tembro 2.1.13 → 3.1.1

package/dist/src/showcase/premium/notification-center/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { NotificationCenter } from "tembro"
+
+export function Example() {
+  const [items, setItems] = React.useState([
+    { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false },
+    { id: "2", title: "Deployment ready", description: "Release candidate passed checks.", time: "12m ago", read: true },
+  ])
+
+  return (
+    <NotificationCenter
+      notifications={items}
+      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
+    />
+  )
+}`,highlights:[`Unread count badge`,`Mark all read action`,`Popover-based notification list`,`Compact header action surface`],scenarios:[{title:`Workspace updates`,description:`Show billing, deployment, or access events in one compact center.`},{title:`Admin dashboard`,description:`Expose unread tasks without forcing a full dedicated route.`},{title:`Operational alerts`,description:`Let users clear or inspect events directly from the header.`}],capabilityNotes:[`Notification center is best for short, recent events that require optional follow-up.`,`Unread count should reflect genuinely actionable items.`,`Avoid treating this as a dumping ground for every system message.`]};exports.notificationCenterMock=e;

package/dist/src/showcase/premium/notification-center/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/notification-center/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { NotificationCenter } from \"tembro\"\n\nexport function Example() {\n  const [items, setItems] = React.useState([\n    { id: \"1\", title: \"Invoice paid\", description: \"Acme Growth settled invoice #2048.\", time: \"2m ago\", read: false },\n    { id: \"2\", title: \"Deployment ready\", description: \"Release candidate passed checks.\", time: \"12m ago\", read: true },\n  ])\n\n  return (\n    <NotificationCenter\n      notifications={items}\n      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}\n    />\n  )\n}",
+	highlights: [
+		"Unread count badge",
+		"Mark all read action",
+		"Popover-based notification list",
+		"Compact header action surface"
+	],
+	scenarios: [
+		{
+			title: "Workspace updates",
+			description: "Show billing, deployment, or access events in one compact center."
+		},
+		{
+			title: "Admin dashboard",
+			description: "Expose unread tasks without forcing a full dedicated route."
+		},
+		{
+			title: "Operational alerts",
+			description: "Let users clear or inspect events directly from the header."
+		}
+	],
+	capabilityNotes: [
+		"Notification center is best for short, recent events that require optional follow-up.",
+		"Unread count should reflect genuinely actionable items.",
+		"Avoid treating this as a dumping ground for every system message."
+	]
+};
+//#endregion
+export { e as notificationCenterMock };

package/dist/src/showcase/premium/notification-center/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/notifications/notification-center.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`,o=[{id:`1`,title:`Invoice paid`,description:`Acme Growth settled invoice #2048.`,time:`2m ago`,read:!1,group:`Today`},{id:`2`,title:`Deployment ready`,description:`Release candidate passed checks and waits for promotion.`,time:`12m ago`,read:!1,group:`Today`},{id:`3`,title:`Member invited`,description:`Operations workspace access was sent to Dilshod.`,time:`1h ago`,read:!0,group:`Earlier`}];function s({mode:e}){let[s,c]=r.useState(o),l=s.filter(e=>!e.read).length;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:`Header utility`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`NotificationCenter should summarize recent action without becoming a second inbox`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control works when unread counts are honest and the list stays short, recent, and directly actionable.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Unread count`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Popover feed`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live notification trigger`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the bell and inspect unread items.`})]}),(0,i.jsx)(n.NotificationCenter,{notifications:s,onMarkAllRead:()=>c(e=>e.map(e=>({...e,read:!0}))),onClearAll:()=>c([]),onNotificationClick:e=>c(t=>t.map(t=>t.id===e.id?{...t,read:!0}:t))})]})}),(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:`Unread items`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:l})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi."})}):null]})}exports.NotificationCenterShowcase=s;

package/dist/src/showcase/premium/notification-center/showcase.js

@@ -0,0 +1,128 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { NotificationCenter as t } from "../../../components/notifications/notification-center.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/notification-center/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", o = [
+	{
+		id: "1",
+		title: "Invoice paid",
+		description: "Acme Growth settled invoice #2048.",
+		time: "2m ago",
+		read: !1,
+		group: "Today"
+	},
+	{
+		id: "2",
+		title: "Deployment ready",
+		description: "Release candidate passed checks and waits for promotion.",
+		time: "12m ago",
+		read: !1,
+		group: "Today"
+	},
+	{
+		id: "3",
+		title: "Member invited",
+		description: "Operations workspace access was sent to Dilshod.",
+		time: "1h ago",
+		read: !0,
+		group: "Earlier"
+	}
+];
+function s({ mode: s }) {
+	let [c, l] = n.useState(o), u = c.filter((e) => !e.read).length;
+	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: "Header utility"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "NotificationCenter should summarize recent action without becoming a second inbox"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This control works when unread counts are honest and the list stays short, recent, and directly actionable."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Unread count"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Popover feed"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Live notification trigger"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Open the bell and inspect unread items."
+					})] }), /* @__PURE__ */ r(t, {
+						notifications: c,
+						onMarkAllRead: () => l((e) => e.map((e) => ({
+							...e,
+							read: !0
+						}))),
+						onClearAll: () => l([]),
+						onNotificationClick: (e) => l((t) => t.map((t) => t.id === e.id ? {
+							...t,
+							read: !0
+						} : t))
+					})]
+				})
+			}),
+			/* @__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: "Unread items"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: u
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route."
+					})]
+				})]
+			}),
+			s === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as NotificationCenterShowcase };

package/dist/src/showcase/premium/number-input/index.cjs

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

package/dist/src/showcase/premium/number-input/index.js

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

package/dist/src/showcase/premium/number-input/mock.cjs

@@ -0,0 +1,32 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Input } from "tembro"
+
+export function Example() {
+  const [value, setValue] = useState<number | null>(14)
+  const [raw, setRaw] = useState("14")
+
+  return (
+    <div className="space-y-3">
+      <Input
+        kind="number"
+        value={value}
+        onNumberChange={(nextValue) => {
+          setValue(nextValue)
+          setRaw(String(nextValue ?? ""))
+        }}
+        onChange={(event) => setRaw(event.target.value)}
+        min={0}
+        max={100}
+        step={5}
+        allowEmpty
+      />
+      <p className="text-sm aui-text-subtle">
+        Parsed numeric: <strong>{value === null ? "unset" : value}</strong>
+      </p>
+      <p className="text-sm aui-text-muted">Raw text: {raw}</p>
+      <p className="text-sm aui-text-muted">
+        Try entering invalid chars to see how parse and clamp rules apply.
+      </p>
+    </div>
+  )
+}`,htmlCode:`<label for="example-number">Amount</label><input id="example-number" inputmode="decimal" type="text" />`,cliCommand:`npx tembro add input`,highlights:[`Numeric parsing`,`Min/max constraints`,`Decimal steps`,`allowEmpty fallback`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Budget field`,description:`Keep values inside business bounds while editing quickly.`},{title:`Invalid input`,description:`Use parser path to avoid NaN leaks into form data.`},{title:`Stepper steps`,description:`Use step values that match your business precision.`},{title:`Uncontrolled mode`,description:`Use defaultValue and HTML value when rapid typing is enough.`}],capabilityNotes:[`The component supports controlled numeric state and keeps string display behavior under user editing.`,"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.","`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",`Prefer controlled usage in forms that need instant validation and submit-time serialization.`]};exports.numberInputMock=e;

package/dist/src/showcase/premium/number-input/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/number-input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"number\"\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => setRaw(event.target.value)}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
+	htmlCode: "<label for=\"example-number\">Amount</label><input id=\"example-number\" inputmode=\"decimal\" type=\"text\" />",
+	cliCommand: "npx tembro add input",
+	highlights: [
+		"Numeric parsing",
+		"Min/max constraints",
+		"Decimal steps",
+		"allowEmpty fallback"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"users-table",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Budget field",
+			description: "Keep values inside business bounds while editing quickly."
+		},
+		{
+			title: "Invalid input",
+			description: "Use parser path to avoid NaN leaks into form data."
+		},
+		{
+			title: "Stepper steps",
+			description: "Use step values that match your business precision."
+		},
+		{
+			title: "Uncontrolled mode",
+			description: "Use defaultValue and HTML value when rapid typing is enough."
+		}
+	],
+	capabilityNotes: [
+		"The component supports controlled numeric state and keeps string display behavior under user editing.",
+		"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.",
+		"`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",
+		"Prefer controlled usage in forms that need instant validation and submit-time serialization."
+	]
+};
+//#endregion
+export { e as numberInputMock };

package/dist/src/showcase/premium/number-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(12);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`number`,value:r,onNumberChange:i,min:0,max:30,step:1}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Current value: `,r??`unset`]})]})}exports.NumberInputShowcase=r;

package/dist/src/showcase/premium/number-input/showcase.js

@@ -0,0 +1,23 @@
+import { Input as e } from "../../../components/ui/input/index.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/number-input/showcase.tsx
+function i() {
+	let [i, a] = t(12);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n(e, {
+			kind: "number",
+			value: i,
+			onNumberChange: a,
+			min: 0,
+			max: 30,
+			step: 1
+		}), /* @__PURE__ */ r("p", {
+			className: "aui-text-subtle text-sm",
+			children: ["Current value: ", i ?? "unset"]
+		})]
+	});
+}
+//#endregion
+export { i as NumberInputShowcase };

package/dist/src/showcase/premium/otp-input/index.cjs

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

package/dist/src/showcase/premium/otp-input/index.js

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

package/dist/src/showcase/premium/otp-input/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { OtpInput } from "tembro"
+
+export function Example() {
+  const [code, setCode] = React.useState("")
+
+  return (
+    <OtpInput
+      value={code}
+      onValueChange={setCode}
+      length={6}
+    />
+  )
+}`,highlights:[`Fixed-length code entry`,`Auto-advance focus`,`Paste handling`,`Good for 2FA and verification flows`],scenarios:[{title:`Login verification`,description:`Capture a 2FA code without forcing users through one input character at a time manually.`},{title:`Sensitive action confirm`,description:`Verify a short access code before dangerous changes.`},{title:`Invite acceptance`,description:`Handle compact confirmation codes in onboarding flows.`}],capabilityNotes:[`OTP is for short fixed codes, not general PIN builders with complex rules.`,`Paste support matters because users often copy codes from mail or authenticator apps.`,`Keep the surrounding copy minimal and precise.`]};exports.otpInputMock=e;

package/dist/src/showcase/premium/otp-input/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/otp-input/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { OtpInput } from \"tembro\"\n\nexport function Example() {\n  const [code, setCode] = React.useState(\"\")\n\n  return (\n    <OtpInput\n      value={code}\n      onValueChange={setCode}\n      length={6}\n    />\n  )\n}",
+	highlights: [
+		"Fixed-length code entry",
+		"Auto-advance focus",
+		"Paste handling",
+		"Good for 2FA and verification flows"
+	],
+	scenarios: [
+		{
+			title: "Login verification",
+			description: "Capture a 2FA code without forcing users through one input character at a time manually."
+		},
+		{
+			title: "Sensitive action confirm",
+			description: "Verify a short access code before dangerous changes."
+		},
+		{
+			title: "Invite acceptance",
+			description: "Handle compact confirmation codes in onboarding flows."
+		}
+	],
+	capabilityNotes: [
+		"OTP is for short fixed codes, not general PIN builders with complex rules.",
+		"Paste support matters because users often copy codes from mail or authenticator apps.",
+		"Keep the surrounding copy minimal and precise."
+	]
+};
+//#endregion
+export { e as otpInputMock };

package/dist/src/showcase/premium/otp-input/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/otp-input.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(``);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:`Verification input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`OtpInput should make fixed-code entry feel automatic`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Auto advance`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Paste aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.OtpInput,{value:o,onValueChange:s,length:6})}),(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 code`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o||`No code entered`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring.`})}):null]})}exports.OtpInputShowcase=o;

package/dist/src/showcase/premium/otp-input/showcase.js

@@ -0,0 +1,87 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { OtpInput as t } from "../../../components/inputs/otp-input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/otp-input/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("");
+	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: "Verification input"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "OtpInput should make fixed-code entry feel automatic"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Auto advance"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Paste aware"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r(t, {
+					value: s,
+					onValueChange: c,
+					length: 6
+				})
+			}),
+			/* @__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 code"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: s || "No code entered"
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali."
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as OtpInputShowcase };

package/dist/src/showcase/premium/page-container/index.cjs

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

package/dist/src/showcase/premium/page-container/index.js

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

package/dist/src/showcase/premium/page-container/mock.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PageContainer } from "tembro"
+
+export function Example() {
+  return (
+    <PageContainer size="lg">
+      <div className="rounded-md border p-4">Page content stays constrained here.</div>
+    </PageContainer>
+  )
+}`,highlights:[`Consistent max-width wrapper`,`Size presets`,`Useful for dashboard and content pages`,`Simple integration with layout components`],scenarios:[{title:`Global page shell`,description:`Use as the default wrapper inside AppShell main slot.`},{title:`Long-form content`,description:`Use smaller sizes for forms and full width for tables.`},{title:`Readable spacing`,description:`Pair with responsive spacing utilities from surrounding layouts.`}],capabilityNotes:["Prefer `lg` or `xl` for heavy forms and tables.","Use `full` when content needs entire width, such as charts.",`Wrap page-level cards in a single PageContainer to keep rhythm uniform.`]};exports.pageContainerMock=e;

package/dist/src/showcase/premium/page-container/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/page-container/mock.ts
+var e = {
+	code: "import { PageContainer } from \"tembro\"\n\nexport function Example() {\n  return (\n    <PageContainer size=\"lg\">\n      <div className=\"rounded-md border p-4\">Page content stays constrained here.</div>\n    </PageContainer>\n  )\n}",
+	highlights: [
+		"Consistent max-width wrapper",
+		"Size presets",
+		"Useful for dashboard and content pages",
+		"Simple integration with layout components"
+	],
+	scenarios: [
+		{
+			title: "Global page shell",
+			description: "Use as the default wrapper inside AppShell main slot."
+		},
+		{
+			title: "Long-form content",
+			description: "Use smaller sizes for forms and full width for tables."
+		},
+		{
+			title: "Readable spacing",
+			description: "Pair with responsive spacing utilities from surrounding layouts."
+		}
+	],
+	capabilityNotes: [
+		"Prefer `lg` or `xl` for heavy forms and tables.",
+		"Use `full` when content needs entire width, such as charts.",
+		"Wrap page-level cards in a single PageContainer to keep rhythm uniform."
+	]
+};
+//#endregion
+export { e as pageContainerMock };

package/dist/src/showcase/premium/page-container/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/layout/page-container.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`default`,`sm`,`md`,`lg`,`xl`,`full`],o=`rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4`;function s({mode:e}){let[s,c]=r.useState(`lg`);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:`Content width`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Page container should stabilize layout width`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Width scale`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Content rhythm`})]})]})}),e===`playground`?(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:a.map(e=>(0,i.jsx)(`button`,{className:`rounded-full px-4 py-2 text-sm ${s===e?`bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]`:`border border-[color:var(--aui-divider)] aui-text-muted`}`,onClick:()=>c(e),children:e},e))}):null,(0,i.jsxs)(n.PageContainer,{size:s,className:o,children:[(0,i.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Active size: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:s})]}),(0,i.jsx)(`p`,{className:`aui-text-muted mt-2 text-sm`,children:`Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift.`})]})]})}exports.PageContainerShowcase=s;

package/dist/src/showcase/premium/page-container/showcase.js

@@ -0,0 +1,79 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { PageContainer as t } from "../../../components/layout/page-container.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/page-container/showcase.tsx
+var a = [
+	"default",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+], o = "rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4";
+function s({ mode: s }) {
+	let [c, l] = n.useState("lg");
+	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: "Content width"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Page container should stabilize layout width"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Width scale"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Content rhythm"
+						})]
+					})]
+				})
+			}),
+			s === "playground" ? /* @__PURE__ */ r("div", {
+				className: "flex flex-wrap gap-2",
+				children: a.map((e) => /* @__PURE__ */ r("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,
+			/* @__PURE__ */ i(t, {
+				size: c,
+				className: o,
+				children: [/* @__PURE__ */ i("p", {
+					className: "aui-text-muted text-sm",
+					children: ["Active size: ", /* @__PURE__ */ r("span", {
+						className: "font-medium aui-text-strong",
+						children: c
+					})]
+				}), /* @__PURE__ */ r("p", {
+					className: "aui-text-muted mt-2 text-sm",
+					children: "Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift."
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { s as PageContainerShowcase };

package/dist/src/showcase/premium/page-header/index.cjs

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

package/dist/src/showcase/premium/page-header/index.js

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

package/dist/src/showcase/premium/page-header/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Breadcrumbs, PageHeader } from "tembro"
+
+export function Example() {
+  return (
+    <PageHeader
+      eyebrow="Overview"
+      title="Project settings"
+      description="Use PageHeader to group title, description and actions at the top of a screen."
+      breadcrumbs={<Breadcrumbs items={[{ key: "home", label: "Home", href: "/" }, { key: "settings", label: "Settings", current: true }]} />}
+      actions={<button>Save</button>}
+      sticky
+    />
+  )
+}`,highlights:[`Top-of-page composition`,`Optional breadcrumbs region`,`Action and meta regions`,`Sticky page heading mode`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Admin pages`,description:`Keep title, description and action buttons together before body content.`},{title:`List views`,description:`Pair breadcrumbs with actions to indicate current scope.`},{title:`Sticky header`,description:`Enable sticky mode for long content pages where users need persistent context.`}],capabilityNotes:["Use `eyebrow` for a compact pre-heading that communicates area or environment.",`Place route breadcrumbs in one place and avoid duplicating path state elsewhere.`,"Use `meta` for small KPI chips, tags or helper context."]};exports.pageHeaderMock=e;