@vibe-labs/design-components-core

Shared component primitives (field wrapper, close button) for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-core";

import { CloseBtnSizes } from "@vibe-labs/design-components-core/types";
import type { FieldStyleProps, CloseBtnStyleProps } from "@vibe-labs/design-components-core/types";

Contents

Tokens (core.css)

CSS custom properties defined in @layer vibe.tokens:

Field Wrapper

Token	Default	Description
--field-gap	--space-1	Gap between label, control, and help/error
--field-label-font-size	--text-sm	Label font size
--field-label-font-weight	--font-semibold	Label font weight
--field-label-color	--text-primary	Label color
--field-help-font-size	--text-xs	Help text font size
--field-help-color	--text-muted	Help text color
--field-error-font-size	--text-xs	Error/success message font size
--field-required-color	--color-danger	Required indicator color

Close Button

Token	Default	Description
--close-btn-color	--text-muted	Default icon color
--close-btn-hover-color	--text-primary	Hover icon color
--close-btn-hover-bg	--surface-hover-overlay	Hover background
--close-btn-radius	--radius-sm	Border radius
--close-btn-size-sm	1.25rem	Small size
--close-btn-size-md	1.75rem	Medium size (default)
--close-btn-size-lg	2rem	Large size

Generated Styles (core.g.css)

Component classes generated into @layer vibe.components.

Field Wrapper

• field — vertical flex column (label → control → help/error)
• field-label — styled label text
• field-required — danger-colored required indicator
• field-help — muted help text below control
• field-error — error message
• field-success — success message
• horizontal modifier — switches to row layout with fixed-width label (8rem min)

Close Button

• close-btn — inline-flex centered button with hover/focus states
• Sizes: sm · md · lg (default: md)
• Focus-visible ring via box-shadow

TypeScript Types (types/)

CloseBtnSizes // ["sm", "md", "lg"]
type CloseBtnSize

interface FieldStyleProps { horizontal?: boolean }
interface FieldLabelStyleProps {}
interface FieldRequiredStyleProps {}
interface FieldHelpStyleProps {}
interface FieldErrorStyleProps {}
interface FieldSuccessStyleProps {}
interface CloseBtnStyleProps { size?: CloseBtnSize }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
core.css	Token definitions
core.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (typography, spacing, colors, surfaces, transitions, elevation).

Build

npm run build