@flusys/ng-ui 6.3.0 → 6.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flusys/ng-ui",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "description": "FLUSYS native UI component library ",
   "license": "MIT",
   "peerDependencies": {

package/themes/tailwind.scss

@@ -1,13 +1,28 @@
 @custom-variant dark (&:where(.app-dark, .app-dark *));
 
 @theme inline {
-  /* ─── Border radius (preset-driven) ─────────────────────── */
+  /* ─── Border radius (preset-driven) ─────────────────────────────────────────
+     Every rounded-* step resolves from the active preset. The mapping is offset
+     by one deliberately — Tailwind's `rounded-lg`, the app's most-used control
+     radius, lands on the preset's *medium* semantic step, not its large one —
+     and the far ends are covered too, so no rounded-* utility is left holding a
+     fixed Tailwind default that would look identical under every preset. */
   --radius-border:           var(--content-border-radius);
+  --radius-xs:               var(--f-radius-xs);
   --radius-sm:               var(--f-border-radius-sm);
   --radius-md:               var(--f-border-radius-sm);
   --radius-lg:               var(--f-border-radius-md);
   --radius-xl:               var(--f-border-radius-lg);
   --radius-2xl:              var(--f-border-radius-xl);
+  --radius-3xl:              var(--f-radius-3xl);
+  --radius-4xl:              var(--f-radius-4xl);
+
+  /* ─── Line weight (preset-driven) ───────────────────────────────────────────
+     Tailwind resolves a bare `border` / `divide-*` against this key, so routing
+     it through the preset is what lets a heavy-linework preset thicken every
+     border in the app without touching a single component. Explicit widths —
+     `border-2` and friends — are unaffected. */
+  --default-border-width:    var(--f-border-width, 1px);
 
   /* ─── Shadows (preset-driven) ───────────────────────────── */
   --shadow-sm:               var(--f-shadow-sm);
@@ -83,3 +98,111 @@
   outline-offset: var(--f-focus-ring-offset);
   outline-color: var(--f-focus-ring-color);
 }
+
+/* ── Control density and shape (preset-driven) ──────────────────────────────
+   Form fields and buttons used to hard-code their padding and radius as fixed
+   Tailwind classes, which meant a preset could recolour the UI but never change
+   how dense or how sharp it felt — the difference that actually reads as a
+   different design language. These utilities put both under the preset's
+   control; the small and large steps are derived from the base so a preset
+   only has to state one value per axis. */
+
+@utility f-field {
+  padding-inline: var(--f-field-padding-x);
+  padding-block: var(--f-field-padding-y);
+  border-radius: var(--f-field-border-radius);
+  font-weight: var(--f-field-font-weight);
+}
+
+@utility f-field-sm {
+  padding-inline: calc(var(--f-field-padding-x) - 0.125rem);
+  padding-block: calc(var(--f-field-padding-y) - 0.125rem);
+  border-radius: var(--f-field-border-radius);
+  font-weight: var(--f-field-font-weight);
+}
+
+@utility f-field-lg {
+  padding-inline: calc(var(--f-field-padding-x) + 0.25rem);
+  padding-block: calc(var(--f-field-padding-y) + 0.25rem);
+  border-radius: var(--f-field-border-radius);
+  font-weight: var(--f-field-font-weight);
+}
+
+/* Multi-value triggers (multiselect, treeselect, cascadeselect) whose chips
+   already supply most of the row height, so they take one step less block padding
+   than a plain field while keeping the same inline padding and shape. */
+@utility f-field-compact {
+  padding-inline: var(--f-field-padding-x);
+  padding-block: calc(var(--f-field-padding-y) - 0.125rem);
+  border-radius: var(--f-field-border-radius);
+  font-weight: var(--f-field-font-weight);
+}
+
+/* Shape only — for the parts of a composite field (a select trigger's panel, a
+   segmented control's ends) that inherit the field radius but set their own box. */
+@utility f-field-shape {
+  border-radius: var(--f-field-border-radius);
+}
+
+@utility f-btn {
+  padding-inline: var(--f-button-padding-x);
+  padding-block: var(--f-button-padding-y);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+@utility f-btn-sm {
+  padding-inline: calc(var(--f-button-padding-x) - 0.25rem);
+  padding-block: calc(var(--f-button-padding-y) - 0.125rem);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+@utility f-btn-lg {
+  padding-inline: calc(var(--f-button-padding-x) + 0.25rem);
+  padding-block: calc(var(--f-button-padding-y) + 0.25rem);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+/* Icon-only buttons stay square: one padding on every side. */
+@utility f-btn-icon {
+  padding: var(--f-button-padding-y);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+@utility f-btn-icon-sm {
+  padding: calc(var(--f-button-padding-y) - 0.125rem);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+@utility f-btn-icon-lg {
+  padding: calc(var(--f-button-padding-y) + 0.25rem);
+  border-radius: var(--f-button-border-radius);
+  font-weight: var(--f-button-font-weight);
+  letter-spacing: var(--f-button-letter-spacing);
+}
+
+/* A pill button keeps its shape in every preset — only the padding follows. */
+@utility f-btn-round {
+  border-radius: 9999px;
+}
+
+/* Floating panels — dropdown lists, popovers, dialogs. */
+@utility f-overlay {
+  border-radius: var(--f-overlay-border-radius);
+  box-shadow: var(--f-overlay-shadow);
+}
+
+/* An inline panel that shares the overlay's shape but sits in the page, so it
+   takes no elevation of its own — an inline datepicker, for one. */
+@utility f-overlay-shape {
+  border-radius: var(--f-overlay-border-radius);
+}

package/types/flusys-ng-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, OnDestroy, OnInit, AfterViewInit, ElementRef, InjectionToken, Type, Injector, EnvironmentProviders } from '@angular/core';
+import { TemplateRef, OnDestroy, AfterViewInit, ElementRef, OnInit, InjectionToken, Type, Injector, EnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
 import * as rxjs from 'rxjs';
@@ -828,15 +828,12 @@ declare class InputNumberComponent implements ControlValueAccessor {
 
 type InputVariant = 'outlined' | 'filled';
 type InputSize = 'small' | 'large' | null;
-declare class InputTextDirective implements OnInit {
+declare class InputTextDirective {
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignal<boolean>;
     readonly variant: _angular_core.InputSignal<InputVariant>;
     readonly size: _angular_core.InputSignal<InputSize>;
     readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    private readonly _el;
-    private readonly _iconLeft;
-    ngOnInit(): void;
     readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputTextDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputTextDirective, "[fInputText]", never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -4375,10 +4372,13 @@ interface SelectButtonTokens {
 }
 interface ThemePreset {
     name: PresetName;
-    borderRadius: string;
+    radiusXs: string;
     borderRadiusSm: string;
+    borderRadius: string;
     borderRadiusLg: string;
     borderRadiusXl: string;
+    radius3xl: string;
+    radius4xl: string;
     borderWidth: string;
     shadowSm: string;
     shadow: string;
@@ -4389,9 +4389,19 @@ interface ThemePreset {
     focusRingWidth: string;
     focusRingStyle: string;
     focusRingOffset: string;
-    buttonFontWeight: string;
     highlightVariant: 'tint' | 'solid';
     strongBorders: boolean;
+    fieldPaddingX: string;
+    fieldPaddingY: string;
+    fieldBorderRadius: string;
+    fieldFontWeight: string;
+    buttonPaddingX: string;
+    buttonPaddingY: string;
+    buttonBorderRadius: string;
+    buttonFontWeight: string;
+    buttonLetterSpacing: string;
+    overlayBorderRadius: string;
+    overlayShadow: string;
     selectButton: SelectButtonTokens;
     cardBorderRadius: string;
     cardPadding: string;
@@ -4408,8 +4418,8 @@ interface ThemePreset {
     signaturePrimary: string;
 }
 declare const AURA_PRESET: ThemePreset;
-declare const NORA_PRESET: ThemePreset;
 declare const LARA_PRESET: ThemePreset;
+declare const NORA_PRESET: ThemePreset;
 declare const PRESETS: Record<PresetName, ThemePreset>;
 declare const PRESET_NAMES: PresetName[];