@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/code-connect/sidebar.figma.ts

@@ -0,0 +1,44 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4559-1289
+// source=registry/src/ui/sidebar/sidebar.tsx
+// component=Sidebar
+// Code Connect template (v2, parserless). Spec: components/sidebar/spec.md.
+// Variant and Collapsed map to the Sidebar's variant and collapsible="icon" (collapsed is the provider's state). The
+// Header / Content / Footer slots hold the author's menus, so the snippet shows the shape.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum("Variant", { sidebar: "sidebar", floating: "floating", inset: "inset" });
+const collapsed = instance.getEnum("Collapsed", { false: false, true: true });
+
+export default {
+  example: figma.code`<SidebarProvider${collapsed ? " defaultOpen={false}" : ""}>
+  <Sidebar${variant !== "sidebar" ? ` variant="${variant}"` : ""}${collapsed ? ' collapsible="icon"' : ""}>
+    <SidebarHeader>…</SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Platform</SidebarGroupLabel>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive render={<a href="/dashboard" />} tooltip="Dashboard">
+              <Icon name="home" />
+              <span>Dashboard</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarFooter>…</SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    …
+  </SidebarInset>
+</SidebarProvider>`,
+  imports: [
+    'import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger } from "@/components/ui/sidebar"',
+    'import { Icon } from "@/components/ui/icon"',
+  ],
+  id: "sidebar",
+  metadata: { nestable: true },
+};

package/templates/code-connect/spinner.figma.ts

@@ -0,0 +1,13 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=478-10
+// source=registry/src/ui/spinner/spinner.tsx
+// component=Spinner
+// Code Connect template (v2, parserless). Spec: components/spinner/spec.md.
+import figma from "figma";
+
+// Spinner has no properties: the glyph follows the active icon set and the colour follows the text.
+export default {
+  example: figma.code`<Spinner />`,
+  imports: ['import { Spinner } from "@/components/ui/spinner"'],
+  id: "spinner",
+  metadata: { nestable: true },
+};

package/templates/code-connect/switch.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=472-100
+// source=registry/src/ui/switch/switch.tsx
+// component=Switch
+// Code Connect template (v2, parserless). Spec: components/switch/spec.md.
+// Figma property VALUES are lower-kebab and identical to the code enums, so every getEnum map is an identity map.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const checked = instance.getEnum("Checked", { false: "false", true: "true" });
+
+// md is the default in code, so it is left out of the snippet; sm is rendered.
+const size = instance.getEnum("Size", { md: "md", sm: "sm" });
+
+// State carries only what code consumes. focus-visible is a CSS pseudo-state and was dropped as an axis in
+// the Core batch (2026-09-28).
+const state = instance.getEnum("State", { default: "default", invalid: "invalid", disabled: "disabled" });
+
+const attrs = [
+  size === "sm" ? ' size="sm"' : "",
+  checked === "true" ? " defaultChecked" : "",
+  state === "invalid" ? " aria-invalid" : "",
+  state === "disabled" ? " disabled" : "",
+].join("");
+
+// A switch is never placed without a label, so swap Switch into a Field in Figma and Field's own template
+// renders the wrapper. The label must say what turning it on does, not "toggle".
+export default {
+  example: figma.code`<Switch id="switch"${attrs} />`,
+  imports: ['import { Switch } from "@/components/ui/switch"'],
+  id: "switch",
+  metadata: { nestable: true },
+};

package/templates/code-connect/table-cell.figma.ts

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4361-14
+// source=registry/src/ui/table/table.tsx
+// component=TableCell
+// Code Connect template (v2, parserless). Spec: components/table/spec.md. Type=head is a TableHead (a <th>); body and
+// footer cells are TableCells (the footer's weight comes from TableFooter). Align=right is text-end.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum("Type", { head: "head", body: "body", footer: "footer" });
+const right = instance.getEnum("Align", { left: false, right: true }) === true;
+const text = instance.getString("Text");
+const cls = right ? ' className="text-end"' : "";
+
+export default {
+  example: type === "head"
+    ? figma.code`<TableHead scope="col"${cls}>${text}</TableHead>`
+    : figma.code`<TableCell${cls}>${text}</TableCell>`,
+  imports: ['import { TableCell, TableHead } from "@/components/ui/table"'],
+  id: "table-cell",
+  metadata: { nestable: true },
+};

package/templates/code-connect/table.figma.ts

@@ -0,0 +1,62 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4361-15
+// source=registry/src/ui/table/table.tsx
+// component=Table
+// Code Connect template (v2, parserless). Spec: components/table/spec.md. The Rows slot holds Table Row instances
+// (2026-10-02), each with a Cells slot of Table Cells: the row whose cells are Type=head is the header, Type=footer rows
+// the footer, the rest the body. A selected row (State=selected) carries data-state="selected"; hover is CSS. Each
+// cell renders its own template. The caption is the Table's own Show Caption / Caption.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// a row's cells: its direct instances, or those inside its Cells slot
+const cellsOf = (r: any) =>
+  (r.children ?? []).flatMap((c: any) => (c.type === "INSTANCE" ? [c] : (c.children ?? []).filter((x: any) => x.type === "INSTANCE")));
+const rows = (instance.children ?? [])
+  .flatMap((c: any) => (c.type === "INSTANCE" ? [] : c.children ?? []))
+  .filter((r: any) => cellsOf(r).length);
+const render = (r: any) =>
+  cellsOf(r)
+    .map((c: any) => {
+      try {
+        return c.executeTemplate().example;
+      } catch {
+        return undefined;
+      }
+    })
+    .filter(Boolean);
+const typeOf = (r: any) => {
+  try {
+    return cellsOf(r)[0]?.getEnum?.("Type", { head: "head", body: "body", footer: "footer" });
+  } catch {
+    return undefined;
+  }
+};
+const selected = (r: any) => {
+  try {
+    return r.getEnum?.("State", { default: false, hover: false, selected: true }) === true;
+  } catch {
+    return false;
+  }
+};
+const head = rows.find((r: any) => typeOf(r) === "head");
+const foot = rows.filter((r: any) => typeOf(r) === "footer");
+const body = rows.filter((r: any) => r !== head && !foot.includes(r));
+const caption = instance.getBoolean("Show Caption") ? instance.getString("Caption") : "";
+
+export default {
+  example: figma.code`
+    <Table>
+      ${caption ? figma.code`<TableCaption>${caption}</TableCaption>` : ""}
+      <TableHeader>
+        <TableRow>${head ? render(head) : ""}</TableRow>
+      </TableHeader>
+      <TableBody>
+        ${body.map((r: any) => (selected(r) ? figma.code`<TableRow data-state="selected">${render(r)}</TableRow>` : figma.code`<TableRow>${render(r)}</TableRow>`))}
+      </TableBody>
+      ${foot.length ? figma.code`<TableFooter>${foot.map((r: any) => figma.code`<TableRow>${render(r)}</TableRow>`)}</TableFooter>` : ""}
+    </Table>
+  `,
+  imports: ['import { Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow } from "@/components/ui/table"'],
+  id: "table",
+  metadata: { nestable: true },
+};

package/templates/code-connect/tabs-trigger.figma.ts

@@ -0,0 +1,369 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4536-547
+// source=registry/src/ui/tabs/tabs.tsx
+// component=TabsTrigger
+// Code Connect template (v2, parserless). Spec: components/tabs/spec.md.
+// Variant (the site's look, ADR-0031) and Orientation (the root's) are not the trigger's props, so they are not read.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+const BASELINE_ICON_PREFIXES: Record<string, string> = {
+  "lucide": "lucide",
+  "material-symbols": "material-symbols",
+  "phosphor": "ph",
+  "remix": "ri",
+  "tabler": "tabler"
+};
+const BASELINE_ICON_SUFFIXES: Record<string, string> = {
+  "lucide": "",
+  "material-symbols": "-rounded",
+  "phosphor": "",
+  "remix": "-fill",
+  "tabler": "-filled"
+};
+// BASELINE_ICONS_END
+
+// "<Set>/<icon>" glyph -> <Icon name="…"/> for a system icon, <Icon className="icon-[set--name]"/> for a content icon
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconCode(layerName: string, extra = "") {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return undefined;
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return undefined;
+  const slash = glyph.name.indexOf("/");
+  const set = slash < 0 ? "" : kebab(glyph.name.slice(0, slash));
+  const name = kebab(slash < 0 ? glyph.name : glyph.name.slice(slash + 1));
+  const system = BASELINE_SYSTEM_ICONS[set + "/" + name];
+  if (system) return figma.code`<Icon name="${system}"${extra} />`;
+  const prefix = BASELINE_ICON_PREFIXES[set] ?? set;
+  return figma.code`<Icon className="icon-[${prefix}--${name}${BASELINE_ICON_SUFFIXES[set] ?? ""}]"${extra} />`;
+}
+
+const label = instance.getString("Label");
+// inactive, hover and active are runtime states (the root's value chooses the active tab); disabled is a prop
+const disabled = instance.getEnum("State", { inactive: false, hover: false, active: false, disabled: true });
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end" });
+const icon =
+  iconSide === "start" ? iconCode("Icon", ' data-icon="inline-start"') : iconSide === "end" ? iconCode("Icon", ' data-icon="inline-end"') : undefined;
+
+export default {
+  example: figma.code`
+    <TabsTrigger value="${kebab(label)}"${disabled ? " disabled" : ""}>
+      ${iconSide === "start" ? figma.code`${icon}` : ""}
+      ${label}
+      ${iconSide === "end" ? figma.code`${icon}` : ""}
+    </TabsTrigger>
+  `,
+  imports: icon
+    ? ['import { TabsTrigger } from "@/components/ui/tabs"', 'import { Icon } from "@/components/ui/icon"']
+    : ['import { TabsTrigger } from "@/components/ui/tabs"'],
+  id: "tabs-trigger",
+  metadata: { nestable: true },
+};

package/templates/code-connect/tabs.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4538-15627
+// source=registry/src/ui/tabs/tabs.tsx
+// component=Tabs
+// Code Connect template (v2, parserless). Spec: components/tabs/spec.md.
+// Variant is the site's look (ADR-0031): whichever look file a project installed is components/ui/tabs.tsx, so the
+// snippet is the same for both and Variant is not read.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const orientation = instance.getEnum("Orientation", { horizontal: "horizontal", vertical: "vertical" });
+
+// The Triggers and Content slots hold the author's tabs and panels, so the snippet shows the shape: a trigger and a
+// panel per value, the first open.
+export default {
+  example: figma.code`<Tabs defaultValue="overview"${orientation === "vertical" ? ' orientation="vertical"' : ""}>
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+    <TabsTrigger value="reports">Reports</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">…</TabsContent>
+  <TabsContent value="analytics">…</TabsContent>
+  <TabsContent value="reports">…</TabsContent>
+</Tabs>`,
+  imports: ['import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"'],
+  id: "tabs",
+  metadata: { nestable: true },
+};

package/templates/code-connect/textarea.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1780-10193
+// source=registry/src/ui/textarea/textarea.tsx
+// component=Textarea
+// Code Connect template (v2, parserless). Spec: components/textarea/spec.md.
+// Figma property VALUES are lower-kebab and identical to the code enums, so every getEnum map is an identity map.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// State carries only what code consumes. focus-visible is a CSS pseudo-state and was dropped as an axis in
+// the Core batch (2026-09-28).
+const state = instance.getEnum("State", { default: "default", invalid: "invalid", disabled: "disabled" });
+
+// Filled is value PRESENCE, not a prop: a Figma boolean only shows and hides layers, so it has to be an axis
+// (the same call Input's spec records). In code it is the value the author passes.
+const filled = instance.getEnum("Filled", { false: "false", true: "true" });
+const value = instance.getString("Value");
+const placeholder = instance.getString("Placeholder");
+
+const attrs = [
+  filled === "true" ? ` defaultValue="${value}"` : ` placeholder="${placeholder}"`,
+  state === "invalid" ? " aria-invalid" : "",
+  state === "disabled" ? " disabled" : "",
+].join("");
+
+// A textarea is never placed without a label, so swap Textarea into a Field in Figma and Field's own template
+// renders the wrapper.
+export default {
+  example: figma.code`<Textarea id="textarea"${attrs} />`,
+  imports: ['import { Textarea } from "@/components/ui/textarea"'],
+  id: "textarea",
+  metadata: { nestable: true },
+};

package/templates/code-connect/toggle-group.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4524-424
+// source=registry/src/ui/toggle-group/toggle-group.tsx
+// component=Toggle Group
+// Code Connect template (v2, parserless). Spec: components/toggle-group/spec.md.
+// Figma property VALUES are lower-kebab; Spacing names the two looks code draws from the spacing prop.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const orientation = instance.getEnum("Orientation", { horizontal: "horizontal", vertical: "vertical" });
+// joined is spacing={0} (shared borders, outer corners only); spaced is the default gap, toggle-group/gap
+const joined = instance.getEnum("Spacing", { spaced: false, joined: true });
+
+// The Items slot holds the author's Toggles, which choose their own labels and icons, so the snippet shows the
+// shape (as Button Group's does). variant and size are set once on the group and reach every item.
+export default {
+  example: figma.code`<ToggleGroup variant="outline"${joined ? " spacing={0}" : ""}${orientation === "vertical" ? ' orientation="vertical"' : ""} aria-label="Text alignment">
+  <ToggleGroupItem value="left">Left</ToggleGroupItem>
+  <ToggleGroupItem value="center">Center</ToggleGroupItem>
+  <ToggleGroupItem value="right">Right</ToggleGroupItem>
+</ToggleGroup>`,
+  imports: ['import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"'],
+  id: "toggle-group",
+  metadata: { nestable: true },
+};