2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T1422,"use client"; import { Toolbar as ToolbarPrimitive } from "radix-ui"; import { createContext, useContext, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Size = "sm" | "md"; const SizeContext = createContext("md"); const ROOT = { raised: "rounded-[14px] bg-white p-1 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_4px_12px_-4px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:shadow-[0_4px_12px_-4px_rgb(0_0_0/0.6)] dark:ring-white/[0.1]", soft: "rounded-[14px] bg-neutral-100 p-1 dark:bg-white/[0.06]", floating: "rounded-full bg-neutral-950 p-1 text-white shadow-[0_12px_32px_-8px_rgb(0_0_0/0.4),inset_0_1px_0_rgb(255_255_255/0.1)] dark:bg-neutral-800 dark:ring-1 dark:ring-white/[0.1]", ghost: "", } as const; type Variant = keyof typeof ROOT; const VariantContext = createContext("raised"); const VerticalContext = createContext(false); const ITEM = { light: "text-neutral-600 hover:bg-neutral-950/[0.05] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 data-[state=on]:bg-neutral-950/[0.07] data-[state=on]:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:focus-visible:bg-white/[0.1] dark:focus-visible:text-white dark:data-[state=on]:bg-white/[0.12] dark:data-[state=on]:text-white", soft: "text-neutral-600 hover:bg-white/70 hover:text-neutral-950 focus-visible:bg-white/80 focus-visible:text-neutral-950 data-[state=on]:bg-white data-[state=on]:text-neutral-950 data-[state=on]:shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:data-[state=on]:bg-white/[0.14] dark:data-[state=on]:text-white", dark: "text-neutral-400 hover:bg-white/[0.1] hover:text-white focus-visible:bg-white/[0.12] focus-visible:text-white data-[state=on]:bg-white data-[state=on]:text-neutral-950", } as const; const SIZES = { sm: "h-7 min-w-7 gap-1.5 rounded-[8px] px-1.5 text-[12.5px] [&_svg]:size-3.5", md: "h-8 min-w-8 gap-1.5 rounded-[10px] px-2 text-[13px] [&_svg]:size-4", } as const; function useItemClass() { const variant = useContext(VariantContext); const size = useContext(SizeContext); return cn( "inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium tracking-[-0.01em] outline-none transition-[background-color,color,box-shadow] duration-150", "disabled:pointer-events-none disabled:opacity-40 [&_svg]:shrink-0", variant === "floating" ? "rounded-full" : "", SIZES[size], ITEM[variant === "floating" ? "dark" : variant === "soft" ? "soft" : "light"], ); } export interface ToolbarProps extends ComponentProps { /** raised: a white bar · soft: a grey track · floating: a dark pill for canvases · ghost: no surface. */ variant?: Variant; size?: Size; } /** A row of buttons, toggles and links. Arrow keys move between them, so the whole bar is one tab stop. */ export function Toolbar({ variant = "raised", size = "md", orientation = "horizontal", className, ...props }: ToolbarProps) { return ( ); } export function ToolbarButton({ className, ...props }: ComponentProps) { return ; } export function ToolbarLink({ className, ...props }: ComponentProps) { return ; } export function ToolbarToggleGroup({ className, ...props }: ComponentProps) { const vertical = useContext(VerticalContext); return ; } export function ToolbarToggleItem({ className, ...props }: ComponentProps) { return ; } export function ToolbarSeparator({ className, ...props }: ComponentProps) { const variant = useContext(VariantContext); return ( ); } export default Toolbar; 2e:T90e1,

"use client";

import { Toolbar as ToolbarPrimitive } from "radix-ui";
import { createContext, useContext, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Size = "sm" | "md";

const SizeContext = createContext<Size>("md");

const ROOT = {
  raised:
    "rounded-[14px] bg-white p-1 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_4px_12px_-4px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:shadow-[0_4px_12px_-4px_rgb(0_0_0/0.6)] dark:ring-white/[0.1]",
  soft: "rounded-[14px] bg-neutral-100 p-1 dark:bg-white/[0.06]",
  floating:
    "rounded-full bg-neutral-950 p-1 text-white shadow-[0_12px_32px_-8px_rgb(0_0_0/0.4),inset_0_1px_0_rgb(255_255_255/0.1)] dark:bg-neutral-800 dark:ring-1 dark:ring-white/[0.1]",
  ghost: "",
} as const;

type Variant = keyof typeof ROOT;
const VariantContext = createContext<Variant>("raised");
const VerticalContext = createContext(false);

const ITEM = {
  light:
    "text-neutral-600 hover:bg-neutral-950/[0.05] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 data-[state=on]:bg-neutral-950/[0.07] data-[state=on]:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:focus-visible:bg-white/[0.1] dark:focus-visible:text-white dark:data-[state=on]:bg-white/[0.12] dark:data-[state=on]:text-white",
  soft: "text-neutral-600 hover:bg-white/70 hover:text-neutral-950 focus-visible:bg-white/80 focus-visible:text-neutral-950 data-[state=on]:bg-white data-[state=on]:text-neutral-950 data-[state=on]:shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white dark:data-[state=on]:bg-white/[0.14] dark:data-[state=on]:text-white",
  dark: "text-neutral-400 hover:bg-white/[0.1] hover:text-white focus-visible:bg-white/[0.12] focus-visible:text-white data-[state=on]:bg-white data-[state=on]:text-neutral-950",
} as const;

const SIZES = {
  sm: "h-7 min-w-7 gap-1.5 rounded-[8px] px-1.5 text-[12.5px] [&_svg]:size-3.5",
  md: "h-8 min-w-8 gap-1.5 rounded-[10px] px-2 text-[13px] [&_svg]:size-4",
} as const;

function useItemClass() {
  const variant = useContext(VariantContext);
  const size = useContext(SizeContext);
  return cn(
    "inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium tracking-[-0.01em] outline-none transition-[background-color,color,box-shadow] duration-150",
    "disabled:pointer-events-none disabled:opacity-40 [&_svg]:shrink-0",
    variant === "floating" ? "rounded-full" : "",
    SIZES[size],
    ITEM[variant === "floating" ? "dark" : variant === "soft" ? "soft" : "light"],
  );
}

export interface ToolbarProps extends ComponentProps<typeof ToolbarPrimitive.Root> {
  /** raised: a white bar · soft: a grey track · floating: a dark pill for canvases · ghost: no surface. */
  variant?: Variant;
  size?: Size;
}

/** A row of buttons, toggles and links. Arrow keys move between them, so the whole bar is one tab stop. */
export function Toolbar({ variant = "raised", size = "md", orientation = "horizontal", className, ...props }: ToolbarProps) {
  return (
    <VariantContext.Provider value={variant}>
      <SizeContext.Provider value={size}>
        <VerticalContext.Provider value={orientation === "vertical"}>
          <ToolbarPrimitive.Root
            orientation={orientation}
            className={cn("inline-flex w-fit items-center gap-0.5", orientation === "vertical" && "flex-col", ROOT[variant], className)}
            {...props}
          />
        </VerticalContext.Provider>
      </SizeContext.Provider>
    </VariantContext.Provider>
  );
}

export function ToolbarButton({ className, ...props }: ComponentProps<typeof ToolbarPrimitive.Button>) {
  return <ToolbarPrimitive.Button className={cn(useItemClass(), className)} {...props} />;
}

export function ToolbarLink({ className, ...props }: ComponentProps<typeof ToolbarPrimitive.Link>) {
  return <ToolbarPrimitive.Link className={cn(useItemClass(), "no-underline", className)} {...props} />;
}

export function ToolbarToggleGroup({ className, ...props }: ComponentProps<typeof ToolbarPrimitive.ToggleGroup>) {
  const vertical = useContext(VerticalContext);
  return <ToolbarPrimitive.ToggleGroup className={cn("flex items-center gap-0.5", vertical && "flex-col", className)} {...props} />;
}

export function ToolbarToggleItem({ className, ...props }: ComponentProps<typeof ToolbarPrimitive.ToggleItem>) {
  return <ToolbarPrimitive.ToggleItem className={cn(useItemClass(), className)} {...props} />;
}

export function ToolbarSeparator({ className, ...props }: ComponentProps<typeof ToolbarPrimitive.Separator>) {
  const variant = useContext(VariantContext);
  return (
    <ToolbarPrimitive.Separator
      className={cn(
        "mx-1 h-5 w-px shrink-0 data-[orientation=horizontal]:mx-0 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-5",
        variant === "floating" ? "bg-white/[0.14]" : "bg-black/[0.08] dark:bg-white/[0.1]",
        className,
      )}
      {...props}
    />
  );
}

export default Toolbar;

2f:Tb9b,"use client"; import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Italic, Link2, List, ListOrdered, Strikethrough, Underline } from "lucide-react"; import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar"; export default function Demo() { return (


      
        
          Release notes, week 41. Faster sync for large workspaces, a new import flow and fixes for the
          calendar view.
        
        Use arrow keys to move along the toolbar.


  );
}
30:T5c96,"use client";

import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Italic, Link2, List, ListOrdered, Strikethrough, Underline } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

export default function Demo() {
  return (
    <div className="w-full max-w-[520px] overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="border-b border-black/[0.06] p-2 dark:border-white/[0.08]">
        <Toolbar variant="ghost" aria-label="Formatting" className="w-full">
          <ToolbarToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text style">
            <ToolbarToggleItem value="bold" aria-label="Bold">
              <Bold />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="italic" aria-label="Italic">
              <Italic />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="underline" aria-label="Underline">
              <Underline />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="strike" aria-label="Strikethrough">
              <Strikethrough />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="code" aria-label="Inline code">
              <Code />
            </ToolbarToggleItem>
          </ToolbarToggleGroup>
          <ToolbarSeparator />
          <ToolbarToggleGroup type="single" defaultValue="left" aria-label="Alignment">
            <ToolbarToggleItem value="left" aria-label="Align left">
              <AlignLeft />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="center" aria-label="Align center">
              <AlignCenter />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="right" aria-label="Align right">
              <AlignRight />
            </ToolbarToggleItem>
          </ToolbarToggleGroup>
          <ToolbarSeparator />
          <ToolbarButton aria-label="Bulleted list">
            <List />
          </ToolbarButton>
          <ToolbarButton aria-label="Numbered list">
            <ListOrdered />
          </ToolbarButton>
          <ToolbarButton aria-label="Add link">
            <Link2 />
          </ToolbarButton>
          <ToolbarButton className="ml-auto px-2.5 text-neutral-950 dark:text-white">Publish</ToolbarButton>
        </Toolbar>
      </div>
      <div className="space-y-2 px-5 py-4 text-[13.5px] leading-relaxed text-neutral-600 dark:text-neutral-300">
        <p>
          <strong className="font-semibold text-neutral-950 dark:text-white">Release notes, week 41.</strong> Faster sync for large workspaces, a new import flow and fixes for the
          calendar view.
        </p>
        <p className="text-neutral-400 dark:text-neutral-500">Use arrow keys to move along the toolbar.</p>
      </div>
    </div>
  );
}
31:T51e,import { Bold, Italic, Link2, Underline } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

function Items() {
  return (
    <>
      
        
          
        
        
          
        
        
          
        
      
      
      
        
      
    
  );
}

export default function Example() {
  return (
    
      {(["raised", "soft", "floating", "ghost"] as const).map((variant) => (
        
          {variant}
          
            
          
        
      ))}
    
  );
}
32:T38b2,import { Bold, Italic, Link2, Underline } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

function Items() {
  return (
    <>
      <ToolbarToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text style">
        <ToolbarToggleItem value="bold" aria-label="Bold">
          <Bold />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="italic" aria-label="Italic">
          <Italic />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="underline" aria-label="Underline">
          <Underline />
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton aria-label="Add link">
        <Link2 />
      </ToolbarButton>
    </>
  );
}

export default function Example() {
  return (
    <div className="grid gap-5">
      {(["raised", "soft", "floating", "ghost"] as const).map((variant) => (
        <div key={variant} className="flex items-center gap-6">
          <span className="w-16 font-mono text-[12px] text-neutral-500 dark:text-neutral-400">{variant}</span>
          <Toolbar variant={variant} aria-label={`${variant} toolbar`}>
            <Items />
          </Toolbar>
        </div>
      ))}
    </div>
  );
}
33:T7c7,import { Circle, Hand, MousePointer2, PenTool, Square, Type } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

const tools = [
  { value: "select", label: "Select", icon: MousePointer2 },
  { value: "hand", label: "Hand", icon: Hand },
  { value: "rect", label: "Rectangle", icon: Square },
  { value: "ellipse", label: "Ellipse", icon: Circle },
  { value: "pen", label: "Pen", icon: PenTool },
  { value: "text", label: "Text", icon: Type },
];

export default function Example() {
  return (
    
      
        
          {tools.map(({ value, label, icon: Icon }) => (
            
              
            
          ))}
        
        
        72%
      
      
        {["-left-1 -top-1", "-right-1 -top-1", "-bottom-1 -left-1", "-bottom-1 -right-1"].map((p) => (
          
        ))}
      
    
  );
}
34:T3c62,import { Circle, Hand, MousePointer2, PenTool, Square, Type } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

const tools = [
  { value: "select", label: "Select", icon: MousePointer2 },
  { value: "hand", label: "Hand", icon: Hand },
  { value: "rect", label: "Rectangle", icon: Square },
  { value: "ellipse", label: "Ellipse", icon: Circle },
  { value: "pen", label: "Pen", icon: PenTool },
  { value: "text", label: "Text", icon: Type },
];

export default function Example() {
  return (
    <div className="relative h-[320px] w-full max-w-[520px] overflow-hidden rounded-[22px] bg-neutral-50 bg-[radial-gradient(circle,rgb(0_0_0/0.1)_1px,transparent_1.25px)] bg-[length:16px_16px] ring-1 ring-black/[0.06] dark:bg-neutral-950 dark:bg-[radial-gradient(circle,rgb(255_255_255/0.08)_1px,transparent_1.25px)] dark:ring-white/[0.08]">
      <Toolbar orientation="vertical" aria-label="Tools" className="absolute left-3 top-1/2 -translate-y-1/2">
        <ToolbarToggleGroup type="single" defaultValue="rect" aria-label="Tool">
          {tools.map(({ value, label, icon: Icon }) => (
            <ToolbarToggleItem key={value} value={value} aria-label={label} title={label}>
              <Icon />
            </ToolbarToggleItem>
          ))}
        </ToolbarToggleGroup>
        <ToolbarSeparator />
        <ToolbarButton className="text-[11.5px] tabular-nums">72%</ToolbarButton>
      </Toolbar>
      <div className="absolute left-[46%] top-[34%] h-24 w-40 rounded-xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-[1.5px] ring-neutral-950 dark:bg-neutral-800 dark:ring-white">
        {["-left-1 -top-1", "-right-1 -top-1", "-bottom-1 -left-1", "-bottom-1 -right-1"].map((p) => (
          <span key={p} className={`absolute ${p} size-2 rounded-[2px] bg-white ring-[1.5px] ring-neutral-950 dark:bg-neutral-900 dark:ring-white`} />
        ))}
      </div>
    </div>
  );
}
35:T6b6,import { Circle, Hand, MessageSquare, MousePointer2, PenTool, Square, Type } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    
      
        
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
        
        
        
          
        
      
    
  );
}
36:T34ac,import { Circle, Hand, MessageSquare, MousePointer2, PenTool, Square, Type } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    <div className="relative h-[280px] w-full max-w-[520px] overflow-hidden rounded-[22px] bg-neutral-50 bg-[radial-gradient(circle,rgb(0_0_0/0.1)_1px,transparent_1.25px)] bg-[length:16px_16px] ring-1 ring-black/[0.06] dark:bg-neutral-950 dark:bg-[radial-gradient(circle,rgb(255_255_255/0.08)_1px,transparent_1.25px)] dark:ring-white/[0.08]">
      <Toolbar variant="floating" aria-label="Canvas tools" className="absolute bottom-4 left-1/2 -translate-x-1/2">
        <ToolbarToggleGroup type="single" defaultValue="select" aria-label="Tool">
          <ToolbarToggleItem value="select" aria-label="Select">
            <MousePointer2 />
          </ToolbarToggleItem>
          <ToolbarToggleItem value="hand" aria-label="Hand">
            <Hand />
          </ToolbarToggleItem>
          <ToolbarToggleItem value="rect" aria-label="Rectangle">
            <Square />
          </ToolbarToggleItem>
          <ToolbarToggleItem value="ellipse" aria-label="Ellipse">
            <Circle />
          </ToolbarToggleItem>
          <ToolbarToggleItem value="pen" aria-label="Pen">
            <PenTool />
          </ToolbarToggleItem>
          <ToolbarToggleItem value="text" aria-label="Text">
            <Type />
          </ToolbarToggleItem>
        </ToolbarToggleGroup>
        <ToolbarSeparator />
        <ToolbarButton aria-label="Comment">
          <MessageSquare />
        </ToolbarButton>
      </Toolbar>
    </div>
  );
}
37:T528,import { ChevronDown, Download, Filter, Redo2, Share, Undo2 } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    
      
        
          
        
        
          
        
        
        
          100%
          
        
        
        
          
          Export
        
        
          
          Share
        
      
      
        
          
          Filter
        
        Sort
        Group
        
        
          
          CSV
        
      
    
  );
}
38:T3226,import { ChevronDown, Download, Filter, Redo2, Share, Undo2 } from "lucide-react";
import { Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    <div className="grid justify-items-center gap-5">
      <Toolbar aria-label="Document actions">
        <ToolbarButton aria-label="Undo">
          <Undo2 />
        </ToolbarButton>
        <ToolbarButton aria-label="Redo" disabled>
          <Redo2 />
        </ToolbarButton>
        <ToolbarSeparator />
        <ToolbarButton className="tabular-nums">
          100%
          <ChevronDown className="size-3.5! text-neutral-400" />
        </ToolbarButton>
        <ToolbarSeparator />
        <ToolbarButton>
          <Download />
          Export
        </ToolbarButton>
        <ToolbarLink href="#">
          <Share />
          Share
        </ToolbarLink>
      </Toolbar>
      <Toolbar variant="soft" size="sm" aria-label="Table actions">
        <ToolbarButton>
          <Filter />
          Filter
        </ToolbarButton>
        <ToolbarButton>Sort</ToolbarButton>
        <ToolbarButton>Group</ToolbarButton>
        <ToolbarSeparator />
        <ToolbarButton>
          <Download />
          CSV
        </ToolbarButton>
      </Toolbar>
    </div>
  );
}
39:T56b,import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from "lucide-react";
import { Toolbar, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    
      {(["sm", "md"] as const).map((size) => (
        
          
            
              
            
            
              
            
          
          
          
            
              
            
            
              
            
            
              
            
          
        
      ))}
    
  );
}
3a:T3759,import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from "lucide-react";
import { Toolbar, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@/components/scalar-ui/toolbar";

export default function Example() {
  return (
    <div className="grid justify-items-center gap-5">
      {(["sm", "md"] as const).map((size) => (
        <Toolbar key={size} size={size} aria-label={`${size} toolbar`}>
          <ToolbarToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text style">
            <ToolbarToggleItem value="bold" aria-label="Bold">
              <Bold />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="italic" aria-label="Italic">
              <Italic />
            </ToolbarToggleItem>
          </ToolbarToggleGroup>
          <ToolbarSeparator />
          <ToolbarToggleGroup type="single" defaultValue="center" aria-label="Alignment">
            <ToolbarToggleItem value="left" aria-label="Align left">
              <AlignLeft />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="center" aria-label="Align center">
              <AlignCenter />
            </ToolbarToggleItem>
            <ToolbarToggleItem value="right" aria-label="Align right">
              <AlignRight />
            </ToolbarToggleItem>
          </ToolbarToggleGroup>
        </Toolbar>
      ))}
    </div>
  );
}
29:["$","section","toolbar",{"id":"toolbar","aria-labelledby":"toolbar-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"toolbar-title","className":"sr-only","children":"Toolbar"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"toolbar","gated":{"unlocked":true,"files":[{"name":"toolbar.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"variants":{"name":"variants.tsx","code":"$31","html":"$32"},"canvas-tools":{"name":"canvas-tools.tsx","code":"$33","html":"$34"},"floating":{"name":"floating.tsx","code":"$35","html":"$36"},"with-text":{"name":"with-text.tsx","code":"$37","html":"$38"},"size":{"name":"size.tsx","code":"$39","html":"$3a"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add toolbar","shadcn":"npx shadcn@latest add https://scalarui.com/r/toolbar.json","shadcnConfig":"{\n  \"registries\": {\n    \"@scalar-ui\": {\n      \"url\": \"https://scalarui.com/r/{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n      }\n    }\n  }\n}","mcpClaude":"claude mcp add scalar-ui \\\n  -e SCALAR_TOKEN=slk_your_token \\\n  -e SCALAR_URL=https://scalarui.com \\\n  -- npx -y @scalardesign/mcp","mcpJson":"{\n  \"mcpServers\": {\n    \"scalar-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"@scalardesign/mcp\"\n      ],\n      \"env\": {\n        \"SCALAR_TOKEN\": \"slk_your_token\",\n        \"SCALAR_URL\": \"https://scalarui.com\"\n      }\n    }\n  }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3b","toolbar":"$L3c"}]}],["$L3d","$L3e","$L3f","$L40","$L41"]]}]

Toolbars

Toolbars

Variants

Canvas Tools

Floating

With Text

Size