@raintonic/formaui 0.2.0

package/llms.txt

@@ -0,0 +1,60 @@
+# FormaUI
+
+> Angular 21 component library with 44+ standalone UI components, CDK layer, services, and theming system.
+
+## Install
+
+npm install formaui
+
+## Components
+
+- accordion: Groups multiple `fui-expansion-panel` components. In single mode (default), only one panel can be expanded at a time. In `import { FuiAccordionComponent } from 'formaui/components/accordion'`
+- alert: A flexible alert component for displaying informational messages, warnings, errors, and success notifications. Can be us `import { FuiAlertComponent } from 'formaui/components/alert'`
+- autocomplete: An autocomplete component designed to work seamlessly with fui-form-field. Similar to Angular Material's mat-autocomplet `import { FuiAutocompleteComponent } from 'formaui/components/autocomplete'`
+- avatar: No description available. `import { FuiAvatarComponent } from 'formaui/components/avatar'`
+- 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-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'`
+- data-table: No description available. `import { FuiAdvancedDataTableComponent } from 'formaui/components/data-table'`
+- date-picker: No description available. `import { FuiDatePickerComponent } from 'formaui/components/date-picker'`
+- divider: No description available. `import { FuiDividerComponent } from 'formaui/components/divider'`
+- drawer: No description available. `import { FuiDrawerComponent } from 'formaui/components/drawer'`
+- 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'`
+- 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'`
+- menu: A dropdown menu component that provides a list of options or actions. Designed to work with external triggers using the  `import { FuiMenuComponent } from 'formaui/components/menu'`
+- number-input: A numeric input component with increment/decrement buttons, full Angular Reactive Forms support, and FormField integrati `import { FuiNumberInputComponent } from 'formaui/components/number-input'`
+- paginator: A pagination component that handles navigation through pages with: - Previous/Next navigation buttons (disabled at bound `import { FuiPaginatorComponent } from 'formaui/components/paginator'`
+- password-input: A password input component with visibility toggle and optional strength meter. Integrates with fui-form-field and Angula `import { FuiPasswordInputComponent } from 'formaui/components/password-input'`
+- 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'`
+- 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'`
+- slider: A slider (range input) component with single and dual-thumb (range) support. Integrates with Angular Reactive Forms via  `import { FuiSliderComponent } from 'formaui/components/slider'`
+- spinner: No description available. `import { FuiSpinnerComponent } from 'formaui/components/spinner'`
+- stepper: A stepper component that guides users through a sequence of steps. Supports horizontal and vertical orientations, linear `import { FuiStepperComponent } from 'formaui/components/stepper'`
+- tab: No description available. `import { FuiTabComponent } from 'formaui/components/tab'`
+- tag: No description available. `import { FuiTagComponent } from 'formaui/components/tag'`
+- time-picker: No description available. `import { FuiTimePickerComponent } from 'formaui/components/time-picker'`
+- toggle: No description available. `import { FuiToggleComponent } from 'formaui/components/toggle'`
+- toolbar: A top navigation toolbar following Carbon Design System principles. Provides space for logo, navigation menu items, and  `import { FuiToolbarComponent } from 'formaui/components/toolbar'`
+- tooltip: No description available. `import { FuiTooltipComponent } from 'formaui/components/tooltip'`
+- tree: No description available. `import { FuiTreeNodeComponent } from 'formaui/components/tree'`
+- tree-select: No description available. `import { FuiTreeSelectComponent } from 'formaui/components/tree-select'`
+- tree-table: No description available. `import { FuiTreeTableComponent } from 'formaui/components/tree-table'`
+
+## Design Tokens
+
+CSS custom properties prefixed with `--fui-*`. Themes: light (default), dark.
+Key token groups: primary, secondary, danger, success, warning, info, pink, orange, tomato, white, black, text, border, surface, bg, state, field, icon, background, error, card.

package/package.json

@@ -0,0 +1,251 @@
+{
+  "name": "@raintonic/formaui",
+  "version": "0.2.0",
+  "description": "A modern Angular UI component library with theming support",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "library",
+    "formaui",
+    "design-system"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/raintonic-formaui.mjs",
+  "typings": "types/raintonic-formaui.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/raintonic-formaui.d.ts",
+      "default": "./fesm2022/raintonic-formaui.mjs"
+    },
+    "./cdk/drag-drop": {
+      "types": "./types/raintonic-formaui-cdk-drag-drop.d.ts",
+      "default": "./fesm2022/raintonic-formaui-cdk-drag-drop.mjs"
+    },
+    "./cdk/form-field": {
+      "types": "./types/raintonic-formaui-cdk-form-field.d.ts",
+      "default": "./fesm2022/raintonic-formaui-cdk-form-field.mjs"
+    },
+    "./cdk/overlay": {
+      "types": "./types/raintonic-formaui-cdk-overlay.d.ts",
+      "default": "./fesm2022/raintonic-formaui-cdk-overlay.mjs"
+    },
+    "./cdk/virtual-scroll": {
+      "types": "./types/raintonic-formaui-cdk-virtual-scroll.d.ts",
+      "default": "./fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs"
+    },
+    "./components/accordion": {
+      "types": "./types/raintonic-formaui-components-accordion.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-accordion.mjs"
+    },
+    "./components/alert": {
+      "types": "./types/raintonic-formaui-components-alert.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-alert.mjs"
+    },
+    "./components/autocomplete": {
+      "types": "./types/raintonic-formaui-components-autocomplete.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-autocomplete.mjs"
+    },
+    "./components/avatar": {
+      "types": "./types/raintonic-formaui-components-avatar.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-avatar.mjs"
+    },
+    "./components/badge": {
+      "types": "./types/raintonic-formaui-components-badge.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-badge.mjs"
+    },
+    "./components/big-menu": {
+      "types": "./types/raintonic-formaui-components-big-menu.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-big-menu.mjs"
+    },
+    "./components/breadcrumb": {
+      "types": "./types/raintonic-formaui-components-breadcrumb.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-breadcrumb.mjs"
+    },
+    "./components/button": {
+      "types": "./types/raintonic-formaui-components-button.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-button.mjs"
+    },
+    "./components/button-group": {
+      "types": "./types/raintonic-formaui-components-button-group.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-button-group.mjs"
+    },
+    "./components/card": {
+      "types": "./types/raintonic-formaui-components-card.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-card.mjs"
+    },
+    "./components/checkbox": {
+      "types": "./types/raintonic-formaui-components-checkbox.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-checkbox.mjs"
+    },
+    "./components/data-table": {
+      "types": "./types/raintonic-formaui-components-data-table.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-data-table.mjs"
+    },
+    "./components/date-picker": {
+      "types": "./types/raintonic-formaui-components-date-picker.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-date-picker.mjs"
+    },
+    "./components/divider": {
+      "types": "./types/raintonic-formaui-components-divider.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-divider.mjs"
+    },
+    "./components/drawer": {
+      "types": "./types/raintonic-formaui-components-drawer.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-drawer.mjs"
+    },
+    "./components/dynamic-form": {
+      "types": "./types/raintonic-formaui-components-dynamic-form.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-dynamic-form.mjs"
+    },
+    "./components/empty-state": {
+      "types": "./types/raintonic-formaui-components-empty-state.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-empty-state.mjs"
+    },
+    "./components/file-upload": {
+      "types": "./types/raintonic-formaui-components-file-upload.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-file-upload.mjs"
+    },
+    "./components/form-field": {
+      "types": "./types/raintonic-formaui-components-form-field.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-form-field.mjs"
+    },
+    "./components/icon": {
+      "types": "./types/raintonic-formaui-components-icon.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-icon.mjs"
+    },
+    "./components/input": {
+      "types": "./types/raintonic-formaui-components-input.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-input.mjs"
+    },
+    "./components/list": {
+      "types": "./types/raintonic-formaui-components-list.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-list.mjs"
+    },
+    "./components/menu": {
+      "types": "./types/raintonic-formaui-components-menu.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-menu.mjs"
+    },
+    "./components/number-input": {
+      "types": "./types/raintonic-formaui-components-number-input.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-number-input.mjs"
+    },
+    "./components/paginator": {
+      "types": "./types/raintonic-formaui-components-paginator.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-paginator.mjs"
+    },
+    "./components/password-input": {
+      "types": "./types/raintonic-formaui-components-password-input.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-password-input.mjs"
+    },
+    "./components/popover": {
+      "types": "./types/raintonic-formaui-components-popover.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-popover.mjs"
+    },
+    "./components/progressbar": {
+      "types": "./types/raintonic-formaui-components-progressbar.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-progressbar.mjs"
+    },
+    "./components/radio": {
+      "types": "./types/raintonic-formaui-components-radio.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-radio.mjs"
+    },
+    "./components/select": {
+      "types": "./types/raintonic-formaui-components-select.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-select.mjs"
+    },
+    "./components/side-panel": {
+      "types": "./types/raintonic-formaui-components-side-panel.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-side-panel.mjs"
+    },
+    "./components/sidebar": {
+      "types": "./types/raintonic-formaui-components-sidebar.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-sidebar.mjs"
+    },
+    "./components/skeleton": {
+      "types": "./types/raintonic-formaui-components-skeleton.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-skeleton.mjs"
+    },
+    "./components/slider": {
+      "types": "./types/raintonic-formaui-components-slider.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-slider.mjs"
+    },
+    "./components/spinner": {
+      "types": "./types/raintonic-formaui-components-spinner.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-spinner.mjs"
+    },
+    "./components/stepper": {
+      "types": "./types/raintonic-formaui-components-stepper.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-stepper.mjs"
+    },
+    "./components/tab": {
+      "types": "./types/raintonic-formaui-components-tab.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tab.mjs"
+    },
+    "./components/tag": {
+      "types": "./types/raintonic-formaui-components-tag.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tag.mjs"
+    },
+    "./components/time-picker": {
+      "types": "./types/raintonic-formaui-components-time-picker.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-time-picker.mjs"
+    },
+    "./components/toggle": {
+      "types": "./types/raintonic-formaui-components-toggle.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-toggle.mjs"
+    },
+    "./components/toolbar": {
+      "types": "./types/raintonic-formaui-components-toolbar.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-toolbar.mjs"
+    },
+    "./components/tooltip": {
+      "types": "./types/raintonic-formaui-components-tooltip.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tooltip.mjs"
+    },
+    "./components/tree": {
+      "types": "./types/raintonic-formaui-components-tree.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tree.mjs"
+    },
+    "./components/tree-select": {
+      "types": "./types/raintonic-formaui-components-tree-select.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tree-select.mjs"
+    },
+    "./components/tree-table": {
+      "types": "./types/raintonic-formaui-components-tree-table.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-tree-table.mjs"
+    },
+    "./core": {
+      "types": "./types/raintonic-formaui-core.d.ts",
+      "default": "./fesm2022/raintonic-formaui-core.mjs"
+    },
+    "./services/dialog": {
+      "types": "./types/raintonic-formaui-services-dialog.d.ts",
+      "default": "./fesm2022/raintonic-formaui-services-dialog.mjs"
+    },
+    "./services/notification": {
+      "types": "./types/raintonic-formaui-services-notification.d.ts",
+      "default": "./fesm2022/raintonic-formaui-services-notification.mjs"
+    },
+    "./services/theme": {
+      "types": "./types/raintonic-formaui-services-theme.d.ts",
+      "default": "./fesm2022/raintonic-formaui-services-theme.mjs"
+    },
+    "./test-utils": {
+      "types": "./types/raintonic-formaui-test-utils.d.ts",
+      "default": "./fesm2022/raintonic-formaui-test-utils.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/styles/_fonts-entry.scss

@@ -0,0 +1,3 @@
+// Opt-in font entry point.
+// Import this file in your app's styles.scss to include self-hosted @font-face declarations.
+@use './partials/fonts';

package/styles/index.scss

@@ -0,0 +1,127 @@
+// FormaUI - Main Styles Entry Point
+// Import order is important for proper cascade
+
+// 1. Constants and configuration
+@forward './partials/constants';
+
+// 2. Mixins and functions
+@forward './partials/mixins';
+
+// 3. Theme system (includes CSS variables)
+@forward './partials/theme';
+
+// 4. Typography system
+@forward './partials/typography';
+
+// 5. Motion system
+@forward './partials/motion';
+
+// 6. Grid system
+@forward './partials/grid';
+
+// 7. Utility classes
+@forward './partials/utilities';
+
+// 8. Component global styles
+@use '../components/button/button.directive';
+@use '../cdk/overlay/overlay';
+@use '../services/dialog/dialog';
+
+// Use the modules for this file's styles
+@use './partials/mixins' as *;
+@use './partials/constants' as *;
+
+// Fonts are now opt-in. Import directly in your app's styles.scss:
+//   @use "@formaui/styles/fonts-entry";
+// @use "./partials/fonts";
+
+// Base reset and normalization
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+html {
+  font-family: var(--fui-font-family-sans);
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  font-family: inherit;
+  line-height: inherit;
+  color: var(--fui-text-primary);
+  background-color: var(--fui-surface-00);
+
+  // Dialog overlay support
+  &.fui-dialog-open {
+    overflow: hidden;
+  }
+}
+
+// Focus management
+button:focus-visible,
+[role='button']:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  @include fui-focus-ring();
+}
+
+// Remove default button styles
+button {
+  @include fui-button-reset();
+}
+
+// Link styles
+a {
+  color: var(--fui-primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--fui-primary-hover);
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    @include fui-focus-ring();
+  }
+}
+
+// Form elements base styles
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+
+// Accessibility improvements
+.fui-sr-only {
+  @include fui-visually-hidden();
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/styles/partials/_constants.scss

@@ -0,0 +1,29 @@
+// Design tokens and constants
+// Based on Carbon Design System principles
+
+// Spacing scale (rem units)
+$fui-spacing-01: 0.125rem; // 2px
+$fui-spacing-02: 0.25rem; // 4px
+$fui-spacing-03: 0.5rem; // 8px
+$fui-spacing-04: 0.75rem; // 12px
+$fui-spacing-05: 1rem; // 16px
+$fui-spacing-06: 1.5rem; // 24px
+$fui-spacing-07: 2rem; // 32px
+$fui-spacing-08: 2.5rem; // 40px
+$fui-spacing-09: 3rem; // 48px
+$fui-spacing-10: 4rem; // 64px
+$fui-spacing-11: 5rem; // 80px
+$fui-spacing-12: 6rem; // 96px
+
+// Layout constants
+$fui-grid-columns: 12;
+$fui-grid-gutter: $fui-spacing-05;
+$fui-container-max-width: 1200px;
+
+// Breakpoints
+$fui-breakpoint-xs: 0;
+$fui-breakpoint-sm: 576px;
+$fui-breakpoint-md: 768px;
+$fui-breakpoint-lg: 992px;
+$fui-breakpoint-xl: 1200px;
+$fui-breakpoint-xxl: 1400px;

package/styles/partials/_fonts.scss

@@ -0,0 +1,36 @@
+// Self-hosted fonts — eliminates render-blocking Google Fonts dependency
+
+// Inter Tight — variable weight (100-900), latin subset
+@font-face {
+  font-family: 'Inter Tight';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter Tight';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-tight-latin-italic.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+// DM Mono — regular (400) only, latin subset
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/dm-mono-400-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}