@fwkui/x-css 1.0.4 → 1.0.7

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.
package/README.md CHANGED
@@ -1,103 +1,159 @@
1
- # Fwkui XCSS
1
+ # @fwkui/x-css 🚀
2
2
 
3
- XCSS la thu vien tao CSS tu class viet tat. Ban chi can viet class tren HTML/React, thu vien se tu dong sinh rule va dua vao `adoptedStyleSheets`. Tai lieu nay giup ban nho nhanh key -> property -> value de viet class dung ngay.
3
+ **@fwkui/x-css** một thư viện CSS-in-JS siêu nhẹ, hiệu năng cao, kế thừa tinh hoa từ `fwxcss` với pháp Emmet-like. giúp bạn viết CSS nhanh hơn bằng cách sử dụng các lớp atomic ngắn gọn, hỗ trợ đầy đủ TypeScript, SSR và khả năng mở rộng mạnh mẽ.
4
+
5
+ ![License](https://img.shields.io/npm/l/@fwkui/x-css)
6
+ ![Version](https://img.shields.io/npm/v/@fwkui/x-css)
7
+
8
+ ---
9
+
10
+ ## 📖 Hướng dẫn Cơ bản
11
+
12
+ ### 1. Cú pháp Cốt lõi
13
+ Mỗi class trong @fwkui/x-css được cấu tạo theo công thức:
14
+ `[Media]:[Layer][Property][Value][@Selector]`
15
+
16
+ **Ví dụ:**
17
+ - `m10px` ⮕ `margin: 10px`
18
+ - `cRed` ⮕ `color: red`
19
+ - `sm:p20px` ⮕ `@media (min-width: 576px) { padding: 20px }`
20
+ - `3bgWhite` ⮕ `@layer l3 { background: white }`
21
+ - `cBlue@:hover` ⮕ `.class:hover { color: blue }`
22
+
23
+ ### 2. Nguyên lý Parser (Scan & Slice) 🧠
24
+ Thư viện quét class từ trái sang phải và tự động cắt Property/Value dựa trên các điểm ngắt (Số, Chữ Hoa, Ký tự đặc biệt...), giúp tốc độ xử lý nhanh hơn ~1.6x so với Regex truyền thống.
25
+
26
+ | Loại điểm ngắt | Ví dụ Class | Phân tích (Prop \| Value) |
27
+ | :--- | :--- | :--- |
28
+ | **Số (0-9)** | `w100px` | `w` (width) \| `100px` |
29
+ | **Chữ Hoa (A-Z)** | `dFlex` | `d` (display) \| `Flex` |
30
+ | **Dấu gạch ngang + Số** | `m-10px` | `m` (margin) \| `-10px` |
31
+
32
+ > [!IMPORTANT]
33
+ > **Lưu ý về CamelCase**: Sử dụng `mt10px` hoặc `margin-top-10px`, tránh `marginTop10px` để đảm bảo parser hoạt động chính xác.
34
+
35
+ ---
36
+
37
+ ## 📚 Bộ Từ điển (Dictionary)
38
+ Danh sách đầy đủ các từ viết tắt được cập nhật liên tục tại [DICTIONARY.md](./DICTIONARY.md).
39
+
40
+ ### Một số Alias phổ biến:
41
+ - **Layout**: `d` (display), `pos` (position), `z` (z-index), `fl` (float).
42
+ - **Flexbox**: `fx` (flex), `ai` (align-items), `jc` (justify-content).
43
+ - **Spacing**: `m` (margin), `p` (padding), `w` (width), `h` (height).
44
+ - **Styling**: `c` (color), `bg` (background), `bd` (border), `op` (opacity).
45
+ - **Typography**: `fz` (font-size), `fw` (font-weight), `ta` (text-align).
46
+
47
+ ---
48
+
49
+ ## 📦 Cài đặt
4
50
 
5
- ## Cài đặt
6
51
  ```bash
7
- npm i @fwkui/x-css
52
+ npm install @fwkui/x-css
53
+ ```
54
+
55
+ ---
56
+
57
+ ## 🚀 Hướng dẫn Sử dụng
58
+
59
+ ### 1. Vanilla JavaScript (Tự động)
60
+
61
+ Để tự động scan và apply style cho toàn bộ document:
62
+
63
+ ```javascript
64
+ import xcss from '@fwkui/x-css';
65
+
66
+ // Khởi tạo và lắng nghe thay đổi DOM
67
+ xcss.cssObserve(document);
8
68
  ```
9
69
 
10
- ## Sử dụng nhanh (vanilla/HTML)
70
+ Sử dụng trong HTML:
11
71
  ```html
12
- <!doctype html>
13
- <html>
14
- <body>
15
- <div id="card" class="bgc#fff p10">Card</div>
16
-
17
- <script type="module">
18
- import { cssObserve, cssClsx } from "./src/index.js";
19
-
20
- const clsx = cssClsx(document);
21
- document.querySelector("#card").className = clsx("bgc#fff", "p10");
22
- cssObserve(document);
23
- </script>
24
- </body>
25
- </html>
72
+ <div class="dFlex cRed m20px">Hello World</div>
26
73
  ```
27
74
 
28
- ## Sử dụng voi React
29
- ```jsx
30
- import { useEffect, useMemo } from "react";
31
- import { xcss } from "@fwkui/x-css";
75
+ ### 2. React / Components (`clsx`)
32
76
 
33
- export default function Card() {
34
- const engine = useMemo(() => xcss().buildCss(document), []);
77
+ Sử dụng `clsx` để kết hợp class động và tối ưu việc gom nhóm string (tương tự `classnames` nhưng tích hợp sẵn parser engine):
35
78
 
36
- useEffect(() => {
37
- engine?.observe();
38
- }, [engine]);
79
+ ```jsx
80
+ import { clsx } from '@fwkui/x-css';
39
81
 
82
+ function Button({ primary, children }) {
40
83
  return (
41
- <div className={engine?.clsx("bgc#fff", "p10") ?? "bgc#fff p10"}>
42
- Card
43
- </div>
84
+ <button
85
+ className={clsx(
86
+ 'p10px;20px', // padding: 10px 20px
87
+ 'bdn bdra4px', // border: none, border-radius: 4px
88
+ 'tr0.2s', // transition: 0.2s
89
+ 'cWhite', // color: white
90
+ primary ? 'bgBlue' : 'bgGray',
91
+ 'op0.8@:hover' // Opacity 0.8 on hover
92
+ )}
93
+ >
94
+ {children}
95
+ </button>
44
96
  );
45
97
  }
46
98
  ```
47
99
 
48
- ## Cac quy tac viet class nhanh
49
- Dang co ban: `[prefix:][layer][prop][value][@selector]`
50
-
51
- - `bgc#fff` -> background-color #fff
52
- - `p10px` -> padding 10px
53
- - `p!10px` -> padding 10px !important
54
- - `w--size` -> width: var(--size)
55
- - `bg{linear-gradient(...)}` -> dung gia tri raw
56
- - `mx10px` -> margin-left/right 10px
57
- - `p10&bgc#fff` -> ket hop nhieu cap prop+value
58
-
59
- ## Value ext mac dinh
60
- ```txt
61
- n:none
62
- nm:normal
63
- a:auto
64
- i:inherit
65
- in:initial
66
- is:inline-start
67
- ie:inline-end
68
- tr:transparent
69
- c:center
70
- cl:collapse
71
- l:left
72
- r:right
73
- h:hidden
74
- v:visible
75
- s:start
76
- e:end
77
- t:top
78
- b:bottom
79
- bs:block-start
80
- be:block-end
81
- ```
100
+ ### 3. Cấu hình (Configuration)
82
101
 
83
- ## Cấu hình tuy chinh
84
- ```js
85
- import { xcss } from "@fwkui/x-css";
102
+ Bạn thể truyền object config khi khởi tạo:
86
103
 
87
- const { buildCss } = xcss({
88
- css: [".app{font-family:sans-serif;}", ".box{border-radius:8px;}"],
89
- gValue: {
90
- btn: ["padding:8px 12px", "border-radius:6px"],
104
+ ```javascript
105
+ import xcss from '@fwkui/x-css';
106
+
107
+ xcss.cssObserve(document, {
108
+ // Thêm màu sắc hoặc giá trị custom
109
+ theme: {
110
+ brand: '#ff5722',
111
+ dark: '#333333'
91
112
  },
92
- exNames: ["no-xcss", "legacy-*"],
93
- mQuery: [{ tablet: "screen and (min-width: 900px)" }],
94
- valueExt: { brand: "#0ea5e9" },
113
+ // Thêm breakpoint tùy chỉnh
114
+ breakpoints: [
115
+ { tablet: 'screen and (min-width: 768px)' }
116
+ ],
117
+ // Base CSS
118
+ base: 'body { margin: 0; font-family: sans-serif; }',
119
+
120
+ // [New] Thêm tiền tố (Prefix) để tránh xung đột
121
+ prefix: 'fk-' // Chỉ xử lý các class bắt đầu bằng 'fk-'
95
122
  });
123
+ ```
124
+
125
+ Sau đó sử dụng: `fk-cBrand`, `fk-tablet:dBlock`.
126
+ Các class không có tiền tố (ví dụ `m10px`) sẽ bị **bỏ qua**.
127
+
128
+ ### 4. Server-Side Rendering (SSR)
96
129
 
97
- const engine = buildCss(document);
98
- engine?.observe();
130
+ Để hỗ trợ SSR (Next.js, Remix...), bạn cần inject CSS sinh ra từ server vào thẻ `<head>`:
131
+
132
+ ```javascript
133
+ import { getCss } from '@fwkui/x-css';
134
+
135
+ // Trong file layout/server entry
136
+ const styles = getCss();
137
+
138
+ // Inject HTML
139
+ // <style dangerouslySetInnerHTML={{ __html: styles }} />
99
140
  ```
100
141
 
101
- ## Tu dien viet tat thuoc tinh (dễ tra cứu)
102
- Để tài liệu nhẹ và dễ nhìn, **bảng từ điển đầy đủ đã được tách riêng**:
103
- - Xem tại: `DICTIONARY.md`
142
+ ---
143
+
144
+ ## ⚙️ Hỗ trợ AI Coding
145
+
146
+ Để AI (Cursor, Copilot) code chính xác với cú pháp của @fwkui/x-css, hãy thêm rule sau vào `.cursorrules` hoặc prompt:
147
+
148
+ ```markdown
149
+ You are using @fwkui/x-css. Follow these rules:
150
+ 1. Syntax: `[Media]:[Layer][Property][Value][@Selector]`
151
+ 2. Layer prefix: `3bgWhite` (NOT `3:bgWhite`).
152
+ 3. Selector suffix: `cRed@:hover` (NOT `hover:cRed`).
153
+ 4. Value capitalization: `dFlex`, `posAbs`.
154
+ 5. Use aliases from DICTIONARY.md (e.g., `m` for margin, `d` for display).
155
+ ```
156
+
157
+ ---
158
+
159
+ *Verified & Updated at 2026-01-27*
@@ -0,0 +1,6 @@
1
+ import _default from './index.mjs';
2
+ export { XCSSConfig, clsx, getCss, setClsxRoot } from './index.mjs';
3
+
4
+
5
+
6
+ export { _default as default };
@@ -0,0 +1,6 @@
1
+ import _default from './index.js';
2
+ export { XCSSConfig, clsx, getCss, setClsxRoot } from './index.js';
3
+
4
+
5
+
6
+ export { _default as default };
@@ -0,0 +1,10 @@
1
+ "use strict";var B=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var de=Object.prototype.hasOwnProperty;var be=(e,t)=>{for(var a in t)B(e,a,{get:t[a],enumerable:!0})},fe=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let b of ce(t))!de.call(e,b)&&b!==a&&B(e,b,{get:()=>t[b],enumerable:!(i=ae(t,b))||i.enumerable});return e};var pe=e=>fe(B({},"__esModule",{value:!0}),e);var Se={};be(Se,{clsx:()=>we,default:()=>ve,getCss:()=>ke,setClsxRoot:()=>xe});module.exports=pe(Se);var ne=e=>(e=e||new Map,{all:e,on(t,a){let i=e.get(t);i?i.push(a):e.set(t,[a])},off(t,a){let i=e.get(t);i&&(a?i.splice(i.indexOf(a)>>>0,1):e.set(t,[]))},emit(t,a){let i=e.get(t);i&&i.slice().forEach(w=>{w(a)});let b=e.get("*");b&&b.slice().forEach(w=>{w(t,a)})}});function ue(e){return e>=97&&e<=122}function N(e){if(!e||e.length<2)return null;let t=0,a=e.length,i="",b=e.lastIndexOf("@");if(b>0){let m=e.lastIndexOf("]");(m===-1||b>m)&&(i=e.substring(b+1),a=b)}let w="",C="",A=e.indexOf(":",t);if(A>0&&A<a){let m=e.substring(t,A);t=A+1,w=m}let v=t;for(;v<a;){let m=e.charCodeAt(v);if(m>=48&&m<=57)v++;else break}if(v>t&&(C=e.substring(t,v),t=v),t>=a)return null;if(e.charCodeAt(t)===38)return{mq:w,layer:C,prop:"&",val:e.substring(t+1,a),selector:i};if(e.charCodeAt(t)===91){let m=e.indexOf("]",t);if(m>t)return{mq:w,layer:C,prop:e.substring(t,m+1),val:"",selector:i}}let E=t;for(;E<a;){let m=e.charCodeAt(E);if(m===45||m===46){if(E+1<a){let I=e.charCodeAt(E+1);if(I>=48&&I<=57)break}E++;continue}if(!ue(m))break;E++}if(E===t)return null;let g=e.substring(t,E),R=e.substring(E,a);return{mq:w,layer:C,prop:g,val:R,selector:i}}var oe={a:"all",ac:"align-content",acc:"accent-color",ai:"align-items",ani:"animation",anic:"animation-composition",anide:"animation-delay",anidi:"animation-direction",anidu:"animation-duration",anifm:"animation-fill-mode",aniic:"animation-iteration-count",anin:"animation-name",anips:"animation-play-state",anitf:"animation-timing-function",ap:"appearance",ar:"aspect-ratio",as:"align-self",b:"bottom",bd:"border",bda:"border-radius",bdb:"border-bottom",bdbc:"border-bottom-color",bdblc:"border-block-color",bdble:"border-block-end",bdblec:"border-block-end-color",bdbles:"border-block-end-style",bdblew:"border-block-end-width",bdblk:"border-block",bdblr:"border-bottom-left-radius",bdbls:"border-block-start",bdblsc:"border-block-start-color",bdblss:"border-block-start-style",bdblst:"border-block-style",bdblsw:"border-block-start-width",bdblwi:"border-block-width",bdbr:"box-decoration-break",bdbrr:"border-bottom-right-radius",bdbst:"border-bottom-style",bdbw:"border-bottom-width",bdc:"border-color",bdcl:"border-collapse",bdeer:"border-end-end-radius",bdesr:"border-end-start-radius",bdi:"border-inline",bdic:"border-inline-color",bdie:"border-inline-end",bdiec:"border-inline-end-color",bdies:"border-inline-end-style",bdiew:"border-inline-end-width",bdimg:"border-image",bdinw:"border-inline-width",bdio:"border-image-outset",bdir:"border-image-repeat",bdis:"border-image-slice",bdisc:"border-inline-start-color",bdisrc:"border-image-source",bdiss:"border-inline-start-style",bdista:"border-inline-start",bdistl:"border-inline-style",bdisw:"border-inline-start-width",bdiw:"border-image-width",bdl:"border-left",bdlc:"border-left-color",bdls:"border-left-style",bdlw:"border-left-width",bdr:"border-right",bdra:"border-radius",bdrc:"border-right-color",bdrs:"border-right-style",bdrw:"border-right-width",bds:"border-style",bdser:"border-start-end-radius",bdsp:"border-spacing",bdssr:"border-start-start-radius",bdt:"border-top",bdtc:"border-top-color",bdtlr:"border-top-left-radius",bdtrr:"border-top-right-radius",bdts:"border-top-style",bdtw:"border-top-width",bdw:"border-width",bg:"background",bga:"background-attachment",bgbm:"background-blend-mode",bgc:"background-color",bgcl:"background-clip",bgi:"background-image",bgo:"background-origin",bgp:"background-position",bgpx:"background-position-x",bgpy:"background-position-y",bgr:"background-repeat",bgs:"background-size",bkdf:"backdrop-filter",bkfv:"backface-visibility",blks:"block-size",brka:"break-after",brkb:"break-before",brki:"break-inside",bxsh:"box-shadow",bxshd:"box-shadow",bxsz:"box-sizing",c:"color",caps:"caption-side",cip:"color-interpolation",ciw:"contain-intrinsic-width",clpp:"clip-path",clr:"clear",cnt:"contain",cntibs:"contain-intrinsic-block-size",cntih:"contain-intrinsic-height",cntiis:"contain-intrinsic-inline-size",cntis:"contain-intrinsic-size",cntri:"counter-increment",cntrr:"counter-reset",cntrs:"counter-set",col:"columns",colc:"column-count",colf:"column-fill",colg:"column-gap",colr:"column-rule",colrc:"column-rule-color",colrs:"column-rule-style",colrw:"column-rule-width",cols:"column-span",colw:"column-width",cr:"cursor",crtc:"caret-color",csch:"color-scheme",ctr:"container",ctrn:"container-name",ctrt:"container-type",ctt:"content",d:"display",dir:"direction",empc:"empty-cells",fca:"forced-color-adjust",ff:"font-family",fl:"float",flt:"filter",fn:"font",fnf:"font-family",fnfs:"font-feature-settings",fnk:"font-kerning",fnlo:"font-language-override",fnos:"font-optical-sizing",fnp:"font-palette",fns:"font-size",fnsa:"font-size-adjust",fnsp:"font-synthesis-position",fnss:"font-synthesis-style",fnssc:"font-synthesis-small-caps",fnstr:"font-stretch",fnsty:"font-style",fnsw:"font-synthesis-weight",fnsyn:"font-synthesis",fnv:"font-variant",fnva:"font-variant-alternates",fnvc:"font-variant-caps",fnve:"font-variant-emoji",fnvea:"font-variant-east-asian",fnvl:"font-variant-ligatures",fnvn:"font-variant-numeric",fnvp:"font-variant-position",fnvs:"font-variation-settings",fnw:"font-weight",fw:"font-weight",fx:"flex",fxb:"flex-basis",fxd:"flex-direction",fxf:"flex-flow",fxg:"flex-grow",fxs:"flex-shrink",fxw:"flex-wrap",g:"grid",ga:"grid-area",gac:"grid-auto-columns",gaf:"grid-auto-flow",gap:"gap",gar:"grid-auto-rows",gc:"grid-column",gce:"grid-column-end",gcs:"grid-column-start",gr:"grid-row",gre:"grid-row-end",grs:"grid-row-start",gt:"grid-template",gta:"grid-template-areas",gtc:"grid-template-columns",gtr:"grid-template-rows",h:"height",hc:"hyphenate-character",hlc:"hyphenate-limit-chars",hp:"hanging-punctuation",hyp:"hyphens",i:"inset",ibe:"inset-block-end",iblk:"inset-block",ibsta:"inset-block-start",ii:"inset-inline",iie:"inset-inline-end",iis:"inset-inline-start",imgo:"image-orientation",imgr:"image-rendering",ins:"inline-size",is:"isolation",jc:"justify-content",ji:"justify-items",js:"justify-self",l:"left",lbrk:"line-break",lh:"line-height",lisp:"list-style-position",ls:"list-style",lsi:"list-style-image",lst:"list-style-type",lts:"letter-spacing",m:"margin",mb:"margin-bottom",mbd:"mix-blend-mode",mbe:"margin-block-end",mblk:"margin-block",mbs:"max-block-size",mbsta:"margin-block-start",mh:"max-height",mibs:"min-block-size",mie:"margin-inline-end",mih:"min-height",min:"margin-inline",mis:"max-inline-size",mista:"margin-inline-start",misz:"min-inline-size",miw:"min-width",ml:"margin-left",mr:"margin-right",msk:"mask",mskb:"mask-border",mskbm:"mask-border-mode",mskbo:"mask-border-outset",mskbr:"mask-border-repeat",mskbs:"mask-border-slice",mskbsrc:"mask-border-source",mskbw:"mask-border-width",mskc:"mask-clip",mskcp:"mask-composite",mski:"mask-image",mskm:"mask-mode",msko:"mask-origin",mskp:"mask-position",mskr:"mask-repeat",msks:"mask-size",mskt:"mask-type",mt:"margin-top",mtd:"math-depth",mts:"math-style",mw:"max-width",mxw:"max-width",of:"object-fit",ofa:"offset-anchor",ofd:"offset-distance",ofl:"overflow",ofla:"overflow-anchor",oflb:"overflow-block",oflcm:"overflow-clip-margin",ofli:"overflow-inline",oflw:"overflow-wrap",oflx:"overflow-x",ofly:"overflow-y",ofp:"offset-path",ofpo:"offset-position",ofr:"offset-rotate",ofs:"offset",olc:"outline-color",oli:"outline",olo:"outline-offset",ols:"outline-style",olw:"outline-width",op:"object-position",opc:"opacity",ord:"order",orp:"orphans",orsby:"overscroll-behavior-y",osrbb:"overscroll-behavior-block",osrbh:"overscroll-behavior",osrbi:"overscroll-behavior-inline",osrbx:"overscroll-behavior-x",p:"padding",pb:"padding-bottom",pbe:"padding-block-end",pblk:"padding-block",pbs:"padding-block-start",pe:"pointer-events",pg:"page",pgba:"page-break-after",pgbb:"page-break-before",pgbi:"page-break-inside",pi:"padding-inline",pie:"padding-inline-end",pis:"padding-inline-start",pl:"padding-left",plc:"place-content",pli:"place-items",pls:"place-self",pos:"position",pr:"padding-right",prca:"print-color-adjust",pso:"perspective-origin",psp:"perspective",pt:"padding-top",pto:"paint-order",qts:"quotes",r:"right",rbp:"ruby-position",rgap:"row-gap",rot:"rotate",rsz:"resize",s:"scale",sbc:"scrollbar-color",sbg:"scrollbar-gutter",sbw:"scrollbar-width",scrb:"scroll-behavior",scrm:"scroll-margin",scrmb:"scroll-margin-bottom",scrmbe:"scroll-margin-block-end",scrmblk:"scroll-margin-block",scrmbs:"scroll-margin-block-start",scrmi:"scroll-margin-inline",scrmie:"scroll-margin-inline-end",scrmis:"scroll-margin-inline-start",scrml:"scroll-margin-left",scrmr:"scroll-margin-right",scrmt:"scroll-margin-top",scrp:"scroll-padding",scrpb:"scroll-padding-bottom",scrpblk:"scroll-padding-block",scrpbs:"scroll-padding-block-start",scrpi:"scroll-padding-inline",scrpie:"scroll-padding-inline-end",scrpis:"scroll-padding-inline-start",scrpl:"scroll-padding-left",scrpr:"scroll-padding-right",scrpt:"scroll-padding-top",scrsa:"scroll-snap-align",scrss:"scroll-snap-stop",scrst:"scroll-snap-type",shit:"shape-image-threshold",shm:"shape-margin",sho:"shape-outside",srcpbe:"scroll-padding-block-end",t:"top",ta:"text-align",tal:"text-align-last",tbl:"table-layout",tbs:"tab-size",tcu:"text-combine-upright",td:"text-decoration",tdc:"text-decoration-color",tdl:"text-decoration-line",tds:"text-decoration-style",tdsi:"text-decoration-skip-ink",tdt:"text-decoration-thickness",tec:"text-emphasis-color",tep:"text-emphasis-position",teph:"text-emphasis",tes:"text-emphasis-style",ti:"text-indent",tj:"text-justify",toa:"touch-action",tol:"text-overflow",tor:"text-orientation",tra:"transform",trab:"transform-box",tran:"transition",tranb:"transition-behavior",trand:"transition-delay",trandur:"transition-duration",tranp:"transition-property",trantf:"transition-timing-function",trao:"transform-origin",tras:"transform-style",trd:"text-rendering",trl:"translate",tsh:"text-shadow",ttr:"text-transform",tuo:"text-underline-offset",tup:"text-underline-position",tw:"text-wrap",unib:"unicode-bidi",us:"user-select",v:"visibility",va:"vertical-align",w:"width",wc:"will-change",wd:"widows",wlc:"-webkit-line-clamp",wrb:"word-break",wrs:"word-spacing",wrtm:"writing-mode",ws:"white-space",wsc:"white-space-collapse",wtfc:"-webkit-text-fill-color",wts:"-webkit-text-stroke",wtsc:"-webkit-text-stroke-color",wtsw:"-webkit-text-stroke-width",z:"z-index",zo:"zoom"},se={in:"inherit",ini:"initial",un:"unset",rv:"revert",n:"none",a:"auto",t:"top",b:"bottom",l:"left",r:"right",c:"center",m:"middle",j:"justify",s:"start",e:"end",tr:"transparent",cc:"currentColor",minc:"min-content",maxc:"max-content",fitc:"fit-content",sol:"solid",das:"dashed",dot:"dotted",dub:"double",vis:"visible",h:"hidden",col:"collapse"},T={ac:{s:"start",e:"end",fs:"flex-start",fe:"flex-end",n:"normal",b:"baseline",fb:"first baseline",lb:"last baseline",sp:"space-between",sa:"space-around",se:"space-evenly",st:"stretch",sc:"safe center",uc:"unsafe center"},acc:{u:"unset"},ai:{n:"normal",c:"center",s:"start",e:"end",fs:"flex-start",fe:"flex-end",ss:"self-start",se:"self-end",b:"baseline",fb:"first baseline",lb:"last baseline",sc:"safe center",uc:"unsafe center"},anic:{r:"replace",a:"add",ac:"accumulate",ra:"replace, add",aac:"add, accumulate",raac:"replace, add, accumulate"},anidi:{r:"reverse",a:"alternate",ar:"alternate-reverse",nr:"normal, reverse",arn:"alternate, reverse, normal"},anifm:{f:"forwards",b:"backwards",nb:"none, backwards",fbn:"both, forwards, none"},anin:{s:"slide"},anips:{p:"paused",r:"running"},anitf:{ei:"ease-in",eo:"ease-out",eio:"ease-in-out",l:"linear",ss:"step-start",se:"step-end"},ap:{mb:"menulist-button",tf:"textfield",b:"button",c:"checkbox"},ar:{s:"1 / 1",v:"16 / 9"},as:{n:"normal",c:"center",s:"start",e:"end",ss:"self-start",se:"self-end",fs:"flex-start",fe:"flex-end",b:"baseline",fb:"first baseline",lb:"last baseline",st:"stretch",sc:"safe center",uc:"unsafe center"},bd:{d:"dotted",ds:"dashed",db:"double",g:"groove",r:"ridge",i:"inset",o:"outset"},bdbles:{d:"dotted",ds:"dashed",db:"double",g:"groove",r:"ridge",i:"inset",o:"outset"},bdblss:{d:"dotted",ds:"dashed",db:"double",g:"groove",r:"ridge",i:"inset",o:"outset"},bdblst:{d:"dotted",ds:"dashed",db:"double",g:"groove",r:"ridge",i:"inset",o:"outset"},bdbr:{c:"clone",s:"slice"},bdbst:{d:"dotted",ds:"dashed",db:"double",g:"groove",r:"ridge",i:"inset",o:"outset"},bdbw:{t:"thin",m:"medium",th:"thick"},bdcl:{s:"separate",c:"collapse"},bdir:{st:"stretch",r:"repeat",rn:"round",s:"space"},bdlw:{t:"thin",m:"medium",th:"thick"},bdrs:{dt:"dotted",ds:"dashed",s:"solid",db:"double",g:"groove",r:"ridge",in:"inset",out:"outset"},bdrw:{t:"thin",m:"medium",th:"thick"},bds:{dt:"dotted",ds:"dashed",s:"solid",db:"double",g:"groove",r:"ridge",in:"inset",out:"outset"},bdts:{dt:"dotted",ds:"dashed",s:"solid",db:"double",g:"groove",r:"ridge",in:"inset",out:"outset"},bdtw:{t:"thin",m:"medium",th:"thick"},bdw:{t:"thin",m:"medium",th:"thick"},bga:{s:"scroll",f:"fixed",l:"local"},bgbm:{n:"normal",m:"multiply",s:"screen",o:"overlay",d:"darken",l:"lighten",cd:"color-dodge",i:"color-burn",hl:"hard-light",sl:"soft-light",di:"difference",e:"exclusion",h:"hue",sa:"saturation",c:"color",lu:"luminosity"},bgc:{t:"transparent",c:"currentcolor"},bgcl:{bb:"border-box",pb:"padding-box",cb:"content-box",t:"text"},bgo:{bb:"border-box",pb:"padding-box",cb:"content-box"},bgp:{t:"top",b:"bottom",l:"left",r:"right",c:"center",lt:"left top",ct:"center top",rt:"right top",lc:"left center",cc:"center center",rc:"right center",lb:"left bottom",cb:"center bottom",rb:"right bottom"},bgpx:{l:"left",r:"right",c:"center"},bgpy:{t:"top",b:"bottom",c:"center"},bgr:{r:"repeat",x:"repeat-x",y:"repeat-y",s:"space",rn:"round",n:"no-repeat",rs:"repeat space",rr:"repeat repeat",nr:"no-repeat round"},bgs:{c:"contain"},c:{i:"inherit",t:"transparent"},cr:{p:"pointer",d:"default",cm:"context-menu",h:"help",pg:"progress",w:"wait",c:"cell",t:"text",vt:"vertical-text",al:"alias",cp:"copy",mo:"move",nd:"no-drop",na:"not-allowed",gr:"grab",gb:"grabbing",as:"all-scroll",colr:"col-resize",rr:"row-resize",nr:"n-resize",er:"e-resize",sr:"s-resize",wr:"w-resize",ner:"ne-resize",ser:"se-resize",swr:"sw-resize",ewr:"ew-resize",nsr:"ns-resize",nesw:"nesw-resize",nwse:"nwse-resize",zi:"zoom-in",zo:"zoom-out"},d:{b:"block",ib:"inline-block",i:"inline",f:"flex",if:"inline-flex",t:"table",it:"inline-table",tcp:"table-caption",tcell:"table-cell",tcol:"table-column",tcolg:"table-column-group",tfg:"table-footer-group",thg:"table-header-group",trg:"table-row-group",tr:"table-row",fr:"flow-root",g:"grid",ig:"inline-grid",c:"contents",li:"list-item"},ff:{a:"ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",s:"ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",m:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"},fl:{is:"inline-start",ie:"inline-end",r:"right",l:"left"},fx:{i:"0 1 auto",a:"1 1 auto"},fxd:{r:"row",rr:"row-reverse",c:"column",cr:"column-reverse"},fxw:{w:"wrap",wr:"wrap-reverse",n:"nowrap"},gac:{mic:"min-content",mac:"max-content",mm:"minmax(0, 1fr)"},gaf:{r:"row",c:"column",d:"dense",rd:"row dense",cd:"column dense"},gar:{mic:"min-content",mac:"max-content",mm:"minmax(0, 1fr)"},gc:{f:"1 / -1"},gr:{f:"1 / -1"},gtc:{s:"subgrid"},gtr:{s:"subgrid"},h:{mic:"min-content",mac:"max-content",fc:"fit-content"},hyp:{m:"manual"},is:{i:"isolate"},jc:{c:"center",s:"start",e:"end",fs:"flex-start",fe:"flex-end",l:"left",r:"right",n:"normal",sp:"space-between",sa:"space-around",se:"space-evenly",st:"stretch",sc:"safe center",uc:"unsafe center"},ji:{n:"normal",st:"stretch",c:"center",s:"start",e:"end",fs:"flex-start",fe:"flex-end",ss:"self-start",se:"self-end",l:"left",r:"right",b:"baseline",fb:"first baseline",lb:"last baseline",lr:"legacy right",ll:"legacy left",lc:"legacy center",sc:"safe center",uc:"unsafe center"},js:{n:"normal",st:"stretch",c:"center",s:"start",e:"end",fs:"flex-start",fe:"flex-end",ss:"self-start",se:"self-end",l:"left",r:"right",b:"baseline",sc:"safe center",uc:"unsafe center"},lisp:{i:"inside",o:"outside"},ls:{i:"inside",di:"disc",c:"circle",s:"square",de:"decimal",g:"georgian",tci:"trad-chinese-informal",k:"kannada"},lst:{di:"disc",c:"circle",s:"square",de:"decimal",g:"georgian",tci:"trad-chinese-informal",k:"kannada"},lts:{n:"normal"},mbd:{n:"normal",m:"multiply",s:"screen",o:"overlay",d:"darken",l:"lighten",cd:"color-dodge",i:"color-burn",hl:"hard-light",sl:"soft-light",di:"difference",e:"exclusion",h:"hue",sa:"saturation",c:"color",lu:"luminosity"},mih:{f:"100%",mic:"min-content",mac:"max-content",fc:"fit-content"},miw:{f:"100%",mic:"min-content",mac:"max-content",fc:"fit-content"},of:{c:"contain",cv:"cover",f:"fill",sd:"scale-down"},oflw:{c:"clip",s:"scroll"},oflx:{c:"clip",s:"scroll"},ofly:{c:"clip",s:"scroll"},olc:{i:"inherit",c:"currentColor",t:"transparent"},ols:{dt:"dotted",ds:"dashed",s:"solid",db:"double",g:"groove",r:"ridge",in:"inset",out:"outset"},olw:{t:"thin",m:"medium",th:"thick"},op:{b:"bottom",c:"center",l:"left",r:"right",t:"top",lb:"left bottom",lt:"left top",rb:"right bottom",rt:"right top"},orsby:{c:"contain"},osrbb:{c:"contain"},osrbh:{c:"contain"},osrbi:{c:"contain"},osrbx:{c:"contain"},pi:{s:"start",c:"center",e:"end",b:"baseline",st:"stretch"},pos:{s:"static",f:"fixed",a:"absolute",r:"relative",st:"sticky"},rsz:{b:"both",h:"horizontal",v:"vertical"},ta:{s:"start",e:"end",l:"left",r:"right",c:"center",j:"justify",mp:"match-parent",mc:"-moz-center",wc:"-webkit-center"},tal:{s:"start",e:"end",l:"left",r:"right",c:"center",j:"justify"},td:{u:"underline"},tdl:{u:"underline",o:"overline",lt:"line-through",b:"blink"},tds:{db:"double",dt:"dotted",ds:"dashed",w:"wavy"},tdt:{ff:"from-font"},tep:{or:"over right",ol:"over left",ur:"under right",ul:"under left",lo:"left over",ru:"right under",lu:"left under"},tj:{iw:"inter-word",ic:"inter-character",d:"distribute"},toa:{p:"pan-x",py:"pan-y",pm:"pan-x pan-y",pi:"pinch-zoom"},tol:{c:"clip",e:"ellipsis"},tor:{m:"mixed",u:"upright",sr:"sideways-right",sl:"sideways-left",s:"sideways",ugo:"use-glyph-orientation"},trd:{op:"optimizeSpeed",ol:"optimizeLegibility",g:"geometricPrecision"},ttr:{c:"capitalize",u:"uppercase",l:"lowercase",fw:"full-width",fsk:"full-size-kana"},tup:{u:"under",l:"left",r:"right",ul:"under left",ru:"right under"},tw:{w:"wrap",n:"nowrap",b:"balance",p:"pretty"},us:{t:"text",all:"all",c:"contain"},v:{c:"collapse"},va:{bl:"baseline",t:"top",m:"middle",b:"bottom",tt:"text-top",tb:"text-bottom",sb:"sub",sp:"super"},w:{mic:"min-content",mac:"max-content",fc:"fit-content",f:"100%"},wc:{sp:"scroll-position",c:"contents",t:"transform"},wtsw:{m:"medium",t:"thick"}};T.ji=T.jc;T.js=T.jc;T.pc=T.jc;T.pi=T.jc;T.ps=T.jc;var ge=(e,t)=>{if(!e||typeof document>"u")return;t=t||"fwkui";let a=Array.from({length:24},(i,b)=>"l"+b);if(!e.querySelector('style[id="'+t+'"]')){let i=document.createElement("style");if(i.id=t,!(e instanceof ShadowRoot))document.head.append(i);else try{e.prepend(i)}catch{e.appendChild(i)}let b=`@layer ${a.join(", ")};`,w=setInterval(()=>{if(i.sheet){clearInterval(w);try{i.sheet.insertRule(b,i.sheet.cssRules.length)}catch{}}},10)}},G=(e={base:"",aliases:{},exclude:[],breakpoints:[],theme:{},prefix:""})=>{let t=oe,a=T,{base:i=null,breakpoints:b=[],aliases:w={},theme:C={},exclude:A=[],prefix:v=""}=e||{};Array.isArray(b)||(b=[]),Array.isArray(A)||(A=[]),(!w||typeof w!="object")&&(w={}),(!C||typeof C!="object")&&(C={});var E={...se,...C};let g=r=>a[r]||{},R=(r=typeof document<"u"?document:void 0)=>{let d=typeof window<"u"&&typeof document<"u",n=null;r&&(n="getRootNode"in r?r.getRootNode():r);let y=new Map;d&&n&&ge(n);let p=ne(),k=[{default:""},{xs:"screen and (max-width: 575px)"},{sm:"screen and (min-width: 576px)"},{md:"screen and (min-width: 768px)"},{lg:"screen and (min-width: 992px)"},{xl:"screen and (min-width: 1200px)"},{"2xl":"screen and (min-width: 1400px)"},{sma:"screen and (max-width: 768px)"},{mda:"screen and (max-width: 992px)"},{lga:"screen and (max-width: 1200px)"},{xla:"screen and (max-width: 1400px)"},...b],x=k.filter((c,f)=>k.findLastIndex(s=>Object.keys(s)[0]==Object.keys(c)[0])==f),l=x.map(c=>Object.keys(c)[0]),u={},o={},z={root:""},S={root:[]},$={root:!1};d&&(o.root=new CSSStyleSheet),l.forEach(c=>{if(u[c]=new Set,d){let f=x.find(s=>Object.keys(s)[0]==c)?.[c]||"";o[c]=new CSSStyleSheet({media:f})}z[c]="",S[c]=[],$[c]=!1}),i&&Array.isArray(i)?(z.root=i.join(`
2
+ `),d&&o.root&&o.root.replaceSync(z.root)):(z.root=i||"",d&&o.root&&o.root.replaceSync(z.root)),d&&n&&["root",...l].forEach(c=>{o[c]&&n?.adoptedStyleSheets&&(n.adoptedStyleSheets.includes(o[c])||(n.adoptedStyleSheets=[...n.adoptedStyleSheets,o[c]]))});let M=(c,f)=>{let{media:s,property:h,selector:L,layer:P,className:U}=f,O=z,H=S,X=$;P=Number(P)||0;let ee=y.get(c),le=ee?`.${ee}${L}`:`.${U}${L}`;var F=`@layer l${P}{${le}{${h}}}`;u[s]||(u[s]=new Set);let te=u[s];if(!te.has(F))if(te.add(F),H[s]||(H[s]=[]),H[s].push(F),d)X[s]||(X[s]=!0,queueMicrotask(()=>{let V=H[s],re=o[s];V.length>0&&(O[s]+=(O[s]?`
3
+ `:"")+V.join(`
4
+ `),re&&re.replaceSync(O[s]),H[s]=[]),X[s]=!1}));else{let V=H[s];V.length>0&&(O[s]+=(O[s]?`
5
+ `:"")+V.join(`
6
+ `),H[s]=[])}};return p.on("observeDom",c=>{c.length>0&&c.forEach(f=>{let s=D(f);s&&M(f,s)})}),{clsx:(...c)=>{let f=c.map(h=>Array.isArray(h)?h:[h]).flat(1/0).map(h=>typeof h=="string"?h.split(/(\s|\t)+/g):[]).flat(1/0);f=f.filter(h=>typeof h=="string"&&h.trim()),f=[...new Set(f)];let s=f.map(h=>{let L=h;if(y.has(h))L=y.get(h);else{let P=!v||h.startsWith(v),U=P&&v?h.slice(v.length):h;if(P&&N(U)){let O="D"+y.size.toString(32).toUpperCase();y.set(h,O),L=O}}return L});return d?queueMicrotask(()=>p.emit("observeDom",f)):p.emit("observeDom",f),s.join(" ")},observe:()=>{!d||!n||W(n,c=>{c.length>0&&c.forEach(f=>{let s=D(f);s&&M(f,s)})})},getCssString:()=>Object.entries(z).map(([c,f])=>{if(!f)return"";if(c==="root"||c==="default")return f;let s=k.find(h=>Object.keys(h)[0]===c)?.[c];return s?`@media ${s} {
7
+ ${f}
8
+ }`:f}).join(`
9
+ `)}};function m(r){let d=new RegExp("^(\\[(?<p>[a-zA-Z]+)\\])$"),{p:n=""}=d.exec(r)?.groups??{};if(n&&w[n]&&Array.isArray(w[n])){let y=w[n],p=[],k=!0;for(let x of y){let l=D(x);l&&l.property?p.push(l.property):typeof CSS<"u"&&CSS.supports(x)||typeof CSS>"u"?p.push(x):k=!1}if(p.length>0&&(typeof CSS>"u"||k))return p.join(";")}return null}function I(r,d){let n=m(r+d);if(n)return n;if(!r||d===void 0)return null;let y=t[r],p=y||r,k=d[0],x=!1,l=d;if(k==="!"&&(x=!0,l=l.substring(1),k=l[0]),l.startsWith("--"))l="var("+l+")";else if(k==="["&&l.endsWith("]"))l=l.substring(1,l.length-1);else if(l.length>0){let S=l[0].toLowerCase()+l.substring(1),$=a[r]?.[S]||E[S];if(!$){let M=l.toLowerCase();$=a[r]?.[M]||E[M]}l=$||l}if(l=l.replace(/(';|;)/g,S=>S=="';"?";":" "),!l)return null;let u=l+(x?" !important":""),o=[p+":"+u];switch(p){case"mx":o=[`margin-left:${u}`,`margin-right:${u}`];break;case"my":o=[`margin-top:${u}`,`margin-bottom:${u}`];break;case"px":o=[`padding-left:${u}`,`padding-right:${u}`];break;case"py":o=[`padding-top:${u}`,`padding-bottom:${u}`];break;case"bdx":o=[`border-left:${u}`,`border-right:${u}`];break;case"bdy":o=[`border-top:${u}`,`border-bottom:${u}`];break}return!(typeof CSS<"u")||o.every(S=>CSS.supports(S))?o.join(";"):null}function D(r){if(v&&!r.startsWith(v)||A.length>0&&A.every(K=>K.includes("*")?new RegExp("^"+K.replace(/\*/g,".+")+"$").test(r):K==r))return null;let n=v?r.slice(v.length):r,y=N(n);if(!y)return null;let{mq:p="default",layer:k="0",prop:x,val:l,selector:u=""}=y,o=[],z=I(x,l);if(z&&o.push(z),o.length==0)return null;let S=u.replace(/(';|;)/g,K=>K=="';"?";":" "),$=typeof CSS<"u"?CSS.escape(r):J(r),M=`selector(${$}${S})`;return typeof CSS<"u"&&S&&!CSS.supports(M)?null:{media:p||"default",layer:k||"0",className:$,property:o.join(";"),selector:S,cssRules:`.${$}${S}{${o.join(";")}}`}}let J=r=>r.replace(/([^\w-])/g,"\\$1"),j=r=>{var d=[...r?.classList||[]].filter(n=>{if(n){let y=n.charCodeAt(0)==45?n.charCodeAt(1):n.charCodeAt(0);return y>=97&&y<=122||y>=48&&y<=57}return!1});return r?.children?.length>0&&Array.from(r?.children).forEach(n=>{d.push(...j(n))}),d.flat(1/0)},W=(r,d)=>{if(typeof d!="function")throw new Error("Callback is not a function");if(!r)return;let n;"documentElement"in r?n=r.documentElement:(r instanceof Element||"tagName"in r||"host"in r)&&(n=r),n&&(n instanceof Element&&d(j(n)),typeof MutationObserver<"u"&&new MutationObserver(y=>{for(let p of y)if(p.type=="attributes"&&p.attributeName=="class"){if(p.target.nodeType==1){let k=String(p.target?.className??""),x=String(p?.oldValue??"");if(k||x){let l=k.split(" ").map(o=>o.trim()).filter(o=>o),u=x.split(" ").map(o=>o.trim()).filter(o=>o);l=l.filter(o=>!u.includes(o)),typeof d=="function"&&d([...new Set(l)])}}}else if(p.type=="childList"&&p.addedNodes.length>0){let k=[...p.addedNodes].filter(x=>x.nodeType==1).map(x=>j(x)).flat(1/0);typeof d=="function"&&d([...new Set(k)])}}).observe(n,{attributes:!0,attributeOldValue:!0,attributeFilter:["class"],childList:!0,subtree:!0}))};return{buildCss:R}},me=(e,t)=>{G(t).buildCss(e).observe()},he=(e,t)=>G(t).buildCss(e).clsx,_={css:G,cssObserve:me,clsx:he};var Q="__FWXCSS_SHARED__",ye=()=>{let e=new WeakMap,t=null,a=typeof document<"u"?document:null,i=g=>{if(!g)return!1;let R=typeof Document<"u",m=typeof ShadowRoot<"u",I=R&&g instanceof Document,D=m&&g instanceof ShadowRoot;return I||D},b=()=>(t||(t=_.css().buildCss(void 0)),t),w=g=>_.css({base:"html,body{font-size:16px;padding:0;margin:0;}"}).buildCss(g),C=g=>{if(!g)return b();let R=e.get(g);return R||(R=w(g),e.set(g,R)),R};return{clsx:(...g)=>{let R,m=g[g.length-1];i(m)&&(R=m,g=g.slice(0,-1));let I=[],D=j=>{if(j){if(typeof j=="string"||typeof j=="number"){I.push(String(j));return}if(Array.isArray(j)){j.forEach(D);return}typeof j=="object"&&Object.keys(j).forEach(W=>{j[W]&&I.push(W)})}};return g.forEach(D),C(R||a).clsx(I.join(" "))},setClsxRoot:g=>{a=g||(typeof document<"u"?document:null)},getCss:()=>b().getCssString()}},Y=typeof globalThis<"u"?globalThis:typeof window<"u"?window:global,q=Y[Q]||ye();Y[Q]||(Y[Q]=q);var we=q.clsx,xe=q.setClsxRoot,ke=q.getCss,Z=_;typeof document<"u"&&(Z.cssObserve(document),console.log("\u{1F680} fwxcss Auto-Observer Activated"));var ve=Z;0&&(module.exports={clsx,getCss,setClsxRoot});
10
+ //# sourceMappingURL=index-auto.js.map