@gaulatti/moritz

Generated by kolibri from the configured Figma design system.

Generation contract: composable-v1.

Usage

import '@gaulatti/moritz/styles/kolibri.css';
import { Button, Hero } from '@gaulatti/moritz';

export function App() {
  return (
    <>
      <Hero />
      <Button>Click me</Button>
    </>
  );
}

Generated views and behavior

Every component exposes a visual ComponentNameView. Interactive components also expose a behavior-bound ComponentName when their required semantic parts were present in Figma. Views contain structure and styling only; adapters own state, keyboard interaction, focus management, and ARIA wiring.

import { ModalView, withDialogBehavior } from '@gaulatti/moritz';

// Use the generated adapter or replace it with your application's adapter.
const ProductModal = withDialogBehavior(ModalView);

Slots replace the generated element for a semantic part. partProps adds attributes or event handlers without depending on generated DOM depth or class names. Adapter handlers compose with consumer handlers and honor event.preventDefault().

<ButtonView
  slots={{ root: ProductButton }}
  partProps={{ root: { 'data-analytics': 'checkout' } }}
>
  Continue
</ButtonView>

Inspect kolibri.manifest.json for each component's source node, available and required parts, behavior kind, states, and whether kolibri attached an adapter. Components missing required parts remain usable as views and are identified in generation diagnostics.

Stability contract

Treat exported component names, props, slots, data-component, data-part, and manifest fields as the public integration surface. Generated DOM depth and internal CSS selectors are implementation details.

Storybook

The package includes Storybook configuration, a foundation-token story, and a story for every generated component. Composable adapter stories also contain a behavior-contract play test. The .storybook directory is hidden by default on macOS but is included in this package.

npm install
npm run storybook

Build a static Storybook site with:

npm run build-storybook