@juligc99/loro-ui 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juligc99/loro-ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Loro UI design system and Angular component library.",
   "author": "juligc99",
   "license": "MIT",
@@ -26,6 +26,17 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "exports": {
+    ".": {
+      "types": "./types/juligc99-loro-ui.d.ts",
+      "default": "./fesm2022/juligc99-loro-ui.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./design-tokens/loro-theme.scss": "./design-tokens/loro-theme.scss",
+    "./styles/breakpoints": "./styles/_breakpoints.scss"
+  },
   "peerDependencies": {
     "@angular/aria": ">=21 <23",
     "@angular/common": ">=21 <23",
@@ -45,14 +56,5 @@
   ],
   "module": "fesm2022/juligc99-loro-ui.mjs",
   "typings": "types/juligc99-loro-ui.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/juligc99-loro-ui.d.ts",
-      "default": "./fesm2022/juligc99-loro-ui.mjs"
-    }
-  },
   "type": "module"
 }

package/types/juligc99-loro-ui.d.ts

@@ -952,12 +952,141 @@ declare class LoroAppNav {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAppNav, "loro-app-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "utilityItems": { "alias": "utilityItems"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showUtilityItems": { "alias": "showUtilityItems"; "required": false; "isSignal": true; }; "compactDesktop": { "alias": "compactDesktop"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
 }
 
+/**
+ * LoroButton Type Definitions
+ *
+ * Centralized type definitions for the LoroButton component.
+ * Use these types for consistency across the application.
+ *
+ * @example
+ * const config: LoroButtonConfig = {
+ *   variant: 'primary',
+ *   size: 'md',
+ *   disabled: false,
+ * };
+ */
+/**
+ * Visual variant style of the button
+ * @type {'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation'}
+ */
 type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
+/**
+ * Button visual type (semantic grouping)
+ * @type {'primary' | 'secondary' | 'tertiary'}
+ */
 type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Button color theme
+ * @type {'primary' | 'secondary' | 'tertiary' | 'danger'}
+ */
 type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
+/**
+ * Button size preset
+ * @type {'sm' | 'md' | 'lg'}
+ */
 type LoroButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Button width behavior
+ * @type {'fit-content' | 'full'}
+ */
 type LoroButtonWidth = 'fit-content' | 'full';
+/**
+ * Icon display mode within the button
+ * @type {'none' | 'with-icon' | 'only-icon'}
+ */
 type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
+/**
+ * Button HTML type
+ * @type {'button' | 'submit' | 'reset'}
+ */
+type LoroButtonHtmlType = 'button' | 'submit' | 'reset';
+
+/**
+ * LoroButton Constants
+ *
+ * Default values, valid options, and configuration constants for the LoroButton component.
+ * Update these to maintain consistency across all button usage.
+ */
+
+/**
+ * Default input values for LoroButton
+ */
+declare const LORO_BUTTON_DEFAULTS: {
+    readonly text: "";
+    readonly label: "";
+    readonly variant: "primary";
+    readonly type: "primary";
+    readonly color: "primary";
+    readonly size: "md";
+    readonly fullWidth: false;
+    readonly buttonWidth: "fit-content";
+    readonly disabled: false;
+    readonly loading: false;
+    readonly selected: false;
+    readonly htmlType: "button";
+    readonly iconMode: "none";
+    readonly socialMobileCompact: true;
+    readonly iconSize: 23;
+    readonly iconButtonSize: null;
+    readonly iconColor: "";
+};
+/**
+ * Valid options for button variants
+ */
+declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
+/**
+ * Valid options for button types
+ */
+declare const LORO_BUTTON_TYPES: readonly LoroButtonType[];
+/**
+ * Valid options for button colors
+ */
+declare const LORO_BUTTON_COLORS: readonly LoroButtonColor[];
+/**
+ * Valid options for button sizes
+ */
+declare const LORO_BUTTON_SIZES: readonly LoroButtonSize[];
+/**
+ * Valid options for icon modes
+ */
+declare const LORO_BUTTON_ICON_MODES: readonly LoroButtonIconMode[];
+/**
+ * CSS class names used by LoroButton (BEM notation)
+ */
+declare const LORO_BUTTON_CLASSES: {
+    readonly container: "loro-button";
+    readonly variant: (variant: LoroButtonVariant) => string;
+    readonly size: (size: LoroButtonSize) => string;
+    readonly color: (color: LoroButtonColor) => string;
+    readonly width: (width: LoroButtonWidth) => "loro-button--full" | undefined;
+    readonly state: {
+        readonly disabled: "loro-button--disabled";
+        readonly loading: "loro-button--loading";
+        readonly selected: "loro-button--selected";
+    };
+    readonly elements: {
+        readonly label: "loro-button__label";
+        readonly spinner: "loro-button__spinner";
+        readonly srStatus: "loro-button__sr-status";
+    };
+};
+
+/**
+ * LoroButton Component
+ *
+ * A versatile, accessible button component with multiple variants, sizes, and states.
+ * Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
+ *
+ * @example
+ * ```html
+ * <loro-button
+ *   [text]="'Click me'"
+ *   variant="primary"
+ *   size="md"
+ *   (change)="onButtonClick()"
+ * />
+ * ```
+ */
 declare class LoroButton {
     label: _angular_core.InputSignal<string>;
     text: _angular_core.InputSignal<string>;
@@ -1040,7 +1169,7 @@ declare class LoroAuthSocialButton {
     outline: _angular_core.InputSignal<boolean>;
     selected: _angular_core.InputSignal<boolean>;
     iconSize: _angular_core.InputSignal<number>;
-    protected readonly nativeIconSrc: _angular_core.Signal<"" | "assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/google.svg">;
+    protected readonly nativeIconSrc: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/google.svg" | "">;
     protected releaseFocus(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthSocialButton, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthSocialButton, "loro-auth-social-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1716,5 +1845,5 @@ declare class LoroHapticsService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoroHapticsService>;
 }
 
-export { Footer, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
-export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };
+export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
+export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };