@vsn-ux/gaia-styles 0.6.7 → 0.6.8

package/dist/docs/Loader.md

@@ -0,0 +1,77 @@
+# Loader
+
+## Visual Structure
+
+### Block Loader
+
+```
+ga-loader [--small|--medium|--large]
+  ├── ga-loader__icon ga-loader__icon--animated
+  ├── ga-loader__icon ga-loader__icon--reduced-motion
+  └── ga-loader__label (optional, hidden when empty)
+```
+
+### Inline Loader
+
+```
+ga-inline-loading [--active|--completed|--error|--inactive]
+  ├── ga-inline-loading__icon (optional, displayed based on state)
+  └── text content
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-loader` - Main container for the loader component. Can be combined with a size modifier.
+
+### Child Elements
+
+- `ga-loader__icon` - The loading icon. Icon size is controlled by CSS based on the size modifier.
+- `ga-loader__icon--animated` - Animated spinner shown by default. Use the loader SVG from `@vsn-ux/gaia-styles/images/loader.svg`.
+- `ga-loader__icon--reduced-motion` - Non-animated `HourglassIcon` from `lucide-react`, shown when `prefers-reduced-motion: reduce` is active.
+- `ga-loader__label` - Text displayed below the loader to provide context (optional, automatically hidden when empty)
+
+### Size Modifiers
+
+- `ga-loader--small` - Small size loader
+- `ga-loader--medium` - Medium size loader, default
+- `ga-loader--large` - Large size loader
+
+## Inline Loading
+
+### Core Block
+
+- `ga-inline-loading` - Main container for inline loading component. Must be combined with a state modifier.
+
+### State Modifier Classes (on ga-inline-loading)
+
+- `ga-inline-loading--active` - Active loading state with animated spinner icon
+- `ga-inline-loading--completed` - Completed state with green CircleCheck icon
+- `ga-inline-loading--error` - Error state with red OctagonAlert icon
+- `ga-inline-loading--inactive` - Inactive state with disabled text color
+
+### Child Elements
+
+- `ga-inline-loading__icon` - The inline loading icon
+- Text content - Inline text next to the icon
+
+## Examples
+
+### Default
+
+### Small
+
+### Large
+
+### Without Label
+
+## Inline Loading Examples
+
+### Inline Loading Active
+
+### Inline Loading Completed
+
+### Inline Loading Error
+
+### Inline Loading Inactive

package/dist/docs/QuantitySelector.md

@@ -0,0 +1,96 @@
+# Quantity Selector
+
+## Visual Structure
+
+```
+ga-input ga-input--quantity-selector
+  ├── input
+  ├── ga-input__quantity-button (decrease)
+  ├── ga-input__quantity-separator
+  └── ga-input__quantity-button (increase)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-input ga-input--quantity-selector` - Quantity selector variant of the input component. Use `ga-input` for the outer input border/state styling.
+
+### Mandatory Elements
+
+- `input` - The native HTML input element (use `type="number"` or `type="text"`)
+- `ga-input__quantity-button` - Buttons for decreasing and increasing the value (use lucide `MinusIcon` and `PlusIcon`)
+- `ga-input__quantity-separator` - A 1px vertical line separator between the buttons
+
+### Modifiers
+
+- `ga-input--quantity-selector` - Styles the input as a quantity selector
+- Use native `disabled` attributes on the input and buttons for disabled state
+
+## Examples
+
+### Default
+
+```html
+<div class="ga-input ga-input--quantity-selector">
+  <input type="number" value="1" />
+  <button type="button" class="ga-input__quantity-button">
+    <!-- icon: minus, size=16 -->
+  </button>
+  <div class="ga-input__quantity-separator"></div>
+  <button type="button" class="ga-input__quantity-button">
+    <!-- icon: plus, size=16 -->
+  </button>
+</div>
+```
+
+### Disabled Button
+
+```html
+<div class="ga-input ga-input--quantity-selector">
+  <input type="number" value="0" />
+  <button type="button" class="ga-input__quantity-button" disabled="">
+    <!-- icon: minus, size=16 -->
+  </button>
+  <div class="ga-input__quantity-separator"></div>
+  <button type="button" class="ga-input__quantity-button">
+    <!-- icon: plus, size=16 -->
+  </button>
+</div>
+```
+
+### Disabled Input
+
+```html
+<div class="ga-input ga-input--quantity-selector">
+  <input type="number" placeholder="" disabled="" />
+  <button type="button" class="ga-input__quantity-button" disabled="">
+    <!-- icon: minus, size=16 -->
+  </button>
+  <div class="ga-input__quantity-separator"></div>
+  <button type="button" class="ga-input__quantity-button" disabled="">
+    <!-- icon: plus, size=16 -->
+  </button>
+</div>
+```
+
+### Form Field Error
+
+```html
+<div class="ga-form-field">
+  <div class="ga-input ga-input--invalid ga-input--quantity-selector">
+    <input type="number" value="0" />
+    <button type="button" class="ga-input__quantity-button">
+      <!-- icon: minus, size=16 -->
+    </button>
+    <div class="ga-input__quantity-separator"></div>
+    <button type="button" class="ga-input__quantity-button">
+      <!-- icon: plus, size=16 -->
+    </button>
+  </div>
+  <div class="ga-form-field__info">
+    <!-- icon: triangle-alert, size=16, class="ga-icon" -->
+    Hour entry cannot be zero.
+  </div>
+</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -21,6 +21,7 @@
     "./tailwindcss/components.css": "./src/styles/components.css",
     "./design-tokens.json": "./src/design-tokens/dtcg-tokens.json",
     "./font/*": "./src/font/*",
+    "./images/*": "./src/images/*",
     "./integrations/ag-grid": {
       "types": "./dist/integrations/ag-grid.d.mts",
       "default": "./dist/integrations/ag-grid.mjs"
@@ -68,6 +69,7 @@
     "dist/",
     "src/design-tokens/",
     "src/font/",
+    "src/images/",
     "src/styles/"
   ],
   "publishConfig": {

package/src/images/loader.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM3.19967 8C3.19967 10.6511 5.34885 12.8003 8 12.8003C10.6511 12.8003 12.8003 10.6511 12.8003 8C12.8003 5.34885 10.6511 3.19967 8 3.19967C5.34885 3.19967 3.19967 5.34885 3.19967 8Z" fill="var(--ga-color-secondary, #FAE0CE)" />
+  <path d="M1.6 8C0.716345 8 -0.0160989 7.27665 0.159468 6.41061C0.386051 5.29292 0.8503 4.2303 1.52786 3.29772C2.52089 1.93094 3.92112 0.913611 5.52787 0.391547C7.13461 -0.130516 8.86539 -0.130516 10.4721 0.391549C11.5685 0.747766 12.5686 1.33456 13.4089 2.10561C14.06 2.70306 13.8926 3.71878 13.1777 4.23818C12.4628 4.75758 11.4711 4.56892 10.7464 4.06333C10.3609 3.79443 9.93576 3.58195 9.48328 3.43493C8.51923 3.12169 7.48077 3.12169 6.51672 3.43493C5.55267 3.74817 4.71253 4.35856 4.11672 5.17863C3.83707 5.56353 3.61799 5.98535 3.46421 6.42944C3.17509 7.26446 2.48366 8 1.6 8Z" fill="var(--ga-color-primary-70, #2A6480)" />
+</svg>

package/src/styles/components/file-uploader.css

@@ -0,0 +1,95 @@
+.ga-file-uploader {
+  @apply flex flex-col gap-4;
+
+  .ga-file-uploader__heading {
+    @apply flex flex-1 flex-col gap-1;
+
+    .ga-file-uploader__heading-label {
+      @apply text-md align-middle font-medium;
+    }
+
+    .ga-file-uploader__heading-description {
+      @apply text-sm font-normal;
+    }
+  }
+
+  .ga-button {
+    @apply w-fit;
+  }
+
+  .ga-file-uploader__heading {
+    @apply text-(--ga-color-text-body);
+  }
+
+  &.ga-file-uploader--disabled .ga-file-uploader__heading {
+    @apply text-(--ga-color-text-disable-selected);
+  }
+
+  .ga-file-uploader__file-list {
+    @apply flex flex-1 flex-col gap-2;
+
+    .ga-file-uploader__file-item {
+      @apply text-md flex h-10 max-w-[58rem] min-w-[22rem] items-center justify-between rounded bg-(--ga-color-surface-disabled) px-2 py-1 font-normal text-(--ga-color-text-body);
+
+      .ga-file-uploader__file-action {
+        @apply flex h-4 w-4 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-(--ga-color-icon-action);
+
+        &:focus-visible {
+          @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+        }
+      }
+
+      .ga-file-uploader__file-icon {
+        @apply h-4 w-4;
+      }
+
+      &.ga-file-uploader__file-item--success {
+        .ga-file-uploader__file-icon {
+          @apply text-(--ga-color-icon-success);
+        }
+      }
+
+      &.ga-file-uploader__file-item--error {
+        @apply h-auto flex-col items-start gap-2 border border-(--ga-color-border-error) bg-(--ga-color-surface-error) outline outline-(--ga-color-border-error);
+
+        .ga-file-uploader__error-file {
+          @apply flex w-full items-center justify-between leading-6;
+        }
+
+        .ga-file-uploader__error-callout {
+          @apply flex flex-row items-center gap-1 align-middle text-xs font-normal;
+
+          .ga-file-uploader__error-callout-icon {
+            @apply h-4 w-4 text-(--ga-color-icon-error);
+          }
+        }
+      }
+    }
+  }
+
+  .ga-file-uploader__input {
+    @apply sr-only;
+  }
+
+  .ga-file-uploader__dropzone {
+    @apply text-md flex min-h-[6.25rem] flex-1 items-center justify-center rounded border border-dashed border-(--ga-color-border-action) p-8 text-center font-normal text-(--ga-color-text-action);
+
+    &:hover {
+      @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
+    }
+
+    &:focus-visible,
+    &:focus-within {
+      @apply border-none outline-2 outline-(--ga-color-border-focus) outline-solid;
+    }
+
+    &.ga-file-uploader__dropzone--drag-hover {
+      @apply border-none bg-(--ga-color-surface-page) text-(--ga-color-text-action-hover) outline-2 outline-(--ga-color-border-focus) outline-solid;
+    }
+  }
+
+  .ga-file-uploader__dropzone[aria-disabled='true'],
+  &.ga-file-uploader--disabled .ga-file-uploader__dropzone {
+    @apply cursor-not-allowed border-(--ga-color-border-disabled) bg-(--ga-color-surface-primary) text-(--ga-color-text-disabled);
+  }
+}

package/src/styles/components/loader.css

@@ -0,0 +1,108 @@
+.ga-loader {
+  @apply flex flex-col items-center justify-center gap-2;
+
+  &.ga-loader--small {
+    @apply text-xs;
+
+    .ga-loader__icon {
+      @apply h-4 w-4;
+    }
+  }
+
+  &.ga-loader--medium {
+    @apply text-sm;
+
+    .ga-loader__icon {
+      @apply h-8 w-8;
+    }
+  }
+
+  &.ga-loader--large {
+    @apply text-md;
+
+    .ga-loader__icon {
+      @apply h-16 w-16;
+    }
+  }
+
+  .ga-loader__icon--animated {
+    @apply animate-[ga-loader-animation_1100ms_linear_infinite];
+  }
+
+  .ga-loader__icon--reduced-motion {
+    @apply hidden text-(--ga-color-icon-primary);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ga-loader__icon--animated {
+      @apply hidden;
+    }
+
+    .ga-loader__icon--reduced-motion {
+      @apply block;
+    }
+  }
+
+  .ga-loader__label {
+    @apply text-(--ga-color-text-body);
+
+    &:empty {
+      @apply hidden;
+    }
+  }
+}
+
+.ga-inline-loading {
+  @apply flex flex-row items-center gap-1 text-sm text-(--ga-color-text-body);
+
+  &.ga-inline-loading--active {
+    .ga-inline-loading__icon {
+      @apply h-4 w-4 animate-[ga-loader-animation_1100ms_linear_infinite];
+    }
+  }
+
+  &.ga-inline-loading--completed {
+    .ga-inline-loading__icon {
+      @apply text-(--ga-color-icon-success);
+    }
+  }
+
+  &.ga-inline-loading--error {
+    .ga-inline-loading__icon {
+      @apply text-(--ga-color-icon-error);
+    }
+  }
+
+  &.ga-inline-loading--inactive {
+    @apply text-(--ga-color-text-disable-selected);
+  }
+
+  .ga-inline-loading__icon {
+    @apply h-4 w-4;
+  }
+}
+
+@keyframes ga-loader-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  31.82% {
+    /* 350ms / 1100ms */
+    transform: rotate(90deg);
+  }
+
+  63.64% {
+    /* (350ms + 350ms) / 1100ms */
+    transform: rotate(180deg);
+  }
+
+  81.82% {
+    /* (350ms + 350ms + 200ms) / 1100ms */
+    transform: rotate(270deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/components/quantity-selector.css

@@ -0,0 +1,45 @@
+.ga-input--quantity-selector {
+  @apply w-40 px-2;
+
+  &:has(input:disabled):has(input:not(:placeholder-shown)) {
+    .ga-input__quantity-separator {
+      @apply bg-(--ga-color-text-on-action);
+    }
+
+    .ga-input__quantity-button {
+      @apply text-(--ga-color-text-on-action);
+    }
+  }
+
+  input {
+    @apply min-w-0 flex-1 bg-transparent px-2 leading-6 outline-none;
+
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  .ga-input__quantity-separator {
+    @apply h-6 w-px bg-(--ga-color-border-disabled);
+  }
+
+  .ga-input__quantity-button {
+    @apply flex w-6 shrink-0 cursor-pointer items-center justify-center bg-transparent p-1;
+
+    &:hover:not(:disabled) {
+      @apply rounded bg-(--ga-color-surface-action-hover-2) outline-1 outline-(--ga-color-border-action-hover);
+    }
+
+    &:focus-visible {
+      @apply rounded outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+    }
+
+    &:disabled {
+      @apply cursor-not-allowed bg-transparent text-(--ga-color-text-disabled);
+    }
+  }
+}

package/src/styles/components.css

@@ -8,8 +8,10 @@
 @import './components/container.css';
 @import './components/datepicker.css';
 @import './components/dropdown.css';
+@import './components/file-uploader.css';
 @import './components/form-field.css';
 @import './components/input.css';
+@import './components/loader.css';
 @import './components/notification.css';
 @import './components/menu.css';
 @import './components/modal.css';
@@ -26,5 +28,6 @@
 @import './components/text-size.css';
 @import './components/tooltip.css';
 @import './components/link.css';
+@import './components/quantity-selector.css';
 @import './components/quick-filter-button.css';
 @import './components/side-navigation.css';