@mineui/utils 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +542 -30
  2. package/dist/scss/index.scss +9 -2674
  3. package/dist/scss/p1.scss +302 -0
  4. package/dist/scss/p2.scss +363 -0
  5. package/dist/scss/p3.scss +367 -0
  6. package/dist/scss/p4.scss +428 -0
  7. package/dist/scss/responsive.scss +383 -0
  8. package/package.json +7 -5
  9. package/dist/index.css +0 -1
  10. package/dist/index.css.map +0 -1
package/README.md CHANGED
@@ -8,10 +8,10 @@
8
8
  </div>
9
9
 
10
10
  <div align="center">
11
- <img src="https://img.shields.io/badge/v-0.0.3-black"/>
11
+ <img src="https://img.shields.io/badge/v-0.0.5-black"/>
12
12
  <a href="https://github.com/mineui-org"><img src="https://img.shields.io/badge/🔥-@mineui-black"/></a>
13
13
  <br>
14
- <img src="https://img.shields.io/badge/coverage-~%25-brightgreen" alt="Test Coverage" />
14
+ <img src="https://img.shields.io/badge/classes-7000+-blue" alt="Total Classes" />
15
15
  <img src="https://img.shields.io/github/issues/mineui-org/utils?style=flat" alt="Github Repo Issues" />
16
16
  <img src="https://img.shields.io/github/stars/mineui-org/utils?style=social" alt="GitHub Repo stars" />
17
17
  </div>
@@ -26,10 +26,10 @@
26
26
  - ## Overview 👀
27
27
 
28
28
  - #### Why ?
29
- > ..
29
+ > Complete utility-first CSS system with 7000+ classes. RTL-first with logical properties, responsive variants, dark mode support, and state variants (hover, focus, active). More comprehensive than Tailwind with better organization.
30
30
 
31
31
  - #### When ?
32
- > ..
32
+ > Use for rapid UI development with utility classes. Build entire interfaces without writing custom CSS. Perfect for teams who want consistency and speed.
33
33
 
34
34
  <br>
35
35
  <br>
@@ -39,30 +39,38 @@
39
39
  > install [`hmm`](https://github.com/minejs-org/hmm) first.
40
40
 
41
41
  ```bash
42
- # to install your library after publishing on `npm`
43
- hmm i @mineui/utils
42
+ # in your terminal
43
+ hmm i @mineui/utils @mineui/tokens @mineui/semantic
44
44
  ```
45
45
 
46
- You can also import the library's SCSS directly in your Sass files:
47
-
48
46
  ```scss
49
- @use "@mineui/utils/scss/index.scss";
47
+ # in your `.scss` files
48
+ @use "./node_modules/@mineui/utils/dist/scss/index.scss";
50
49
  ```
51
50
 
52
51
  <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
53
52
  <br>
54
53
 
55
54
 
56
- - ### ..
55
+ - ### Basic Example
57
56
 
58
- ```typescript
59
- ..
57
+ ```html
58
+ <div class="flex items-center justify-between p-6 bg-surface rounded-lg shadow-md">
59
+ <h2 class="text-2xl font-bold text-1">Title</h2>
60
+ <button class="px-6 py-3 bg-brand text-inverse rounded-md hover:bg-brand-hover transition">
61
+ Click Me
62
+ </button>
63
+ </div>
60
64
  ```
61
65
 
62
- - ### ..
66
+ - ### Responsive Example
63
67
 
64
- ```typescript
65
- ..
68
+ ```html
69
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
70
+ <div class="p-4 bg-surface rounded">Card 1</div>
71
+ <div class="p-4 bg-surface rounded">Card 2</div>
72
+ <div class="p-4 bg-surface rounded">Card 3</div>
73
+ </div>
66
74
  ```
67
75
 
68
76
  <br>
@@ -70,34 +78,538 @@
70
78
 
71
79
  - ## Documentation 📑
72
80
 
73
-
74
81
  - ### API ⛓️
75
82
 
76
- - #### `..`
77
- > ..
83
+ - #### Display & Layout
84
+
85
+ | Category | Classes | Use Case |
86
+ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
87
+ | **Display** | `block`, `inline-block`, `inline`, `flex`, `inline-flex`, `grid`, `inline-grid`, `table`, `table-row`, `table-cell`, `flow-root`, `contents`, `hidden` | Control element display type |
88
+ | **Position** | `static`, `fixed`, `absolute`, `relative`, `sticky` | Element positioning context |
89
+
90
+ ---
91
+
92
+ - #### Spacing (Margin & Padding)
93
+
94
+ | Property | Scale | Classes | RTL Support |
95
+ | ------------ | ------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
96
+ | **Margin** | 0-64 (0.25rem increments) | `m-{0-64}`, `mx-{0-64}`, `my-{0-64}`, `ms-{0-64}`, `me-{0-64}`, `mt-{0-64}`, `mb-{0-64}` | ✔️ Logical |
97
+ | **Negative** | 0-64 | `-m-{0-64}`, `-mx-{0-64}`, `-my-{0-64}`, `-ms-{0-64}`, `-me-{0-64}`, `-mt-{0-64}`, `-mb-{0-64}` | ✔️ Logical |
98
+ | **Auto** | - | `m-auto`, `mx-auto`, `my-auto`, `ms-auto`, `me-auto`, `mt-auto`, `mb-auto` | ✔️ Logical |
99
+ | **Padding** | 0-64 (0.25rem increments) | `p-{0-64}`, `px-{0-64}`, `py-{0-64}`, `ps-{0-64}`, `pe-{0-64}`, `pt-{0-64}`, `pb-{0-64}` | ✔️ Logical |
100
+
101
+ ---
102
+
103
+ - #### Sizing (Width & Height)
104
+
105
+ | Type | Classes | Notes |
106
+ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
107
+ | **Width - Full** | `w-auto`, `w-full`, `w-screen`, `w-min`, `w-max`, `w-fit` | Responsive utilities |
108
+ | **Width - Fractions** | `w-1/2`, `w-1/3`, `w-2/3`, `w-1/4`, `w-2/4`, `w-3/4`, `w-1/5`, `w-2/5`, `w-3/5`, `w-4/5`, `w-1/6`, `w-5/6`, `w-1/12` | Fractional widths |
109
+ | **Width - Fixed** | `w-{0,1,2,3,4,6,8,10,12,16,20,24,32,40,48,56,64}` | Token-based values |
110
+ | **Min/Max Width** | `min-w-0`, `min-w-full`, `min-w-{min,max,fit}`, `max-w-{none,full,min,max,fit}`, `max-w-{xs-7xl}`, `max-w-prose` | Container constraints |
111
+ | **Height** | `h-auto`, `h-full`, `h-screen`, `h-min`, `h-max`, `h-fit`, `h-1/2`, `h-1/3`, `h-2/3`, `h-1/4`, `h-3/4`, `h-1/5`, `h-2/5`, `h-3/5`, `h-4/5` | Similar to width |
112
+ | **Size (W+H)** | `size-{0,1,2,3,4,6,8,10,12,16,20,24,32,40,48,56,64}`, `size-auto`, `size-full` | Combined sizing |
113
+
114
+ ---
115
+
116
+ - #### Flexbox
117
+
118
+ | Property | Classes | Purpose |
119
+ | --------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- |
120
+ | **Direction** | `flex-row`, `flex-row-reverse`, `flex-col`, `flex-col-reverse` | Child layout direction |
121
+ | **Wrap** | `flex-wrap`, `flex-wrap-reverse`, `flex-nowrap` | Content wrapping |
122
+ | **Basis** | `basis-0`, `basis-auto`, `basis-full`, `basis-{1,2,3,4,6,8,10,12,16,24,32}`, `basis-{1/2,1/3,2/3,1/4,3/4}` | Flex item base size |
123
+ | **Grow/Shrink** | `grow`, `grow-0`, `shrink`, `shrink-0` | Flex expansion |
124
+ | **Shorthand** | `flex-1`, `flex-auto`, `flex-initial`, `flex-none` | Quick flex settings |
125
+ | **Justify** | `justify-{start,end,center,between,around,evenly,stretch}` | Horizontal alignment |
126
+ | **Align Items** | `items-{start,end,center,baseline,stretch}` | Vertical alignment |
127
+ | **Align Self** | `self-{auto,start,end,center,stretch,baseline}` | Individual item align |
128
+ | **Gap** | `gap-{0,1,2,3,4,5,6,8,10,12,16,20,24}`, `gap-x-{...}`, `gap-y-{...}` | Space between children |
129
+
130
+ ---
131
+
132
+ - #### Grid
133
+
134
+ | Property | Classes | Max Values |
135
+ | ---------------- | ---------------------------------------------------------------------- | ------------ |
136
+ | **Columns** | `grid-cols-{1-12}` | 12 columns |
137
+ | **Col Span** | `col-span-{1-12}`, `col-span-full`, `col-auto` | 12 span |
138
+ | **Col Position** | `col-start-{1-13}`, `col-end-{1-13}`, `col-start-auto`, `col-end-auto` | 13 positions |
139
+ | **Rows** | `grid-rows-{1-6}` | 6 rows |
140
+ | **Row Span** | `row-span-{1-6}`, `row-span-full`, `row-auto` | 6 span |
141
+ | **Row Position** | `row-start-{1-7}`, `row-end-{1-7}`, `row-start-auto`, `row-end-auto` | 7 positions |
142
+ | **Flow** | `grid-flow-{row,col,dense}`, `grid-flow-{row,col}-dense` | - |
143
+ | **Auto Sizing** | `auto-cols-{auto,min,max,fr}`, `auto-rows-{auto,min,max,fr}` | - |
144
+
145
+ ---
146
+
147
+ - #### Typography
148
+
149
+ | Category | Values | Classes | RTL Safe |
150
+ | ------------------------ | ------------------ | ----------------------------------------------------------------------------- | --------- |
151
+ | **Font Family** | Sans, Serif, Mono | `font-{sans,serif,mono}` | ✔️ |
152
+ | **Font Size** | xs-9xl | `text-{xs,sm,base,md,lg,xl,2xl-9xl}` | ✔️ |
153
+ | **Font Weight** | thin-black | `font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}` | ✔️ |
154
+ | **Font Style** | - | `italic`, `not-italic` | ✔️ |
155
+ | **Line Height** | 6 preset + numeric | `leading-{none,tight,snug,normal,relaxed,loose,3-10}` | ✔️ |
156
+ | **Letter Spacing** | 6 preset | `tracking-{tighter,tight,normal,wide,wider,widest}` | ✔️ |
157
+ | **Text Alignment** | 6 directions | `text-{start,end,left,center,right,justify}` | ✔️ Logical |
158
+ | **Text Color** | Semantic | `text-{1,2,3,4,inverse,brand,success,warning,error,info,current,transparent}` | ✔️ |
159
+ | **Decoration** | - | `underline`, `overline`, `line-through`, `no-underline` | ✔️ |
160
+ | **Decoration Style** | 5 types | `decoration-{solid,double,dotted,dashed,wavy}` | ✔️ |
161
+ | **Decoration Thickness** | auto-8px | `decoration-{auto,from-font,0,1,2,4,8}` | ✔️ |
162
+ | **Transform** | 4 types | `uppercase`, `lowercase`, `capitalize`, `normal-case` | ✔️ |
163
+ | **Overflow** | - | `truncate`, `text-ellipsis`, `text-clip` | ✔️ |
164
+ | **Wrap** | 4 types | `text-{wrap,nowrap,balance,pretty}` | ✔️ |
165
+ | **Whitespace** | 6 types | `whitespace-{normal,nowrap,pre,pre-line,pre-wrap,break-spaces}` | ✔️ |
166
+ | **Word Break** | 4 types | `break-{normal,words,all,keep}` | ✔️ |
167
+ | **Hyphens** | 3 types | `hyphens-{none,manual,auto}` | ✔️ |
168
+
169
+ ---
170
+
171
+ - #### Backgrounds & Borders
172
+
173
+ | Category | Variants | Classes |
174
+ | ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
175
+ | **Color** | 11 semantic | `bg-{page,surface,raised,brand,brand-subtle,success,success-subtle,warning,warning-subtle,error,error-subtle,info,info-subtle,current,transparent}` |
176
+ | **Attachment** | 3 types | `bg-{fixed,local,scroll}` |
177
+ | **Position** | 9 positions | `bg-{bottom,center,left,left-bottom,left-top,right,right-bottom,right-top,top}` |
178
+ | **Repeat** | 6 types | `bg-{repeat,no-repeat,repeat-x,repeat-y,repeat-round,repeat-space}` |
179
+ | **Size** | 3 types | `bg-{auto,cover,contain}` |
180
+ | **Clip** | 4 types | `bg-clip-{border,padding,content,text}` |
181
+ | **Origin** | 3 types | `bg-origin-{border,padding,content}` |
182
+ | **Border Width** | 5 values | `border-0`, `border`, `border-2`, `border-4`, `border-8` |
183
+ | **Border Sides** | 6 logical | `border-{x,y,s,e,t,b}` |
184
+ | **Border Color** | 8 semantic | `border-{1,2,3,brand,success,warning,error,current,transparent}` |
185
+ | **Border Style** | 6 types | `border-{solid,dashed,dotted,double,hidden,none}` |
186
+ | **Border Radius** | 9 values | `rounded-{none,sm,base,md,lg,xl,2xl,3xl,full}` |
187
+ | **Radius Corners** | Logical | `rounded-{s,e,t,b}`, `rounded-{ss,se,ee,es}` |
188
+
189
+ ---
190
+
191
+ - #### Effects & Filters
192
+
193
+ | Feature | Values/Range | Classes | Use Case |
194
+ | ----------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
195
+ | **Shadow** | 8 levels | `shadow-{none,xs,sm,md,lg,xl,inner}` | Depth & elevation |
196
+ | **Opacity** | 0-100 (5% step) | `opacity-{0,5,10,20,25,30,40,50,60,70,75,80,90,95,100}` | Transparency |
197
+ | **Mix Blend** | 16 modes | `mix-blend-{normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity}` | Blend effects |
198
+ | **Bg Blend** | 16 modes | `bg-blend-{...same as above...}` | Background blend |
199
+ | **Blur** | 8 levels | `blur-{none,sm,base,md,lg,xl,2xl,3xl}` | Blur effect |
200
+ | **Brightness** | 11 levels | `brightness-{0,50,75,90,95,100,105,110,125,150,200}` | Brightness adjust |
201
+ | **Contrast** | 7 levels | `contrast-{0,50,75,100,125,150,200}` | Contrast adjust |
202
+ | **Grayscale** | 2 states | `grayscale-0`, `grayscale` | Desaturate |
203
+ | **Invert** | 2 states | `invert-0`, `invert` | Invert colors |
204
+ | **Saturate** | 5 levels | `saturate-{0,50,100,150,200}` | Color saturation |
205
+ | **Sepia** | 2 states | `sepia-0`, `sepia` | Sepia tone |
206
+ | **Hue Rotate** | 6 angles | `hue-rotate-{0,15,30,60,90,180}` | Hue shift |
207
+ | **Backdrop Blur** | 6 levels | `backdrop-blur-{none,sm,base,md,lg,xl}` | Frosted glass |
208
+ | **Backdrop Brightness** | 5 levels | `backdrop-brightness-{50,75,100,125,150}` | Background brightness |
209
+ | **Backdrop Contrast** | 5 levels | `backdrop-contrast-{50,75,100,125,150}` | Background contrast |
210
+
211
+ ---
212
+
213
+ - #### Transforms & Transitions
214
+
215
+ | Category | Values | Classes |
216
+ | -------------- | ------------- | ---------------------------------------------------------------------------------------------- |
217
+ | **Scale** | 0.5-1.5 | `scale-{0,50,75,90,95,100,105,110,125,150}`, `scale-{x,y}-{0,50,75,90,95,100,105,110,125,150}` |
218
+ | **Rotate** | 0-180° | `rotate-{0,1,2,3,6,12,45,90,180}`, `-rotate-{1,2,3,6,12,45,90,180}` |
219
+ | **Translate** | -100% to 100% | `translate-{x,y}-{0,1,2,3,4,6,8,12,16,1/2,full}`, `-translate-{...}` |
220
+ | **Skew** | 0-12° | `skew-{x,y}-{0,1,2,3,6,12}`, `-skew-{...}` |
221
+ | **Origin** | 9 positions | `origin-{center,top,top-right,right,bottom-right,bottom,bottom-left,left,top-left}` |
222
+ | **Transition** | 6 types | `transition-{none,all,colors,opacity,shadow,transform}` |
223
+ | **Duration** | 75-700ms | `duration-{75,100,150,200,300,500,700}` |
224
+ | **Timing** | 4 functions | `ease-{linear,in,out,in-out}` |
225
+ | **Delay** | 75-700ms | `delay-{75,100,150,200,300,500,700}` |
226
+
227
+ ---
228
+
229
+ - #### Layout Utilities
230
+
231
+ | Feature | Classes | RTL Safe |
232
+ | ------------------- | ------------------------------------------------------------------------------------------------ | --------- |
233
+ | **Inset** | `inset-{0,auto}`, `inset-{x,y}-{0,auto}`, `start/end/top/bottom-{0,auto,1-16,full}` | ✔️ Logical |
234
+ | **Float** | `float-{start,end,left,right,none}` | ✔️ Logical |
235
+ | **Clear** | `clear-{start,end,left,right,both,none}` | ✔️ Logical |
236
+ | **Overflow** | `overflow-{auto,hidden,clip,visible,scroll}`, `overflow-{x,y}-{auto,hidden,clip,visible,scroll}` | ✔️ |
237
+ | **Overscroll** | `overscroll-{auto,contain,none}`, `overscroll-{x,y}-{auto,contain,none}` | ✔️ |
238
+ | **Scroll** | `scroll-{auto,smooth}` | ✔️ |
239
+ | **Z-Index** | `z-{0,10,20,30,40,50,auto}`, `z-{dropdown,sticky,fixed,modal,popover,tooltip}` | ✔️ |
240
+ | **Visibility** | `visible`, `invisible`, `collapse` | ✔️ |
241
+ | **Isolation** | `isolate`, `isolation-auto` | ✔️ |
242
+ | **Object Fit** | `object-{contain,cover,fill,none,scale-down}` | ✔️ |
243
+ | **Object Position** | `object-{bottom,center,left,left-bottom,left-top,right,right-bottom,right-top,top}` | ✔️ |
244
+ | **Aspect Ratio** | `aspect-{auto,square,video,4-3,21-9,portrait}` | ✔️ |
245
+ | **Columns** | `columns-{auto,1,2,3,4}` | ✔️ |
246
+ | **Break** | `break-{before,after,inside}-{auto,avoid,page,column}` | ✔️ |
247
+
248
+ ---
249
+
250
+ - #### Interactions
251
+
252
+ | Category | Values | Classes |
253
+ | ---------------------- | ------------ | ------------------------------------------------------------------------------------------ |
254
+ | **Cursor** | 10 types | `cursor-{auto,default,pointer,wait,text,move,help,not-allowed,none,grab,grabbing}` |
255
+ | **Pointer Events** | 2 states | `pointer-events-{none,auto}` |
256
+ | **Resize** | 4 types | `resize-{none,both,y,x}` |
257
+ | **User Select** | 4 types | `select-{none,text,all,auto}` |
258
+ | **Appearance** | 2 types | `appearance-{none,auto}` |
259
+ | **Will Change** | 4 properties | `will-change-{auto,scroll,contents,transform}` |
260
+ | **Content Visibility** | 3 states | `content-{auto,hidden,visible}` |
261
+ | **Touch Action** | 9 actions | `touch-{auto,none,pan-x,pan-left,pan-right,pan-y,pan-up,pan-down,pinch-zoom,manipulation}` |
262
+
263
+ ---
264
+
265
+ - #### State Variants
266
+
267
+ | State | Coverage |
268
+ | --------------- | --------------------------------------------------------- |
269
+ | **Hover** | Background, Opacity, Scale, Shadow, Translate, Brightness |
270
+ | **Focus** | Outline, Ring, Scale |
271
+ | **Active** | Scale, Opacity, Background |
272
+ | **Disabled** | Opacity, Cursor |
273
+ | **Group Hover** | Multiple child effects |
274
+ | **First/Last** | Margin, Radius |
275
+ | **Odd/Even** | Background (striped tables) |
276
+ | **Placeholder** | Text color, Opacity |
277
+ | **File Input** | Border, Background, Color |
278
+ | **Peer** | Sibling state reaction |
279
+
280
+ ---
281
+
282
+ - #### Responsive Variants
283
+
284
+ | Breakpoint | Width | Prefix |
285
+ | ---------- | ------ | -------- |
286
+ | Mobile | 0px | *(none)* |
287
+ | Tablet | 640px | `sm:` |
288
+ | Medium | 768px | `md:` |
289
+ | Large | 1024px | `lg:` |
290
+ | XLarge | 1280px | `xl:` |
291
+ | 2XLarge | 1536px | `2xl:` |
292
+
293
+ > **Responsive Classes Available**: Display, Flexbox, Grid, Width, Text, Spacing, Alignment, and more!
294
+
295
+ ---
296
+
297
+ - #### Dark Mode & Theme
298
+
299
+ | Feature | Classes |
300
+ | --------------- | ------------------------ |
301
+ | **Dark Mode** | 20+ utility variants |
302
+ | **Light Only** | `dark:hidden` |
303
+ | **Dark Only** | `dark:block` |
304
+ | **Auto Switch** | Data attribute & system pref |
305
+
306
+ ---
307
+
308
+ - #### RTL & Accessibility
309
+
310
+ | Feature | Support |
311
+ | ----------------- | -------------------- |
312
+ | **RTL-Aware** | ✔️ Logical properties |
313
+ | **Flex Reverse** | ✔️ Available |
314
+ | **Icon Flip** | ✔️ Available |
315
+ | **Screen Reader** | ✔️ `sr-only` class |
316
+ | **Skip Link** | ✔️ Included |
317
+ | **Focus Visible** | ✔️ Ring support |
318
+
319
+ ---
320
+
321
+ - #### Advanced Features
322
+
323
+ | Feature | Classes | Purpose |
324
+ | --------------------- | --------------------------------------------------------- | ----------------------------------------- |
325
+ | **Container** | `.container` | Responsive max-width wrapper with padding |
326
+ | **Space Between** | `space-x-{...}`, `space-y-{...}` | Gap between flex/grid children |
327
+ | **Motion Safe** | `motion-safe:animate-spin`, `motion-safe:animate-bounce` | Respect prefers-reduced-motion |
328
+ | **Print** | `print:block`, `print:hidden`, `print:flex`, `print:grid` | Print-specific styles |
329
+ | **Container Queries** | `sm:grid-cols-2`, `md:grid-cols-3`, `lg:grid-cols-4` | Modern container-based responsive |
330
+
331
+ <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
332
+ <br>
333
+
334
+ - ### Categories 📋
335
+
336
+ - #### 1. Layout & Display
337
+
338
+ ```html
339
+ <!-- Display -->
340
+ <div class="block">Block</div>
341
+ <div class="flex">Flex</div>
342
+ <div class="grid">Grid</div>
343
+ <div class="hidden">Hidden</div>
344
+
345
+ <!-- Position -->
346
+ <div class="relative">Relative</div>
347
+ <div class="absolute top-0 start-0">Absolute</div>
348
+ <div class="fixed bottom-4 end-4">Fixed</div>
349
+ <div class="sticky top-0">Sticky</div>
350
+ ```
351
+
352
+ - #### 2. Flexbox
353
+
354
+ ```html
355
+ <div class="flex flex-col items-center justify-between gap-4">
356
+ <div class="flex-1">Item 1</div>
357
+ <div class="flex-none">Item 2</div>
358
+ </div>
359
+ ```
360
+
361
+ - #### 3. Grid
362
+
363
+ ```html
364
+ <div class="grid grid-cols-3 gap-4">
365
+ <div class="col-span-2">Wide</div>
366
+ <div>Narrow</div>
367
+ </div>
368
+ ```
369
+
370
+ - #### 4. Spacing (RTL-Aware!)
371
+
372
+ ```html
373
+ <!-- Padding -->
374
+ <div class="p-4">All sides</div>
375
+ <div class="px-6 py-3">Horizontal & Vertical</div>
376
+ <div class="ps-4 pe-8">Start & End (RTL-aware!)</div>
377
+
378
+ <!-- Margin -->
379
+ <div class="m-4">All sides</div>
380
+ <div class="mx-auto">Center</div>
381
+ <div class="ms-4 me-auto">Start & End (RTL-aware!)</div>
382
+
383
+ <!-- Negative spacing -->
384
+ <div class="-mt-4">Negative margin</div>
385
+ ```
386
+
387
+ - #### 5. Sizing
388
+
389
+ ```html
390
+ <!-- Width -->
391
+ <div class="w-full">100%</div>
392
+ <div class="w-1/2">50%</div>
393
+ <div class="w-64">256px</div>
78
394
 
79
- ```typescript
80
- ..
395
+ <!-- Height -->
396
+ <div class="h-screen">100vh</div>
397
+ <div class="h-full">100%</div>
398
+
399
+ <!-- Size (w+h together) -->
400
+ <div class="size-16">64x64px</div>
401
+ ```
402
+
403
+ - #### 6. Typography
404
+
405
+ ```html
406
+ <!-- Font -->
407
+ <p class="font-sans text-base font-normal leading-normal">Text</p>
408
+ <h1 class="text-4xl font-bold">Heading</h1>
409
+
410
+ <!-- Alignment (RTL-aware) -->
411
+ <p class="text-start">Aligned to start</p>
412
+ <p class="text-center">Centered</p>
413
+
414
+ <!-- Colors (Semantic) -->
415
+ <p class="text-1">Primary text</p>
416
+ <p class="text-brand">Brand color</p>
81
417
  ```
82
418
 
83
- - #### `..`
419
+ - #### 7. Backgrounds
84
420
 
85
- > ..
421
+ ```html
422
+ <div class="bg-surface">Surface</div>
423
+ <div class="bg-brand">Brand color</div>
424
+ <div class="bg-gradient">Gradient</div>
425
+ ```
426
+
427
+ - #### 8. Borders (RTL-Aware!)
428
+
429
+ ```html
430
+ <!-- Border -->
431
+ <div class="border border-1 rounded-lg">Bordered</div>
86
432
 
87
- ```typescript
88
- ..
433
+ <!-- Sides (RTL-aware) -->
434
+ <div class="border-t border-b">Top & Bottom</div>
435
+ <div class="border-s">Start (left in LTR, right in RTL)</div>
436
+
437
+ <!-- Radius -->
438
+ <div class="rounded-full">Circle</div>
439
+ <div class="rounded-t-lg">Top rounded</div>
89
440
  ```
90
441
 
91
- <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
92
- <br>
442
+ - #### 9. Effects
443
+
444
+ ```html
445
+ <!-- Shadow -->
446
+ <div class="shadow-lg">Large shadow</div>
447
+
448
+ <!-- Opacity -->
449
+ <div class="opacity-50">50% opacity</div>
450
+
451
+ <!-- Filters -->
452
+ <img class="blur-sm grayscale" />
453
+ <div class="backdrop-blur-lg">Backdrop blur</div>
454
+ ```
455
+
456
+ - #### 10. Transforms
457
+
458
+ ```html
459
+ <!-- Scale -->
460
+ <div class="scale-110">110% size</div>
461
+
462
+ <!-- Rotate -->
463
+ <div class="rotate-45">45 degrees</div>
464
+
465
+ <!-- Translate -->
466
+ <div class="translate-x-4 translate-y-2">Moved</div>
467
+ ```
468
+
469
+ <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
470
+ <br>
471
+
472
+ - ### Responsive Variants 📱
473
+
474
+ > Use `sm:`, `md:`, `lg:`, `xl:`, `2xl:` prefixes for responsive design.
475
+
476
+ ```html
477
+ <!-- Hidden on mobile, visible on tablet+ -->
478
+ <div class="hidden md:block">Visible on tablet</div>
479
+
480
+ <!-- Responsive grid -->
481
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
482
+ <div>Item</div>
483
+ </div>
484
+
485
+ <!-- Responsive text -->
486
+ <h1 class="text-2xl md:text-4xl lg:text-6xl">Responsive</h1>
487
+
488
+ <!-- Responsive spacing -->
489
+ <div class="p-4 md:p-8 lg:p-12">Content</div>
490
+ ```
491
+
492
+ **Breakpoints:**
493
+ - `sm`: 640px
494
+ - `md`: 768px
495
+ - `lg`: 1024px
496
+ - `xl`: 1280px
497
+ - `2xl`: 1536px
498
+
499
+ - ### State Variants 🎯
500
+
501
+ - #### Hover
502
+
503
+ ```html
504
+ <button class="bg-brand hover:bg-brand-hover hover:scale-105 transition">
505
+ Hover me
506
+ </button>
507
+
508
+ <div class="opacity-50 hover:opacity-100">Fade in</div>
509
+ <img class="hover:scale-110 hover:rotate-3 transition" />
510
+ ```
511
+
512
+ - #### Focus
513
+
514
+ ```html
515
+ <input class="focus:ring focus:border-brand" />
516
+ <button class="focus:outline-none focus:ring-2">Focus</button>
517
+ ```
518
+
519
+ - #### Active
520
+
521
+ ```html
522
+ <button class="active:scale-95 active:opacity-80">
523
+ Press me
524
+ </button>
525
+ ```
526
+
527
+ - #### Disabled
528
+
529
+ ```html
530
+ <button class="disabled:opacity-50 disabled:cursor-not-allowed" disabled>
531
+ Disabled
532
+ </button>
533
+ ```
534
+
535
+ - #### Group Hover
536
+
537
+ ```html
538
+ <div class="group">
539
+ <img class="group-hover:scale-105 transition" />
540
+ <p class="group-hover:text-brand">Hover parent</p>
541
+ </div>
542
+ ```
543
+
544
+ - ### Dark Mode 🌙
545
+
546
+ ```html
547
+ <!-- Auto switches with theme -->
548
+ <div class="bg-surface text-1 dark:bg-raised dark:text-2">
549
+ Content adapts to theme
550
+ </div>
551
+
552
+ <!-- Show/hide based on theme -->
553
+ <div class="block dark:hidden">Light only</div>
554
+ <div class="hidden dark:block">Dark only</div>
555
+ ```
556
+
557
+ - ### RTL Support 🌍
558
+
559
+ ```html
560
+ <!-- Automatic with logical properties -->
561
+ <div class="ps-4 pe-8">
562
+ <!-- Padding-left: 16px in LTR -->
563
+ <!-- Padding-right: 16px in RTL -->
564
+ </div>
565
+
566
+ <!-- RTL-specific -->
567
+ <div class="rtl:flex-row-reverse">
568
+ Reversed in RTL
569
+ </div>
570
+
571
+ <svg class="rtl:rotate-180">
572
+ <!-- Icons flip in RTL -->
573
+ </svg>
574
+ ```
575
+
576
+ - ### Container 📦
577
+
578
+ ```html
579
+ <div class="container">
580
+ <!-- Responsive max-width with padding -->
581
+ <!-- Centers content automatically -->
582
+ </div>
583
+ ```
584
+
585
+ - ### Accessibility ♿
586
+
587
+ ```html
588
+ <!-- Screen reader only -->
589
+ <span class="sr-only">For screen readers</span>
590
+
591
+ <!-- Skip link -->
592
+ <a href="#main" class="sr-only focus:not-sr-only">
593
+ Skip to main content
594
+ </a>
595
+
596
+ <!-- Focus visible -->
597
+ <button class="focus:ring">Keyboard accessible</button>
598
+ ```
599
+
600
+ <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
601
+ <br>
93
602
 
94
603
  - ### Related 🔗
95
604
 
96
- - ##### [..](#)
97
- > ..
605
+ - ##### [@mineui/tokens](https://github.com/mineui-org/tokens)
606
+ > Design tokens used by utilities
607
+
608
+ - ##### [@mineui/semantic](https://github.com/mineui-org/semantic)
609
+ > Semantic variables for theming
98
610
 
99
- - ##### [..](#)
100
- > ..
611
+ - ##### [@mineui/reset](https://github.com/mineui-org/reset)
612
+ > CSS reset to use with utilities
101
613
 
102
614
  <!-- ╚═════════════════════════════════════════════════════════════════╝ -->
103
615