nova-design-model-testing 0.0.1 → 0.0.3

package/guidelines/components/action-sheet.md

@@ -0,0 +1,30 @@
+# action sheet
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/avatar.md

@@ -0,0 +1,30 @@
+# avatar
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/badge.md

@@ -0,0 +1,45 @@
+# Badge
+
+AI-ready documentation for numeric badge indicators.
+
+## Overview
+
+Badges surface counts or status at a glance. Use the small dot for subtle unread states and the large badge for numeric counts.
+
+## Anatomy
+
+- Container (pill shape)
+- Label (large size only)
+- Optional stroke
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Size | Small | Small, Large |
+| Label text | 1 | Any character (large only) |
+| Show stroke | false | true, false |
+
+## Layout & constraints
+
+- Small: 8px dot (no label).
+- Large: minimum 18px, padding 4px horizontal / 2px vertical.
+- Corner radius: 999 (pill/circle).
+- Typography (large): Inter Medium, 12px, line-height 100%.
+
+## Design tokens
+
+- Background: `badge/bg/default`
+- Text-on: `badge/text-on/default`
+- Stroke: `background/neutral/primary` (2px)
+
+## Usage guidelines
+
+- Use small badges for presence or unread indicators.
+- Use large badges for numeric counts (e.g., 1–99).
+- Avoid using badges as the only source of critical information.
+
+## Accessibility
+
+- Provide a text alternative that includes the count or status.
+- Ensure the badge meets contrast requirements against its container.

package/guidelines/components/bottom-navigation.md

@@ -0,0 +1,30 @@
+# Uottom navigation
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/bottom-sheet.md

@@ -0,0 +1,30 @@
+# Uottom sheet
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/button-group.md

@@ -0,0 +1,56 @@
+# Button group
+
+AI-ready documentation for grouped action stacks that combine up to four buttons.
+
+## Overview
+
+Button groups collect related actions into a single layout so users can scan and decide quickly. The group supports up to four slots (primary, secondary 1, secondary 2, text) and each slot can be hidden.
+
+## Anatomy
+
+- Group container
+- Primary button (optional)
+- Secondary button 1 (optional)
+- Secondary button 2 (optional)
+- Text button (optional)
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Layout | Vertical | Vertical, Horizontal, Horizontal Fill |
+| Show primary button | true | true, false |
+| Show secondary button 1 | true | true, false |
+| Show secondary button 2 | true | true, false |
+| Show text button | true | true, false |
+
+## Layout & constraints
+
+- Vertical: full-width stack with 16px spacing between buttons.
+- Horizontal: inline row with 12px spacing and centered alignment.
+- Horizontal fill: inline row where action buttons expand to fill available width.
+- Container padding: 20px horizontal, 8px vertical.
+- Text button wrapper (vertical): 20px horizontal, 12px vertical, 32px radius.
+
+## Usage guidelines
+
+- Use vertical groups for decision flows that require attention or multiple confirmations.
+- Use horizontal groups for compact toolbars or adjacent actions.
+- Hide secondary buttons when they are not relevant to reduce cognitive load.
+- Keep labels consistent across the group (sentence case, 1–3 words).
+
+## Behavior
+
+- Each button uses its own state rules (default, pressed, disabled, loading).
+- Disabled buttons use 20% opacity of their default colors.
+- Text button inherits the text-button styling (no background, no padding).
+
+## Accessibility
+
+- Ensure each button has a unique accessible label.
+- Preserve keyboard focus order from top-to-bottom or left-to-right.
+
+## Content guidelines
+
+- Use action verbs: “Continue”, “Save”, “Confirm”.
+- Avoid mixing unrelated actions in one group.

package/guidelines/components/button.md

@@ -0,0 +1,76 @@
+# Button
+
+AI-ready documentation for the standard button and FAB icon variant. Other variants (text, icon-only non-FAB) are intentionally excluded for now.
+
+## Overview
+
+Buttons trigger immediate actions in a flow. Use the normal button for primary or secondary actions that move a user forward.
+
+## Anatomy
+
+- Container
+- Label
+- Optional leading icon
+- Optional trailing icon
+- FAB icon (single icon only)
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Variant | Default | Default, FAB |
+| Size | Large | Small, Large |
+| Type | Primary | Primary, Secondary, Primary danger, Secondary danger |
+| Label text | Button | Any Unicode character |
+| Show leading icon | true | true, false |
+| Leading icon | arrow_narrow_right | any icon |
+| Show trailing icon | true | true, false |
+| Trailing icon | arrow_narrow_right | any icon |
+| FAB icon | - | any icon |
+
+## Layout & constraints (normal button)
+
+- Width: hug content (grows with label and icons).
+- Height: fixed by size token (Large = 56px, Small = 40px).
+- Padding: Large = 20px/16px, Small = 16px/8px.
+- Gap between items: `spacing-margin/xxs` (4px).
+- Corner radius: `corner-radius/xl` (32px).
+- Icon size: 24x24.
+
+## Layout & constraints (FAB icon)
+
+- Width/height: fixed square based on size token (Large = 56px, Small = 40px).
+- Padding: none (icon is centered).
+- Corner radius: 999 (fully rounded / circular).
+- Icon size: 24x24.
+
+## Design tokens (normal button, Primary / Default)
+
+- Background: `button/primary/bg-default` (#011FE5).
+- Text on background: `button/primary/text-on` (white).
+- Typography: `Inter/Semi Bold`, size `font/fontSize/base` (16px), line-height 100%, letter-spacing 0.
+
+## Usage guidelines
+
+- Use Primary for the main action in a view or section.
+- Use Secondary for supporting actions of lower emphasis.
+- Use danger types only for destructive or irreversible actions.
+- Keep label concise (1–3 words). Avoid wrapping where possible.
+
+## Behavior (normal button)
+
+- Default state is used for idle.
+- Pressed and disabled states must follow the design system tokens for the selected Type.
+- Loading state replaces label with a spinner (do not mix icons and spinner).
+
+## Accessibility
+
+- Must be keyboard focusable and trigger on Enter/Space.
+- Provide an accessible name that matches the visible label.
+- Ensure text-on contrast meets WCAG for the chosen background token.
+
+## Content guidelines
+
+- Use verb-first labels (e.g., “Confirm”, “Continue”, “Save”).
+- Avoid punctuation in button labels.
+- Use sentence case; do not use ALL CAPS.

package/guidelines/components/card.md

@@ -0,0 +1,30 @@
+# card
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/checkbox.md

@@ -0,0 +1,30 @@
+# checkUox
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/chips.md

@@ -0,0 +1,30 @@
+# chips
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/confirm-sheet.md

@@ -0,0 +1,30 @@
+# confirm sheet
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/date-picker.md

@@ -0,0 +1,30 @@
+# date picker
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/date-wheel.md

@@ -0,0 +1,30 @@
+# date wheel
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/icon.md

@@ -0,0 +1,29 @@
+# Icon
+
+Simple tinted icon component that reads assets from `src/assets/icons`.
+
+## Overview
+
+Use `Icon` to render a line or solid icon. Color comes from `colors.json`, and size is driven by the `sizes.json` tokens.
+
+## Props
+
+- `name`: icon name (default: `arrow_circle_right`)
+- `variant`: `"line"` | `"solid"` (default: `"line"`)
+- `size`: `"xxs"` | `"xs"` | `"md"` | `"lg"` | `"xl"` | `"2xl"` | `"3xl"` | `"4xl"` (default: `"xs"`)
+- `color`: `"<palette>.<tone>"` (default: `"oxfordBlue.900"`)
+
+## Tokens
+
+- Sizes: `size-xxs`, `size-xs`, `size-md`, `size-lg`, `size-xl`, `size-2xl`, `size-3xl`, `size-4xl` in `sizes.json`
+- Colors: `colors.json` (e.g., `botimBlue.900`, `oxfordBlue.600`)
+
+## Usage
+
+```jsx
+import Icon from './Icon'
+
+<Icon />
+<Icon name="coin_swap" variant="solid" color="botimBlue.900" />
+<Icon name="credit_card_edit" size="lg" color="engineeringRed.800" />
+```

package/guidelines/components/inline-notification.md

@@ -0,0 +1,30 @@
+# inline notification
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/list-item.md

@@ -0,0 +1,30 @@
+# list item
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/list.md

@@ -0,0 +1,30 @@
+# list
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/loading-indicator.md

@@ -0,0 +1,30 @@
+# loading indicator
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/menu.md

@@ -0,0 +1,57 @@
+# Menu item
+
+AI-ready documentation for a single menu row.
+
+## Overview
+
+Menu items represent a single action or destination inside a menu list. Use them in menus and action sheets for quick scanning.
+
+## Anatomy
+
+- Container (full-width row)
+- Label
+- Optional trailing icon
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Label text | Label | Any short label |
+| Show trailing icon | true | true, false |
+| State | Default | Default, Pressed, Error, Disabled |
+
+## Layout & constraints
+
+- Height: content-based with 16px padding.
+- Width: fills the menu container.
+- Gap between label and trailing icon: 12px.
+- Corner radius: 16px.
+- Trailing icon size: 24x24.
+
+## Menu container
+
+- Background: `background/neutral/action sheet`
+- Corner radius: 12px
+- Padding: 8px
+- Divider: `background/neutral/secondary` at 1px height
+- Shadow: 0 8px 22px rgba(157, 173, 197, 0.5) (dark mode uses a darker shadow)
+
+## Design tokens
+
+- Default text: `text icon/neutral/primary`
+- Pressed background: `background/neutral/secondary`
+- Disabled background: `button/secondary/bg-disabled`
+- Disabled text: `text icon/neutral/disabled`
+- Error text: `text icon/functional/danger`
+
+## Behavior
+
+- Default: transparent background.
+- Pressed: neutral secondary background.
+- Disabled: uses disabled background token and muted text.
+- Error: danger text color without background.
+
+## Accessibility
+
+- Keep labels short and descriptive.
+- Ensure the row is clickable with a clear focus state.