tembro 2.1.10 → 2.1.12

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/carousel/mock.ts
 var e = {
-	code: "import { Carousel, CarouselItem } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Carousel defaultIndex={0} showDots showArrows>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 1</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 2</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 3</div></CarouselItem>\n    </Carousel>\n  )\n}",
+	code: "import { Carousel, CarouselItem } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Carousel defaultIndex={0} showDots showArrows>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 1</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 2</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 3</div></CarouselItem>\n    </Carousel>\n  )\n}",
 	cliCommand: "npx tembro add carousel",
 	highlights: [
 		"Keyboard and control-aware slider",

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

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CodeBlock } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CodeBlock } from "tembro"
 
 const snippet = \`npx tembro add button select\`
 

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/code-block/mock.ts
 var e = {
-	code: "import { CodeBlock } from \"@/index\"\n\nconst snippet = `npx tembro add button select`\n\nexport function Example() {\n  return <CodeBlock title=\"CLI\" language=\"bash\" code={snippet} />\n}",
+	code: "import { CodeBlock } from \"tembro\"\n\nconst snippet = `npx tembro add button select`\n\nexport function Example() {\n  return <CodeBlock title=\"CLI\" language=\"bash\" code={snippet} />\n}",
 	cliCommand: "npx tembro add code-block",
 	highlights: [
 		"Header with title, language and built-in copy action",

package/dist/showcase/premium/command-bar/mock.cjs

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

package/dist/showcase/premium/command-bar/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/command-bar/mock.ts
 var e = {
-	code: "import { CommandBar, Kbd, Button } from \"@/index\"\n\nexport function Example() {\n  return (\n    <CommandBar>\n      <Kbd>G</Kbd>\n      <Button size=\"sm\" variant=\"ghost\">Go to dashboard</Button>\n      <Button size=\"sm\">Publish</Button>\n    </CommandBar>\n  )\n}",
+	code: "import { CommandBar, Kbd, Button } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CommandBar>\n      <Kbd>G</Kbd>\n      <Button size=\"sm\" variant=\"ghost\">Go to dashboard</Button>\n      <Button size=\"sm\">Publish</Button>\n    </CommandBar>\n  )\n}",
 	cliCommand: "npx tembro add command-bar",
 	highlights: [
 		"Floating action rail for global shortcuts or workflow actions",

package/dist/showcase/premium/confirm-dialog/mock.cjs

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

package/dist/showcase/premium/confirm-dialog/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/confirm-dialog/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Button, ConfirmDialog } from \"@/index\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n  const [busy, setBusy] = useState(false)\n\n  async function handleConfirm() {\n    setBusy(true)\n    await new Promise((resolve) => setTimeout(resolve, 900))\n    setBusy(false)\n    setOpen(false)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <Button onClick={() => setOpen(true)} variant=\"destructive\">\n        Delete project\n      </Button>\n      <ConfirmDialog\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Delete project?\"\n        description=\"This action cannot be undone. Team members will lose access immediately.\"\n        confirmText=\"Delete forever\"\n        confirmVariant=\"destructive\"\n        isLoading={busy}\n        onCancel={() => setOpen(false)}\n        onConfirm={handleConfirm}\n      />\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Button, ConfirmDialog } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n  const [busy, setBusy] = useState(false)\n\n  async function handleConfirm() {\n    setBusy(true)\n    await new Promise((resolve) => setTimeout(resolve, 900))\n    setBusy(false)\n    setOpen(false)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <Button onClick={() => setOpen(true)} variant=\"destructive\">\n        Delete project\n      </Button>\n      <ConfirmDialog\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Delete project?\"\n        description=\"This action cannot be undone. Team members will lose access immediately.\"\n        confirmText=\"Delete forever\"\n        confirmVariant=\"destructive\"\n        isLoading={busy}\n        onCancel={() => setOpen(false)}\n        onConfirm={handleConfirm}\n      />\n    </div>\n  )\n}",
 	htmlCode: "<button data-slot=\"confirm-trigger\">Delete project</button>",
 	cliCommand: "npx tembro add confirm-dialog",
 	highlights: [

package/dist/showcase/premium/copy-button/mock.cjs

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

package/dist/showcase/premium/copy-button/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/copy-button/mock.ts
 var e = {
-	code: "import { CopyButton } from \"@/index\"\n\nexport function Example() {\n  return (\n    <CopyButton\n      value=\"sk_live_demo_123\"\n      copyLabel=\"Copy token\"\n      copiedLabel=\"Copied\"\n      variant=\"outline\"\n      size=\"sm\"\n    />\n  )\n}",
+	code: "import { CopyButton } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CopyButton\n      value=\"sk_live_demo_123\"\n      copyLabel=\"Copy token\"\n      copiedLabel=\"Copied\"\n      variant=\"outline\"\n      size=\"sm\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add copy-button",
 	highlights: [
 		"Built-in copied feedback state",

package/dist/showcase/premium/copy-field/mock.cjs

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

package/dist/showcase/premium/copy-field/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/copy-field/mock.ts
 var e = {
-	code: "import { CopyField } from \"@/index\"\n\nexport function Example() {\n  return (\n    <CopyField\n      label=\"Webhook signing secret\"\n      description=\"Use on the server only.\"\n      value=\"whsec_demo_value_123\"\n    />\n  )\n}",
+	code: "import { CopyField } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CopyField\n      label=\"Webhook signing secret\"\n      description=\"Use on the server only.\"\n      value=\"whsec_demo_value_123\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add copy-field",
 	highlights: [
 		"Label, helper text, value surface, and copy action in one unit",

package/dist/showcase/premium/data-state/mock.cjs

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

package/dist/showcase/premium/data-state/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/data-state/mock.ts
 var e = {
-	code: "import { DataState } from \"@/index\"\n\nexport function Example() {\n  return (\n    <DataState\n      status=\"error\"\n      title=\"Unable to load rows\"\n      description=\"Try again after refreshing the request.\"\n      onRetry={() => {}}\n    />\n  )\n}",
+	code: "import { DataState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <DataState\n      status=\"error\"\n      title=\"Unable to load rows\"\n      description=\"Try again after refreshing the request.\"\n      onRetry={() => {}}\n    />\n  )\n}",
 	cliCommand: "npx tembro add data-state",
 	highlights: [
 		"Idle, loading, empty, error and success state surface",

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { DatePicker } from "@/index"
+import { DatePicker } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("2026-06-19")

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/date-picker/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { DatePicker } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DatePicker\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\"]}\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { DatePicker } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DatePicker\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\"]}\n    />\n  )\n}",
 	htmlCode: "<label for=\"date-picker\">Date</label><input id=\"date-picker\" type=\"text\" value=\"2026-06-19\" />",
 	cliCommand: "npx tembro add date-picker",
 	highlights: [

package/dist/showcase/premium/date-range-picker/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { DateRangePicker } from "@/index"
+import { DateRangePicker } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-07" })

package/dist/showcase/premium/date-range-picker/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/date-range-picker/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { DateRangePicker } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-07\" })\n\n  return (\n    <DateRangePicker\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\", \"2026-06-22\"]}\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { DateRangePicker } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-07\" })\n\n  return (\n    <DateRangePicker\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\", \"2026-06-22\"]}\n    />\n  )\n}",
 	htmlCode: "<label for=\"date-range-picker\">Date range</label><input id=\"date-range-picker\" type=\"text\" value=\"2026-06-01 to 2026-06-07\" />",
 	cliCommand: "npx tembro add date-range-picker",
 	highlights: [

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

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

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/descriptions/mock.ts
 var e = {
-	code: "import { Descriptions } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Descriptions\n      title=\"Project profile\"\n      extra={<span className=\"text-sm text-muted-foreground\">Draft</span>}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat UI Team\" },\n        { key: \"status\", label: \"Status\", value: \"In review\" },\n        { key: \"release\", label: \"Release\", value: \"v0.3.27\", span: 2 },\n        { key: \"stack\", label: \"Tech\", value: \"React + Tailwind\" },\n      ]}\n    />\n  )\n}",
+	code: "import { Descriptions } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Descriptions\n      title=\"Project profile\"\n      extra={<span className=\"text-sm text-muted-foreground\">Draft</span>}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat UI Team\" },\n        { key: \"status\", label: \"Status\", value: \"In review\" },\n        { key: \"release\", label: \"Release\", value: \"v0.3.27\", span: 2 },\n        { key: \"stack\", label: \"Tech\", value: \"React + Tailwind\" },\n      ]}\n    />\n  )\n}",
 	cliCommand: "npx tembro add descriptions",
 	highlights: [
 		"Title and metadata layout in a compact two-axis grid",

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/index"
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
 
 export function Example() {
   const [open, setOpen] = React.useState(false)

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/dialog/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"@/index\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button>Publish</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Publish update</DialogTitle>\n          <DialogDescription>\n            Confirm that these notes are final before moving to production.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n          <Button>Publish</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}",
+	code: "import * as React from \"react\"\nimport { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button>Publish</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Publish update</DialogTitle>\n          <DialogDescription>\n            Confirm that these notes are final before moving to production.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n          <Button>Publish</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}",
 	htmlCode: "<button data-slot=\"dialog-trigger\">Open dialog</button>",
 	cliCommand: "npx tembro add dialog",
 	highlights: [

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

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

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/divider/mock.ts
 var e = {
-	code: "import { Divider } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-6\">\n      <Divider label=\"Sections\" />\n      <Divider orientation=\"horizontal\" dashed label=\"Dashed\" />\n      <Divider dashed orientation=\"vertical\" />\n    </div>\n  )\n}",
+	code: "import { Divider } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-6\">\n      <Divider label=\"Sections\" />\n      <Divider orientation=\"horizontal\" dashed label=\"Dashed\" />\n      <Divider dashed orientation=\"vertical\" />\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add divider",
 	highlights: [
 		"Horizontal divider as labeled group boundary",

package/dist/showcase/premium/dual-list-picker/mock.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DualListPicker } from "@/index"
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DualListPicker } from "tembro"
 
 const items = [
   { label: "Analytics", value: "analytics" },

package/dist/showcase/premium/dual-list-picker/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/dual-list-picker/mock.ts
 var e = {
-	code: "import { DualListPicker } from \"@/index\"\n\nconst items = [\n  { label: \"Analytics\", value: \"analytics\" },\n  { label: \"Reports\", value: \"reports\" },\n]\n\nexport function Example() {\n  const [picked, setPicked] = useState([\"analytics\"])\n\n  return (\n    <DualListPicker\n      items={items}\n      picked={picked}\n      onPickedChange={setPicked}\n      availableTitle=\"Available\"\n      pickedTitle=\"Selected\"\n    />\n  )\n}",
+	code: "import { DualListPicker } from \"tembro\"\n\nconst items = [\n  { label: \"Analytics\", value: \"analytics\" },\n  { label: \"Reports\", value: \"reports\" },\n]\n\nexport function Example() {\n  const [picked, setPicked] = useState([\"analytics\"])\n\n  return (\n    <DualListPicker\n      items={items}\n      picked={picked}\n      onPickedChange={setPicked}\n      availableTitle=\"Available\"\n      pickedTitle=\"Selected\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add dual-list-picker",
 	highlights: [
 		"Move items between available/selected lists",

package/dist/showcase/premium/file-upload/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { FileUpload } from "@/index"
+import { FileUpload } from "tembro"
 
 export function Example() {
   const [files, setFiles] = useState<File[]>([])

package/dist/showcase/premium/file-upload/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/file-upload/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { FileUpload } from \"@/index\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <FileUpload\n      files={files}\n      onFilesChange={setFiles}\n      accept=\".pdf,.docx,.png\"\n      maxFiles={4}\n      maxSize={4 * 1024 * 1024}\n      helperText=\"Supports PDF, DOCX and PNG up to 4 MB.\"\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { FileUpload } from \"tembro\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <FileUpload\n      files={files}\n      onFilesChange={setFiles}\n      accept=\".pdf,.docx,.png\"\n      maxFiles={4}\n      maxSize={4 * 1024 * 1024}\n      helperText=\"Supports PDF, DOCX and PNG up to 4 MB.\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add file-upload",
 	highlights: [
 		"Reusable dropzone and file list",

package/dist/showcase/premium/image-upload/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { ImageUpload } from "@/index"
+import { ImageUpload } from "tembro"
 
 export function Example() {
   const [files, setFiles] = useState<File[]>([])

package/dist/showcase/premium/image-upload/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/image-upload/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { ImageUpload } from \"@/index\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <ImageUpload\n      files={files}\n      onFilesChange={setFiles}\n      maxFiles={3}\n      helperText=\"Upload hero illustrations or block thumbnails.\"\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { ImageUpload } from \"tembro\"\n\nexport function Example() {\n  const [files, setFiles] = useState<File[]>([])\n\n  return (\n    <ImageUpload\n      files={files}\n      onFilesChange={setFiles}\n      maxFiles={3}\n      helperText=\"Upload hero illustrations or block thumbnails.\"\n    />\n  )\n}",
 	cliCommand: "npx tembro add image-upload",
 	highlights: [
 		"Image preview support",

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 (