@raintonic/formaui 0.2.0 → 0.2.1

package/llms-full.txt

@@ -178,7 +178,7 @@ No public inputs or outputs.
 
 ## button
 
-A versatile button directive for triggering user actions. Supports multiple visual variants, sizes, loading states, and icon-only mode. Works on both `<button>` and `<a>` elements.
+A versatile button directive that can be applied to both `<button>` and `<a>` elements. Follows Carbon Design System patterns with full accessibility support.
 
 - **Import**: `import { FuiButtonDirective } from 'formaui/components/button'`
 - **Selector**: `button[fuiButton], a[fuiButton]`
@@ -196,40 +196,6 @@ A versatile button directive for triggering user actions. Supports multiple visu
 | aria-label | string | null | null | no |
 | type | ButtonType | 'button' | no |
 
-### Usage
-
-```html
-<!-- Primary button -->
-<button fuiButton>Click me</button>
-
-<!-- Button with variant and size -->
-<button fuiButton variant="secondary" size="lg">Large Secondary</button>
-
-<!-- Danger button for destructive actions -->
-<button fuiButton variant="danger">Delete</button>
-
-<!-- Loading state -->
-<button fuiButton [loading]="isLoading">Save</button>
-
-<!-- Icon-only button -->
-<button fuiButton variant="icon" iconOnly aria-label="Settings">
-  <fui-icon name="settings" />
-</button>
-
-<!-- Link button -->
-<a fuiButton variant="link" href="/dashboard">Go to Dashboard</a>
-
-<!-- Full-width button -->
-<button fuiButton fullWidth>Full Width Action</button>
-```
-
-### Notes
-
-- Use `variant="danger"` only for destructive actions (delete, remove, etc.)
-- Always provide `aria-label` on icon-only buttons for accessibility
-- The `loading` state automatically disables the button and shows a spinner
-- On `<a>` elements, the `disabled` state removes the `href` attribute
-
 ---
 
 ## button-group
@@ -477,7 +443,7 @@ A file upload component with drag-and-drop support, file previews, and validatio
 
 ## form-field
 
-A wrapper component that provides consistent layout, labeling, validation, and accessibility for form controls. Works with any component implementing the `FuiFormFieldControl` interface (select, input, date-picker, etc.).
+A form field wrapper component that provides consistent styling and behavior for form controls. Follows Angular Material patterns with Carbon Design System styling.
 
 - **Import**: `import { FuiFormFieldComponent } from 'formaui/components/form-field'`
 - **Selector**: `fui-form-field`
@@ -488,33 +454,6 @@ A wrapper component that provides consistent layout, labeling, validation, and a
 |------|------|---------|----------|
 | appearance | FormFieldAppearance | 'outline' | no |
 
-### Usage
-
-```html
-<!-- Basic form field with input -->
-<fui-form-field>
-  <fui-label>Email</fui-label>
-  <input fuiInput type="email" [formControl]="emailControl" />
-  <fui-hint>We'll never share your email</fui-hint>
-  <fui-error>Please enter a valid email</fui-error>
-</fui-form-field>
-
-<!-- Form field with prefix and suffix -->
-<fui-form-field>
-  <fui-label>Price</fui-label>
-  <span fuiPrefix>$</span>
-  <input fuiInput type="number" [formControl]="priceControl" />
-  <span fuiSuffix>.00</span>
-</fui-form-field>
-```
-
-### Notes
-
-- `fui-error` is shown only when the form control is in an error state
-- `fui-hint` is hidden when an error is displayed
-- Use `fuiPrefix` and `fuiSuffix` directives on any element for adornments
-- The form field automatically associates the label with the control for accessibility
-
 ### Sub-components
 
 #### FuiErrorComponent
@@ -855,7 +794,7 @@ A progress bar component compatible with Angular Material's mat-progress-bar int
 
 ## select
 
-A dropdown select component for single or multiple selection. Designed to work inside `fui-form-field` with full Reactive Forms support, keyboard navigation, and type-ahead search.
+A select component designed to work seamlessly with fui-form-field. Similar to Angular Material's mat-select integration with mat-form-field. Provides full Reactive Forms support with validation and error handling.
 
 - **Import**: `import { FuiSelectComponent } from 'formaui/components/select'`
 - **Selector**: `fui-select`
@@ -874,39 +813,6 @@ A dropdown select component for single or multiple selection. Designed to work i
 | selectionChange | FuiSelectChange |
 | openedChange | boolean |
 
-### Usage
-
-```html
-<!-- Basic select inside form-field -->
-<fui-form-field>
-  <fui-label>Country</fui-label>
-  <fui-select placeholder="Choose a country" [formControl]="countryControl">
-    <fui-option value="us">United States</fui-option>
-    <fui-option value="uk">United Kingdom</fui-option>
-    <fui-option value="de">Germany</fui-option>
-  </fui-select>
-  <fui-error>Country is required</fui-error>
-</fui-form-field>
-
-<!-- Multiple selection -->
-<fui-form-field>
-  <fui-label>Tags</fui-label>
-  <fui-select multiple [formControl]="tagsControl">
-    <fui-option value="angular">Angular</fui-option>
-    <fui-option value="react">React</fui-option>
-    <fui-option value="vue">Vue</fui-option>
-  </fui-select>
-</fui-form-field>
-```
-
-### Notes
-
-- Always wrap in `fui-form-field` for label, error, and hint support
-- Options are projected as `<fui-option>` child elements
-- Supports keyboard navigation: Arrow keys, Home/End, Enter/Space, Escape
-- Type-ahead search: start typing to jump to matching options
-- Use `compareWith` input for custom object comparison
-
 ### Sub-components
 
 #### FuiOptionComponent

package/llms.txt

@@ -15,7 +15,7 @@ npm install formaui
 - badge: No description available. `import { FuiBadgeComponent } from 'formaui/components/badge'`
 - big-menu: No description available. `import { FuiBigMenuComponent } from 'formaui/components/big-menu'`
 - breadcrumb: No description available. `import { FuiBreadcrumbComponent } from 'formaui/components/breadcrumb'`
-- button: A versatile button directive for triggering user actions. Supports multiple visual variants, sizes, loading states, and  `import { FuiButtonDirective } from 'formaui/components/button'`
+- button: A versatile button directive that can be applied to both `<button>` and `<a>` elements. Follows Carbon Design System pat `import { FuiButtonDirective } from 'formaui/components/button'`
 - button-group: A container component that groups multiple buttons together, creating a unified visual element with connected borders. F `import { FuiButtonGroupComponent } from 'formaui/components/button-group'`
 - card: A flexible container component following Carbon Design System patterns. Provides a structured layout with optional heade `import { FuiCardComponent } from 'formaui/components/card'`
 - checkbox: A checkbox component with full Angular Reactive Forms support. Compatible with Angular Material's mat-checkbox interface `import { FuiCheckboxComponent } from 'formaui/components/checkbox'`
@@ -26,7 +26,7 @@ npm install formaui
 - dynamic-form: A component that automatically renders forms based on a JSON configuration. It takes a FormGroup and a configuration obj `import { FuiDynamicFormRendererComponent } from 'formaui/components/dynamic-form'`
 - empty-state: No description available. `import { FuiEmptyStateComponent } from 'formaui/components/empty-state'`
 - file-upload: A file upload component with drag-and-drop support, file previews, and validation. `import { FuiFileUploadComponent } from 'formaui/components/file-upload'`
-- form-field: A wrapper component that provides consistent layout, labeling, validation, and accessibility for form controls. Works wi `import { FuiFormFieldComponent } from 'formaui/components/form-field'`
+- form-field: A form field wrapper component that provides consistent styling and behavior for form controls. Follows Angular Material `import { FuiFormFieldComponent } from 'formaui/components/form-field'`
 - icon: A wrapper component for Phosphor Icons with consistent sizing and styling. Provides easy access to the complete Phosphor `import { FuiIconComponent } from 'formaui/components/icon'`
 - input: An input directive that integrates seamlessly with fui-form-field and Angular Forms. Follows Angular Material patterns w `import { FuiInputDirective } from 'formaui/components/input'`
 - list: No description available. `import { FuiListComponent } from 'formaui/components/list'`
@@ -37,7 +37,7 @@ npm install formaui
 - popover: Internal popover container component rendered inside the overlay. Provides a styled panel with optional arrow indicator. `import { FuiPopoverComponent } from 'formaui/components/popover'`
 - progressbar: A progress bar component compatible with Angular Material's mat-progress-bar interface. `import { FuiProgressbarComponent } from 'formaui/components/progressbar'`
 - radio: No description available. `import { FuiRadioButtonComponent } from 'formaui/components/radio'`
-- select: A dropdown select component for single or multiple selection. Designed to work inside `fui-form-field` with full Reactiv `import { FuiSelectComponent } from 'formaui/components/select'`
+- select: A select component designed to work seamlessly with fui-form-field. Similar to Angular Material's mat-select integration `import { FuiSelectComponent } from 'formaui/components/select'`
 - side-panel: No description available. `import { FuiSidePanelComponent } from 'formaui/components/side-panel'`
 - sidebar: A flexible sidebar component following Carbon Design System principles. Provides navigation with Angular Material-like A `import { FuiSidebarComponent } from 'formaui/components/sidebar'`
 - skeleton: No description available. `import { FuiSkeletonComponent } from 'formaui/components/skeleton'`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raintonic/formaui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A modern Angular UI component library with theming support",
   "license": "MIT",
   "keywords": [

package/styles/index.scss

@@ -23,9 +23,9 @@
 @forward './partials/utilities';
 
 // 8. Component global styles
-@use '../components/button/button.directive';
-@use '../cdk/overlay/overlay';
-@use '../services/dialog/dialog';
+@use './partials/components/button';
+@use './partials/components/overlay';
+@use './partials/components/dialog';
 
 // Use the modules for this file's styles
 @use './partials/mixins' as *;

package/styles/partials/components/_button.scss

@@ -0,0 +1,367 @@
+// Button component styles aligned with theme tokens
+@use '../constants' as *;
+@use '../mixins' as mixins;
+@use '../motion' as motion;
+
+.fui-button {
+  // Component tokens with fallbacks
+  --fui-button-height: var(--fui-button-height-md);
+  --fui-button-font-size: var(--fui-font-size-02);
+  --fui-button-border-radius: var(--fui-border-radius-sm);
+  --fui-button-padding-x: var(--fui-spacing-05);
+  --fui-button-padding-y: var(--fui-spacing-03);
+  --fui-button-gap: var(--fui-spacing-03);
+  --fui-button-font-weight: var(--fui-font-weight-semibold);
+  --fui-button-letter-spacing: var(--fui-letter-spacing-wide);
+
+  // Default spinner/text foreground used during loading
+  @include mixins.fui-button-reset();
+  @include motion.fui-motion(all, var(--fui-duration-fast-02));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fui-button-gap);
+  overflow: hidden;
+
+  font-family: var(--fui-font-family-sans);
+  font-weight: var(--fui-button-font-weight);
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  letter-spacing: var(--fui-button-letter-spacing);
+  border-radius: var(--fui-button-border-radius);
+  box-sizing: border-box;
+  cursor: pointer;
+  min-height: var(--fui-button-height);
+
+  &:focus-visible {
+    @include mixins.fui-focus-ring();
+  }
+
+  // Loading spinner
+  &__spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__spinner-icon {
+    width: var(--fui-icon-size-sm);
+    height: var(--fui-icon-size-sm);
+    border: 2px solid var(--fui-text-primary);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: fui-spin var(--fui-duration-slow-02) linear infinite;
+  }
+
+  // WCAG 2.1 AA: ensure minimum 44x44px touch target for smaller sizes
+  // Uses a pseudo-element so visual size remains unchanged
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 50%;
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  // States
+  &--disabled {
+    cursor: not-allowed;
+    opacity: var(--fui-opacity-disabled);
+  }
+
+  &--loading {
+    color: transparent !important;
+    cursor: wait;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  // Sizes
+  &--sm {
+    min-height: var(--fui-button-height-sm);
+    padding: calc(var(--fui-spacing-03) - 2px) var(--fui-spacing-03);
+    font-size: var(--fui-font-size-01);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-sm);
+      padding: calc(var(--fui-spacing-03) - 2px);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-sm);
+      height: var(--fui-icon-size-sm);
+    }
+  }
+
+  &--md {
+    min-height: var(--fui-button-height-md);
+    padding: calc(var(--fui-spacing-03) + 2px) var(--fui-spacing-05);
+    font-size: var(--fui-font-size-02);
+
+    &.fui-button--icon-only {
+      padding: calc(var(--fui-spacing-03) + 2px);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-md);
+    }
+  }
+
+  &--lg {
+    min-height: var(--fui-button-height-lg);
+    padding: calc(var(--fui-spacing-04) - 2px) var(--fui-spacing-05);
+    font-size: var(--fui-font-size-03);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-lg);
+      padding: calc(var(--fui-spacing-04) - 2px);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-md);
+    }
+  }
+
+  &--xl {
+    min-height: var(--fui-button-height-xl);
+    padding: var(--fui-spacing-04) var(--fui-spacing-06);
+    font-size: var(--fui-font-size-03);
+
+    &.fui-button--icon-only {
+      width: var(--fui-button-height-xl);
+      padding: var(--fui-spacing-04);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-md);
+    }
+  }
+
+  &--2xl {
+    min-height: var(--fui-spacing-11);
+    padding: var(--fui-spacing-05) var(--fui-spacing-06);
+    font-size: var(--fui-font-size-03);
+
+    &.fui-button--icon-only {
+      width: var(--fui-spacing-11);
+      padding: var(--fui-spacing-05);
+    }
+
+    .fui-icon {
+      width: var(--fui-icon-size-md);
+      height: var(--fui-icon-size-md);
+    }
+  }
+
+  &--field {
+    min-height: var(--fui-input-height); // matches form field height
+    padding: calc(var(--fui-spacing-03) + 2px) var(--fui-spacing-04);
+    font-size: var(--fui-font-size-02);
+
+    &.fui-button--icon-only {
+      width: var(--fui-input-height);
+      padding: calc(var(--fui-spacing-03) + 2px);
+    }
+  }
+
+  // Variant and Kind combinations
+
+  // Primary variant
+  &--primary {
+    background-color: var(--fui-primary);
+    color: var(--fui-primary-text);
+    border-color: transparent;
+    letter-spacing: var(--fui-letter-spacing-wide);
+    box-shadow: var(--fui-shadow-02);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-hover);
+      box-shadow: var(--fui-shadow-03);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-hover);
+      box-shadow: none;
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-primary);
+    }
+  }
+
+  // Secondary variant
+  &--secondary {
+    background-color: var(--fui-secondary-60);
+    color: var(--fui-text-primary);
+    border-color: var(--fui-border-color);
+    letter-spacing: var(--fui-letter-spacing-wide);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-secondary-90);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-secondary-90);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-secondary);
+    }
+  }
+
+  // Secondary variant
+  &--outline {
+    background-color: var(--fui-surface-01);
+    color: var(--fui-text-primary);
+    border: var(--fui-border-width-md) solid var(--fui-surface-03);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-20);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-primary-20);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-surface-01);
+    }
+  }
+
+  // Danger variant
+  &--danger {
+    background-color: var(--fui-danger-60);
+    color: var(--fui-text-primary);
+    border-color: transparent;
+    letter-spacing: var(--fui-letter-spacing-wide);
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-danger-80);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-danger-80);
+    }
+
+    &.fui-button--disabled {
+      background-color: var(--fui-danger-60);
+    }
+  }
+
+  // Ghost variant (neutral)
+  &--ghost {
+    background-color: transparent;
+    color: var(--fui-text-primary);
+    border-color: transparent;
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-surface-02);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-surface-05);
+    }
+  }
+
+  &--link {
+    background-color: transparent;
+    color: var(--fui-primary);
+
+    &:hover:not(.fui-button--disabled) {
+      text-decoration: underline;
+    }
+
+    &:active:not(.fui-button--disabled) {
+      text-decoration: underline;
+    }
+  }
+
+  // Icon variant (ghost-like with circular shape)
+  &--icon {
+    background-color: transparent;
+    color: var(--fui-text-primary);
+    border-color: transparent;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    padding: 0;
+
+    &:hover:not(.fui-button--disabled) {
+      background-color: var(--fui-surface-02);
+    }
+
+    &:active:not(.fui-button--disabled) {
+      background-color: var(--fui-surface-05);
+    }
+  }
+
+  // Icon adjustments
+  &--icon-only {
+    gap: 0;
+
+    .fui-icon {
+      margin: 0;
+    }
+  }
+}
+
+// Icon spacing within buttons
+.fui-icon {
+  flex-shrink: 0;
+
+  &[fuiPrefix] {
+    margin-right: var(--fui-spacing-02);
+  }
+
+  &[fuiSuffix] {
+    margin-left: var(--fui-spacing-02);
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: more) {
+  .fui-button {
+    &--outlined {
+      border-width: 3px;
+    }
+
+    &:focus-visible {
+      outline-width: 3px;
+    }
+  }
+}
+
+// Keyframes
+@keyframes fui-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Print styles
+@media print {
+  .fui-button {
+    &__spinner {
+      display: none !important;
+    }
+  }
+}