tembro 2.1.11 → 2.1.13

package/dist/showcase/premium/json-input/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { JsonInput } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { JsonInput } from "tembro"
 
 export function Example() {
   return <JsonInput value='{"name":"tembro"}' />

package/dist/showcase/premium/json-input/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/json-input/mock.ts
 var e = {
-	code: "import { JsonInput } from \"@/index\"\n\nexport function Example() {\n  return <JsonInput value='{\"name\":\"tembro\"}' />\n}",
+	code: "import { JsonInput } from \"tembro\"\n\nexport function Example() {\n  return <JsonInput value='{\"name\":\"tembro\"}' />\n}",
 	cliCommand: "npx tembro add json-input",
 	highlights: [
 		"Validates JSON on edit",

package/dist/showcase/premium/kanban-board/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { KanbanBoard } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { KanbanBoard } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/kanban-board/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/kanban-board/mock.ts
 var e = {
-	code: "import { KanbanBoard } from \"@/index\"\n\nexport function Example() {\n  return (\n    <KanbanBoard\n      columns={[\n        {\n          key: \"todo\",\n          title: \"To Do\",\n          cards: [\n            { key: \"a\", title: \"Prototype\", description: \"Build initial modal flow.\" },\n            { key: \"b\", title: \"Audit\", description: \"Review token contrast.\" },\n          ],\n        },\n        {\n          key: \"progress\",\n          title: \"In progress\",\n          cards: [{ key: \"c\", title: \"Implement\", description: \"Add demo variants.\" }],\n        },\n      ]}\n    />\n  )\n}",
+	code: "import { KanbanBoard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <KanbanBoard\n      columns={[\n        {\n          key: \"todo\",\n          title: \"To Do\",\n          cards: [\n            { key: \"a\", title: \"Prototype\", description: \"Build initial modal flow.\" },\n            { key: \"b\", title: \"Audit\", description: \"Review token contrast.\" },\n          ],\n        },\n        {\n          key: \"progress\",\n          title: \"In progress\",\n          cards: [{ key: \"c\", title: \"Implement\", description: \"Add demo variants.\" }],\n        },\n      ]}\n    />\n  )\n}",
 	cliCommand: "npx tembro add kanban",
 	highlights: [
 		"Horizontal scrollable board layout",

package/dist/showcase/premium/list/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Avatar, Badge, List } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Avatar, Badge, List } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/list/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/list/mock.ts
 var e = {
-	code: "import { Avatar, Badge, List } from \"@/index\"\n\nexport function Example() {\n  return (\n    <List\n      items={[\n        {\n          key: \"invoice\",\n          title: \"Invoice review\",\n          description: \"Pending finance approval\",\n          avatar: <Avatar name=\"Finance\" size=\"sm\" />,\n          extra: <Badge variant=\"outline\">Pending</Badge>,\n        },\n      ]}\n    />\n  )\n}",
+	code: "import { Avatar, Badge, List } from \"tembro\"\n\nexport function Example() {\n  return (\n    <List\n      items={[\n        {\n          key: \"invoice\",\n          title: \"Invoice review\",\n          description: \"Pending finance approval\",\n          avatar: <Avatar name=\"Finance\" size=\"sm\" />,\n          extra: <Badge variant=\"outline\">Pending</Badge>,\n        },\n      ]}\n    />\n  )\n}",
 	cliCommand: "npx tembro add list",
 	highlights: [
 		"Compact title/description rows with optional avatar and extra slot",

package/dist/showcase/premium/menubar/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/menubar/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/menubar/mock.ts
 var e = {
-	code: "import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>New project</MenubarItem>\n          <MenubarItem>Open</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}",
+	code: "import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>New project</MenubarItem>\n          <MenubarItem>Open</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}",
 	cliCommand: "npx tembro add menubar",
 	highlights: ["Composable menubar surfaces with grouped actions", "Trigger + content + item primitives"],
 	scenarios: [{

package/dist/showcase/premium/modal-shell/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Badge, Button, Input, ModalShell } from "@/index"
+import { Badge, Button, Input, ModalShell } from "tembro"
 
 export function Example() {
   const [open, setOpen] = useState(false)

package/dist/showcase/premium/modal-shell/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/modal-shell/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Badge, Button, Input, ModalShell } from \"@/index\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <div>\n      <Button onClick={() => setOpen(true)}>Create workspace</Button>\n      <ModalShell\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Create workspace\"\n        description=\"Collect a name and visibility before generating a share token.\"\n        size=\"md\"\n        footer={\n          <div className=\"flex justify-end gap-2\">\n            <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n            <Button onClick={() => setOpen(false)}>Create</Button>\n          </div>\n        }\n      >\n        <label className=\"space-y-2 text-sm aui-text-subtle\">\n          <span>Workspace name</span>\n          <Input defaultValue=\"Marketing portal\" />\n        </label>\n      </ModalShell>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Badge, Button, Input, ModalShell } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <div>\n      <Button onClick={() => setOpen(true)}>Create workspace</Button>\n      <ModalShell\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Create workspace\"\n        description=\"Collect a name and visibility before generating a share token.\"\n        size=\"md\"\n        footer={\n          <div className=\"flex justify-end gap-2\">\n            <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n            <Button onClick={() => setOpen(false)}>Create</Button>\n          </div>\n        }\n      >\n        <label className=\"space-y-2 text-sm aui-text-subtle\">\n          <span>Workspace name</span>\n          <Input defaultValue=\"Marketing portal\" />\n        </label>\n      </ModalShell>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"modal-shell-trigger\">Open modal</button>",
 	cliCommand: "npx tembro add modal-shell",
 	highlights: [

package/dist/showcase/premium/navigation-menu/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/navigation-menu/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/navigation-menu/mock.ts
 var e = {
-	code: "import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from \"@/index\"\n\nexport function Example() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuLink href=\"#\" active>Home</NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}",
+	code: "import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from \"tembro\"\n\nexport function Example() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuLink href=\"#\" active>Home</NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}",
 	cliCommand: "npx tembro add navigation-menu",
 	highlights: [
 		"Accessible anchor-style navigation links",

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

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PropertyGrid } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PropertyGrid } from "tembro"
 
 export function Example() {
   return (

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/property-grid/mock.ts
 var e = {
-	code: "import { PropertyGrid } from \"@/index\"\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}",
+	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",

package/dist/showcase/premium/qr-code/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { QRCode } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { QRCode } from "tembro"
 
 export function Example() {
   return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />

package/dist/showcase/premium/qr-code/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/qr-code/mock.ts
 var e = {
-	code: "import { QRCode } from \"@/index\"\n\nexport function Example() {\n  return <QRCode value=\"https://azamat-ui.vercel.app\" alt=\"Azamat UI\" />\n}",
+	code: "import { QRCode } from \"tembro\"\n\nexport function Example() {\n  return <QRCode value=\"https://azamat-ui.vercel.app\" alt=\"Azamat UI\" />\n}",
 	cliCommand: "npx tembro add qr-code",
 	highlights: [
 		"Fallback SVG renderer if no image is provided",

package/dist/showcase/premium/radio-group/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { RadioGroup } from "@/index"
+import { RadioGroup } from "tembro"
 
 const planOptions = [
   { value: "starter", label: "Starter", description: "Good for single workspace setup." },

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/radio-group/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { RadioGroup } from \"@/index\"\n\nconst planOptions = [\n  { value: \"starter\", label: \"Starter\", description: \"Good for single workspace setup.\" },\n  { value: \"growth\", label: \"Growth\", description: \"Adds more seats and team workflows.\" },\n  { value: \"enterprise\", label: \"Enterprise\", description: \"Advanced controls and support.\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"growth\")\n\n  return <RadioGroup value={value} onValueChange={setValue} options={planOptions} />\n}",
+	code: "import { useState } from \"react\"\nimport { RadioGroup } from \"tembro\"\n\nconst planOptions = [\n  { value: \"starter\", label: \"Starter\", description: \"Good for single workspace setup.\" },\n  { value: \"growth\", label: \"Growth\", description: \"Adds more seats and team workflows.\" },\n  { value: \"enterprise\", label: \"Enterprise\", description: \"Advanced controls and support.\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"growth\")\n\n  return <RadioGroup value={value} onValueChange={setValue} options={planOptions} />\n}",
 	htmlCode: "<div data-slot=\"radio-group\" role=\"radiogroup\"></div>",
 	cliCommand: "npx tembro add radio-group",
 	highlights: [

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

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "tembro"
 
 export function Example() {
   return (

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/resizable-panel/mock.ts
 var e = {
-	code: "import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"@/index\"\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}",
+	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",

package/dist/showcase/premium/rich-text-editor/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { RichTextEditor } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { RichTextEditor } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("<p>Start writing...</p>")

package/dist/showcase/premium/rich-text-editor/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/rich-text-editor/mock.ts
 var e = {
-	code: "import { RichTextEditor } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"<p>Start writing...</p>\")\n\n  return <RichTextEditor value={value} onValueChange={setValue} />\n}",
+	code: "import { RichTextEditor } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"<p>Start writing...</p>\")\n\n  return <RichTextEditor value={value} onValueChange={setValue} />\n}",
 	cliCommand: "npx tembro add rich-text-editor",
 	highlights: [
 		"Inline editable content block",

package/dist/showcase/premium/saved-filter-select/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { SavedFilterSelect } from "@/index"
+import { SavedFilterSelect } from "tembro"
 
 const filters = [
   { value: "billing", label: "Billing", description: "Invoices and payment status" },

package/dist/showcase/premium/saved-filter-select/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/saved-filter-select/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { SavedFilterSelect } from \"@/index\"\n\nconst filters = [\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and payment status\" },\n  { value: \"ops\", label: \"Operations\", description: \"Queues and workload\" },\n  { value: \"owners\", label: \"Owner: Azamat\", description: \"Assigned records only\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"billing\")\n\n  return (\n    <SavedFilterSelect\n      value={value}\n      onValueChange={setValue}\n      filters={filters}\n      onSave={() => undefined}\n      onDelete={() => undefined}\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { SavedFilterSelect } from \"tembro\"\n\nconst filters = [\n  { value: \"billing\", label: \"Billing\", description: \"Invoices and payment status\" },\n  { value: \"ops\", label: \"Operations\", description: \"Queues and workload\" },\n  { value: \"owners\", label: \"Owner: Azamat\", description: \"Assigned records only\" },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"billing\")\n\n  return (\n    <SavedFilterSelect\n      value={value}\n      onValueChange={setValue}\n      filters={filters}\n      onSave={() => undefined}\n      onDelete={() => undefined}\n    />\n  )\n}",
 	cliCommand: "npx tembro add saved-filter-select",
 	highlights: [
 		"Named view switching",

package/dist/showcase/premium/section/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Section } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Section } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/section/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/section/mock.ts
 var e = {
-	code: "import { Button, Section } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Section\n      title=\"Team members\"\n      description=\"Manage who sees this workspace.\"\n      bordered\n      actions={<Button size=\"sm\">Manage</Button>}\n    >\n      <div>Row content</div>\n    </Section>\n  )\n}",
+	code: "import { Button, Section } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Section\n      title=\"Team members\"\n      description=\"Manage who sees this workspace.\"\n      bordered\n      actions={<Button size=\"sm\">Manage</Button>}\n    >\n      <div>Row content</div>\n    </Section>\n  )\n}",
 	cliCommand: "npx tembro add section",
 	highlights: [
 		"Header, description and actions in one wrapper",

package/dist/showcase/premium/segmented-control/mock.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
 import { LayoutGridIcon, Rows3Icon, Table2Icon } from "lucide-react"
-import { SegmentedControl } from "@/index"
+import { SegmentedControl } from "tembro"
 
 const options = [
   { value: "board", label: "Board", icon: <LayoutGridIcon className="size-4" /> },

package/dist/showcase/premium/segmented-control/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/segmented-control/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { LayoutGridIcon, Rows3Icon, Table2Icon } from \"lucide-react\"\nimport { SegmentedControl } from \"@/index\"\n\nconst options = [\n  { value: \"board\", label: \"Board\", icon: <LayoutGridIcon className=\"size-4\" /> },\n  { value: \"list\", label: \"List\", icon: <Rows3Icon className=\"size-4\" /> },\n  { value: \"table\", label: \"Table\", icon: <Table2Icon className=\"size-4\" /> },\n]\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"board\")\n\n  return <SegmentedControl value={value} onValueChange={setValue} options={options} />\n}",
+	code: "import * as React from \"react\"\nimport { LayoutGridIcon, Rows3Icon, Table2Icon } from \"lucide-react\"\nimport { SegmentedControl } from \"tembro\"\n\nconst options = [\n  { value: \"board\", label: \"Board\", icon: <LayoutGridIcon className=\"size-4\" /> },\n  { value: \"list\", label: \"List\", icon: <Rows3Icon className=\"size-4\" /> },\n  { value: \"table\", label: \"Table\", icon: <Table2Icon className=\"size-4\" /> },\n]\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"board\")\n\n  return <SegmentedControl value={value} onValueChange={setValue} options={options} />\n}",
 	htmlCode: "<div data-slot=\"segmented-control\">\n  <button role=\"radio\" aria-checked=\"true\">Board</button>\n  <button role=\"radio\" aria-checked=\"false\">List</button>\n</div>",
 	cliCommand: "npx tembro add segmented-control",
 	highlights: [

package/dist/showcase/premium/sheet-shell/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Button, SheetShell } from "@/index"
+import { Button, SheetShell } from "tembro"
 
 export function Example() {
   const [openRight, setOpenRight] = useState(false)

package/dist/showcase/premium/sheet-shell/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/sheet-shell/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Button, SheetShell } from \"@/index\"\n\nexport function Example() {\n  const [openRight, setOpenRight] = useState(false)\n  const [openBottom, setOpenBottom] = useState(false)\n\n  return (\n    <div className=\"space-y-3\">\n      <Button onClick={() => setOpenRight(true)}>Open right sheet</Button>\n      <Button variant=\"outline\" onClick={() => setOpenBottom(true)}>Open bottom sheet</Button>\n      <SheetShell\n        open={openRight}\n        onOpenChange={setOpenRight}\n        side=\"right\"\n        title=\"Workspace editor\"\n        description=\"Use a sheet for dense action rows without taking full screen.\"\n        footer={<Button onClick={() => setOpenRight(false)}>Done</Button>}\n      >\n        <p className=\"text-sm aui-text-muted\">Compact editor surface stays close to the source context.</p>\n      </SheetShell>\n      <SheetShell\n        open={openBottom}\n        onOpenChange={setOpenBottom}\n        side=\"bottom\"\n        title=\"Mobile actions\"\n        description=\"Use mobile-friendly sheet for quick row actions.\"\n        footer={<Button variant=\"outline\" onClick={() => setOpenBottom(false)}>Close</Button>}\n      >\n        <p className=\"text-sm aui-text-muted\">Bottom sheets fit long lists and quick actions on narrow viewports.</p>\n      </SheetShell>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Button, SheetShell } from \"tembro\"\n\nexport function Example() {\n  const [openRight, setOpenRight] = useState(false)\n  const [openBottom, setOpenBottom] = useState(false)\n\n  return (\n    <div className=\"space-y-3\">\n      <Button onClick={() => setOpenRight(true)}>Open right sheet</Button>\n      <Button variant=\"outline\" onClick={() => setOpenBottom(true)}>Open bottom sheet</Button>\n      <SheetShell\n        open={openRight}\n        onOpenChange={setOpenRight}\n        side=\"right\"\n        title=\"Workspace editor\"\n        description=\"Use a sheet for dense action rows without taking full screen.\"\n        footer={<Button onClick={() => setOpenRight(false)}>Done</Button>}\n      >\n        <p className=\"text-sm aui-text-muted\">Compact editor surface stays close to the source context.</p>\n      </SheetShell>\n      <SheetShell\n        open={openBottom}\n        onOpenChange={setOpenBottom}\n        side=\"bottom\"\n        title=\"Mobile actions\"\n        description=\"Use mobile-friendly sheet for quick row actions.\"\n        footer={<Button variant=\"outline\" onClick={() => setOpenBottom(false)}>Close</Button>}\n      >\n        <p className=\"text-sm aui-text-muted\">Bottom sheets fit long lists and quick actions on narrow viewports.</p>\n      </SheetShell>\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"sheet-shell-trigger\">Open sheet</button>",
 	cliCommand: "npx tembro add sheet-shell",
 	highlights: [

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

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Skeleton, SkeletonCard, SkeletonText } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Skeleton, SkeletonCard, SkeletonText } from "tembro"
 
 export function Example() {
   return (

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/skeleton/mock.ts
 var e = {
-	code: "import { Skeleton, SkeletonCard, SkeletonText } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Skeleton className=\"h-10 w-48\" />\n      <SkeletonText rows={3} />\n      <SkeletonCard avatar rows={4} />\n    </div>\n  )\n}",
+	code: "import { Skeleton, SkeletonCard, SkeletonText } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Skeleton className=\"h-10 w-48\" />\n      <SkeletonText rows={3} />\n      <SkeletonCard avatar rows={4} />\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add skeleton",
 	highlights: [
 		"Base line/block placeholder plus text and card presets",

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

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingOverlay, Spinner } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingOverlay, Spinner } from "tembro"
 
 export function Example() {
   return (

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/spinner/mock.ts
 var e = {
-	code: "import { LoadingOverlay, Spinner } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Spinner size=\"sm\" label=\"Refreshing\" />\n\n      <LoadingOverlay loading label=\"Saving changes\">\n        <div className=\"rounded-xl border p-6\">Content under save</div>\n      </LoadingOverlay>\n    </div>\n  )\n}",
+	code: "import { LoadingOverlay, Spinner } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Spinner size=\"sm\" label=\"Refreshing\" />\n\n      <LoadingOverlay loading label=\"Saving changes\">\n        <div className=\"rounded-xl border p-6\">Content under save</div>\n      </LoadingOverlay>\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add spinner",
 	highlights: [
 		"Inline spinner plus overlay mode from the same export",

package/dist/showcase/premium/statistic/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Statistic, StatisticCard, StatisticGrid } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Statistic, StatisticCard, StatisticGrid } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/statistic/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/statistic/mock.ts
 var e = {
-	code: "import { Statistic, StatisticCard, StatisticGrid } from \"@/index\"\n\nexport function Example() {\n  return (\n    <StatisticGrid columns={3}>\n      <StatisticCard label=\"Revenue\" value=\"$24.8k\" change=\"+12.4%\" trend=\"up\" />\n      <StatisticCard label=\"Errors\" value=\"14\" change=\"-3.1%\" trend=\"down\" />\n      <StatisticCard label=\"Conversion\" value=\"6.3%\" description=\"vs last 30 days\" />\n    </StatisticGrid>\n  )\n}",
+	code: "import { Statistic, StatisticCard, StatisticGrid } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StatisticGrid columns={3}>\n      <StatisticCard label=\"Revenue\" value=\"$24.8k\" change=\"+12.4%\" trend=\"up\" />\n      <StatisticCard label=\"Errors\" value=\"14\" change=\"-3.1%\" trend=\"down\" />\n      <StatisticCard label=\"Conversion\" value=\"6.3%\" description=\"vs last 30 days\" />\n    </StatisticGrid>\n  )\n}",
 	cliCommand: "npx tembro add statistic",
 	highlights: [
 		"Single statistic, statistic card and grid exports work together",

package/dist/showcase/premium/sticky-footer-bar/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, StickyFooterBar } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, StickyFooterBar } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/sticky-footer-bar/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/sticky-footer-bar/mock.ts
 var e = {
-	code: "import { Button, StickyFooterBar } from \"@/index\"\n\nexport function Example() {\n  return (\n    <StickyFooterBar\n      start={<span className=\"text-sm\">Unsaved changes</span>}\n      end={\n        <>\n          <Button size=\"sm\" variant=\"outline\">Discard</Button>\n          <Button size=\"sm\">Save</Button>\n        </>\n      }\n    />\n  )\n}",
+	code: "import { Button, StickyFooterBar } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StickyFooterBar\n      start={<span className=\"text-sm\">Unsaved changes</span>}\n      end={\n        <>\n          <Button size=\"sm\" variant=\"outline\">Discard</Button>\n          <Button size=\"sm\">Save</Button>\n        </>\n      }\n    />\n  )\n}",
 	cliCommand: "npx tembro add sticky-footer-bar",
 	highlights: [
 		"Sticky bottom action bar with start/end slots",

package/dist/showcase/premium/tag/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Tag } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Tag } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/tag/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/tag/mock.ts
 var e = {
-	code: "import { Tag } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Tag tone=\"success\">Online</Tag>\n      <Tag tone=\"warning\">Review</Tag>\n      <Tag tone=\"danger\" removable>\n        Remove me\n      </Tag>\n    </div>\n  )\n}",
+	code: "import { Tag } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Tag tone=\"success\">Online</Tag>\n      <Tag tone=\"warning\">Review</Tag>\n      <Tag tone=\"danger\" removable>\n        Remove me\n      </Tag>\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add tag",
 	highlights: [
 		"Semantic tones for state and status information",

package/dist/showcase/premium/time-picker/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DateTimePicker, TimePicker, TimeRangePicker } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DateTimePicker, TimePicker, TimeRangePicker } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/time-picker/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/time-picker/mock.ts
 var e = {
-	code: "import { DateTimePicker, TimePicker, TimeRangePicker } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <TimePicker label=\"Start\" value=\"08:30\" />\n      <DateTimePicker label=\"Planned at\" value=\"2026-07-07T08:30\" />\n      <TimeRangePicker from=\"09:00\" to=\"17:00\" />\n    </div>\n  )\n}",
+	code: "import { DateTimePicker, TimePicker, TimeRangePicker } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <TimePicker label=\"Start\" value=\"08:30\" />\n      <DateTimePicker label=\"Planned at\" value=\"2026-07-07T08:30\" />\n      <TimeRangePicker from=\"09:00\" to=\"17:00\" />\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add time-picker",
 	highlights: ["Time, datetime, and range pickers in one family", "Native input controls with consistent style"],
 	scenarios: [{

package/dist/showcase/premium/tour/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Tour } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Tour } from "tembro"
 import { useState } from "react"
 
 export function Example() {

package/dist/showcase/premium/tour/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/tour/mock.ts
 var e = {
-	code: "import { Button, Tour } from \"@/index\"\nimport { useState } from \"react\"\n\nexport function Example() {\n  const [open, setOpen] = useState(true)\n  const [index, setIndex] = useState(0)\n\n  return (\n    <Tour\n      steps={[\n        { title: \"Welcome\", description: \"Intro your app flow.\" },\n        { title: \"Next\", description: \"Continue to another key step.\" },\n      ]}\n      index={index}\n      onIndexChange={setIndex}\n      onClose={() => setOpen(false)}\n    />\n  )\n}",
+	code: "import { Button, Tour } from \"tembro\"\nimport { useState } from \"react\"\n\nexport function Example() {\n  const [open, setOpen] = useState(true)\n  const [index, setIndex] = useState(0)\n\n  return (\n    <Tour\n      steps={[\n        { title: \"Welcome\", description: \"Intro your app flow.\" },\n        { title: \"Next\", description: \"Continue to another key step.\" },\n      ]}\n      index={index}\n      onIndexChange={setIndex}\n      onClose={() => setOpen(false)}\n    />\n  )\n}",
 	cliCommand: "npx tembro add tour",
 	highlights: ["Controlled tour state with index-driven steps", "Built-in close handling"],
 	scenarios: [{

package/dist/showcase/premium/tree-view/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { TreeView } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { TreeView } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/tree-view/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/tree-view/mock.ts
 var e = {
-	code: "import { TreeView } from \"@/index\"\n\nexport function Example() {\n  return (\n    <TreeView\n      items={[\n        {\n          key: \"ui\",\n          label: \"UI\",\n          children: [\n            { key: \"buttons\", label: \"Buttons\" },\n            { key: \"inputs\", label: \"Inputs\" },\n          ],\n        },\n      ]}\n      defaultExpandedKeys={[\"ui\"]}\n    />\n  )\n}",
+	code: "import { TreeView } from \"tembro\"\n\nexport function Example() {\n  return (\n    <TreeView\n      items={[\n        {\n          key: \"ui\",\n          label: \"UI\",\n          children: [\n            { key: \"buttons\", label: \"Buttons\" },\n            { key: \"inputs\", label: \"Inputs\" },\n          ],\n        },\n      ]}\n      defaultExpandedKeys={[\"ui\"]}\n    />\n  )\n}",
 	cliCommand: "npx tembro add tree-view",
 	highlights: [
 		"Tree data model with nested children",

package/dist/showcase/premium/typography/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Blockquote, Heading, Mark, Text } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Blockquote, Heading, Mark, Text } from "tembro"
 
 export function Example() {
   return (

package/dist/showcase/premium/typography/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/typography/mock.ts
 var e = {
-	code: "import { Blockquote, Heading, Mark, Text } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <Heading level={3}>Product page</Heading>\n      <Text muted>\n        <Mark>Typography</Mark> is part of every polished UI.\n      </Text>\n      <Blockquote>Keep hierarchy tight, readable, and reusable.</Blockquote>\n    </div>\n  )\n}",
+	code: "import { Blockquote, Heading, Mark, Text } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <Heading level={3}>Product page</Heading>\n      <Text muted>\n        <Mark>Typography</Mark> is part of every polished UI.\n      </Text>\n      <Blockquote>Keep hierarchy tight, readable, and reusable.</Blockquote>\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add typography",
 	highlights: [
 		"Heading hierarchy",