tembro 1.0.0

package/dist/families/member-queries.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./member-metadata.cjs");var t=new Map(e.componentMemberMetadata.map(e=>[e.component,e]));function n(e){return t.get(e)}function r(t){return e.componentMemberMetadata.filter(e=>e.family===t)}function i(t){return e.componentMemberMetadata.filter(e=>e.maturity===t)}exports.getComponentMemberMetadata=n,exports.getFamilyMemberMetadata=r,exports.listComponentsByMaturity=i;

package/dist/families/member-queries.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentMemberMetadata, type ComponentMemberMaturity } from "@/families/member-metadata";
+import type { ComponentFamilyName } from "@/families/catalog";
+declare function getComponentMemberMetadata(component: string): ComponentMemberMetadata | undefined;
+declare function getFamilyMemberMetadata(family: ComponentFamilyName): ComponentMemberMetadata[];
+declare function listComponentsByMaturity(maturity: ComponentMemberMaturity): ComponentMemberMetadata[];
+export { getComponentMemberMetadata, getFamilyMemberMetadata, listComponentsByMaturity, };

package/dist/families/member-queries.js

@@ -0,0 +1,14 @@
+import { componentMemberMetadata as e } from "./member-metadata.js";
+//#region src/families/member-queries.ts
+var t = new Map(e.map((e) => [e.component, e]));
+function n(e) {
+	return t.get(e);
+}
+function r(t) {
+	return e.filter((e) => e.family === t);
+}
+function i(t) {
+	return e.filter((e) => e.maturity === t);
+}
+//#endregion
+export { n as getComponentMemberMetadata, r as getFamilyMemberMetadata, i as listComponentsByMaturity };

package/dist/families/member-snippet-queries.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./member-queries.cjs"),t=require("./member-snippets.cjs");var n=new Map;for(let e of t.componentSnippetExamples){let t=n.get(e.component)??[];t.push(e),n.set(e.component,t)}function r(e){return n.get(e)??[]}function i(e){return r(e)[0]}function a(e){let t=new Map;for(let n of r(e)){let e=t.get(n.variant)??[];e.push(n),t.set(n.variant,e)}return t}function o(n){return t.componentSnippetExamples.filter(t=>e.getComponentMemberMetadata(t.component)?.family===n)}function s(){return[...new Set(t.componentSnippetExamples.map(e=>e.variant))]}exports.getComponentSnippets=r,exports.getComponentSnippetsByVariant=a,exports.getFamilySnippets=o,exports.getPrimaryComponentSnippet=i,exports.listSnippetVariants=s;

package/dist/families/member-snippet-queries.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentSnippetExample, type ComponentSnippetVariant } from "@/families/member-snippets";
+import type { ComponentFamilyName } from "@/families/catalog";
+declare function getComponentSnippets(component: string): ComponentSnippetExample[];
+declare function getPrimaryComponentSnippet(component: string): ComponentSnippetExample;
+declare function getComponentSnippetsByVariant(component: string): Map<ComponentSnippetVariant, ComponentSnippetExample[]>;
+declare function getFamilySnippets(family: ComponentFamilyName): ComponentSnippetExample[];
+declare function listSnippetVariants(): ComponentSnippetVariant[];
+export { getComponentSnippets, getComponentSnippetsByVariant, getFamilySnippets, getPrimaryComponentSnippet, listSnippetVariants, };

package/dist/families/member-snippet-queries.js

@@ -0,0 +1,30 @@
+import { getComponentMemberMetadata as e } from "./member-queries.js";
+import { componentSnippetExamples as t } from "./member-snippets.js";
+//#region src/families/member-snippet-queries.ts
+var n = /* @__PURE__ */ new Map();
+for (let e of t) {
+	let t = n.get(e.component) ?? [];
+	t.push(e), n.set(e.component, t);
+}
+function r(e) {
+	return n.get(e) ?? [];
+}
+function i(e) {
+	return r(e)[0];
+}
+function a(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of r(e)) {
+		let e = t.get(n.variant) ?? [];
+		e.push(n), t.set(n.variant, e);
+	}
+	return t;
+}
+function o(n) {
+	return t.filter((t) => e(t.component)?.family === n);
+}
+function s() {
+	return [...new Set(t.map((e) => e.variant))];
+}
+//#endregion
+export { r as getComponentSnippets, a as getComponentSnippetsByVariant, o as getFamilySnippets, i as getPrimaryComponentSnippet, s as listSnippetVariants };

package/dist/families/member-snippets.cjs

@@ -0,0 +1,484 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{component:`Input`,title:`Basic text field`,description:`Start with Input first and enable behavior through props before moving into presets.`,language:`tsx`,variant:`basic`,code:`import { Input } from "tembro"
+
+<Input placeholder="Email address" />`},{component:`Input`,title:`Clearable primary field`,description:`Input can own the clear behavior directly when you do not need a separate preset import.`,language:`tsx`,variant:`advanced`,code:`import { Input } from "tembro"
+
+<Input
+  value={query}
+  onValueChange={setQuery}
+  placeholder="Search customers..."
+  clearable
+  trailingAction={<span className="text-xs text-muted-foreground">12 results</span>}
+/>`},{component:`Textarea`,title:`Multi-line notes`,description:`Use Textarea when the same input family needs longer freeform content.`,language:`tsx`,variant:`basic`,code:`import { Textarea } from "tembro"
+
+<Textarea placeholder="Write release notes or internal guidance..." rows={5} />`},{component:`SearchInput`,title:`Search filter`,description:`Use the search preset when the base Input needs result-count or shortcut chrome out of the box.`,language:`tsx`,variant:`basic`,code:`import { SearchInput } from "tembro"
+
+<SearchInput value={query} onValueChange={setQuery} placeholder="Search products..." />`},{component:`ClearableInput`,title:`Clearable field`,description:`Use the clearable preset when teams want the Input clear action packaged as one helper.`,language:`tsx`,variant:`basic`,code:`import { ClearableInput } from "tembro"
+
+<ClearableInput value={keyword} onValueChange={setKeyword} placeholder="Keyword" />`},{component:`PasswordInput`,title:`Password field`,description:`Use the password preset when Input needs a reveal toggle and password-safe defaults.`,language:`tsx`,variant:`basic`,code:`import { PasswordInput } from "tembro"
+
+<PasswordInput value={password} onValueChange={setPassword} placeholder="Password" />`},{component:`NumberInput`,title:`Parsed numeric value`,description:`Keep both raw entry and parsed number when needed.`,language:`tsx`,variant:`basic`,code:`import { NumberInput } from "tembro"
+
+<NumberInput
+  min={0}
+  step={1}
+  value={quantity}
+  onNumberChange={setQuantity}
+  placeholder="Quantity"
+/>`},{component:`Slider`,title:`Single-value slider`,description:`Use the slider when a bounded numeric value should be adjusted visually instead of typed.`,language:`tsx`,variant:`basic`,code:`import { Slider } from "tembro"
+
+<Slider
+  label="Density"
+  description="Tune content density."
+  min={0}
+  max={100}
+  defaultValue={64}
+  showValue
+/>`},{component:`RangeSlider`,title:`Range slider`,description:`Use the range slider when one surface should control a min and max bound together.`,language:`tsx`,variant:`basic`,code:`import { RangeSlider } from "tembro"
+
+<RangeSlider
+  label="Revenue range"
+  description="Filter between two values."
+  min={0}
+  max={100}
+  defaultValue={[20, 80]}
+  showValue
+/>`},{component:`Rating`,title:`Rating input`,description:`Use rating for compact sentiment, score, or review capture.`,language:`tsx`,variant:`basic`,code:`import { Rating } from "tembro"
+
+<Rating defaultValue={4} labels={{ clear: "Reset" }} />`},{component:`MaskedInput`,title:`Custom mask`,description:`MaskedInput is for custom displayed formatting over a raw string value.`,language:`tsx`,variant:`advanced`,code:`import { MaskedInput } from "tembro"
+
+<MaskedInput
+  value={invoiceCode}
+  onValueChange={(masked) => setInvoiceCode(masked)}
+  mask={(value) => value.toUpperCase()}
+/>`},{component:`PhoneInput`,title:`Formatted phone entry`,description:`Phone input keeps visible formatting while emitting a normalized value.`,language:`tsx`,variant:`basic`,code:`import { PhoneInput } from "tembro"
+
+<PhoneInput value={phone} onValueChange={(masked) => setPhone(masked)} />`},{component:`MoneyInput`,title:`Price field`,description:`Prefix and suffix keep financial context in the field chrome.`,language:`tsx`,variant:`basic`,code:`import { MoneyInput } from "tembro"
+
+<MoneyInput
+  prefix="$"
+  value={price}
+  onValueChange={(amount) => setPrice(amount)}
+  placeholder="0.00"
+/>`},{component:`QuantityInput`,title:`Stepper quantity field`,description:`Use quantity input when typing and step controls should live together.`,language:`tsx`,variant:`basic`,code:`import { QuantityInput } from "tembro"
+
+<QuantityInput value={count} min={1} max={20} onValueChange={setCount} />`},{component:`QuantityStepper`,title:`Stepper-only control`,description:`Use the stepper when free typing should be avoided entirely.`,language:`tsx`,variant:`advanced`,code:`import { QuantityStepper } from "tembro"
+
+<QuantityStepper value={count} min={1} max={10} onValueChange={setCount} />`},{component:`OtpInput`,title:`Verification code`,description:`OtpInput handles per-cell focus and paste behavior for short codes.`,language:`tsx`,variant:`basic`,code:`import { OtpInput } from "tembro"
+
+<OtpInput value={otp} onValueChange={setOtp} length={6} />`},{component:`ColorInput`,title:`Native color picker`,description:`Use the color preset when browser-native selection is sufficient.`,language:`tsx`,variant:`basic`,code:`import { ColorInput } from "tembro"
+
+<ColorInput value={brandColor} onValueChange={setBrandColor} />`},{component:`DateInput`,title:`Simple date capture`,description:`Use the native wrapper when a full date picker is unnecessary.`,language:`tsx`,variant:`basic`,code:`import { DateInput } from "tembro"
+
+<DateInput value={startDate} onValueChange={setStartDate} />`},{component:`DateRangeInput`,title:`From and to range`,description:`Use the range preset for lightweight report and filter intervals.`,language:`tsx`,variant:`basic`,code:`import { DateRangeInput } from "tembro"
+
+<DateRangeInput value={range} onValueChange={setRange} />`},{component:`FormInput`,title:`Form field wrapper`,description:`Use the universal RHF wrapper when field framing and validation should stay consistent.`,language:`tsx`,variant:`form`,code:`import { FormInput } from "tembro"
+
+<FormInput control={control} name="email" label="Email" placeholder="Email address" />`},{component:`FormInput`,title:`Universal search wrapper`,description:`Use kind switching instead of separate wrapper names for common field variants.`,language:`tsx`,variant:`form`,code:`import { FormInput } from "tembro"
+
+<FormInput control={control} name="query" kind="search" label="Search" placeholder="Search products..." />`},{component:`FormInput`,title:`Universal number wrapper`,description:`Parsed numeric form state can stay behind the same wrapper contract.`,language:`tsx`,variant:`form`,code:`import { FormInput } from "tembro"
+
+    <FormInput control={control} name="quantity" kind="number" label="Quantity" min={0} />`},{component:`FormSearchInput`,title:`Search alias migration`,description:`Keep this only while migrating old forms to the universal FormInput entry.`,language:`tsx`,variant:`migration`,code:`import { FormSearchInput } from "tembro"
+
+<FormSearchInput control={control} name="query" label="Search" />
+
+// New work:
+// <FormInput control={control} name="query" kind="search" label="Search" />`},{component:`FormPasswordInput`,title:`Password alias migration`,description:`Keep this only while migrating old forms to the universal FormInput entry.`,language:`tsx`,variant:`migration`,code:`import { FormPasswordInput } from "tembro"
+
+<FormPasswordInput control={control} name="password" label="Password" />
+
+// New work:
+// <FormInput control={control} name="password" kind="password" label="Password" />`},{component:`FormNumberInput`,title:`Number alias migration`,description:`Keep this only while migrating old forms to the universal FormInput entry.`,language:`tsx`,variant:`migration`,code:`import { FormNumberInput } from "tembro"
+
+<FormNumberInput control={control} name="quantity" label="Quantity" min={0} />
+
+// New work:
+// <FormInput control={control} name="quantity" kind="number" label="Quantity" min={0} />`},{component:`FormPhoneInput`,title:`Phone alias migration`,description:`Keep this only while migrating old forms to the universal FormInput entry.`,language:`tsx`,variant:`migration`,code:`import { FormPhoneInput } from "tembro"
+
+<FormPhoneInput control={control} name="phone" label="Phone" />
+
+// New work:
+// <FormInput control={control} name="phone" kind="phone" label="Phone" />`},{component:`FormDateInput`,title:`Date alias migration`,description:`Keep this only while migrating old forms to the universal FormInput entry.`,language:`tsx`,variant:`migration`,code:`import { FormDateInput } from "tembro"
+
+<FormDateInput control={control} name="startDate" label="Start date" />
+
+// New work:
+// <FormInput control={control} name="startDate" kind="date" label="Start date" />`},{component:`FormDateRangeInput`,title:`Form date range`,description:`Use the plain range wrapper for submitted from/to date objects.`,language:`tsx`,variant:`form`,code:`import { FormDateRangeInput } from "tembro"
+
+<FormDateRangeInput control={control} name="period" label="Period" />`},{component:`TagInput`,title:`Freeform tokens`,description:`Only reach for TagInput when repeated freeform values are truly required.`,language:`tsx`,variant:`advanced`,code:`import { TagInput } from "tembro"
+
+<TagInput value={tags} onValueChange={setTags} placeholder="Add tag" />`},{component:`Select`,title:`Base select`,description:`Start with Select first and move into members only when option loading or interaction model changes.`,language:`tsx`,variant:`basic`,code:`import { Select } from "tembro"
+
+<Select
+  value={status}
+  onValueChange={setStatus}
+  options={[
+    { label: "Active", value: "active" },
+    { label: "Archived", value: "archived" },
+  ]}
+/>`},{component:`Select`,title:`Searchable primary select`,description:`Keep local filtering on the main Select surface before reaching for AsyncSelect or Combobox.`,language:`tsx`,variant:`advanced`,code:`import { Select } from "tembro"
+
+<Select
+  value={owner}
+  onValueChange={setOwner}
+  searchable
+  placeholder="Choose owner"
+  options={ownerOptions}
+/>`},{component:`SimpleSelect`,title:`Static options`,description:`Use the static-options helper when teams want a thinner wrapper around the main Select mental model.`,language:`tsx`,variant:`basic`,code:`import { SimpleSelect } from "tembro"
+
+<SimpleSelect value={role} onValueChange={setRole} options={roleOptions} />`},{component:`AsyncSelect`,title:`Remote search`,description:`Use the remote member when the main Select surface needs server-backed option loading.`,language:`tsx`,variant:`async`,code:`import { AsyncSelect } from "tembro"
+
+<AsyncSelect
+  value={userId}
+  loadOptions={loadUsers}
+  onValueChange={setUserId}
+  placeholder="Search users..."
+/>`},{component:`AsyncMultiSelect`,title:`Remote multi select`,description:`Use the remote multi member when selected tags and async loading should live in one selection flow.`,language:`tsx`,variant:`async`,code:`import { AsyncMultiSelect } from "tembro"
+
+<AsyncMultiSelect
+  value={assigneeIds}
+  loadOptions={loadUsers}
+  onValueChange={setAssigneeIds}
+/>`},{component:`Combobox`,title:`Keyboard-first selection`,description:`Use Combobox only when fast local filtering matters more than the default Select trigger pattern.`,language:`tsx`,variant:`basic`,code:`import { Combobox } from "tembro"
+
+<Combobox value={country} onValueChange={setCountry} options={countryOptions} />`},{component:`FormSelect`,title:`Form select wrapper`,description:`Use the universal RHF wrapper when select state belongs to submitted form data.`,language:`tsx`,variant:`form`,code:`import { FormSelect } from "tembro"
+
+<FormSelect control={control} name="role" label="Role" options={roleOptions} />`},{component:`FormSelect`,title:`Universal async wrapper`,description:`Remote option loading can stay behind the same FormSelect contract instead of teaching a new wrapper name first.`,language:`tsx`,variant:`form`,code:`import { FormSelect } from "tembro"
+
+<FormSelect control={control} name="ownerId" kind="async" label="Owner" loadOptions={loadUsers} />`},{component:`FormAsyncSelect`,title:`Async alias migration`,description:`Keep this only while migrating old forms to the universal FormSelect entry.`,language:`tsx`,variant:`migration`,code:`import { FormAsyncSelect } from "tembro"
+
+<FormAsyncSelect control={control} name="ownerId" label="Owner" loadOptions={loadUsers} />
+
+// New work:
+// <FormSelect control={control} name="ownerId" kind="async" label="Owner" loadOptions={loadUsers} />`},{component:`Card`,title:`Base card`,description:`Use the base card when you need one ready surface with token-driven styling and minimal markup.`,language:`tsx`,variant:`basic`,code:`import { Card } from "tembro"
+
+<Card
+  title="Overview"
+  description="Weekly revenue summary"
+  content="Revenue summary content"
+  footer="Updated just now"
+/>`},{component:`InfoCard`,title:`Metric summary`,description:`InfoCard is the faster default when the content is already card-shaped.`,language:`tsx`,variant:`basic`,code:`import { InfoCard } from "tembro"
+
+<InfoCard title="Revenue" description="Current month" content="$48,000" />`},{component:`StatCard`,title:`Legacy KPI tile`,description:`StatCard still works for migration, but new dashboard surfaces should prefer StatisticCard or InfoCard.`,language:`tsx`,variant:`migration`,code:`import { StatCard } from "tembro"
+
+<StatCard title="Active users" value="1,284" change="+12%" /> // prefer StatisticCard for new work`},{component:`StatisticCard`,title:`Structured metric tile`,description:`Use statistic cards when the metric needs label, value, and support context together.`,language:`tsx`,variant:`basic`,code:`import { StatisticCard } from "tembro"
+
+<StatisticCard title="Conversion" value="4.8%" description="Last 30 days" />`},{component:`EntityCard`,title:`Entity summary`,description:`Entity cards work well for compact user and record previews.`,language:`tsx`,variant:`basic`,code:`import { EntityCard } from "tembro"
+
+<EntityCard title="Azamat Jurayev" description="Admin user" />`},{component:`FileCard`,title:`Attachment preview`,description:`Use file cards for uploads and attached resources.`,language:`tsx`,variant:`basic`,code:`import { FileCard } from "tembro"
+
+<FileCard name="invoice.pdf" size="2.4 MB" />`},{component:`SmartCard`,title:`Migration example`,description:`This exists for legacy migration and should not lead new docs.`,language:`tsx`,variant:`migration`,code:`import { SmartCard } from "tembro"
+
+<SmartCard title="Legacy surface" description="Prefer InfoCard for new work." />`},{component:`Badge`,title:`Status through props`,description:`Use Badge props instead of a separate status component.`,language:`tsx`,variant:`basic`,code:`import { Badge } from "tembro"
+
+<Badge
+  status="success"
+  label="Active"
+  count={3}
+/>`},{component:`Dialog`,title:`Blocking task dialog`,description:`Use Dialog when focus should stay inside the modal task.`,language:`tsx`,variant:`basic`,code:`import { Dialog, DialogContent, DialogTitle, DialogTrigger, Button } from "tembro"
+
+<Dialog>
+  <DialogTrigger render={<Button>Edit</Button>} />
+  <DialogContent>
+    <DialogTitle>Edit customer</DialogTitle>
+  </DialogContent>
+</Dialog>`},{component:`Popover`,title:`Anchored content`,description:`Use Popover for rich contextual content attached to a trigger.`,language:`tsx`,variant:`basic`,code:`import { Popover, PopoverContent, PopoverTrigger, Button } from "tembro"
+
+<Popover>
+  <PopoverTrigger render={<Button variant="outline">Filters</Button>} />
+  <PopoverContent>Filter controls</PopoverContent>
+</Popover>`},{component:`DropdownMenu`,title:`Action menu`,description:`Use DropdownMenu for command lists and compact actions.`,language:`tsx`,variant:`basic`,code:`import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Button } from "tembro"
+
+<DropdownMenu>
+  <DropdownMenuTrigger render={<Button variant="outline">Actions</Button>} />
+  <DropdownMenuContent>
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`},{component:`Tooltip`,title:`Short helper text`,description:`Use Tooltip only for brief supporting copy.`,language:`tsx`,variant:`basic`,code:`import { Tooltip, Button } from "tembro"
+
+<Tooltip content="Export selected rows">
+  <Button>Export</Button>
+</Tooltip>`},{component:`HoverCard`,title:`Rich hover preview`,description:`Use HoverCard when hover or focus should reveal richer preview content than a tooltip.`,language:`tsx`,variant:`basic`,code:`import { HoverCard, Button } from "tembro"
+
+<HoverCard
+  content={
+    <div className="space-y-1">
+      <p className="font-medium">Azamat UI</p>
+      <p className="text-sm text-muted-foreground">Dashboard-focused React component library.</p>
+    </div>
+  }
+>
+  <Button variant="outline">Preview package</Button>
+</HoverCard>`},{component:`RightClickMenu`,title:`Context menu`,description:`Use right-click menus as secondary shortcuts.`,language:`tsx`,variant:`basic`,code:`import { RightClickMenu } from "tembro"
+
+<RightClickMenu items={[{ key: "copy", label: "Copy" }]}>
+  <div>Right click this row</div>
+</RightClickMenu>`},{component:`AlertDialog`,title:`Destructive confirmation`,description:`Use AlertDialog for high-risk confirmation flows.`,language:`tsx`,variant:`basic`,code:`import { AlertDialog, Button } from "tembro"
+
+<AlertDialog title="Delete project?" actionLabel="Delete">
+  <Button variant="destructive">Delete</Button>
+</AlertDialog>`},{component:`ConfirmDialog`,title:`Confirm action`,description:`Use ConfirmDialog for reusable approval and submit confirmations.`,language:`tsx`,variant:`basic`,code:`import { ConfirmDialog, Button } from "tembro"
+
+<ConfirmDialog title="Publish changes?" confirmLabel="Publish">
+  <Button>Publish</Button>
+</ConfirmDialog>`},{component:`ModalShell`,title:`Structured modal`,description:`Use ModalShell when repeated modals need title, body and footer slots.`,language:`tsx`,variant:`basic`,code:`import { ModalShell, Button } from "tembro"
+
+<ModalShell title="Invite member" trigger={<Button>Invite</Button>}>
+  Invite form
+</ModalShell>`},{component:`SheetShell`,title:`Side sheet`,description:`Use SheetShell for edge-attached contextual workflows.`,language:`tsx`,variant:`basic`,code:`import { SheetShell, Button } from "tembro"
+
+<SheetShell side="right" title="Filters" trigger={<Button>Open filters</Button>}>
+  Filter controls
+</SheetShell>`},{component:`Drawer`,title:`Detail drawer`,description:`Use Drawer for record details without leaving the page.`,language:`tsx`,variant:`basic`,code:`import { Drawer, Button } from "tembro"
+
+<Drawer title="Customer" trigger={<Button>Open customer</Button>}>
+  Customer details
+</Drawer>`},{component:`DialogActions`,title:`Footer actions`,description:`Use DialogActions to keep modal footers aligned.`,language:`tsx`,variant:`basic`,code:`import { DialogActions, Button } from "tembro"
+
+<DialogActions>
+  <Button variant="outline">Cancel</Button>
+  <Button>Save</Button>
+</DialogActions>`},{component:`FormFieldShell`,title:`Custom field shell`,description:`Use the shell when you are composing a custom control by hand.`,language:`tsx`,variant:`basic`,code:`import { FormFieldShell, Input } from "tembro"
+
+<FormFieldShell label="Workspace name" description="Shown across the admin panel.">
+  <Input placeholder="Acme HQ" />
+</FormFieldShell>`},{component:`FormTextarea`,title:`Textarea wrapper`,description:`Textarea wrapper keeps validation and copy aligned with other fields.`,language:`tsx`,variant:`form`,code:`import { FormTextarea } from "tembro"
+
+<FormTextarea control={control} name="notes" label="Notes" rows={4} />`},{component:`FormSwitch`,title:`Boolean field`,description:`Switch wrappers keep label and description wiring aligned with other form fields.`,language:`tsx`,variant:`form`,code:`import { FormSwitch } from "tembro"
+
+<FormSwitch control={control} name="isActive" label="Active" />`},{component:`FormDatePicker`,title:`Calendar date field`,description:`Use the calendar wrapper when native date input is too limited.`,language:`tsx`,variant:`form`,code:`import { FormDatePicker } from "tembro"
+
+<FormDatePicker control={control} name="birthday" label="Birthday" />`},{component:`FormDateRangePicker`,title:`Calendar range field`,description:`Use the range picker wrapper for visual date interval selection.`,language:`tsx`,variant:`form`,code:`import { FormDateRangePicker } from "tembro"
+
+<FormDateRangePicker control={control} name="reportingRange" label="Reporting range" />`},{component:`FormBuilder`,title:`Higher-level form builder`,description:`FormBuilder is for repeated internal patterns, not simple one-off forms.`,language:`tsx`,variant:`advanced`,code:`import { FormBuilder } from "tembro"
+
+<FormBuilder
+  control={control}
+  fields={[{ name: "email", type: "input", label: "Email" }]}
+/>`},{component:`DataTable`,title:`Canonical table`,description:`DataTable owns the main grid surface and table orchestration.`,language:`tsx`,variant:`basic`,code:`import { DataTable } from "tembro"
+
+<DataTable columns={columns} data={rows} />`},{component:`DataTableToolbar`,title:`Toolbar composition`,description:`Use the toolbar helper for consistent filters and actions around the grid.`,language:`tsx`,variant:`basic`,code:`import { DataTableToolbar, SearchInput } from "tembro"
+
+<DataTableToolbar title="Orders" search={<SearchInput placeholder="Search orders..." />} />`},{component:`DataTablePagination`,title:`Pagination controls`,description:`Use the shared pagination helper to keep table paging UI consistent.`,language:`tsx`,variant:`basic`,code:`import { DataTablePagination } from "tembro"
+
+<DataTablePagination pageIndex={pageIndex} pageCount={pageCount} onPageChange={setPageIndex} />`},{component:`DataTableColumnVisibilityMenu`,title:`Hide and show columns`,description:`Column visibility helpers keep personalization aligned with the table system.`,language:`tsx`,variant:`advanced`,code:`import { DataTableColumnVisibilityMenu } from "tembro"
+
+<DataTableColumnVisibilityMenu table={table} />`},{component:`DataTableSortableHeader`,title:`Sortable header`,description:`Use the shared header helper instead of custom sort indicator plumbing.`,language:`tsx`,variant:`basic`,code:`import { DataTableSortableHeader } from "tembro"
+
+header: ({ column }) => <DataTableSortableHeader column={column}>Name</DataTableSortableHeader>`},{component:`DataTableRowActions`,title:`Row actions menu`,description:`Use shared row actions when each record needs contextual operations.`,language:`tsx`,variant:`basic`,code:`import { DataTableRowActions } from "tembro"
+
+<DataTableRowActions actions={[{ key: "edit", label: "Edit", onSelect: openEdit }]} />`},{component:`DataTableBulkActions`,title:`Bulk actions bar`,description:`Bulk actions should appear only when a selection exists.`,language:`tsx`,variant:`advanced`,code:`import { DataTableBulkActions } from "tembro"
+
+<DataTableBulkActions rows={selectedRows} actions={[{ key: "delete", label: "Delete selected", onSelect: removeMany }]} />`},{component:`DataTableViewPresets`,title:`Preset views`,description:`Use view presets when users switch between saved table perspectives.`,language:`tsx`,variant:`advanced`,code:`import { DataTableViewPresets } from "tembro"
+
+<DataTableViewPresets presets={presets} value={activePreset} onValueChange={setActivePreset} />`},{component:`createDataTableSelectColumn`,title:`Selection column factory`,description:`Use the factory to keep row-selection behavior standardized.`,language:`tsx`,variant:`advanced`,code:`import { createDataTableSelectColumn } from "tembro"
+
+const selectColumn = createDataTableSelectColumn()`},{component:`createDataTableActionsColumn`,title:`Shared actions column`,description:`Column factories reduce repeated row action boilerplate.`,language:`tsx`,variant:`advanced`,code:`import { createDataTableActionsColumn } from "tembro"
+
+const actionsColumn = createDataTableActionsColumn({
+  getActions: (_row, order) => [{ key: "open", label: "Open", onSelect: () => openOrder(order) }],
+})`},{component:`TableExportMenu`,title:`Advanced export flow`,description:`Keep export helpers secondary to the core table experience.`,language:`tsx`,variant:`advanced`,code:`import { TableExportMenu } from "tembro"
+
+<TableExportMenu options={[{ key: "csv", label: "Export CSV", onSelect: exportCsv }]} />`},{component:`TableImportButton`,title:`Import trigger`,description:`Keep import controls secondary to the main grid experience.`,language:`tsx`,variant:`advanced`,code:`import { TableImportButton } from "tembro"
+
+<TableImportButton onFilesSelect={handleImport} />`},{component:`Input`,title:`CLI add`,description:`Copy the input source into your app.`,language:`cli`,variant:`cli`,code:`npx tembro add input`},{component:`InlineEditable`,title:`Inline edit field`,description:`Click-to-edit inline text. Commits on Enter or blur, cancels on Escape.`,language:`tsx`,variant:`basic`,code:`import { InlineEditable } from "tembro"
+
+<InlineEditable value={name} onValueChange={setName} placeholder="Click to edit" />`},{component:`TrendCard`,title:`Metric with sparkline`,description:`Dashboard metric card showing trend direction and optional sparkline.`,language:`tsx`,variant:`basic`,code:`import { TrendCard } from "tembro"
+
+<TrendCard title="Revenue" value="$45,231" change="+12.5%" trend="up" sparkline={[10, 20, 15, 25, 30]} />`},{component:`ComparisonCard`,title:`Side-by-side metrics`,description:`Compare multiple related metrics in one card.`,language:`tsx`,variant:`basic`,code:`import { ComparisonCard } from "tembro"
+
+<ComparisonCard
+  title="Q1 vs Q2"
+  items={[
+    { label: "Revenue", value: "$45k", change: "+12%", trend: "up" },
+    { label: "Expenses", value: "$32k", change: "-3%", trend: "down" },
+  ]}
+/>`},{component:`DeltaBadge`,title:`Inline trend badge`,description:`Show positive or negative change inline.`,language:`tsx`,variant:`basic`,code:`import { DeltaBadge } from "tembro"
+
+<DeltaBadge value="+12.5%" trend="up" />
+<DeltaBadge value="-3.2%" trend="down" />`},{component:`RepeaterField`,title:`Dynamic form array`,description:`Add and remove repeated field groups in a form.`,language:`tsx`,variant:`basic`,code:`import { RepeaterField } from "tembro"
+
+<RepeaterField
+  value={items}
+  onValueChange={setItems}
+  createItem={() => ({ name: "" })}
+  renderItem={(item, i, { remove, update }) => (
+    <div className="flex gap-2">
+      <input value={item.name} onChange={e => update({ name: e.target.value })} />
+      <button onClick={remove}>Remove</button>
+    </div>
+  )}
+/>`},{component:`Button`,title:`Primary action`,description:`Use Button as the first action surface before reaching for grouped or menu patterns.`,language:`tsx`,variant:`basic`,code:`import { Button } from "tembro"
+
+<Button>Save changes</Button>`},{component:`ActionMenu`,title:`Compact actions`,description:`Group several actions behind one trigger when the surface should stay compact.`,language:`tsx`,variant:`basic`,code:`import { ActionMenu } from "tembro"
+
+<ActionMenu
+  actions={[
+    { key: "edit", label: "Edit", onSelect: () => console.log("edit") },
+    { key: "archive", label: "Archive", onSelect: () => console.log("archive") },
+  ]}
+/>`},{component:`CopyButton`,title:`Copy action`,description:`Use CopyButton for IDs, links, and tokens that need one-tap copy feedback.`,language:`tsx`,variant:`basic`,code:`import { CopyButton } from "tembro"
+
+<CopyButton value="inv_2481" copyLabel="Copy invoice id" />`},{component:`ButtonGroup`,title:`Grouped actions`,description:`Keep related actions visually aligned without inventing a new primary trigger.`,language:`tsx`,variant:`basic`,code:`import { Button, ButtonGroup } from "tembro"
+
+<ButtonGroup>
+  <Button variant="outline">Cancel</Button>
+  <Button>Save</Button>
+</ButtonGroup>`},{component:`CopyField`,title:`Copy row`,description:`Show a visible value and copy affordance in one compact pattern.`,language:`tsx`,variant:`basic`,code:`import { CopyField } from "tembro"
+
+<CopyField label="API key" value="sk_live_xxx" />`},{component:`QuickActionGrid`,title:`Shortcut board`,description:`Use a quick grid when several small actions should stay visible together.`,language:`tsx`,variant:`basic`,code:`import { QuickActionGrid } from "tembro"
+
+<QuickActionGrid
+  actions={[
+    { key: "invite", label: "Invite" },
+    { key: "export", label: "Export" },
+    { key: "archive", label: "Archive" },
+  ]}
+/>`},{component:`Alert`,title:`Inline status`,description:`Use Alert for information, success, warning, or error states inside the page flow.`,language:`tsx`,variant:`basic`,code:`import { Alert } from "tembro"
+
+<Alert tone="warning" title="Unsaved changes" description="Save before leaving this page." />`},{component:`EmptyState`,title:`No data state`,description:`Use EmptyState when a view needs a stronger zero-data message than a plain paragraph.`,language:`tsx`,variant:`basic`,code:`import { EmptyState } from "tembro"
+
+<EmptyState title="No customers yet" description="Add your first customer to start tracking revenue." />`},{component:`LoadingState`,title:`Structured loading`,description:`Prefer LoadingState when loading should include context, not only motion.`,language:`tsx`,variant:`basic`,code:`import { LoadingState } from "tembro"
+
+<LoadingState label="Loading revenue report..." description="Gathering the latest month-to-date numbers." />`},{component:`Progress`,title:`Completion bar`,description:`Use Progress for visible task, upload, or rollout completion.`,language:`tsx`,variant:`basic`,code:`import { Progress } from "tembro"
+
+<Progress value={72} label="Upload progress" />`},{component:`ProgressCircle`,title:`Circular status`,description:`Use ProgressCircle when completion is useful but width is limited.`,language:`tsx`,variant:`basic`,code:`import { ProgressCircle } from "tembro"
+
+<ProgressCircle value={78} size="sm" />`},{component:`ToastProvider`,title:`Notification host`,description:`Mount the provider once near the app root so features can dispatch toast feedback.`,language:`tsx`,variant:`basic`,code:`import { ToastProvider } from "tembro"
+
+<ToastProvider position="top-right">
+  <App />
+</ToastProvider>`},{component:`InlineState`,title:`Compact feedback row`,description:`Use InlineState when a card or side panel needs a smaller status treatment.`,language:`tsx`,variant:`basic`,code:`import { InlineState } from "tembro"
+
+<InlineState tone="info" title="Syncing changes" description="This may take a few seconds." />`},{component:`LoadingOverlay`,title:`Blocking local loading`,description:`Keep the surface visible while preventing interaction during a local loading phase.`,language:`tsx`,variant:`basic`,code:`import { LoadingOverlay } from "tembro"
+
+<LoadingOverlay loading label="Saving changes...">
+  <section>Form content</section>
+</LoadingOverlay>`},{component:`Spinner`,title:`Minimal loading`,description:`Use Spinner only when a tiny loading affordance is enough.`,language:`tsx`,variant:`basic`,code:`import { Spinner } from "tembro"
+
+<Spinner label="Loading invoices" />`},{component:`Skeleton`,title:`Loading placeholder`,description:`Keep structure visible while data is loading.`,language:`tsx`,variant:`basic`,code:`import { Skeleton } from "tembro"
+
+<Skeleton className="h-10 w-full" />`},{component:`useToast`,title:`Dispatch a toast`,description:`Use the hook after ToastProvider is mounted to trigger transient feedback.`,language:`tsx`,variant:`advanced`,code:`import { Button, useToast } from "tembro"
+
+function SaveButton() {
+  const { push } = useToast()
+
+  return <Button onClick={() => push({ title: "Saved", description: "Your changes are live." })}>Save</Button>
+}`},{component:`BarChart`,title:`Category comparison`,description:`Use a bar chart when categories should be scanned and compared quickly.`,language:`tsx`,variant:`basic`,code:`import { BarChart } from "tembro"
+
+<BarChart data={[{ label: "Jan", value: 12 }, { label: "Feb", value: 18 }, { label: "Mar", value: 15 }]} />`},{component:`LineChart`,title:`Trend line`,description:`Use a line chart for ordered values or time-series movement.`,language:`tsx`,variant:`basic`,code:`import { LineChart } from "tembro"
+
+<LineChart values={[12, 16, 18, 15, 22, 24]} showArea />`},{component:`DonutChart`,title:`Part to whole`,description:`Use a donut chart when a compact proportional split needs one central summary.`,language:`tsx`,variant:`basic`,code:`import { DonutChart } from "tembro"
+
+<DonutChart
+  data={[
+    { label: "Paid", value: 72, color: "var(--chart-1)" },
+    { label: "Pending", value: 18, color: "var(--chart-2)" },
+    { label: "Refunded", value: 10, color: "var(--chart-3)" },
+  ]}
+  centerLabel="Orders"
+  centerValue="248"
+/>`},{component:`MetricGrid`,title:`KPI grid`,description:`Use MetricGrid to keep related KPIs aligned in one responsive surface.`,language:`tsx`,variant:`basic`,code:`import { MetricGrid } from "tembro"
+
+<MetricGrid columns={3}>
+  <div>Revenue</div>
+  <div>MRR</div>
+  <div>Churn</div>
+</MetricGrid>`},{component:`ChartFrame`,title:`Chart shell`,description:`Frame chart content with consistent heading and action chrome.`,language:`tsx`,variant:`basic`,code:`import { BarChart, ChartFrame } from "tembro"
+
+<ChartFrame title="Revenue by month" description="Last 6 months">
+  <BarChart data={[{ label: "Jan", value: 12 }, { label: "Feb", value: 18 }]} />
+</ChartFrame>`},{component:`ChartLegend`,title:`Series legend`,description:`Explicitly map series names to colors when the chart needs a legend.`,language:`tsx`,variant:`basic`,code:`import { ChartLegend } from "tembro"
+
+<ChartLegend
+  data={[
+    { label: "Paid", color: "var(--chart-1)" },
+    { label: "Pending", color: "var(--chart-2)" },
+  ]}
+/>`},{component:`Sparkline`,title:`Micro trend`,description:`Use Sparkline when a small historical hint should sit beside a KPI.`,language:`tsx`,variant:`basic`,code:`import { Sparkline } from "tembro"
+
+<Sparkline values={[5, 8, 7, 12, 11, 15]} />`},{component:`MetricTrend`,title:`Metric with movement`,description:`Bundle current value, delta, and mini-trend in one metric block.`,language:`tsx`,variant:`basic`,code:`import { MetricTrend } from "tembro"
+
+<MetricTrend label="MRR" value="$24,880" change="+8.1%" values={[14, 16, 17, 19, 21, 24]} />`},{component:`Statistic`,title:`Single statistic`,description:`Use Statistic for one structured KPI readout with support text.`,language:`tsx`,variant:`basic`,code:`import { Statistic } from "tembro"
+
+<Statistic label="Active accounts" value="1,248" description="Compared to last week" />`},{component:`StatisticGrid`,title:`Statistics grid`,description:`Align several structured statistics in one grouped layout.`,language:`tsx`,variant:`basic`,code:`import { StatisticGrid } from "tembro"
+
+<StatisticGrid items={[{ label: "MRR", value: "$18k" }, { label: "Churn", value: "2.1%" }]} />`},{component:`Sidebar`,title:`Primary app navigation`,description:`Use Sidebar for persistent workspace navigation and nested sections.`,language:`tsx`,variant:`basic`,code:`import { Sidebar } from "tembro"
+
+<Sidebar
+  items={[
+    { label: "Dashboard", href: "/dashboard", active: true },
+    { label: "Customers", href: "/customers" },
+  ]}
+/>`},{component:`PageContainer`,title:`Page width rhythm`,description:`Use PageContainer to keep horizontal page spacing consistent.`,language:`tsx`,variant:`basic`,code:`import { PageContainer } from "tembro"
+
+<PageContainer size="lg">
+  <section>Page content</section>
+</PageContainer>`},{component:`Tabs`,title:`Section switcher`,description:`Use Tabs for a small set of peer views without leaving the page.`,language:`tsx`,variant:`basic`,code:`import { Tabs, TabsContent, TabsList, TabsTrigger } from "tembro"
+
+<Tabs defaultValue="overview">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="activity">Activity</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+</Tabs>`},{component:`Pagination`,title:`Paged results`,description:`Move through indexed result sets with one reusable pagination surface.`,language:`tsx`,variant:`basic`,code:`import { Pagination } from "tembro"
+
+<Pagination page={2} totalPages={12} onPageChange={setPage} />`},{component:`Breadcrumbs`,title:`Location trail`,description:`Show the current nested path back through the app structure.`,language:`tsx`,variant:`basic`,code:`import { Breadcrumbs } from "tembro"
+
+<Breadcrumbs items={[{ label: "Workspace", href: "/" }, { label: "Customers", href: "/customers" }, { label: "Acme Corp" }]} />`},{component:`Wizard`,title:`Multi-step flow`,description:`Use Wizard when the product needs a guided, step-by-step completion flow.`,language:`tsx`,variant:`basic`,code:`import { Wizard } from "tembro"
+
+<Wizard steps={[{ id: "account", label: "Account" }, { id: "billing", label: "Billing" }]} currentStep={0} />`},{component:`Section`,title:`Page subsection`,description:`Group related page content without promoting it to a primary route.`,language:`tsx`,variant:`basic`,code:`import { Section } from "tembro"
+
+<Section title="Billing" description="Manage invoice and payment settings.">
+  Billing content
+</Section>`},{component:`AnchorNav`,title:`In-page sections`,description:`Jump between sections inside a long detail page.`,language:`tsx`,variant:`basic`,code:`import { AnchorNav } from "tembro"
+
+<AnchorNav items={[{ id: "overview", label: "Overview" }, { id: "activity", label: "Activity" }]} />`},{component:`Stepper`,title:`Step progress`,description:`Use Stepper when the UI needs visible progress without the full Wizard shell.`,language:`tsx`,variant:`basic`,code:`import { Stepper } from "tembro"
+
+<Stepper steps={[{ id: "account", label: "Account" }, { id: "billing", label: "Billing" }]} currentStep={1} />`},{component:`StepperTabs`,title:`Step tabs`,description:`Use StepperTabs when sections read like steps but still switch like tabs.`,language:`tsx`,variant:`basic`,code:`import { StepperTabs } from "tembro"
+
+<StepperTabs items={[{ value: "profile", label: "Profile" }, { value: "security", label: "Security" }]} value="profile" />`},{component:`SegmentedControl`,title:`Compact switcher`,description:`Use SegmentedControl for very small mutually exclusive sets.`,language:`tsx`,variant:`basic`,code:`import { SegmentedControl } from "tembro"
+
+<SegmentedControl options={[{ label: "Day", value: "day" }, { label: "Week", value: "week" }]} value="week" />`},{component:`FileUpload`,title:`Generic file flow`,description:`Use FileUpload when users should add, review, and remove uploaded files in one place.`,language:`tsx`,variant:`basic`,code:`import { FileUpload } from "tembro"
+
+<FileUpload multiple maxFiles={5} />`},{component:`ImageUpload`,title:`Image-specific upload`,description:`Use ImageUpload when previews and image-oriented UX matter.`,language:`tsx`,variant:`basic`,code:`import { ImageUpload } from "tembro"
+
+<ImageUpload maxFiles={1} />`},{component:`Checkbox`,title:`Binary selection`,description:`Use Checkbox for explicit checked and indeterminate selection states.`,language:`tsx`,variant:`basic`,code:`import { Checkbox } from "tembro"
+
+<Checkbox checked={selected} onCheckedChange={setSelected} />`},{component:`RadioGroup`,title:`Single choice set`,description:`Use RadioGroup when exactly one visible option should be selected.`,language:`tsx`,variant:`basic`,code:`import { RadioGroup } from "tembro"
+
+<RadioGroup value="monthly" onValueChange={setBillingCycle} options={[{ label: "Monthly", value: "monthly" }, { label: "Yearly", value: "yearly" }]} />`},{component:`Switch`,title:`Immediate toggle`,description:`Use Switch when turning a setting on or off should feel direct and lightweight.`,language:`tsx`,variant:`basic`,code:`import { Switch } from "tembro"
+
+<Switch checked={enabled} onCheckedChange={setEnabled} />`},{component:`Table`,title:`Base table`,description:`Use Table when rows are simple enough that a full DataTable would be too heavy.`,language:`tsx`,variant:`basic`,code:`import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "tembro"
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Acme</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`},{component:`Accordion`,title:`Expandable sections`,description:`Use Accordion when stacked content should reveal details inline.`,language:`tsx`,variant:`basic`,code:`import { Accordion } from "tembro"
+
+<Accordion items={[{ value: "shipping", title: "Shipping", content: "2-3 business days" }]} />`},{component:`Collapse`,title:`Low-level disclosure`,description:`Use Collapse when you need raw expand and collapse behavior without Accordion’s higher-level API.`,language:`tsx`,variant:`basic`,code:`import { Collapse, CollapseContent, CollapseTrigger } from "tembro"
+
+<Collapse>
+  <CollapseTrigger>Toggle details</CollapseTrigger>
+  <CollapseContent>Hidden content</CollapseContent>
+</Collapse>`},{component:`Calendar`,title:`Raw calendar`,description:`Use Calendar when a custom date surface needs the primitive calendar control.`,language:`tsx`,variant:`basic`,code:`import { Calendar } from "tembro"
+
+<Calendar mode="single" selected={date} onSelect={setDate} />`},{component:`Divider`,title:`Section separator`,description:`Use Divider when content groups need a subtle visual boundary.`,language:`tsx`,variant:`basic`,code:`import { Divider } from "tembro"
+
+<Divider />`},{component:`Kbd`,title:`Shortcut token`,description:`Show keyboard shortcuts with one consistent keycap style.`,language:`tsx`,variant:`basic`,code:`import { Kbd } from "tembro"
+
+<Kbd>Ctrl</Kbd>`},{component:`ScrollBox`,title:`Local scroll area`,description:`Use ScrollBox when a panel should scroll internally instead of growing the whole page.`,language:`tsx`,variant:`basic`,code:`import { ScrollBox } from "tembro"
+
+<ScrollBox maxHeight={280}>
+  <div>Scrollable content</div>
+</ScrollBox>`}];exports.componentSnippetExamples=e;

package/dist/families/member-snippets.d.ts

@@ -0,0 +1,11 @@
+export type ComponentSnippetTab = "tsx" | "cli";
+export type ComponentSnippetVariant = "basic" | "form" | "async" | "advanced" | "migration" | "cli";
+export type ComponentSnippetExample = {
+    component: string;
+    title: string;
+    description: string;
+    language: ComponentSnippetTab;
+    variant: ComponentSnippetVariant;
+    code: string;
+};
+export declare const componentSnippetExamples: ComponentSnippetExample[];