@musecat/uikit 0.1.1 → 0.1.2

package/.agents/references/Styles/Viewport.md

@@ -0,0 +1,42 @@
+# Viewport
+
+This document defines viewport mixin functions for easily writing media queries within SCSS.
+
+## Configuration
+
+Manages the breakpoint ranges (min, max, next) of `w1`, `w2`, `w3`, `w4` as a Map object.
+
+## Mixins
+
+- `@mixin viewport-max($max)`: Generates a max-width based media query
+- `@mixin viewport-min($min)`: Generates a min-width based media query
+- `@mixin viewport-between($min, $max)`: Generates a range-specified media query
+
+### Helper Mixins
+
+- `@mixin down($key)`: Applies at or below the max-width of a specific keyword (e.g., `w3`). Useful when writing mobile-first views.
+- `@mixin up($key)`: Applies at or above the min-width of a specific keyword. Useful when writing PC-first views.
+- `@mixin only($key)`: Applies exactly within the min ~ max range of a specific keyword.
+
+## Usage
+
+Import `_viewport.scss` as a module when designing custom components to control media queries.
+
+```scss
+@use "../../Styles/viewport" as vp;
+
+.container {
+  padding: 2rem;
+
+  @include vp.down(w3) {
+    // Applied on screens 767.98px or below
+    padding: 1rem;
+    flex-direction: column;
+  }
+
+  @include vp.only(w2) {
+    // Applied only on screens 320px ~ 409.98px
+    background: red;
+  }
+}
+```

package/README.md

@@ -36,6 +36,10 @@ export default function Example() {
 }
 ```
 
+## References
+
+This package includes `.agents/references/` directory with detailed documentation for every component, framework, and style system. Use it alongside TypeScript definitions as a guide when building with `@musecat/uikit`.
+
 ## Acknowledgements
 
 - [Motion (Framer Motion)](https://motion.dev/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@musecat/uikit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "description": "High-performance Next.js React UI component library with Squircle shapes, theme tokens, and gesture-driven overlays",
@@ -34,6 +34,7 @@
   "files": [
     "index.ts",
     "packages/",
+    ".agents/",
     "README.md",
     "LICENSE"
   ],

package/packages/Styles/_icon.scss

@@ -10,6 +10,8 @@ i,
 i::before,
 i::after,
 blockquote::before {
+  line-height: 1;
+  font-style: normal;
   font-family: var(--font-icon);
   font-variation-settings:
     "rond" 2,

package/packages/Styles/_importer.scss

@@ -1,7 +1,6 @@
 @use "animation";
 @use "color";
 @use "font";
-@use "icon";
 @use "system";
 @use "textstyle";
 @use "theme";