tembro 2.1.11 → 2.1.12

package/dist/showcase/package-meta.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.3`,t=`July 8, 2026`,n=`^${e}`;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.1.12`,t=`July 9, 2026`,n=`^${e}`;exports.PACKAGE_DEPENDENCY_RANGE=n,exports.PACKAGE_LATEST_RELEASE_DATE=t,exports.PACKAGE_LATEST_VERSION=e;

package/dist/showcase/package-meta.d.ts

@@ -1,3 +1,3 @@
-export declare const PACKAGE_LATEST_VERSION = "2.0.3";
-export declare const PACKAGE_LATEST_RELEASE_DATE = "July 8, 2026";
-export declare const PACKAGE_DEPENDENCY_RANGE = "^2.0.3";
+export declare const PACKAGE_LATEST_VERSION = "2.1.12";
+export declare const PACKAGE_LATEST_RELEASE_DATE = "July 9, 2026";
+export declare const PACKAGE_DEPENDENCY_RANGE = "^2.1.12";

package/dist/showcase/package-meta.js

@@ -1,4 +1,4 @@
 //#region src/showcase/package-meta.ts
-var e = "2.0.3", t = "July 8, 2026", n = `^${e}`;
+var e = "2.1.12", t = "July 9, 2026", n = `^${e}`;
 //#endregion
 export { n as PACKAGE_DEPENDENCY_RANGE, t as PACKAGE_LATEST_RELEASE_DATE, e as PACKAGE_LATEST_VERSION };

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

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

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/accordion/mock.ts
 var e = {
-	code: "import { Accordion } from \"@/index\"\n\nconst items = [\n  {\n    key: \"tokens\",\n    title: \"Theme tokens\",\n    description: \"Control border, background, radius, and spacing from one place.\",\n    content: \"Keep product decisions inside tokens instead of hardcoded one-off wrappers.\",\n  },\n  {\n    key: \"composition\",\n    title: \"Component composition\",\n    description: \"Teach one component first.\",\n    content: \"Advanced behavior should be exposed through props, hooks, and helpers instead of separate public groups.\",\n  },\n]\n\nexport function Example() {\n  return <Accordion type=\"single\" defaultValue=\"tokens\" items={items} />\n}",
+	code: "import { Accordion } from \"tembro\"\n\nconst items = [\n  {\n    key: \"tokens\",\n    title: \"Theme tokens\",\n    description: \"Control border, background, radius, and spacing from one place.\",\n    content: \"Keep product decisions inside tokens instead of hardcoded one-off wrappers.\",\n  },\n  {\n    key: \"composition\",\n    title: \"Component composition\",\n    description: \"Teach one component first.\",\n    content: \"Advanced behavior should be exposed through props, hooks, and helpers instead of separate public groups.\",\n  },\n]\n\nexport function Example() {\n  return <Accordion type=\"single\" defaultValue=\"tokens\" items={items} />\n}",
 	htmlCode: "<details data-slot=\"accordion\">\n  <summary data-slot=\"accordion-trigger\">Theme tokens</summary>\n  <div data-slot=\"accordion-content\">Keep product decisions inside tokens.</div>\n</details>",
 	cliCommand: "npx tembro add accordion",
 	highlights: [

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

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

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/avatar/mock.ts
 var e = {
-	code: "import { Avatar, AvatarGroup } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Avatar name=\"Azamat Jurayev\" status=\"online\" />\n      <AvatarGroup\n        items={[\n          { key: \"az\", name: \"Azamat Jurayev\", status: \"online\" },\n          { key: \"su\", name: \"Suhrob Karimov\", status: \"busy\" },\n          { key: \"na\", name: \"Nargiza Saidova\", status: \"away\" },\n        ]}\n      />\n    </div>\n  )\n}",
+	code: "import { Avatar, AvatarGroup } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Avatar name=\"Azamat Jurayev\" status=\"online\" />\n      <AvatarGroup\n        items={[\n          { key: \"az\", name: \"Azamat Jurayev\", status: \"online\" },\n          { key: \"su\", name: \"Suhrob Karimov\", status: \"busy\" },\n          { key: \"na\", name: \"Nargiza Saidova\", status: \"away\" },\n        ]}\n      />\n    </div>\n  )\n}",
 	cliCommand: "npx tembro add avatar",
 	highlights: [
 		"Single avatar plus stacked group export",

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
 import { ArrowRightIcon, DownloadIcon } from "lucide-react"
-import { Button, buttonVariants } from "@/index"
+import { Button, buttonVariants } from "tembro"
 
 export function BasicExamples() {
   return (

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/button/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"@/index\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button iconOnly aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
+	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"tembro\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button iconOnly aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
 	htmlCode: "<button data-slot=\"button\" data-variant=\"primary\">\n  Continue\n</button>",
 	cliCommand: "npx tembro add button",
 	highlights: [

package/dist/showcase/premium/calendar-scheduler/mock.cjs

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

package/dist/showcase/premium/calendar-scheduler/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/calendar-scheduler/mock.ts
 var e = {
-	code: "import { CalendarScheduler } from \"@/index\"\n\nexport function Example() {\n  return (\n    <CalendarScheduler\n      days={[\"Mon, Jul 6\", \"Tue, Jul 7\"]}\n      events={[\n        { id: \"1\", title: \"Design review\", date: \"Mon, Jul 6\", time: \"10:00\", tone: \"warning\" },\n        { id: \"2\", title: \"Release freeze\", date: \"Tue, Jul 7\", time: \"14:00\", tone: \"danger\" },\n      ]}\n    />\n  )\n}",
+	code: "import { CalendarScheduler } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CalendarScheduler\n      days={[\"Mon, Jul 6\", \"Tue, Jul 7\"]}\n      events={[\n        { id: \"1\", title: \"Design review\", date: \"Mon, Jul 6\", time: \"10:00\", tone: \"warning\" },\n        { id: \"2\", title: \"Release freeze\", date: \"Tue, Jul 7\", time: \"14:00\", tone: \"danger\" },\n      ]}\n    />\n  )\n}",
 	cliCommand: "npx tembro add calendar-scheduler",
 	highlights: [
 		"Compact scheduler timeline by day",

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

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

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",