@net-advantage/jo-ui-chip

Chip and Badge marks.

Chip is a label that can stay static or become a toggle button. Badge is the compact count or status mark. Both follow MVVM. The model normalizes tone and labels. Each view-model projects render-ready state. Each view renders its view-model.

MVVM

flowchart LR
  ChipProps["ChipProps"] --> ChipViewModel["useChipViewModel"]
  BadgeProps["BadgeProps"] --> BadgeViewModel["useBadgeViewModel"]
  Model["jo-ui-chip.model.ts<br/>tone, class, badge label"] --> ChipViewModel
  Model --> BadgeViewModel
  ChipViewModel --> ChipView["Chip.tsx"]
  BadgeViewModel --> BadgeView["Badge.tsx"]
  ChipView -->|"onClick"| ChipViewModel

| Layer | File | Responsibility | | --- | --- | --- | | Contract | jo-ui-chip.types.ts | Chip and Badge props and view-models | | Model | jo-ui-chip.model.ts | Normalize tone, class names, and the badge label | | View-model | jo-ui-chip.view-model.ts | Framework-free chip observable; guard a disabled click | | View-model | badge.view-model.ts | Framework-free badge observable | | View | jo-ui-chip.use-view-model.ts | useChipViewModel reads that observable | | View | badge.use-view-model.ts | useBadgeViewModel reads that observable | | View | Chip.tsx | Render a span, or a button when onClick is set | | View | Badge.tsx | Render the badge |

Models

flowchart TD
  Tone["ChipTone"] --> ChipClass["chip class"]
  Tone --> BadgeClass["badge class"]
  Value["value or children"] --> Label["badge label"]
  ChipClass --> ChipViewModel["ChipViewModel"]
  BadgeClass --> BadgeViewModel["BadgeViewModel"]
  Label --> BadgeViewModel

• Tones are neutral, accent, success, and danger. A missing tone is neutral.
• A chip with onClick renders a button and sets aria-pressed from selected. A disabled chip does not call onClick.
• A badge shows value when it is present, including 0. An empty value falls back to children.
• Chip radius uses --jo-radius-control (12px). Badge radius uses --jo-radius-sm (6px).

Publish footprint

This package publishes dist and README.md.