tembro 3.1.1 → 3.1.6

package/packages/cli/vendor/src/showcase/premium/search-input/mock.ts

@@ -1,33 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const searchInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Input, Kbd } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Input
-      kind="search"
-      value={value}
-      onValueChange={setValue}
-      placeholder="Search customers, invoices, or routes..."
-      resultCount={18}
-      shortcut={<Kbd>Ctrl+K</Kbd>}
-      debounceMs={250}
-    />
-  )
-}`,
-  highlights: ["Search icon, result count, and shortcut support", "Debounced value callback", "Clear action inheritance", "Good fit for toolbars and command launchers"],
-  scenarios: [
-    { title: "Data table search", description: "Filter customers, invoices, or events without leaving the current view." },
-    { title: "Global search bar", description: "Pair result count and shortcut hint in a compact top-level surface." },
-    { title: "Settings search", description: "Reduce long preferences pages into one searchable control." },
-  ],
-  capabilityNotes: [
-    "Keep search placeholder specific to the entities users can actually find.",
-    "Use debounced callbacks for remote or expensive filtering.",
-    "Only show result count when the number helps the user decide the next step.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/search-input/showcase.tsx

@@ -1,85 +0,0 @@
-import * as React from "react"
-
-import { Badge, Input, Kbd } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const sourceRows = [
-  "Acme Growth workspace",
-  "Invoice 2048 approval",
-  "Northwind billing route",
-  "Customer retention dashboard",
-  "Workspace member access",
-  "Export usage report",
-]
-
-export function SearchInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = React.useState("")
-  const [debouncedValue, setDebouncedValue] = React.useState("")
-
-  const filtered = React.useMemo(() => {
-    const normalized = debouncedValue.trim().toLowerCase()
-    if (!normalized) return sourceRows
-    return sourceRows.filter((row) => row.toLowerCase().includes(normalized))
-  }, [debouncedValue])
-
-  return (
-    <div className="space-y-5">
-      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Search control</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">SearchInput should shorten finding, not add interface noise</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Debounced</Badge>
-            <Badge variant="outline" className="rounded-full">Shortcut aware</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <Input
-          kind="search"
-          value={value}
-          onValueChange={setValue}
-          onDebouncedValueChange={setDebouncedValue}
-          placeholder="Search customers, invoices, or routes..."
-          resultCount={filtered.length}
-          shortcut={<Kbd>Ctrl+K</Kbd>}
-          debounceMs={250}
-        />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Resolved query</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{debouncedValue || "No active query"}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">The debounced value represents what should usually drive remote or expensive filters.</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Preview results</p>
-          <div className="mt-4 space-y-2 text-sm">
-            {filtered.map((row) => (
-              <div key={row} className="rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted">
-                {row}
-              </div>
-            ))}
-          </div>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Try searching for `invoice`, `workspace`, or `billing`.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/sheet-shell/index.ts

@@ -1,3 +0,0 @@
-export { SheetShellShowcase } from "./showcase"
-export { sheetShellMock } from "./mock"
-

package/packages/cli/vendor/src/showcase/premium/sheet-shell/mock.ts

@@ -1,59 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sheetShellMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, SheetShell } from "tembro"
-
-export function Example() {
-  const [openRight, setOpenRight] = useState(false)
-  const [openBottom, setOpenBottom] = useState(false)
-
-  return (
-    <div className="space-y-3">
-      <Button onClick={() => setOpenRight(true)}>Open right sheet</Button>
-      <Button variant="outline" onClick={() => setOpenBottom(true)}>Open bottom sheet</Button>
-      <SheetShell
-        open={openRight}
-        onOpenChange={setOpenRight}
-        side="right"
-        title="Workspace editor"
-        description="Use a sheet for dense action rows without taking full screen."
-        footer={<Button onClick={() => setOpenRight(false)}>Done</Button>}
-      >
-        <p className="text-sm aui-text-muted">Compact editor surface stays close to the source context.</p>
-      </SheetShell>
-      <SheetShell
-        open={openBottom}
-        onOpenChange={setOpenBottom}
-        side="bottom"
-        title="Mobile actions"
-        description="Use mobile-friendly sheet for quick row actions."
-        footer={<Button variant="outline" onClick={() => setOpenBottom(false)}>Close</Button>}
-      >
-        <p className="text-sm aui-text-muted">Bottom sheets fit long lists and quick actions on narrow viewports.</p>
-      </SheetShell>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="sheet-shell-trigger">Open sheet</button>`,
-  cliCommand: "npx tembro add sheet-shell",
-  highlights: [
-    "Side-based drawer behavior",
-    "Right and bottom anchors",
-    "Footer action slot",
-    "Contextual edit pattern",
-  ],
-  relatedBlockSlugs: ["dashboard-starter", "users-table", "settings-form"],
-  scenarios: [
-    { title: "Desktop quick editor", description: "Keep row-level actions next to data without leaving page context." },
-    { title: "Mobile action panel", description: "Use bottom sheets for compact action drawers on small screens." },
-    { title: "Controlled sheet", description: "Parent owns open state and navigation-related side effects." },
-    { title: "Action footer", description: "Include explicit Done/Submit for consistent close behavior." },
-  ],
-  capabilityNotes: [
-    "SheetShell should replace full modals when interaction is contextual and task-scoped.",
-    "Use side controls based on flow density (right for editors, bottom for mobile actions).",
-    "Keep state/validation outside the sheet to prevent focus and mount side effects.",
-    "Avoid loading-heavy forms directly in sheets unless the sheet is intentionally a workflow container.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/sheet-shell/showcase.tsx

@@ -1,87 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, SheetShell } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SheetShellShowcase() {
-  const [side, setSide] = React.useState<"right" | "left" | "top" | "bottom">("right")
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Sheet shell</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Keep the page visible while editing</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Sheet is for context-preserving edits and side details that should not fully block the screen.</p>
-          </div>
-
-          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Side</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong capitalize">{side}</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Use for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Quick edits</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Fallback</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Dialog</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-3">
-          <Button onClick={() => setOpen(true)}>Open sheet</Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              setSide((current) => (current === "right" ? "left" : current === "left" ? "top" : current === "top" ? "bottom" : "right"))
-            }
-          >
-            Cycle side
-          </Button>
-          <Badge variant="outline">Context edit</Badge>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Use a sheet when returning to the same page context matters.",
-            "Keep the body focused on one task or one record.",
-            "If the interaction becomes global or destructive, switch to a stronger surface.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <SheetShell
-        open={open}
-        onOpenChange={setOpen}
-        side={side}
-        title="Quick edit"
-        description="Side sheets are best for quick updates and row actions."
-        footer={
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save</Button>
-          </div>
-        }
-      >
-        <div className="space-y-2">
-          <p className="text-sm aui-text-muted">Use this panel for quick edit actions and context-aware updates.</p>
-          <p className="text-xs uppercase tracking-[0.22em] aui-text-muted">Keep the main page visible while editing.</p>
-        </div>
-      </SheetShell>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/index.ts

@@ -1,2 +0,0 @@
-export { SidebarNavShowcase } from "./showcase"
-export { sidebarNavMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const sidebarNavMock: ComponentDemoMock = {
-  code: `import { SidebarNav } from "tembro"
-
-const items = [
-  { key: "overview", label: "Overview", href: "/overview" },
-  { key: "resources", label: "Resources", href: "/resources", active: true },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-]
-
-export function Example() {
-  return <SidebarNav items={items} />
-}`,
-  highlights: ["Compact and active states", "Disabled route handling", "Render hooks for custom link and item", "Works with controlled active item"],
-  scenarios: [
-    { title: "Left navigation", description: "Use SidebarNav for primary route anchors and command links." },
-    { title: "Custom links", description: "Render each link through Next/React Router integration." },
-    { title: "Collapsed rail", description: "Use compact mode on narrow sidebars and drawers." },
-  ],
-  capabilityNotes: [
-    "Keep `items` as source of truth for route and badge metadata.",
-    "Preserve keys and active state consistency across re-renders.",
-    "For keyboard users, keep labels human-readable and non-empty.",
-    "Disabled items should still show intent but block interaction clearly.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/sidebar-nav/showcase.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-
-import { Badge, SidebarNav } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const baseItems = [
-  { key: "overview", label: "Overview", href: "/overview" },
-  { key: "products", label: "Products", href: "/products" },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-  { key: "billing", label: "Billing", href: "/billing" },
-]
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function SidebarNavShowcase({ mode }: ComponentDemoProps) {
-  const [activeKey, setActiveKey] = React.useState(baseItems[0]?.key ?? "overview")
-  const [collapsed, setCollapsed] = React.useState(mode === "playground")
-
-  const items = React.useMemo(
-    () =>
-      baseItems.map((item) => ({
-        ...item,
-        active: item.key === activeKey,
-        onSelect: () => setActiveKey(item.key),
-      })),
-    [activeKey],
-  )
-
-  const selectedLabel = baseItems.find((item) => item.key === activeKey)?.label ?? "Overview"
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Route navigation</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Sidebar nav should orient the page fast</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Show active route, disabled destination, and collapsed behavior in one calm preview instead of a standalone toy sidebar.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Active route</Badge>
-            <Badge variant="outline" className="rounded-full">Disabled item</Badge>
-            <Badge variant="outline" className="rounded-full">Collapsed</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className={`${panelClass} grid gap-4 xl:grid-cols-[0.92fr_1.08fr]`}>
-        <section>
-          <p className="text-sm font-medium aui-text-muted">Workspace navigation</p>
-          <div className="mt-3 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-3">
-            <SidebarNav items={items} collapsed={collapsed} />
-          </div>
-        </section>
-
-        <section>
-          <p className="text-sm font-medium aui-text-muted">Current context</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{selectedLabel}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">
-            Collapsed mode is useful only when the shell still leaves enough context elsewhere. Do not collapse navigation if labels are the only orientation cue on the page.
-          </p>
-          {mode === "playground" ? (
-            <button
-              type="button"
-              onClick={() => setCollapsed((value) => !value)}
-              className="mt-4 rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted transition hover:text-[color:var(--aui-fg)]"
-            >
-              {collapsed ? "Expand nav" : "Collapse nav"}
-            </button>
-          ) : null}
-        </section>
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/simple-select/index.ts

@@ -1,2 +0,0 @@
-export { SimpleSelectShowcase } from "./showcase"
-export { simpleSelectMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/simple-select/mock.ts

@@ -1,49 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const simpleSelectMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, Select } from "tembro"
-
-const selectOptions = [
-  { value: "public", label: "Public", disabled: false },
-  { value: "private", label: "Private", disabled: false },
-  { value: "internal", label: "Internal", disabled: false },
-  { value: "archived", label: "Archived", disabled: true },
-]
-
-export function Example() {
-  const [value, setValue] = useState("private")
-
-  return (
-    <div className="space-y-3">
-      <Select
-        options={selectOptions}
-        value={value}
-        onValueChange={(nextValue) => setValue(nextValue ?? "private")}
-        placeholder="Visibility"
-        size="sm"
-      />
-      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
-        Current visibility: <strong>{value}</strong>
-      </div>
-      <Button variant="outline" onClick={() => setValue("public")}>Reset public</Button>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="simple-select-trigger">Open options</button>`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Controlled usage", "Static options", "Clear default value", "Disabled option handling"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Controlled visibility", description: "Use controlled `value` when parent flow tracks visibility state." },
-    { title: "Static catalog", description: "Use fixed options for status and tier fields." },
-    { title: "Clear/reset flow", description: "Expose a reset path before destructive transitions." },
-    { title: "Compact trigger", description: "Use small size in dense row or toolbar layouts." },
-  ],
-  capabilityNotes: [
-    "SimpleSelect is best for local option lists that don't require async loading.",
-    "Avoid rebuilding options each render; memoize if options are computed.",
-    "Use disabled options to communicate temporarily unavailable targets.",
-    "Always keep selected value in a controlled parent when used in complex forms.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/simple-select/showcase.tsx

@@ -1,66 +0,0 @@
-import { useState } from "react"
-
-import { Badge, Button, Select } from "@/index"
-import { routeSimpleSelectOptions } from "@/showcase/component-route-data"
-
-import type { ComponentDemoProps } from "../types"
-
-export function SimpleSelectShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState<string | undefined>("private")
-  const [uncontrolledKey, setUncontrolledKey] = useState(0)
-  const options = routeSimpleSelectOptions
-  const activeOption = options.find((item) => item.value === value)
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-        <p className="text-sm font-medium aui-text-strong">SimpleSelect is the lightweight static member</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">
-          Use it only when you want a thinner wrapper around the main Select surface for static option lists.
-        </p>
-        <div className="mt-3 flex flex-wrap gap-2">
-          <Badge variant="outline">Static options</Badge>
-          <Badge variant="outline">Searchable</Badge>
-          <Badge variant="outline">Clearable</Badge>
-        </div>
-      </div>
-      <Select
-        value={value}
-        onValueChange={(nextValue) => setValue(nextValue)}
-        options={options}
-        placeholder="Visibility"
-        searchable
-        clearable
-        showSelectedDescription
-      />
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Current value</p>
-          <p className="mt-2 aui-text-muted">{activeOption?.label ?? "Nothing selected"}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Behavior</p>
-          <p className="mt-2 aui-text-muted">Clear icon and disabled items behave inside the same trigger model.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">When to use</p>
-          <p className="mt-2 aui-text-muted">Choose this for local option lists before moving to AsyncSelect.</p>
-        </div>
-      </div>
-      <Select key={uncontrolledKey} defaultValue="public" options={options} showSelectedDescription />
-      <div className="flex flex-wrap gap-2">
-        <Button variant="outline" size="sm" onClick={() => setValue(undefined)}>
-          Clear controlled
-        </Button>
-        <Button variant="outline" size="sm" onClick={() => setUncontrolledKey((prev) => prev + 1)}>
-          Reset uncontrolled sample
-        </Button>
-      </div>
-      {mode === "playground" ? (
-        <p className="aui-text-muted rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          Controlled selection can power filter states, while uncontrolled default usage is fine for one-off static forms. If the list becomes remote, move back to the Select family and choose AsyncSelect.
-        </p>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/sticky-footer-bar/index.ts

@@ -1,3 +0,0 @@
-export { stickyFooterBarMock } from "./mock"
-export { StickyFooterBarShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/sticky-footer-bar/mock.ts

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const stickyFooterBarMock: ComponentDemoMock = {
-  code: `import { Button, StickyFooterBar } from "tembro"
-
-export function Example() {
-  return (
-    <StickyFooterBar
-      start={<span className="text-sm">Unsaved changes</span>}
-      end={
-        <>
-          <Button size="sm" variant="outline">Discard</Button>
-          <Button size="sm">Save</Button>
-        </>
-      }
-    />
-  )
-}`,
-  cliCommand: "npx tembro add sticky-footer-bar",
-  highlights: [
-    "Sticky bottom action bar with start/end slots",
-    "Useful in long forms or page-level action surfaces",
-    "Works with mixed content and custom children",
-  ],
-  scenarios: [
-    { title: "Editor", description: "Keep save actions visible while scrolling long content." },
-    { title: "Dashboard", description: "Show contextual batch actions near viewport bottom." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/sticky-footer-bar/showcase.tsx

@@ -1,33 +0,0 @@
-import { Button, StickyFooterBar } from "@/index"
-
-export function StickyFooterBarShowcase() {
-  return (
-    <div className="relative min-h-56 rounded-lg border">
-      <div className="h-40 overflow-auto p-4">
-        <p className="text-sm text-muted-foreground">
-          Scroll inside this panel and keep action buttons visible at the bottom. This simulates a long form or content page where save and cancel
-          controls should stay accessible.
-        </p>
-        <div className="mt-4 space-y-3">
-          {Array.from({ length: 20 }).map((_, index) => (
-            <div key={index} className="rounded-md border px-3 py-2 text-sm">
-              Row {index + 1}
-            </div>
-          ))}
-        </div>
-      </div>
-      <StickyFooterBar
-        start={<span className="text-sm font-medium text-muted-foreground">Unsaved changes</span>}
-        end={
-          <>
-            <Button size="sm" variant="outline">
-              Discard
-            </Button>
-            <Button size="sm">Save draft</Button>
-          </>
-        }
-      />
-    </div>
-  )
-}
-