Liquid UI Package

@kcascend/liquid-ui is the reusable UI package for Liquid Design System consumers.

Local development

1. Run npm install from the repository root to install the local file dependency.
2. Run npm run build:ui to rebuild the package outputs in packages/liquid-ui/dist.
3. Run npm run storybook to rebuild the package and launch Storybook against the package boundary.

Grid usage

The package exposes a grid primitive through GridLayout and GridColumn.

import { GridColumn, GridLayout } from '@kcascend/liquid-ui';

export function Example() {
  return (
    <GridLayout as="div">
      <GridColumn sm={4} md={4} lg={8}>
        Primary
      </GridColumn>
      <GridColumn sm={2} md={2} lg={4}>
        Secondary A
      </GridColumn>
      <GridColumn sm={2} md={2} lg={4}>
        Secondary B
      </GridColumn>
    </GridLayout>
  );
}

Supported layout features:

• Responsive spans through sm, md, lg, xlg, and max.
• Offset columns with object values like md={{ span: 4, offset: 2 }}.
• Gutter modes with narrow and condensed.
• withRowGap to keep vertical spacing aligned with the active gutter.
• fullWidth for viewport-spanning layouts.
• subgrid for nested grids that inherit the parent column scaffold.
• Auto columns when a GridColumn is rendered without explicit breakpoint props.

Figma governance

Every reusable component must record an approved Figma reference in story metadata or component documentation before it is considered ready for review. The initial workflow example in this package uses the Liquid token source in Figma

Storybook now demonstrates both patterns:

• a package-consumed button component with Figma and accessibility metadata
• a token values reference story that reads directly from the generated tokens export

Accessibility verification

Each component review must include:

• Keyboard interaction expectations when the component is interactive.
• Name, role, and state guidance for assistive technologies.
• Color contrast and focus treatment verification.
• Storybook documentation that explains any usage constraints needed to stay WCAG 2.1 aligned.