feat(flow): add FlowDiagram components for building directed flow diagrams

New components for visualizing workflows and data flows:

• FlowDiagram - Root container with pan/scroll support for large diagrams
• FlowNode - Individual node with automatic connector points
• FlowNode.Anchor - Custom attachment points for connectors within nodes
• FlowParallelNode - Container for parallel branches with junction connectors

Adds motion as a new dependency for smooth panning interactions.

Deprecate DateRangePicker in favor of DatePicker with mode="range"

• Added @deprecated JSDoc comments to DateRangePicker component and its exports
• IDEs will now show deprecation warnings guiding users to use DatePicker instead

Prevented ClipboardText from overflowing with long text values.

chore(lark): add test scripts to root package.json

Add DatePicker component built on react-day-picker v9

New Component: DatePicker

• Three selection modes: single, multiple, and range
• Forwards all react-day-picker props for maximum flexibility
• Styled with Lark tokens (no external CSS import needed)
• Supports localization via date-fns locales
• Supports timezone via timeZone prop
• Custom modifiers for highlighting specific dates
• Footer prop for messages/usage limits
• Accessible keyboard navigation with Lark-styled focus rings

Usage:

// Single date
<DatePicker mode="single" selected={date} onSelect={setDate} />

// Multiple dates
<DatePicker mode="multiple" selected={dates} onSelect={setDates} max={5} />

// Date range
<DatePicker mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />

Composing with Popover:

<Popover>
  <Popover.Trigger asChild>
    <Button variant="outline" icon={CalendarDotsIcon}>
      Pick a date
    </Button>
  </Popover.Trigger>
  <Popover.Content className="p-3">
    <DatePicker mode="single" selected={date} onSelect={setDate} />
  </Popover.Content>
</Popover>

Note: Consider using DatePicker with mode="range" instead of DateRangePicker for new projects - it offers more flexibility and a smaller bundle size.

Internal changes:

• Added react-day-picker v9 as a dependency
• Updated lint rule to allow components without LARK_*_VARIANTS exports
• Updated component registry codegen to handle variant-less components
• Disabled jsx-a11y/no-autofocus rule (intentional prop forwarding)

feat(clipboard-text): add slide animation with tooltip on copy

Updated the MenuBar so its child buttons align with the container’s outer corners.

Fix lark add to consolidate imports from @lark-ui/core into a single statement using inline type syntax.

Previously, running lark add DeleteResource would produce non-conformant code with duplicate imports:

import { Dialog, DialogRoot } from "@lark-ui/core";
import { Input } from "@lark-ui/core";
import { Button } from "@lark-ui/core";

Now it produces a single consolidated import:

import {
  Dialog,
  DialogRoot,
  Input,
  Button,
  type DialogProps,
} from "@lark-ui/core";

This satisfies ESLint's import/no-duplicates rule with prefer-inline: true.

Fix z-index stacking issues with nested portaled components (e.g., Select inside Dialog)

• Remove unnecessary z-index values from Dialog, Select, Combobox, and Dropdown
• Delete .z-modal { z-index: 9999 } - DOM order now handles stacking naturally
• Components opened later correctly appear on top without z-index wars

fix(dropdown): improve external link detection to handle http:// and protocol-relative urls

updated the external link check to use a regex that matches https://, http://, and protocol-relative URLs (//). previously only https:// links opened in a new tab.

Changed ClipboardIcon to CopyIcon in ClipboardText component

Fix AI command USAGE.md path resolution to work correctly from bundled dist output

fix(cli): include block source files in build for lark add command

The lark add command was failing because block source files (.tsx) were not being copied to dist/ during the build process. This adds copying of block source files from src/blocks/ to dist/src/blocks/ so the CLI can install them into user projects.

fix(Table): Add indeterminate prop and fix checkbox click handling

• Added indeterminate prop to Table.CheckHead and Table.CheckCell components to support indeterminate checkbox state (shows minus icon when some but not all rows are selected)
• Fixed checkbox click handling - clicking directly on the checkbox now works correctly (previously only clicking the cell area next to the checkbox worked)
• Updated Table demos (TableSelectedRowDemo and TableFullDemo) with proper React state management for interactive row selection

fix: delete-resource shouldn't nest buttons within each other

support overwriting text in pagination component

fix(cli): resolve broken doc/docs/ls commands by fixing registry path from catalog/ to ai/ fix(dialog): wrap sub-components to isolate @base-ui/react type references from downstream consumers fix(label): render as <label> element with htmlFor support instead of <span> feat(input): add Textarea alias for InputArea feat(toast): add ToastProvider alias for Toasty feat(button): require aria-label on icon-only buttons (shape="square" | "circle") via discriminated union fix(docs): add Tailwind 4 @source directive to usage example, add confirmation dialog recipe, update Select basic example, document icon-only button aria-label pattern

fix: CLI commands now find component registry and run codegen:registry before publish

fix(cli): resolve registry path for docs and ls commands

Add CloudflareLogo component with glyph and full logo variants, color schemes (brand/black/white), and exported SVG path data for custom implementations

Replace .toSorted() with .sort() on spread copies to fix TypeError on Chrome <110

add 'Delete Resource' block

Add variant support, custom content, and action buttons to Toast component.

"fix: adjusted bullet size for sensitive input"

fixes to figma plugin init + zod v4 in lark

Fix lark CLI bin resolution in repo checkouts so pnpm install doesn't warn when dist/ hasn't been built yet.

Lark 1.0.0 Release

The first stable release of Lark, Cloudflare's component library.

Breaking Changes

Blocks Distribution via CLI

Blocks (PageHeader, ResourceListPage) are no longer exported from @lark-ui/core. They must now be installed via the CLI:

npx @lark-ui/core init        # Initialize lark.json
npx @lark-ui/core add PageHeader

Blocks are copied to your project for full customization with imports automatically transformed to @lark-ui/core.

Checkbox API Changes

• Ref type changed: HTMLInputElement → HTMLButtonElement
• Props changed: No longer extends InputHTMLAttributes (explicit props only)
• Handler renamed: onChange/onValueChange → onCheckedChange (deprecated handlers still work)

Banner API Deprecation

The text prop is deprecated in favor of children:

// Before (deprecated)
<Banner text="Your message" />

// After (preferred)
<Banner>Your message</Banner>

New Features

• Link component: Inline text links with Base UI composition API and render prop for framework routing
• DropdownMenu enhancements: Nested submenus (Sub, SubTrigger, SubContent) and radio items (RadioGroup, RadioItem)
• Grid component: New layout primitive
• Theme generator: Config-driven token definitions with consolidated semantic color system
• Component catalog: Visibility controls for documentation
• Deprecated props lint rule: lark/no-deprecated-props detects @deprecated JSDoc tags

Fixes

• Dropdown danger variant color contrast
• Tabs segmented indicator border radius
• Combobox dropdown scrolling
• Primary button hover/focus contrast

Migration Guide

Blocks

If you were using blocks (note: they were never officially exported):

# 1. Initialize configuration
npx @lark-ui/core init

# 2. Install blocks
npx @lark-ui/core add PageHeader
npx @lark-ui/core add ResourceListPage

# 3. Update imports to the local path shown after installation

Checkbox

// Before
<Checkbox onChange={(e) => setValue(e.target.checked)} />;
const ref = useRef<HTMLInputElement>(null);

// After
<Checkbox onCheckedChange={(checked) => setValue(checked)} />;
const ref = useRef<HTMLButtonElement>(null);

Banner

// Before (still works, but deprecated)
<Banner text="Your message" />

// After
<Banner>Your message</Banner>

feat(banner): add children prop, deprecate text prop

Banner now supports children for content, which is the preferred API. The text prop is deprecated but still works for backwards compatibility.

// Preferred (new)
<Banner>Your message</Banner>
<Banner icon={<Icon />}>Your message</Banner>

// Deprecated (still works)
<Banner text="Your message" />

The text prop will be removed in a future major version.

feat(cli): blocks are now distributed via CLI instead of npm exports

New CLI commands for block management:

• lark init - Initialize lark.json configuration file
• lark blocks - List all available blocks for CLI installation
• lark add <block-name> - Install a block to your project with transformed imports

Blocks are copied to your project for full customization, with relative imports automatically converted to @lark-ui/core.

Add lint rule to detect usage of deprecated props on Lark components.

• New lark/no-deprecated-props lint rule automatically detects deprecated props from @deprecated JSDoc tags
• Component registry now includes deprecated field for props with @deprecated annotations
• Docs site shows strikethrough and @deprecated badge for deprecated props in API reference tables

To deprecate a prop, add a JSDoc comment:

interface MyComponentProps {
  /** @deprecated Use `newProp` instead */
  oldProp?: string;
}

The lint rule will flag usage and show a helpful message:

The `oldProp` prop on <MyComponent> is deprecated. Use `newProp` instead.

Add nested menu (submenu) and RadioGroup/RadioItem support to DropdownMenu

• Add DropdownMenu.Sub, DropdownMenu.SubTrigger, and DropdownMenu.SubContent for nested submenus
• Add DropdownMenu.RadioGroup, DropdownMenu.RadioItem, and DropdownMenu.RadioItemIndicator for single-selection menus
• Fix SubTrigger styling to match Item component
• Fix focus ring on dropdown popup
• Add Storybook stories demonstrating nested menus and radio items
• Update Astro docs with examples and API reference

fix(checkbox): make label clickable, add new onCheckedChange API

• Clicking the label now toggles the checkbox
• New onCheckedChange callback (preferred over deprecated onChange/onValueChange)
• Ref type is now HTMLButtonElement (aligns with Base UI implementation)

Add Link component with Base UI composition API

• New Link component for consistent inline text links
• Supports render prop for composition with framework-specific links (e.g., React Router)
• Uses Base UI's useRender hook for proper ref/event merging
• Three variants: inline (default), current, and plain
• Link.ExternalIcon subcomponent for external link indicators
• Integrates with LinkProvider for framework-agnostic routing

feat: theme generator, color token consolidation, component catalog

• New theme generator system with config-driven token definitions
• Consolidated semantic color tokens with config.ts as single source of truth
• New component catalog system with visibility controls
• Added Grid component
• Updated Figma plugin generators for new semantic tokens
• Migrated documentation from Storybook to Astro

run component-registry when starting docs site

Fix color contrast issue in Dropdown danger variant by using subtle bg-lark-danger/5 background instead of bg-lark-danger-tint, improving readability while maintaining the visual "danger" cue

Add render prop for Tabs component

Fix Combobox dropdown not scrolling when it has many items. The overflow-hidden class was overriding overflow-y-auto, causing content to be clipped instead of scrollable.

fix: improve primary button hover/focus contrast by using bg-hover-selected instead of bg-primary/70

Adds disabled prop for table cell checkboxes

fix(tabs): adjust segmented indicator border radius for proper visual nesting