@raintonic/formaui 0.4.0 → 0.9.0

package/llms.txt

@@ -10,50 +10,53 @@ npm install formaui
 
 - 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 that can be applied to both `<button>` and `<a>` elements. Follows Carbon Design System pat `import { FuiButtonDirective } from 'formaui/components/button'`
+- autocomplete: A typeahead input with a filterable dropdown of options. Designed to work inside `fui-form-field` with full Reactive For `import { FuiAutocompleteComponent } from 'formaui/components/autocomplete'`
+- avatar: Displays a user avatar with initials-only fallback (no image tag). Shows computed initials from fullName with a tooltip  `import { FuiAvatarComponent } from 'formaui/components/avatar'`
+- badge: Displays a small label badge with optional icon and color variants. Supports custom colors with automatic text contrast  `import { FuiBadgeComponent } from 'formaui/components/badge'`
+- breadcrumb: A navigation trail that shows the user's location within a hierarchy. Compose `fui-breadcrumb` with one or more `fui-bre `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'`
-- empty-state: No description available. `import { FuiEmptyStateComponent } from 'formaui/components/empty-state'`
+- card: A container for grouping related content with an optional header and actions slot. Supports elevated, outlined, and flat `import { FuiCardComponent } from 'formaui/components/card'`
+- checkbox: A boolean input with checked, unchecked, and indeterminate states. Full Reactive Forms support via `ControlValueAccessor `import { FuiCheckboxComponent } from 'formaui/components/checkbox'`
+- chip: A compact element for representing tags, filters, or selections, with optional leading icon. Chips can be made selectabl `import { FuiChipComponent } from 'formaui/components/chip'`
+- data-table: A feature-rich data grid for tabular data: column configuration, sticky columns, sorting, filtering, row selection, row  `import { FuiAdvancedDataTableComponent } from 'formaui/components/data-table'`
+- date-picker: A date input with calendar overlay. Supports single-date or date-range selection, min/max constraints, custom date filte `import { FuiDatePickerComponent } from 'formaui/components/date-picker'`
+- divider: A thin separator line for splitting content, either horizontally or vertically. Optional projected content renders as a  `import { FuiDividerComponent } from 'formaui/components/divider'`
+- drawer: A panel that slides in from an edge of the screen to present complementary content or actions. Supports left/right/top/b `import { FuiDrawerComponent } from 'formaui/components/drawer'`
+- dropdown-menu: A dropdown menu component that provides a list of options or actions. Designed to work with external triggers using the  `import { FuiDropdownMenuComponent } from 'formaui/components/dropdown-menu'`
+- dual-tier-navigation: A two-tier sidebar navigation: a narrow vertical bar of top-level icon triggers, plus a flyout panel that reveals the se `import { FuiDualTierNavigationComponent } from 'formaui/components/dual-tier-navigation'`
+- empty-state: A placeholder shown when a region has no content yet, such as an empty list, no search results, or a first-run screen. D `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 form field wrapper component that provides consistent styling and behavior for form controls. Follows Angular Material `import { FuiFormFieldComponent } from 'formaui/components/form-field'`
+- 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'`
+- input: A directive that turns a native `<input>` or `<textarea>` into a FormaUI form control. Integrates with `fui-form-field`  `import { FuiInputDirective } from 'formaui/components/input'`
+- list: A vertical list container for displaying a collection of items. Supports plain (non-interactive) display, single- or mul `import { FuiListComponent } from 'formaui/components/list'`
 - 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'`
+- password-input: A password input component with visibility toggle. Integrates with fui-form-field and Angular Forms. `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 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'`
+- radio: Single-choice selection from a small set of options. Use `fui-radio-group` as the Reactive Forms control and `fui-radio- `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: A slide-in side panel overlay with optional backdrop, focus trapping, and keyboard dismiss. Renders from the right edge  `import { FuiSidePanelComponent } from 'formaui/components/side-panel'`
+- sidebar-nav-menu: A standalone sidebar navigation menu component with recursive, multi-level submenus. Inspired by PrimeNG's TieredMenu mo `import { FuiSidebarNavMenuComponent } from 'formaui/components/sidebar-nav-menu'`
+- skeleton: A placeholder element that mimics the shape of content while it loads. Renders as a text line (optionally multiple lines `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'`
+- spinner: A circular loading spinner with determinate and indeterminate modes. Supports an overlay mode that covers its parent con `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'`
+- strength-meter: A password strength meter that displays per-rule satisfaction bars and a rule checklist. Computes strength from a `value `import { FuiStrengthMeterComponent } from 'formaui/components/strength-meter'`
+- tab: Individual tab definition used inside `fui-tab-group`. Provides a label for the tab header and wraps its content in an ` `import { FuiTabComponent } from 'formaui/components/tab'`
+- time-picker: A time input with a scrollable dropdown of selectable time options. Supports 12h/24h formats, optional seconds, a config `import { FuiTimePickerComponent } from 'formaui/components/time-picker'`
+- toggle: A switch-style control for boolean settings. Semantically distinct from `fui-checkbox`: use toggle for immediate on/off  `import { FuiToggleComponent } from 'formaui/components/toggle'`
+- toggle-group: A selection control that renders as a row of connected toggle buttons. Like radio buttons but styled as a horizontal but `import { FuiToggleGroupComponent } from 'formaui/components/toggle-group'`
 - 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'`
+- tooltip: A contextual label attached to any element. Shows on hover, focus, click, or manual control. Built on the overlay CDK wi `import { FuiTooltipComponent } from 'formaui/components/tooltip'`
+- topbar: A responsive topbar navigation component with a two-row layout: the top row contains brand/actions and menu items; the b `import { FuiTopbarComponent } from 'formaui/components/topbar'`
+- tree: A hierarchical tree view that renders nested `FuiTreeNode<T>` data with expand/collapse, optional lazy child loading, ke `import { FuiTreeNodeComponent } from 'formaui/components/tree'`
+- tree-select: A combobox that opens a `fui-tree` in an overlay panel so users can pick one or more values from hierarchical data. Impl `import { FuiTreeSelectComponent } from 'formaui/components/tree-select'`
+- tree-table: A tabular component that renders hierarchical `FuiTreeTableNode<T>` data as rows, with one designated tree column showin `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, destructive, tertiary, field, icon, background, error, card.
+Key token groups: radius, border, z, bp, grid, container, tooltip, duration, ease, icon, transition, button, input, density, control, cell, spacing, font, text, weight, leading, tracking, primary, accent, neutral, error, success, warning, info, pluvia, nimbus, gray, moss, green, cyan, blue, indigo, purple, fuchsia, pink, rose, orange, yellow, alpha, shadow, bg, fill, state, field, card.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raintonic/formaui",
-  "version": "0.4.0",
+  "version": "0.9.0",
   "description": "A modern Angular UI component library with theming support",
   "license": "MIT",
   "keywords": [
@@ -17,9 +17,11 @@
     "@angular/forms": "^21.0.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/raintonic-formaui.mjs",
-  "typings": "types/raintonic-formaui.d.ts",
   "exports": {
+    "./utilities": "./styles/utilities.css",
+    "./styles": "./styles/index.scss",
+    "./styles.css": "./styles/styles.css",
+    "./styles/*": "./styles/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -63,10 +65,6 @@
       "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"
@@ -87,6 +85,10 @@
       "types": "./types/raintonic-formaui-components-checkbox.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-checkbox.mjs"
     },
+    "./components/chip": {
+      "types": "./types/raintonic-formaui-components-chip.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-chip.mjs"
+    },
     "./components/data-table": {
       "types": "./types/raintonic-formaui-components-data-table.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-data-table.mjs"
@@ -103,6 +105,14 @@
       "types": "./types/raintonic-formaui-components-drawer.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-drawer.mjs"
     },
+    "./components/dropdown-menu": {
+      "types": "./types/raintonic-formaui-components-dropdown-menu.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-dropdown-menu.mjs"
+    },
+    "./components/dual-tier-navigation": {
+      "types": "./types/raintonic-formaui-components-dual-tier-navigation.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs"
+    },
     "./components/empty-state": {
       "types": "./types/raintonic-formaui-components-empty-state.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-empty-state.mjs"
@@ -127,10 +137,6 @@
       "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"
@@ -163,9 +169,9 @@
       "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/sidebar-nav-menu": {
+      "types": "./types/raintonic-formaui-components-sidebar-nav-menu.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs"
     },
     "./components/skeleton": {
       "types": "./types/raintonic-formaui-components-skeleton.d.ts",
@@ -183,14 +189,14 @@
       "types": "./types/raintonic-formaui-components-stepper.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-stepper.mjs"
     },
+    "./components/strength-meter": {
+      "types": "./types/raintonic-formaui-components-strength-meter.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-strength-meter.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"
@@ -199,6 +205,10 @@
       "types": "./types/raintonic-formaui-components-toggle.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-toggle.mjs"
     },
+    "./components/toggle-group": {
+      "types": "./types/raintonic-formaui-components-toggle-group.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-toggle-group.mjs"
+    },
     "./components/toolbar": {
       "types": "./types/raintonic-formaui-components-toolbar.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-toolbar.mjs"
@@ -207,6 +217,10 @@
       "types": "./types/raintonic-formaui-components-tooltip.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-tooltip.mjs"
     },
+    "./components/topbar": {
+      "types": "./types/raintonic-formaui-components-topbar.d.ts",
+      "default": "./fesm2022/raintonic-formaui-components-topbar.mjs"
+    },
     "./components/tree": {
       "types": "./types/raintonic-formaui-components-tree.d.ts",
       "default": "./fesm2022/raintonic-formaui-components-tree.mjs"
@@ -223,6 +237,10 @@
       "types": "./types/raintonic-formaui-core.d.ts",
       "default": "./fesm2022/raintonic-formaui-core.mjs"
     },
+    "./services/breakpoint": {
+      "types": "./types/raintonic-formaui-services-breakpoint.d.ts",
+      "default": "./fesm2022/raintonic-formaui-services-breakpoint.mjs"
+    },
     "./services/dialog": {
       "types": "./types/raintonic-formaui-services-dialog.d.ts",
       "default": "./fesm2022/raintonic-formaui-services-dialog.mjs"
@@ -240,8 +258,13 @@
       "default": "./fesm2022/raintonic-formaui-test-utils.mjs"
     }
   },
+  "module": "fesm2022/raintonic-formaui.mjs",
+  "typings": "types/raintonic-formaui.d.ts",
   "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "prepublishOnly": "node -e \"if (!process.env.FORMAUI_PUBLISH) { console.error('Direct npm publish disabled. Use: npm run publish:lib'); process.exit(1); }\""
   }
-}
+}