@vsn-ux/gaia-styles 0.6.0 → 0.6.2

package/dist/docs/Container.md

@@ -0,0 +1,62 @@
+# Container Utilities
+
+Container utilities provide consistent layout margins across different screen sizes based on the Gaia Design System grid values.
+
+## Overview
+
+The container system follows a mobile-first approach with responsive margins that align with your grid system:
+
+<table>
+  <thead>
+    <tr>
+      <th>Breakpoint</th>
+      <th>Screen Size</th>
+      <th>Margin</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>XS</td>
+      <td>0-839px</td>
+      <td>16px</td>
+    </tr>
+    <tr>
+      <td>S</td>
+      <td>840-1439px</td>
+      <td>24px</td>
+    </tr>
+    <tr>
+      <td>M</td>
+      <td>1440-1919px</td>
+      <td>32px</td>
+    </tr>
+    <tr>
+      <td>L</td>
+      <td>1920-2559px</td>
+      <td>40px</td>
+    </tr>
+  </tbody>
+</table>
+
+## Usage
+
+### Responsive Container
+
+Use `ga-container` for a responsive container that automatically adjusts margins based on screen size:
+
+```html
+<div class="ga-container">
+  <h1>Your content here</h1>
+</div>
+```
+
+## Integration with Components
+
+These container utilities are designed to work seamlessly with other Gaia components:
+
+```html
+<div class="ga-container">
+  <button class="ga-button ga-button--primary">Primary Button</button>
+  <p class="ga-text-body">Text content</p>
+</div>
+```

package/dist/docs/Datepicker.md

@@ -0,0 +1,107 @@
+# Datepicker
+
+## Visual Structure
+
+```
+ga-datepicker
+  ├── ga-calendar...
+  └── ga-datepicker__footer
+ga-datepicker-toggle
+```
+
+## Elements Hierarchy
+
+### Core Blocks
+
+- `ga-datepicker` - Main container for the entire datepicker component
+- `ga-datepicker-toggle` - Icon button to toggle the visibility of the datepicker to be used inside an input field
+
+### Optional Elements
+
+- `ga-datepicker__footer` - Footer section with additional actions like "Today" button
+
+## Examples
+
+### Default
+
+```html
+<div class="ga-datepicker">
+  <div class="ga-calendar">
+    <div class="ga-calendar__header">
+      <div class="ga-calendar__month-year">
+        <button type="button" class="ga-calendar__month-year-button">
+          Sep
+          <!-- icon: chevron-down, size=16, class="ga-icon" -->
+        </button>
+        <button type="button" class="ga-calendar__month-year-button">
+          2025
+          <!-- icon: chevron-down, size=16, class="ga-icon" -->
+        </button>
+      </div>
+      <div class="ga-calendar__navigation">
+        <button type="button" class="ga-calendar__navigation-button">
+          <!-- icon: chevron-left, size=24, class="ga-icon" -->
+        </button>
+        <button type="button" class="ga-calendar__navigation-button">
+          <!-- icon: chevron-right, size=24, class="ga-icon" -->
+        </button>
+      </div>
+    </div>
+    <div class="ga-calendar__weekdays">
+      <div class="ga-calendar__weekday">Mo</div>
+      <div class="ga-calendar__weekday">Tu</div>
+      <div class="ga-calendar__weekday">We</div>
+      <div class="ga-calendar__weekday">Th</div>
+      <div class="ga-calendar__weekday">Fr</div>
+      <div class="ga-calendar__weekday">Sa</div>
+      <div class="ga-calendar__weekday">Su</div>
+    </div>
+    <div class="ga-calendar__selection ga-calendar__selection--day">
+      <div class="ga-calendar__day">1</div>
+      <div class="ga-calendar__day">2</div>
+      <div class="ga-calendar__day">3</div>
+      <div class="ga-calendar__day">4</div>
+      <div class="ga-calendar__day">5</div>
+      <div class="ga-calendar__day">6</div>
+      <div class="ga-calendar__day">7</div>
+      <div class="ga-calendar__day">8</div>
+      <div class="ga-calendar__day">9</div>
+      <div class="ga-calendar__day ga-calendar__day--special">10</div>
+      <div class="ga-calendar__day">11</div>
+      <div class="ga-calendar__day">12</div>
+      <div class="ga-calendar__day">13</div>
+      <div class="ga-calendar__day">14</div>
+      <div class="ga-calendar__day ga-calendar__day--current">15</div>
+      <div class="ga-calendar__day">16</div>
+      <div class="ga-calendar__day">17</div>
+      <div class="ga-calendar__day">18</div>
+      <div class="ga-calendar__day">19</div>
+      <div class="ga-calendar__day ga-calendar__day--selected">20</div>
+      <div class="ga-calendar__day">21</div>
+      <div class="ga-calendar__day">22</div>
+      <div class="ga-calendar__day">23</div>
+      <div class="ga-calendar__day">24</div>
+      <div class="ga-calendar__day">25</div>
+      <div class="ga-calendar__day">26</div>
+      <div class="ga-calendar__day">27</div>
+      <div class="ga-calendar__day">28</div>
+      <div class="ga-calendar__day">29</div>
+      <div class="ga-calendar__day">30</div>
+    </div>
+  </div>
+  <div class="ga-datepicker__footer text-center">
+    <button class="ga-button ga-button--secondary">Today</button>
+  </div>
+</div>
+```
+
+### Input
+
+```html
+<div class="ga-input">
+  <input type="text" value="2025-09-15" />
+  <button type="button" class="ga-datepicker-toggle">
+    <!-- icon: calendar-days, size=24 -->
+  </button>
+</div>
+```

package/dist/docs/Dropdown.md

@@ -0,0 +1,152 @@
+# Dropdown
+
+## Visual Structure
+
+```
+ga-dropdown
+  ├── ga-dropdown__caption (optional)
+  ├── ga-dropdown__empty (optional)
+  ├── ga-dropdown__spinner (optional)
+  └── ga-dropdown__item [--selected|--disabled|--active]
+      └── ga-dropdown__item-label
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-dropdown` - Main container for the entire dropdown component
+
+### Mandatory Elements
+
+- `ga-dropdown__item` - Individual clickable/interactive dropdown option
+- `ga-dropdown__item-label` - The primary text label identifying the dropdown action
+
+### Optional Elements
+
+- `ga-dropdown__caption` - The heading/title of the dropdown section
+- `ga-dropdown__empty` - Container for empty state content when no items are available
+- `ga-dropdown__spinner` - Container for loading spinner when fetching items
+
+### Modifiers
+
+- `ga-dropdown__item--selected` - Indicates the currently selected dropdown item
+- `ga-dropdown__item--disabled` - Styles the dropdown item as disabled/non-interactive
+- `ga-dropdown__item--disabled ga-dropdown__item--selected` - Combined state for a selected but disabled item
+- `ga-dropdown__item--active` - Indicates the dropdown item is currently active/focused through keyboard
+
+## Examples
+
+### Basic
+
+```html
+<div class="ga-dropdown">
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 1</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 2</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 3</div>
+  </button>
+</div>
+```
+
+### With Title
+
+```html
+<div class="ga-dropdown">
+  <div class="ga-dropdown__caption">Group A</div>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 1</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 2</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 3</div>
+  </button>
+</div>
+```
+
+### Statuses
+
+```html
+<div class="ga-dropdown">
+  <button class="ga-dropdown__item ga-dropdown__item--selected">
+    <div class="ga-dropdown__item-label">Selected</div>
+  </button>
+  <button class="ga-dropdown__item ga-dropdown__item--active">
+    <div class="ga-dropdown__item-label">Active (non focused)</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Default</div>
+  </button>
+  <button class="ga-dropdown__item ga-dropdown__item--disabled" disabled="">
+    <div class="ga-dropdown__item-label">Disabled</div>
+  </button>
+  <button
+    class="ga-dropdown__item ga-dropdown__item--disabled ga-dropdown__item--selected"
+    disabled=""
+  >
+    <div class="ga-dropdown__item-label">Disabled Selected</div>
+  </button>
+</div>
+```
+
+### Overflow
+
+```html
+<div class="ga-dropdown">
+  <div class="ga-dropdown__caption">Group A</div>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 1</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 2</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 3</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 4</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 5</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 6</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 7</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 8</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 9</div>
+  </button>
+  <button class="ga-dropdown__item">
+    <div class="ga-dropdown__item-label">Item 10</div>
+  </button>
+</div>
+```
+
+### Empty
+
+```html
+<div class="ga-dropdown">
+  <div class="ga-dropdown__empty">No items found</div>
+</div>
+```
+
+### Spinner
+
+```html
+<div class="ga-dropdown">
+  <div class="ga-dropdown__spinner">
+    <div class="bg-neutral-30 h-4 w-4 rounded-full"></div>
+  </div>
+</div>
+```

package/dist/docs/FormField.md

@@ -0,0 +1,101 @@
+# Form Field
+
+## Visual Structure
+
+```
+ga-form-field
+  ├── ga-form-field__label [--defined|--disabled]
+  │   ├── ga-form-field__label-text
+  │   └── ga-form-field__label-state (optional)
+  ├── [placeholder]
+  └── ga-form-field__info (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-form-field` - Main container for the entire form field component
+
+### Mandatory Elements
+
+- `ga-form-field__label` - Container for the label elements
+- `ga-form-field__label-text` - The text content of the form field label
+- `[placeholder]` - Insert form control here (e.g. `ga-input`, `ga-select`, etc.)
+
+### Optional Elements
+
+- `ga-form-field__label-state` - Additional text for the label (e.g., "optional")
+- `ga-form-field__info` - Container for additional information or validation messages
+
+### Modifiers
+
+- `ga-form-field__label--defined` - Styles the label text with a dotted underline and interactive colors
+- `ga-form-field__label--disabled` - Styles the label as disabled/non-interactive
+
+## Examples
+
+### Regular
+
+```html
+<div class="ga-form-field">
+  <label class="ga-form-field__label" for="input1">
+    <span class="ga-form-field__label-text">Label</span>
+  </label>
+  <div class="ga-input">
+    <input id="input1" type="text" placeholder="Text" />
+  </div>
+</div>
+```
+
+### With Info
+
+```html
+<div class="ga-form-field">
+  <label class="ga-form-field__label" for="input2">
+    <span class="ga-form-field__label-text">Label</span>
+  </label>
+  <div class="ga-input">
+    <input id="input2" type="text" placeholder="Text" />
+  </div>
+  <div class="ga-form-field__info">
+    <!-- icon: triangle-alert, size=16, class="ga-icon" -->
+    Use special characters if available.
+  </div>
+</div>
+```
+
+### Label With Definition
+
+```html
+<div class="ga-form-field">
+  <label
+    class="ga-form-field__label ga-form-field__label--defined"
+    for="input3"
+    tabindex="0"
+  >
+    <span class="ga-form-field__label-text">Label</span>
+    <span class="ga-form-field__label-state">(optional)</span>
+  </label>
+  <div class="ga-input">
+    <input id="input3" type="text" placeholder="Text" />
+  </div>
+</div>
+```
+
+### Disabled
+
+```html
+<div class="ga-form-field">
+  <label
+    class="ga-form-field__label ga-form-field__label--defined ga-form-field__label--disabled"
+    for="input4"
+  >
+    <span class="ga-form-field__label-text">Label</span>
+    <span class="ga-form-field__label-state">(optional)</span>
+  </label>
+  <div class="ga-input">
+    <input id="input4" type="text" placeholder="Text" disabled="" />
+  </div>
+</div>
+```

package/dist/docs/Input.md

@@ -0,0 +1,84 @@
+# Input
+
+## Visual Structure
+
+```
+ga-input [--invalid|--success]
+  ├── [icon prefix] (optional)
+  ├── input
+  └── [icon suffix] (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-input` - Main container for the entire input component
+
+### Mandatory Elements
+
+- `input` - The native HTML input element
+
+### Optional Elements
+
+- Icon prefix - An icon placed before the input text
+- Icon suffix - An icon placed after the input text
+
+### Modifiers
+
+- `ga-input--invalid` - Styles the input to indicate validation error
+- `ga-input--success` - Styles the input to indicate successful validation
+
+## Examples
+
+### Regular
+
+```html
+<div class="ga-input"><input type="text" placeholder="Placeholder" /></div>
+```
+
+### With Prefix Icon
+
+```html
+<div class="ga-input">
+  <!-- icon: mail, size=24 -->
+  <input type="text" placeholder="Placeholder" />
+</div>
+```
+
+### With Suffix Icon
+
+```html
+<div class="ga-input">
+  <input type="text" placeholder="Placeholder" />
+  <!-- icon: circle-x, size=16 -->
+</div>
+```
+
+### Disabled
+
+```html
+<div class="ga-input">
+  <input type="text" placeholder="Placeholder" disabled="" />
+</div>
+<div class="ga-input">
+  <input type="text" placeholder="Placeholder" disabled="" value="Filled" />
+</div>
+```
+
+### Invalid
+
+```html
+<div class="ga-input ga-input--invalid">
+  <input type="text" placeholder="Placeholder" />
+  <!-- icon: triangle-alert, size=24 -->
+</div>
+```
+
+### Success
+
+```html
+<div class="ga-input ga-input--success">
+  <input type="text" placeholder="Placeholder" />
+</div>
+```

package/dist/docs/Link.md

@@ -0,0 +1,109 @@
+# Link
+
+## Visual Structure
+
+```
+ga-link [--inline] [--small|--large|--disabled]
+    ├── ga-link__icon (optional)
+    ├── text
+    └── ga-link__icon (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-link` - Main container for the entire link component (default height size 20px)
+
+### Mandatory Elements
+
+- `text` - The text content of the link
+
+### Optional Elements
+
+- `ga-link__icon` - An icon placed before or after the link text
+
+### Modifiers
+
+- `ga-link--inline` - Link to be used inline with text
+- `ga-link--small` - Smaller sized link (16px)
+- `ga-link--large` - Larger sized link (24px)
+- `ga-link--disabled` - Styles the link as disabled/non-interactive
+
+## Examples
+
+### Default
+
+```html
+<a class="ga-link ga-link--small" href="#">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</a>
+<a class="ga-link" href="#">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</a>
+<a class="ga-link ga-link--large" href="#">
+  Link
+  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
+</a>
+```
+
+### Inline
+
+```html
+<a class="ga-link ga-link--inline ga-link--small" href="#">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</a>
+<a class="ga-link ga-link--inline" href="#">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</a>
+<a class="ga-link ga-link--inline ga-link--large" href="#">
+  Link
+  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
+</a>
+```
+
+### Disabled
+
+```html
+<span class="ga-link ga-link--small ga-link--disabled">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</span>
+<span class="ga-link ga-link--disabled">
+  Link
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+</span>
+<span class="ga-link ga-link--large ga-link--disabled">
+  Link
+  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
+</span>
+```
+
+### With leading icon
+
+```html
+<a class="ga-link ga-link--small" href="#">
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+  Link
+</a>
+<a class="ga-link" href="#">
+  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
+  Link
+</a>
+<a class="ga-link ga-link--large" href="#">
+  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
+  Link
+</a>
+```
+
+### Only text
+
+```html
+<a class="ga-link ga-link--small" href="#">Link</a>
+<a class="ga-link" href="#">Link</a>
+<a class="ga-link ga-link--large" href="#">Link</a>
+```