tembro 2.1.11 → 2.1.12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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