@vsn-ux/gaia-styles 0.6.0 → 0.6.1

package/dist/docs/Tag.md

@@ -0,0 +1,154 @@
+# Tag
+
+## Visual Structure
+
+```
+ga-tag [--information|--success|--error|--warning|--disabled|--interactive|--interactive-disabled|--interactive-selected|--interactive-selected-disabled|--utility-*]
+  ├── ga-tag__icon (optional)
+  ├── ga-tag__label
+  ├── ga-tag__separator (optional)
+  └── ga-tag__icon (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-tag` - Main container for the tag component
+
+### Mandatory Elements
+
+- `ga-tag__label` - Text content of the tag
+
+### Optional Elements
+
+- `ga-tag__icon` - Icons that can appear before or after the label
+- `ga-tag__separator` - Visual divider between content elements
+
+### Modifiers
+
+#### Status Variants
+
+- `ga-tag--information` - Styles the tag with information colors
+- `ga-tag--success` - Styles the tag with success colors
+- `ga-tag--error` - Styles the tag with error colors
+- `ga-tag--warning` - Styles the tag with warning colors
+- `ga-tag--disabled` - Styles the tag as disabled
+
+#### Interactive Variants
+
+- `ga-tag--interactive` - Makes tag clickable with dashed border
+- `ga-tag--interactive-disabled` - Disabled version of interactive tag
+- `ga-tag--interactive-selected` - Selected state for interactive tag
+- `ga-tag--interactive-selected-disabled` - Disabled version of selected tag
+
+#### Utility Color Variants
+
+- `ga-tag--utility-grey` - Grey color theme
+- `ga-tag--utility-indigo` - Indigo color theme
+- `ga-tag--utility-teal` - Teal color theme
+- `ga-tag--utility-lime` - Lime color theme
+- `ga-tag--utility-purple` - Purple color theme
+- `ga-tag--utility-pink` - Pink color theme
+- `ga-tag--utility-rose` - Rose color theme
+- `ga-tag--utility-blue` - Blue color theme
+- `ga-tag--utility-green` - Green color theme
+- `ga-tag--utility-orange` - Orange color theme
+- `ga-tag--utility-disabled` - Disabled state for utility tags
+
+## Examples
+
+### Regular Status Tags
+
+```html
+<div class="ga-tag ga-tag--success">
+  <!-- icon: circle-check, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Success</span>
+</div>
+<div class="ga-tag ga-tag--warning">
+  <!-- icon: triangle-alert, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Warning</span>
+</div>
+<div class="ga-tag ga-tag--information">
+  <!-- icon: info, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Information</span>
+</div>
+<div class="ga-tag ga-tag--error">
+  <!-- icon: octagon-alert, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Error</span>
+</div>
+<div class="ga-tag ga-tag--disabled">
+  <!-- icon: circle-check, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Disabled</span>
+</div>
+```
+
+### Interactive Tags
+
+```html
+<div tabindex="0" class="ga-tag ga-tag--interactive">
+  <!-- icon: plus, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Default</span>
+</div>
+<div class="ga-tag ga-tag--interactive">
+  <span class="ga-tag__label">With separator</span>
+  <div class="ga-tag__separator"></div>
+  <!-- icon: x, size=16, class="ga-tag__icon" -->
+</div>
+<div class="ga-tag ga-tag--interactive-disabled">
+  <!-- icon: plus, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Disabled</span>
+</div>
+<div tabindex="0" class="ga-tag ga-tag--interactive-selected">
+  <!-- icon: plus, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Selected</span>
+</div>
+<div class="ga-tag ga-tag--interactive-selected-disabled">
+  <!-- icon: plus, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Selected disabled</span>
+</div>
+```
+
+### Utility Color Tags
+
+```html
+<div tabindex="0" class="ga-tag ga-tag--utility-grey">
+  <!-- icon: plus, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">Default</span>
+</div>
+<div tabindex="0" class="ga-tag ga-tag--utility-grey">
+  <!-- icon: truck, size=16, class="ga-tag__icon" -->
+  <span class="ga-tag__label">With icons</span>
+  <!-- icon: chevrons-up-down, size=16, class="ga-tag__icon" -->
+</div>
+<div class="ga-tag ga-tag--utility-indigo">
+  <span class="ga-tag__label">Indigo</span>
+</div>
+<div class="ga-tag ga-tag--utility-teal">
+  <span class="ga-tag__label">Teal</span>
+</div>
+<div class="ga-tag ga-tag--utility-lime">
+  <span class="ga-tag__label">Lime</span>
+</div>
+<div class="ga-tag ga-tag--utility-purple">
+  <span class="ga-tag__label">Purple</span>
+</div>
+<div class="ga-tag ga-tag--utility-pink">
+  <span class="ga-tag__label">Pink</span>
+</div>
+<div class="ga-tag ga-tag--utility-rose">
+  <span class="ga-tag__label">Rose</span>
+</div>
+<div class="ga-tag ga-tag--utility-blue">
+  <span class="ga-tag__label">Blue</span>
+</div>
+<div class="ga-tag ga-tag--utility-green">
+  <span class="ga-tag__label">Green</span>
+</div>
+<div class="ga-tag ga-tag--utility-orange">
+  <span class="ga-tag__label">Orange</span>
+</div>
+<div class="ga-tag ga-tag--utility-disabled">
+  <span class="ga-tag__label">Disabled</span>
+</div>
+```

package/dist/docs/TextArea.md

@@ -0,0 +1,51 @@
+# Text Area
+
+## Visual Structure
+
+```
+ga-text-area [--invalid]
+  └── textarea
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-text-area` - Main container for the text area component
+
+### Mandatory Elements
+
+- `textarea` - The native HTML textarea element
+
+### Modifiers
+
+- `ga-text-area--invalid` - Styles the text area to indicate a validation error
+
+## Examples
+
+### Regular
+
+```html
+<textarea class="ga-text-area" rows="5" placeholder="Placeholder"></textarea>
+```
+
+### Disabled
+
+```html
+<textarea
+  class="ga-text-area"
+  rows="5"
+  placeholder="Placeholder"
+  disabled=""
+></textarea>
+```
+
+### Invalid
+
+```html
+<textarea
+  class="ga-text-area ga-text-area--invalid"
+  rows="5"
+  placeholder="Placeholder"
+></textarea>
+```

package/dist/docs/TextSize.md

@@ -0,0 +1,63 @@
+# Text Size
+
+Text size utilities provide a consistent set of typography scales for text elements. These utilities handle three key aspects of typography: **font size**, **line height**, and **letter spacing** to ensure optimal readability across all text scales.
+
+> **Note:** Font weight and font style (italic, bold) are intentionally not included in these utilities. These stylistic properties should be applied separately using appropriate CSS classes or inline styles based on the specific context and semantic meaning of your content.
+
+## Visual Structure
+
+```
+ga-text-[helper|caption|body|heading|title|headline|display]
+```
+
+## Available Classes
+
+- `ga-text-helper` - Helper text (xs)
+- `ga-text-caption` - Caption text (sm)
+- `ga-text-body` - Body text (md, default body size)
+- `ga-text-heading` - Heading text (lg)
+- `ga-text-title` - Title text (xl, responsive)
+- `ga-text-headline` - Headline text (2xl, responsive)
+- `ga-text-display` - Display text (3xl, responsive)
+
+## Responsive Typography
+
+The `title`, `headline`, and `display` sizes are responsive — they use smaller values on mobile and scale up at the desktop breakpoint (≥768px). This ensures large text remains readable on small screens without manual overrides.
+
+## Usage
+
+Text size utilities can be applied to any text element to override the default font size:
+
+```html
+<p class="ga-text-caption">Small paragraph text</p>
+<h2 class="ga-text-title">Large heading</h2>
+<span class="ga-text-helper">Fine print or metadata</span>
+```
+
+## Examples
+
+```html
+<div class="space-y-4">
+  <div class="ga-text-helper">
+    Helper - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-caption">
+    Caption - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-body">
+    Body - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-heading">
+    Heading - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-title">
+    Title - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-headline">
+    Headline - The quick brown fox jumps over the lazy dog
+  </div>
+  <div class="ga-text-display">
+    Display - The quick brown fox jumps over the lazy dog
+  </div>
+</div>
+```

package/dist/docs/Tooltip.md

@@ -0,0 +1,95 @@
+# Tooltip
+
+## Visual Structure
+
+```
+ga-tooltip [--{position}-{alignment}]
+  └── ga-tooltip__title (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-tooltip` - Main container for the tooltip component
+
+### Optional Elements
+
+- `ga-tooltip__title` - Title of the tooltip
+
+### Position Modifiers
+
+- **Top positions**
+
+  - `ga-tooltip--top-start` - Positioned above target, aligned to left
+  - `ga-tooltip--top-center` - Positioned above target, centered horizontally
+  - `ga-tooltip--top-end` - Positioned above target, aligned to right
+
+- **Bottom positions**
+
+  - `ga-tooltip--bottom-start` - Positioned below target, aligned to left
+  - `ga-tooltip--bottom-center` - Positioned below target, centered horizontally
+  - `ga-tooltip--bottom-end` - Positioned below target, aligned to right
+
+- **Left positions**
+
+  - `ga-tooltip--left-start` - Positioned to left of target, aligned to top
+  - `ga-tooltip--left-center` - Positioned to left of target, centered vertically
+  - `ga-tooltip--left-end` - Positioned to left of target, aligned to bottom
+
+- **Right positions**
+  - `ga-tooltip--right-start` - Positioned to right of target, aligned to top
+  - `ga-tooltip--right-center` - Positioned to right of target, centered vertically
+  - `ga-tooltip--right-end` - Positioned to right of target, aligned to bottom
+
+## Examples
+
+### Top Positions
+
+```html
+<div class="ga-tooltip ga-tooltip--top-start">Tooltip content</div>
+<div class="ga-tooltip ga-tooltip--top-center">Tooltip content</div>
+<div class="ga-tooltip ga-tooltip--top-end">Tooltip content</div>
+```
+
+### Bottom Positions
+
+```html
+<div class="ga-tooltip ga-tooltip--bottom-start">Tooltip content</div>
+<div class="ga-tooltip ga-tooltip--bottom-center">Tooltip content</div>
+<div class="ga-tooltip ga-tooltip--bottom-end">Tooltip content</div>
+```
+
+### Left Positions (With Title)
+
+```html
+<div class="ga-tooltip ga-tooltip--left-start">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+<div class="ga-tooltip ga-tooltip--left-center">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+<div class="ga-tooltip ga-tooltip--left-end">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+```
+
+### Right Positions (With Title)
+
+```html
+<div class="ga-tooltip ga-tooltip--right-start">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+<div class="ga-tooltip ga-tooltip--right-center">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+<div class="ga-tooltip ga-tooltip--right-end">
+  <div class="ga-tooltip__title">Tooltip title</div>
+  <div>Tooltip content</div>
+</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -9,6 +9,7 @@
     "build-tokens": "tz build",
     "build-storybook": "storybook build",
     "build-lib": "node ./build-component-styles.js --clean",
+    "build-docs": "tsx --tsconfig tsconfig.app.json build-docs.js",
     "commitlint": "commitlint --edit",
     "prepare": "husky"
   },
@@ -51,6 +52,7 @@
     "storybook": "10.3.0",
     "storybook-addon-pseudo-states": "10.3.0",
     "tailwindcss": "^4.2.2",
+    "tsx": "^4.21.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.1",
     "vite": "^8.0.1"