tembro 3.1.1 → 3.1.6

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

@@ -1,70 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Breadcrumbs as n } from "../../../components/layout/breadcrumbs.js";
-import { PageHeader as r } from "../../../components/layout/page-header.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/showcase/premium/page-header/showcase.tsx
-var s = [
-	{
-		key: "home",
-		label: "Home",
-		href: "/"
-	},
-	{
-		key: "products",
-		label: "Products",
-		href: "/products"
-	},
-	{
-		key: "active",
-		label: "Workspace",
-		current: !0
-	}
-];
-function c({ mode: c }) {
-	let [l, u] = i.useState(c === "playground");
-	return /* @__PURE__ */ o("div", {
-		className: "space-y-5",
-		children: [/* @__PURE__ */ a("div", {
-			className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4 sm:p-5",
-			children: /* @__PURE__ */ a(r, {
-				eyebrow: "Workspace",
-				title: "Team settings",
-				description: "Configure profile, billing and preferences from this page-level surface.",
-				breadcrumbs: /* @__PURE__ */ a(n, { items: s }),
-				actions: /* @__PURE__ */ a(e, {
-					size: "sm",
-					children: "Save"
-				}),
-				meta: /* @__PURE__ */ o("div", {
-					className: "flex flex-wrap items-center gap-2",
-					children: [
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Breadcrumbs"
-						}),
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Action"
-						}),
-						/* @__PURE__ */ a(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Sticky option"
-						})
-					]
-				}),
-				sticky: l
-			})
-		}), c === "playground" ? /* @__PURE__ */ a("button", {
-			className: "rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted",
-			onClick: () => u((e) => !e),
-			children: l ? "Disable sticky" : "Enable sticky"
-		}) : null]
-	});
-}
-//#endregion
-export { c as PageHeaderShowcase };

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

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

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

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

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

@@ -1,18 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { PageTabs } from "tembro"
-
-export function Example() {
-  const [tab, setTab] = React.useState("overview")
-
-  return (
-    <PageTabs
-      value={tab}
-      onValueChange={(next) => setTab(next)}
-      items={[
-        { value: "overview", label: "Overview" },
-        { value: "billing", label: "Billing", badge: 2 },
-        { value: "activity", label: "Activity" },
-      ]}
-    />
-  )
-}`,highlights:[`Underline, pills, and cards variants`,`Route-sized section switching`,`Optional tab badges`,`Good semantic fit for page-level navigation`],scenarios:[{title:`Workspace sections`,description:`Switch between overview, billing, and activity at the route surface level.`},{title:`Settings pages`,description:`Organize major groups without building separate side navigation.`},{title:`Detail hubs`,description:`Keep related top-level sections visible across a broad content surface.`}],capabilityNotes:[`Use page-tabs for route-sized or section-sized navigation, not tiny inline toggles.`,`Choose pills/cards only when the visual context supports a stronger container.`,`If the options are just view toggles, button-group may be more appropriate.`]};exports.pageTabsMock=e;

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

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/page-tabs/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { PageTabs } from \"tembro\"\n\nexport function Example() {\n  const [tab, setTab] = React.useState(\"overview\")\n\n  return (\n    <PageTabs\n      value={tab}\n      onValueChange={(next) => setTab(next)}\n      items={[\n        { value: \"overview\", label: \"Overview\" },\n        { value: \"billing\", label: \"Billing\", badge: 2 },\n        { value: \"activity\", label: \"Activity\" },\n      ]}\n    />\n  )\n}",
-	highlights: [
-		"Underline, pills, and cards variants",
-		"Route-sized section switching",
-		"Optional tab badges",
-		"Good semantic fit for page-level navigation"
-	],
-	scenarios: [
-		{
-			title: "Workspace sections",
-			description: "Switch between overview, billing, and activity at the route surface level."
-		},
-		{
-			title: "Settings pages",
-			description: "Organize major groups without building separate side navigation."
-		},
-		{
-			title: "Detail hubs",
-			description: "Keep related top-level sections visible across a broad content surface."
-		}
-	],
-	capabilityNotes: [
-		"Use page-tabs for route-sized or section-sized navigation, not tiny inline toggles.",
-		"Choose pills/cards only when the visual context supports a stronger container.",
-		"If the options are just view toggles, button-group may be more appropriate."
-	]
-};
-//#endregion
-export { e as pageTabsMock };

package/dist/src/showcase/premium/page-tabs/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/navigation/page-tabs.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(`overview`),[c,l]=r.useState(`underline`);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:`Page navigation`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PageTabs should structure major sections, not minor control state`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is for broad route or detail-page navigation where the user needs clear top-level section switching.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Route scale`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Badge support`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.PageTabs,{value:o,variant:c,onValueChange:e=>s(e),items:[{value:`overview`,label:`Overview`},{value:`billing`,label:`Billing`,badge:2},{value:`activity`,label:`Activity`}]})}),(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:`Active tab`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium 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:`Variant`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:c})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>l(`underline`),children:`Underline`}),(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>l(`pills`),children:`Pills`}),(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>l(`cards`),children:`Cards`})]})}):null]})}exports.PageTabsShowcase=o;

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

@@ -1,121 +0,0 @@
-import { Badge as e } from "../../../components/ui/badge/index.js";
-import { PageTabs as t } from "../../../components/navigation/page-tabs.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/page-tabs/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("overview"), [l, u] = n.useState("underline");
-	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: "Page navigation"
-							}),
-							/* @__PURE__ */ r("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "PageTabs should structure major sections, not minor control state"
-							}),
-							/* @__PURE__ */ r("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "This surface is for broad route or detail-page navigation where the user needs clear top-level section switching."
-							})
-						]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Route scale"
-						}), /* @__PURE__ */ r(e, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Badge support"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r(t, {
-					value: s,
-					variant: l,
-					onValueChange: (e) => c(e),
-					items: [
-						{
-							value: "overview",
-							label: "Overview"
-						},
-						{
-							value: "billing",
-							label: "Billing",
-							badge: 2
-						},
-						{
-							value: "activity",
-							label: "Activity"
-						}
-					]
-				})
-			}),
-			/* @__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: "Active tab"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: s
-					})]
-				}), /* @__PURE__ */ i("section", {
-					className: a,
-					children: [/* @__PURE__ */ r("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Variant"
-					}), /* @__PURE__ */ r("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: l
-					})]
-				})]
-			}),
-			o === "playground" ? /* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-wrap gap-2",
-					children: [
-						/* @__PURE__ */ r("button", {
-							type: "button",
-							className: "rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm",
-							onClick: () => u("underline"),
-							children: "Underline"
-						}),
-						/* @__PURE__ */ r("button", {
-							type: "button",
-							className: "rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm",
-							onClick: () => u("pills"),
-							children: "Pills"
-						}),
-						/* @__PURE__ */ r("button", {
-							type: "button",
-							className: "rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm",
-							onClick: () => u("cards"),
-							children: "Cards"
-						})
-					]
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { o as PageTabsShowcase };

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

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

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

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

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

@@ -1,16 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Input
-      kind="password"
-      value={value}
-      onValueChange={setValue}
-      placeholder="Enter workspace password"
-      showCapsLockWarning
-    />
-  )
-}`,highlights:[`Visibility toggle`,`Caps Lock warning support`,`Controlled or uncontrolled visibility`,`Secure field wrapper without extra composition boilerplate`],scenarios:[{title:`Login form`,description:`Expose visibility toggle in auth screens without building a custom wrapper.`},{title:`Sensitive confirmation`,description:`Require current password before destructive account actions.`},{title:`Internal admin area`,description:`Use in restricted operational tools with direct validation feedback.`}],capabilityNotes:[`Use password input where visibility toggle genuinely reduces user errors.`,`Keep password actions close to the field, not in a separate row.`,`Caps Lock warning is helpful for desktop-heavy admin flows.`]};exports.passwordInputMock=e;

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

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/password-input/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Input\n      kind=\"password\"\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Enter workspace password\"\n      showCapsLockWarning\n    />\n  )\n}",
-	highlights: [
-		"Visibility toggle",
-		"Caps Lock warning support",
-		"Controlled or uncontrolled visibility",
-		"Secure field wrapper without extra composition boilerplate"
-	],
-	scenarios: [
-		{
-			title: "Login form",
-			description: "Expose visibility toggle in auth screens without building a custom wrapper."
-		},
-		{
-			title: "Sensitive confirmation",
-			description: "Require current password before destructive account actions."
-		},
-		{
-			title: "Internal admin area",
-			description: "Use in restricted operational tools with direct validation feedback."
-		}
-	],
-	capabilityNotes: [
-		"Use password input where visibility toggle genuinely reduces user errors.",
-		"Keep password actions close to the field, not in a separate row.",
-		"Caps Lock warning is helpful for desktop-heavy admin flows."
-	]
-};
-//#endregion
-export { e as passwordInputMock };

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

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.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(``),[c,l]=r.useState(!1),u=o.length>=12?`Strong`:o.length>=8?`Good`:o.length>=1?`Weak`:`Empty`;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:`Sensitive field`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PasswordInput should reduce mistakes in high-friction moments`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The control should keep visibility, warnings, and state feedback inside one clean field instead of pushing users into extra UI.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visibility toggle`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Caps Lock aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.Input,{kind:`password`,value:o,onValueChange:s,visible:c,onVisibleChange:l,placeholder:`Enter workspace password`,showCapsLockWarning:!0})}),(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:`Field state`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-2 text-sm leading-6 aui-text-muted`,children:[(0,i.jsxs)(`p`,{children:[`Length: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:o.length})]}),(0,i.jsxs)(`p`,{children:[`Visibility: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c?`visible`:`hidden`})]}),(0,i.jsxs)(`p`,{children:[`Strength: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u})]})]})]}),(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-4 text-sm leading-6 aui-text-muted`,children:`Password fields should be operational and quiet. The user should not need a second component just to show, hide, or understand entry state.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Desktopda Caps Lock yoqib ko‘rsangiz warning ham shu field ichida ko‘rinadi.`})}):null]})}exports.PasswordInputShowcase=o;

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

@@ -1,104 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/password-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(""), [l, u] = n.useState(!1), d = s.length >= 12 ? "Strong" : s.length >= 8 ? "Good" : s.length >= 1 ? "Weak" : "Empty";
-	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: "Sensitive field"
-							}),
-							/* @__PURE__ */ r("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "PasswordInput should reduce mistakes in high-friction moments"
-							}),
-							/* @__PURE__ */ r("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "The control should keep visibility, warnings, and state feedback inside one clean field instead of pushing users into extra UI."
-							})
-						]
-					}), /* @__PURE__ */ i("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ r(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Visibility toggle"
-						}), /* @__PURE__ */ r(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Caps Lock aware"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r(e, {
-					kind: "password",
-					value: s,
-					onValueChange: c,
-					visible: l,
-					onVisibleChange: u,
-					placeholder: "Enter workspace password",
-					showCapsLockWarning: !0
-				})
-			}),
-			/* @__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: "Field state"
-					}), /* @__PURE__ */ i("div", {
-						className: "mt-4 space-y-2 text-sm leading-6 aui-text-muted",
-						children: [
-							/* @__PURE__ */ i("p", { children: ["Length: ", /* @__PURE__ */ r("span", {
-								className: "font-medium aui-text-strong",
-								children: s.length
-							})] }),
-							/* @__PURE__ */ i("p", { children: ["Visibility: ", /* @__PURE__ */ r("span", {
-								className: "font-medium aui-text-strong",
-								children: l ? "visible" : "hidden"
-							})] }),
-							/* @__PURE__ */ i("p", { children: ["Strength: ", /* @__PURE__ */ r("span", {
-								className: "font-medium aui-text-strong",
-								children: d
-							})] })
-						]
-					})]
-				}), /* @__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-4 text-sm leading-6 aui-text-muted",
-						children: "Password fields should be operational and quiet. The user should not need a second component just to show, hide, or understand entry state."
-					})]
-				})]
-			}),
-			o === "playground" ? /* @__PURE__ */ r("section", {
-				className: a,
-				children: /* @__PURE__ */ r("p", {
-					className: "text-sm aui-text-muted",
-					children: "Desktopda Caps Lock yoqib ko‘rsangiz warning ham shu field ichida ko‘rinadi."
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { o as PasswordInputShowcase };

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

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

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

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

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

@@ -1,17 +0,0 @@
-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("+998 90 123 45 67")
-
-  return (
-    <Input
-      kind="phone"
-      value={value}
-      onValueChange={setValue}
-      countryCode="+998"
-      placeholder="+998 90 123 45 67"
-    />
-  )
-}
-`,htmlCode:`<label for="phone">Phone</label><input id="phone" type="tel" inputmode="tel" placeholder="+998 90 123 45 67" />`,cliCommand:`npx tembro add input`,highlights:[`Phone formatting assumptions`,`Locale/defaultCountry behavior`,`Controlled value contract`,`Raw vs displayed phone forms`],relatedBlockSlugs:[`users-table`,`settings-form`,`pricing-section`],scenarios:[{title:`Profile contact`,description:`Capture customer phone with predictable display behavior.`},{title:`Checkout phone`,description:`Format validation before creating verification records.`},{title:`Country switch`,description:`Change defaultCountry and keep callback contract stable.`},{title:`Backend integration`,description:`Persist normalized phone payload while rendering localized format.`}],capabilityNotes:[`Write down whether your backend expects E.164 or local phone format.`,`Avoid mixing formatted display and raw storage in schema validation.`,`For country-aware inputs, keep default country explicit in docs and migration notes.`,`Use one validator shared by form and API integration layers.`]};exports.phoneInputMock=e;

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

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/phone-input/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"+998 90 123 45 67\")\n\n  return (\n    <Input\n      kind=\"phone\"\n      value={value}\n      onValueChange={setValue}\n      countryCode=\"+998\"\n      placeholder=\"+998 90 123 45 67\"\n    />\n  )\n}\n",
-	htmlCode: "<label for=\"phone\">Phone</label><input id=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"+998 90 123 45 67\" />",
-	cliCommand: "npx tembro add input",
-	highlights: [
-		"Phone formatting assumptions",
-		"Locale/defaultCountry behavior",
-		"Controlled value contract",
-		"Raw vs displayed phone forms"
-	],
-	relatedBlockSlugs: [
-		"users-table",
-		"settings-form",
-		"pricing-section"
-	],
-	scenarios: [
-		{
-			title: "Profile contact",
-			description: "Capture customer phone with predictable display behavior."
-		},
-		{
-			title: "Checkout phone",
-			description: "Format validation before creating verification records."
-		},
-		{
-			title: "Country switch",
-			description: "Change defaultCountry and keep callback contract stable."
-		},
-		{
-			title: "Backend integration",
-			description: "Persist normalized phone payload while rendering localized format."
-		}
-	],
-	capabilityNotes: [
-		"Write down whether your backend expects E.164 or local phone format.",
-		"Avoid mixing formatted display and raw storage in schema validation.",
-		"For country-aware inputs, keep default country explicit in docs and migration notes.",
-		"Use one validator shared by form and API integration layers."
-	]
-};
-//#endregion
-export { e as phoneInputMock };

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

@@ -1 +0,0 @@
-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({mode:r}){let[i,a]=(0,t.useState)(`+998 90 123 45 67`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`phone`,value:i,onValueChange:e=>a(e),countryCode:`+998`,placeholder:`+998 90 123 45 67`}),(0,n.jsxs)(`p`,{className:`aui-text-strong text-sm`,children:[`Canonical value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Display format is formatted for UX; raw value strategy is app-specific.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.PhoneInputShowcase=r;

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

@@ -1,33 +0,0 @@
-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/phone-input/showcase.tsx
-function i({ mode: i }) {
-	let [a, o] = t("+998 90 123 45 67");
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ n(e, {
-				kind: "phone",
-				value: a,
-				onValueChange: (e) => o(e),
-				countryCode: "+998",
-				placeholder: "+998 90 123 45 67"
-			}),
-			/* @__PURE__ */ r("p", {
-				className: "aui-text-strong text-sm",
-				children: ["Canonical value: ", a || "—"]
-			}),
-			/* @__PURE__ */ n("p", {
-				className: "aui-text-muted text-sm",
-				children: "Display format is formatted for UX; raw value strategy is app-specific."
-			}),
-			/* @__PURE__ */ r("p", {
-				className: "aui-text-muted text-sm",
-				children: ["Mode: ", i]
-			})
-		]
-	});
-}
-//#endregion
-export { i as PhoneInputShowcase };

package/dist/src/showcase/premium/property-grid/index.cjs

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

package/dist/src/showcase/premium/property-grid/index.js

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

package/dist/src/showcase/premium/property-grid/mock.cjs

@@ -1,14 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PropertyGrid } from "tembro"
-
-export function Example() {
-  return (
-    <PropertyGrid
-      columns={3}
-      items={[
-        { key: "owner", label: "Owner", value: "Azamat Jurayev" },
-        { key: "status", label: "Status", value: "Ready for review" },
-        { key: "version", label: "Version", value: "0.3.27" },
-      ]}
-    />
-  )
-}`,cliCommand:`npx tembro add property-grid`,highlights:[`Dense key/value metadata layout`,`Responsive columns with optional span support`,`Useful for entity details, release summaries, and integration metadata`],scenarios:[{title:`Entity details`,description:`Render many small facts without a full description list layout.`},{title:`Release summary`,description:`Group ownership, version and environment metadata.`},{title:`Integration card`,description:`Show endpoints, modes and dates in a compact details grid.`}]};exports.propertyGridMock=e;

package/dist/src/showcase/premium/property-grid/mock.js

@@ -1,26 +0,0 @@
-//#region src/showcase/premium/property-grid/mock.ts
-var e = {
-	code: "import { PropertyGrid } from \"tembro\"\n\nexport function Example() {\n  return (\n    <PropertyGrid\n      columns={3}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat Jurayev\" },\n        { key: \"status\", label: \"Status\", value: \"Ready for review\" },\n        { key: \"version\", label: \"Version\", value: \"0.3.27\" },\n      ]}\n    />\n  )\n}",
-	cliCommand: "npx tembro add property-grid",
-	highlights: [
-		"Dense key/value metadata layout",
-		"Responsive columns with optional span support",
-		"Useful for entity details, release summaries, and integration metadata"
-	],
-	scenarios: [
-		{
-			title: "Entity details",
-			description: "Render many small facts without a full description list layout."
-		},
-		{
-			title: "Release summary",
-			description: "Group ownership, version and environment metadata."
-		},
-		{
-			title: "Integration card",
-			description: "Show endpoints, modes and dates in a compact details grid."
-		}
-	]
-};
-//#endregion
-export { e as propertyGridMock };

package/dist/src/showcase/premium/property-grid/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/property-grid.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`;function i(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PropertyGrid packs metadata into a compact surface`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Reach for it when the page needs many small facts and a full DescriptionList would feel too linear.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Release summary metadata`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The grid layout works well for ownership, dates, environment and deployment facts.`}),(0,n.jsx)(t.PropertyGrid,{className:`mt-5`,columns:3,items:[{key:`owner`,label:`Owner`,value:`Azamat Jurayev`},{key:`status`,label:`Status`,value:(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Ready`})},{key:`version`,label:`Version`,value:`0.3.27`},{key:`environment`,label:`Environment`,value:`Production`},{key:`updated`,label:`Updated`,value:`Today, 14:40`},{key:`notes`,label:`Notes`,value:`Premium demos expanded for core display and utility routes.`,span:2}]})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,n.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,n.jsx)(`p`,{children:`PropertyGrid is best for short values. If the content becomes paragraph-length, a linear details layout will read better.`}),(0,n.jsx)(`p`,{children:"Use `span` sparingly to keep rhythm predictable across breakpoints."})]})]})]})})]})}exports.PropertyGridShowcase=i;