@juligc99/loro-ui 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juligc99/loro-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Loro UI design system and Angular component library.",
   "author": "juligc99",
   "license": "MIT",
@@ -68,9 +68,24 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "module": "fesm2022/juligc99-loro-ui.mjs",
-  "typings": "types/juligc99-loro-ui.d.ts",
   "exports": {
+    "./styles/breakpoints": {
+      "sass": "./styles/_breakpoints.scss",
+      "default": "./styles/_breakpoints.scss"
+    },
+    "./styles/breakpoints.scss": {
+      "sass": "./styles/_breakpoints.scss",
+      "default": "./styles/_breakpoints.scss"
+    },
+    "./design-tokens/loro-theme": {
+      "sass": "./design-tokens/loro-theme.scss",
+      "default": "./design-tokens/loro-theme.scss"
+    },
+    "./design-tokens/loro-theme.scss": {
+      "sass": "./design-tokens/loro-theme.scss",
+      "default": "./design-tokens/loro-theme.scss"
+    },
+    "./assets/*": "./assets/loro-ui/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -79,5 +94,7 @@
       "default": "./fesm2022/juligc99-loro-ui.mjs"
     }
   },
+  "module": "fesm2022/juligc99-loro-ui.mjs",
+  "typings": "types/juligc99-loro-ui.d.ts",
   "type": "module"
 }

package/styles/_breakpoints.scss

@@ -1,16 +1,20 @@
-$mobile-tablet-max: 1023.88px;
-$phone-max: 479.99px;
-$desktop-min: 1024px;
-$smart-tv-min: 1600px;
+// Public Loro UI Sass breakpoint API.
+// Import from apps with:
+// @use '@juligc99/loro-ui/styles/breakpoints' as bp;
+
+$phone-portrait-max: 599.98px !default;
+$tablet-min: 600px !default;
+$desktop-min: 1024px !default;
+$smart-tv-min: 1600px !default;
 
 @mixin on-phone-portrait {
-  @media (max-width: $phone-max) and (orientation: portrait) {
+  @media (max-width: $phone-portrait-max) {
     @content;
   }
 }
 
 @mixin on-mobile-tablet-landscape {
-  @media (min-width: $phone-max) and (max-width: $mobile-tablet-max) and (orientation: landscape) {
+  @media (min-width: $tablet-min) and (max-width: 1023.98px) and (orientation: landscape) {
     @content;
   }
 }

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

@@ -91,7 +91,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>;
@@ -542,7 +542,7 @@ declare class LoroAuthField implements FormValueControl<string> {
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     value: _angular_core.ModelSignal<string>;
-    type: _angular_core.InputSignal<"text" | "email" | "password">;
+    type: _angular_core.InputSignal<"email" | "text" | "password">;
     autocomplete: _angular_core.InputSignal<string>;
     selected: _angular_core.InputSignal<boolean>;
     state: _angular_core.InputSignal<LoroAuthFieldState>;
@@ -558,7 +558,7 @@ declare class LoroAuthField implements FormValueControl<string> {
     protected readonly hasError: _angular_core.Signal<boolean>;
     protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
     protected showToggle(): boolean;
-    protected resolvedType(): "text" | "email" | "password";
+    protected resolvedType(): "email" | "text" | "password";
     protected toggleVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthField, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthField, "loro-auth-field", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
@@ -623,10 +623,10 @@ declare class LoroInput implements FormValueControl<string> {
     placeholder: _angular_core.InputSignal<string>;
     helperText: _angular_core.InputSignal<string>;
     value: _angular_core.ModelSignal<string>;
-    type: _angular_core.InputSignal<"text" | "email" | "tel" | "password" | "search">;
+    type: _angular_core.InputSignal<"email" | "search" | "text" | "tel" | "password">;
     name: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"" | "text" | "email" | "tel" | "search" | "none" | "url" | "numeric" | "decimal">;
+    inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "none" | "tel" | "url" | "numeric" | "decimal">;
     icon: _angular_core.InputSignal<LoroIconName | null>;
     iconSize: _angular_core.InputSignal<number>;
     trailingIcon: _angular_core.InputSignal<LoroIconName | null>;