velloo 0.0.0 → 0.2.0

package/pkgs/provider-chakra/src/manifest.ts

@@ -0,0 +1,421 @@
+import type { ComponentDescriptor, Manifest, PropDescriptor } from "@velloo/provider";
+
+/**
+ * Hand-authored chakra manifest for the shipped registry — curated to the
+ * props an agent actually sets (colorScheme/variant/size, the `sx` style
+ * channel, children), which reads far better than a generated dump of chakra's
+ * vast style-prop surface. Mirrors the MUI/antd adapters' curated-manifest
+ * stance; this stays the source of truth.
+ */
+
+const sx: PropDescriptor = {
+  name: "sx",
+  type: "SystemStyleObject | undefined",
+  optional: true,
+  control: "string",
+};
+const children: PropDescriptor = {
+  name: "children",
+  type: "ReactNode",
+  optional: true,
+  control: "string",
+};
+const enumProp = (name: string, values: string[], defaultValue?: string): PropDescriptor => ({
+  name,
+  type: values.map((v) => `"${v}"`).join(" | "),
+  optional: true,
+  control: "enum",
+  enumValues: values,
+  defaultValue,
+});
+const str = (name: string, optional = true): PropDescriptor => ({
+  name,
+  type: "string",
+  optional,
+  control: "string",
+});
+const num = (name: string): PropDescriptor => ({
+  name,
+  type: "number",
+  optional: true,
+  control: "number",
+});
+const bool = (name: string): PropDescriptor => ({
+  name,
+  type: "boolean",
+  optional: true,
+  control: "boolean",
+});
+const json = (name: string, type: string): PropDescriptor => ({
+  name,
+  type,
+  optional: true,
+  control: "string",
+});
+
+const colorScheme = enumProp(
+  "colorScheme",
+  ["brand", "gray", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"],
+  "gray",
+);
+const sizeSmMdLg = (defaultValue = "md") =>
+  enumProp("size", ["xs", "sm", "md", "lg"], defaultValue);
+
+function ui(
+  id: string,
+  props: PropDescriptor[],
+  notes?: string,
+  example?: Record<string, unknown>,
+): ComponentDescriptor {
+  return {
+    id,
+    category: "ui",
+    source: "chakra",
+    props: [...props, sx],
+    designModeNotes: notes,
+    example,
+  };
+}
+
+/** Reused helpers still honor the screen adapter's native sx channel. */
+function helper(
+  id: string,
+  props: PropDescriptor[],
+  notes?: string,
+  example?: Record<string, unknown>,
+): ComponentDescriptor {
+  return {
+    id,
+    category: "ui",
+    source: "velloo",
+    props: [...props, sx],
+    designModeNotes: notes,
+    example,
+  };
+}
+
+export const CHAKRA_MANIFEST: Manifest = [
+  // --- layout ---
+  ui("Box", [children], "Generic layout primitive; style via sx."),
+  ui(
+    "Flex",
+    [children, json("gap", "number | string"), str("align"), str("justify"), str("direction")],
+    "Flex row/column wrapper — `direction`/`align`/`justify`/`gap` are shortcuts; anything else via sx.",
+    { gap: 4, align: "center" },
+  ),
+  ui(
+    "Stack",
+    [children, num("spacing"), enumProp("direction", ["row", "column"], "column")],
+    "Spaced flex layout; `spacing` is the chakra scale (4 = 1rem).",
+    { spacing: 4 },
+  ),
+  ui("HStack", [children, num("spacing")], "Horizontal Stack.", { spacing: 3 }),
+  ui("VStack", [children, num("spacing"), str("align")], "Vertical Stack.", {
+    spacing: 4,
+    align: "stretch",
+  }),
+  ui(
+    "Grid",
+    [children, str("templateColumns"), json("gap", "number | string")],
+    "CSS grid wrapper; pair with GridItem.",
+    { templateColumns: "repeat(3, 1fr)", gap: 6 },
+  ),
+  ui("GridItem", [children, num("colSpan")], "One cell inside a Grid.", { colSpan: 1 }),
+  ui(
+    "Container",
+    [children, str("maxW"), bool("centerContent")],
+    'Centers + max-widths content. `maxW` takes a size token ("md", "3xl", "container.lg").',
+    { maxW: "3xl" },
+  ),
+  ui("Spacer", [], "Flexible gap inside a Flex/HStack — pushes siblings apart."),
+
+  // --- surfaces + data display ---
+  ui(
+    "Card",
+    [children, enumProp("variant", ["elevated", "outline", "filled"], "elevated")],
+    "Card surface — compose with CardHeader/CardBody/CardFooter children.",
+    { variant: "outline" },
+  ),
+  ui("CardHeader", [children], "Card title area — put a Heading inside."),
+  ui("CardBody", [children]),
+  ui("CardFooter", [children], "Card action row."),
+  ui(
+    "Alert",
+    [children, enumProp("status", ["info", "success", "warning", "error"], "info")],
+    "Inline alert banner — compose with AlertIcon + AlertTitle + AlertDescription children.",
+    { status: "info" },
+  ),
+  ui("AlertIcon", [], "The status icon inside an Alert."),
+  ui("AlertTitle", [children], undefined, { children: "Workspace synced" }),
+  ui("AlertDescription", [children], undefined, { children: "All changes are saved." }),
+  ui(
+    "Badge",
+    [children, colorScheme, enumProp("variant", ["subtle", "solid", "outline"], "subtle")],
+    "Small status label.",
+    { colorScheme: "green", children: "Active" },
+  ),
+  ui(
+    "Tag",
+    [
+      children,
+      colorScheme,
+      enumProp("variant", ["subtle", "solid", "outline"], "subtle"),
+      sizeSmMdLg(),
+    ],
+    "Label chip — larger than Badge.",
+    { colorScheme: "brand", children: "Design" },
+  ),
+  ui(
+    "Avatar",
+    [str("name"), str("src"), enumProp("size", ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"], "md")],
+    "Avatar — `src` image or initials derived from `name`.",
+    { name: "Ada Lovelace" },
+  ),
+  ui("Divider", [enumProp("orientation", ["horizontal", "vertical"], "horizontal")]),
+  ui("Skeleton", [children, json("height", "number | string")], "Loading placeholder block.", {
+    height: "20px",
+  }),
+  ui("Progress", [num("value"), colorScheme, sizeSmMdLg(), bool("hasStripe")], undefined, {
+    value: 62,
+    colorScheme: "brand",
+  }),
+  ui(
+    "Stat",
+    [children],
+    "A KPI block — compose with StatLabel + StatNumber + StatHelpText children.",
+  ),
+  ui("StatLabel", [children], undefined, { children: "Active users" }),
+  ui("StatNumber", [children], undefined, { children: "112,893" }),
+  ui("StatHelpText", [children], "Secondary line — put a StatArrow inside for a delta.", {
+    children: "23% more than last week",
+  }),
+  ui("StatArrow", [enumProp("type", ["increase", "decrease"], "increase")], undefined, {
+    type: "increase",
+  }),
+
+  // --- typography ---
+  ui(
+    "Heading",
+    [
+      children,
+      enumProp("size", ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"], "xl"),
+      str("as"),
+    ],
+    "A heading — pick `size` for the scale (`as` sets the tag, default h2).",
+    { size: "lg", children: "Team analytics" },
+  ),
+  ui(
+    "Text",
+    [children, str("fontSize"), str("color"), str("as")],
+    'ALL body text. Tone via sx/props: `color: "chakra-subtle-text"` for muted, theme tokens like "brand.600" work.',
+    { fontSize: "sm", color: "chakra-subtle-text", children: "Updated 2 hours ago" },
+  ),
+
+  // --- controls ---
+  ui(
+    "Button",
+    [
+      children,
+      enumProp("variant", ["solid", "outline", "ghost", "link"], "solid"),
+      colorScheme,
+      sizeSmMdLg(),
+      bool("isDisabled"),
+    ],
+    'Action button. `colorScheme="brand"` is the theme\'s primary.',
+    { colorScheme: "brand", children: "Submit" },
+  ),
+  ui(
+    "IconButton",
+    [
+      str("aria-label", false),
+      children,
+      enumProp("variant", ["solid", "outline", "ghost"], "solid"),
+      colorScheme,
+      sizeSmMdLg(),
+    ],
+    "Icon-only button — give it a velloo `Icon` child + an aria-label.",
+    { "aria-label": "Settings", variant: "ghost" },
+  ),
+  ui(
+    "Input",
+    [
+      str("placeholder"),
+      str("value"),
+      sizeSmMdLg(),
+      enumProp("variant", ["outline", "filled", "flushed"], "outline"),
+    ],
+    undefined,
+    { placeholder: "Email address" },
+  ),
+  ui("Textarea", [str("placeholder"), str("value")], undefined, {
+    placeholder: "Tell us more…",
+  }),
+  ui(
+    "Select",
+    [str("placeholder"), sizeSmMdLg()],
+    "Closed select field in design mode — use `placeholder` for the visible value (option children don't fit design JSON).",
+    { placeholder: "Pick a role" },
+  ),
+  ui("Checkbox", [children, bool("isChecked"), colorScheme], undefined, {
+    isChecked: true,
+    children: "Remember me",
+  }),
+  ui("Radio", [children, bool("isChecked"), colorScheme], undefined, {
+    isChecked: true,
+    children: "Monthly",
+  }),
+  ui("Switch", [bool("isChecked"), colorScheme, sizeSmMdLg()], undefined, {
+    isChecked: true,
+    colorScheme: "brand",
+  }),
+  ui(
+    "Slider",
+    [children, num("value"), num("min"), num("max"), colorScheme],
+    "Compose: Slider > SliderTrack > SliderFilledTrack, + SliderThumb.",
+    { value: 30, colorScheme: "brand" },
+  ),
+  ui("SliderTrack", [children], "The rail — put SliderFilledTrack inside."),
+  ui("SliderFilledTrack", []),
+  ui("SliderThumb", []),
+
+  // --- data ---
+  ui("TableContainer", [children], "Overflow wrapper — put the Table inside."),
+  ui(
+    "Table",
+    [children, enumProp("variant", ["simple", "striped", "unstyled"], "simple"), sizeSmMdLg()],
+    "Data table — compose Thead > Tr > Th and Tbody > Tr > Td children (no data props).",
+    { variant: "simple" },
+  ),
+  ui("Thead", [children]),
+  ui("Tbody", [children]),
+  ui("Tr", [children]),
+  ui("Th", [children, bool("isNumeric")], undefined, { children: "Name" }),
+  ui("Td", [children, bool("isNumeric")], undefined, { children: "Ada Lovelace" }),
+  ui(
+    "Tabs",
+    [
+      children,
+      num("defaultIndex"),
+      enumProp("variant", ["line", "enclosed", "soft-rounded", "solid-rounded"], "line"),
+      colorScheme,
+    ],
+    "Compose: Tabs > TabList (Tab children) + TabPanels (TabPanel children). Set `defaultIndex` to pick the visible pane.",
+    { defaultIndex: 0, colorScheme: "brand" },
+  ),
+  ui("TabList", [children]),
+  ui("Tab", [children], undefined, { children: "Overview" }),
+  ui("TabPanels", [children]),
+  ui("TabPanel", [children]),
+  ui("List", [children, num("spacing")], "Compose with ListItem children.", { spacing: 2 }),
+  ui("ListItem", [children], undefined, { children: "Deploy finished" }),
+  ui("Breadcrumb", [children, str("separator")], "Compose: BreadcrumbItem > BreadcrumbLink."),
+  ui("BreadcrumbItem", [children, bool("isCurrentPage")]),
+  ui("BreadcrumbLink", [children, str("href")], undefined, { href: "#", children: "Home" }),
+
+  // --- overlay surface — canvas-safe: rendered OPEN + inline in design mode
+  // (chakra's own overlays portal and SSR to nothing; their parts need the
+  // real parent's context), so build the content directly inside them. ---
+  ui(
+    "Modal",
+    [children, enumProp("size", ["xs", "sm", "md", "lg", "xl", "2xl", "full"], "md")],
+    "Modal dialog — renders open + inline in design mode. Compose: Modal > ModalOverlay + ModalContent > ModalHeader/ModalBody/ModalFooter (+ ModalCloseButton). Emitted code needs isOpen/onClose wiring.",
+    { size: "md" },
+  ),
+  ui(
+    "ModalOverlay",
+    [],
+    "The backdrop — renders nothing in design mode (kept for chakra-idiomatic composition).",
+  ),
+  ui("ModalContent", [children], "The modal surface card."),
+  ui("ModalHeader", [children], undefined, { children: "Delete item?" }),
+  ui("ModalBody", [children]),
+  ui("ModalFooter", [children], "Right-aligned action row."),
+  ui("ModalCloseButton", [], "Pinned top-right close button."),
+  ui(
+    "Drawer",
+    [children],
+    "A side panel — renders inline as a fixed-width column in design mode. Compose: Drawer > DrawerOverlay + DrawerContent > DrawerHeader/DrawerBody/DrawerFooter.",
+  ),
+  ui("DrawerOverlay", [], "The backdrop — renders nothing in design mode."),
+  ui("DrawerContent", [children], "The drawer surface column."),
+  ui("DrawerHeader", [children], undefined, { children: "Filters" }),
+  ui("DrawerBody", [children]),
+  ui("DrawerFooter", [children]),
+  ui(
+    "Popover",
+    [children],
+    "The trigger child renders inline with the surface pinned open below it. Compose: Popover > PopoverTrigger (the trigger) + PopoverContent > PopoverHeader/PopoverBody.",
+  ),
+  ui("PopoverTrigger", [children], "Wraps the trigger element — renders it as-is."),
+  ui("PopoverContent", [children], "The popover surface, pinned open."),
+  ui("PopoverHeader", [children], undefined, { children: "Details" }),
+  ui("PopoverBody", [children]),
+  ui("PopoverArrow", [], "Renders nothing in design mode (kept for chakra-idiomatic composition)."),
+  ui(
+    "Menu",
+    [children],
+    "The trigger renders inline with the menu pinned open below it. Compose: Menu > MenuButton (the trigger) + MenuList > MenuItem/MenuDivider.",
+  ),
+  ui("MenuButton", [children], "The trigger — renders as a chakra Button in design mode.", {
+    children: "Actions",
+  }),
+  ui("MenuList", [children], "The menu surface, pinned open."),
+  ui("MenuItem", [children], undefined, { children: "Edit" }),
+  ui("MenuDivider", []),
+  ui(
+    "Tooltip",
+    [children, str("label")],
+    "The trigger child renders inline; `label` shows beside it as a dark pill in design mode.",
+    { label: "Copy to clipboard" },
+  ),
+
+  // Framework-neutral velloo helpers (chakra's @chakra-ui/icons isn't shipped).
+  // source:"velloo" — sized/styled via props (NOT sx or Tailwind: a chakra
+  // folder has no JIT). `Icon` emits a lucide-react import in codegen.
+  helper(
+    "Icon",
+    [
+      { name: "name", type: "string", optional: false, control: "icon" },
+      { name: "size", type: "number", optional: true, control: "number" },
+    ],
+    "A lucide icon — chakra's icon set isn't bundled. Set the pixel `size` prop (not sx). `name` is a lucide id (PascalCase or kebab). Emits a `lucide-react` import.",
+    { name: "ArrowRight", size: 20 },
+  ),
+  helper(
+    "Image",
+    [
+      { name: "src", type: "string", optional: false, control: "string" },
+      { name: "alt", type: "string", optional: false, control: "string" },
+    ],
+    "An image. Use velloo assets (`/assets/…`) or a URL.",
+  ),
+  helper(
+    "Placeholder",
+    [{ name: "label", type: "string", optional: true, control: "string" }],
+    "A labeled placeholder box for imagery you haven't authored yet (avatars, hero shots).",
+  ),
+  helper(
+    "SVG",
+    [
+      { name: "content", type: "string", optional: false, control: "string" },
+      { name: "viewBox", type: "string", optional: false, control: "string" },
+    ],
+    "Raw inline SVG markup.",
+  ),
+  helper("Layer", [children], "An absolutely-positioned overlay layer for stacked composition."),
+  helper(
+    "Gradient",
+    [{ name: "from", type: "string", optional: true, control: "color" }],
+    "A gradient fill block.",
+  ),
+  helper(
+    "Prose",
+    [
+      children,
+      { name: "preset", type: "string", optional: true, control: "string" },
+      { name: "as", type: "string", optional: true, control: "string" },
+    ],
+    "A long-form content region. Everything inside — Text, Heading, lists, quotes, code, tables — picks up the theme typeset's proportions and vertical rhythm automatically. `preset` selects a named typeset (see set_typeset). Reach for this for articles, docs, and marketing copy instead of setting sizes block by block.",
+    { as: "article" },
+  ),
+];

package/pkgs/provider-chakra/src/overlays.ts

@@ -0,0 +1,246 @@
+import {
+  Box,
+  Button as ChakraButton,
+  Divider as ChakraDivider,
+  CloseButton,
+} from "@chakra-ui/react";
+import { createElement, Fragment, type ReactElement, type ReactNode } from "react";
+
+/**
+ * Canvas-safe chakra overlays. Chakra's Modal/Drawer portal to `document.body`
+ * and render NOTHING in SSR (their Portal is client-only), and every overlay
+ * sub-part (ModalHeader, MenuList, PopoverContent, …) reads a context the real
+ * parent provides — standalone they throw. Unlike MUI (whose Dialog parts are
+ * context-free and re-exported real), chakra needs the WHOLE composition
+ * shimmed. The shims keep chakra's composition ids so `emit_code` output is
+ * idiomatic chakra (`<Modal><ModalContent>…`), but render everything **open +
+ * inline** (in normal flow, no escaping portal, no fixed backdrop) so a
+ * screenshot shows the surface; the open/anchor/transition machinery is
+ * dropped and the pure-chrome parts (overlay backdrops, popover arrow) render
+ * nothing.
+ *
+ * Mirrors the MUI/antd adapters' overlays and the shadcn snapshot's
+ * pinned-open overlay stance.
+ */
+
+type Props = Record<string, unknown> & { children?: ReactNode };
+
+/** Pass-through props every node carries — className for styling, data-node-path for canvas selection. */
+function chrome(props: Props): { className?: string; "data-node-path"?: string } {
+  // Only the keys that are actually present: the return type says these may be
+  // *absent*, and under `exactOptionalPropertyTypes` an explicit `undefined` is
+  // a different thing from an omitted key.
+  const className = typeof props.className === "string" ? props.className : undefined;
+  const nodePath = props["data-node-path"];
+  return {
+    ...(className !== undefined ? { className } : {}),
+    ...(typeof nodePath === "string" ? { "data-node-path": nodePath } : {}),
+  };
+}
+
+/** Merge the node's authored `sx` (this provider's style channel) over the shim's base. */
+function mergeSx(baseSx: Record<string, unknown>, sx: unknown): Record<string, unknown> {
+  return sx && typeof sx === "object" && !Array.isArray(sx)
+    ? { ...baseSx, ...(sx as Record<string, unknown>) }
+    : baseSx;
+}
+
+function surface(props: Props, baseSx: Record<string, unknown>): ReactElement {
+  return createElement(Box, { ...chrome(props), sx: mergeSx(baseSx, props.sx) }, props.children);
+}
+
+/** A part that exists only for chakra-composition compatibility (backdrops, arrows) — renders nothing. */
+function nothing(): null {
+  return null;
+}
+
+// --- Modal ---
+
+/** Chakra's modal `size` → a maxW token for the inline surface. */
+const MODAL_MAX_W: Record<string, string> = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl",
+  full: "100%",
+};
+
+/** The modal positioning wrapper, rendered inline (open, no portal). */
+export function Modal(props: Props): ReactElement {
+  const maxW = typeof props.size === "string" ? (MODAL_MAX_W[props.size] ?? "md") : "md";
+  return surface(props, { w: "100%", maxW, mx: "auto", my: 4 });
+}
+
+export const ModalOverlay = nothing;
+
+/** The modal surface card. */
+export function ModalContent(props: Props): ReactElement {
+  return surface(props, {
+    bg: "chakra-body-bg",
+    borderRadius: "md",
+    boxShadow: "lg",
+    overflow: "hidden",
+    position: "relative",
+  });
+}
+
+export function ModalHeader(props: Props): ReactElement {
+  return surface(props, { px: 6, py: 4, fontSize: "xl", fontWeight: "semibold" });
+}
+
+export function ModalBody(props: Props): ReactElement {
+  return surface(props, { px: 6, py: 2 });
+}
+
+export function ModalFooter(props: Props): ReactElement {
+  return surface(props, { display: "flex", justifyContent: "flex-end", gap: 3, px: 6, py: 4 });
+}
+
+/** Chakra's real CloseButton is context-free — pin it where the modal puts it. */
+export function ModalCloseButton(props: Props): ReactElement {
+  return createElement(CloseButton, {
+    ...chrome(props),
+    sx: mergeSx({ position: "absolute", top: 2, insetEnd: 3 }, props.sx),
+  });
+}
+
+// --- Drawer ---
+
+/** A side-drawer panel, rendered inline as a fixed-width column. */
+export function Drawer(props: Props): ReactElement {
+  return surface(props, { w: "320px", maxW: "100%", h: "100%" });
+}
+
+export const DrawerOverlay = nothing;
+
+export function DrawerContent(props: Props): ReactElement {
+  return surface(props, {
+    bg: "chakra-body-bg",
+    h: "100%",
+    boxShadow: "lg",
+    display: "flex",
+    flexDirection: "column",
+  });
+}
+
+export function DrawerHeader(props: Props): ReactElement {
+  return surface(props, { px: 6, py: 4, fontSize: "xl", fontWeight: "semibold" });
+}
+
+export function DrawerBody(props: Props): ReactElement {
+  return surface(props, { px: 6, py: 2, flex: "1" });
+}
+
+export function DrawerFooter(props: Props): ReactElement {
+  return surface(props, { display: "flex", justifyContent: "flex-end", gap: 3, px: 6, py: 4 });
+}
+
+// --- Popover ---
+
+/** The trigger renders inline, the content pinned open below it. */
+export function Popover(props: Props): ReactElement {
+  return surface(props, { display: "inline-block" });
+}
+
+/** The trigger child as-is (selection lands on the child). */
+export function PopoverTrigger(props: Props): ReactElement {
+  return createElement(Fragment, null, props.children);
+}
+
+export function PopoverContent(props: Props): ReactElement {
+  return surface(props, {
+    w: "xs",
+    mt: 2,
+    bg: "chakra-body-bg",
+    borderWidth: "1px",
+    borderColor: "chakra-border-color",
+    borderRadius: "md",
+    boxShadow: "lg",
+  });
+}
+
+export function PopoverHeader(props: Props): ReactElement {
+  return surface(props, { px: 3, py: 2, borderBottomWidth: "1px", fontWeight: "medium" });
+}
+
+export function PopoverBody(props: Props): ReactElement {
+  return surface(props, { px: 3, py: 2 });
+}
+
+export const PopoverArrow = nothing;
+
+// --- Menu ---
+
+/** The trigger renders inline with the menu surface pinned open below it. */
+export function Menu(props: Props): ReactElement {
+  return surface(props, { display: "inline-block" });
+}
+
+/** Chakra's real MenuButton needs menu context — a chakra Button stands in. */
+export function MenuButton(props: Props): ReactElement {
+  return createElement(
+    ChakraButton,
+    { ...chrome(props), variant: "outline", sx: mergeSx({}, props.sx) },
+    props.children,
+  );
+}
+
+export function MenuList(props: Props): ReactElement {
+  return surface(props, {
+    minW: "3xs",
+    mt: 2,
+    py: 2,
+    bg: "chakra-body-bg",
+    borderWidth: "1px",
+    borderColor: "chakra-border-color",
+    borderRadius: "md",
+    boxShadow: "lg",
+  });
+}
+
+export function MenuItem(props: Props): ReactElement {
+  return surface(props, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 1.5 });
+}
+
+export function MenuDivider(props: Props): ReactElement {
+  return createElement(ChakraDivider, { ...chrome(props), sx: mergeSx({ my: 2 }, props.sx) });
+}
+
+// --- Tooltip ---
+
+/** The trigger child inline; `label` renders beside it as a dark tooltip pill. */
+export function Tooltip(props: Props): ReactElement {
+  const label = props.label as ReactNode | undefined;
+  return createElement(
+    Fragment,
+    null,
+    props.children,
+    label == null
+      ? null
+      : createElement(
+          Box,
+          {
+            as: "span",
+            ...chrome(props),
+            sx: mergeSx(
+              {
+                display: "inline-block",
+                bg: "gray.700",
+                color: "white",
+                borderRadius: "sm",
+                px: 2,
+                py: 1,
+                fontSize: "sm",
+                lineHeight: "shorter",
+                ml: 2,
+                verticalAlign: "middle",
+              },
+              props.sx,
+            ),
+          },
+          label,
+        ),
+  );
+}