@bookklik/senangstart-css 0.2.5 → 0.2.7

package/dist/senangstart-tw.js

@@ -320,13 +320,20 @@
       };
     }
     const marginMatch = baseClass.match(
-      /^-?m([trblxy])?-(\d+\.?\d*|px|auto|full|screen)$/
+      /^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/
     );
     if (marginMatch) {
       const isNeg = baseClass.startsWith("-");
       const side = marginMatch[1] ? "-" + marginMatch[1] : "";
       let val = getSpacing(marginMatch[2], exact);
-      if (isNeg) val = "[-" + val + "]";
+      if (isNeg) {
+        if (val.startsWith("[") && val.endsWith("]")) {
+          const inner = val.slice(1, -1);
+          val = `[-${inner}]`;
+        } else {
+          val = `-${val}`;
+        }
+      }
       return { cat: "space", val: prefix + "m" + side + ":" + val };
     }
     const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
@@ -482,6 +489,68 @@
     if (ringColorMatch) {
       return { cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] };
     }
+    const divideXMatch = baseClass.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
+    if (divideXMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-x:" + divideXMatch[1]
+      };
+    }
+    const divideYMatch = baseClass.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
+    if (divideYMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-y:" + divideYMatch[1]
+      };
+    }
+    const divideColorMatch = baseClass.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
+    if (divideColorMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide:" + divideColorMatch[1]
+      };
+    }
+    const divideWidthMatch = baseClass.match(/^divide-(\d+)$/);
+    if (divideWidthMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-w:" + getBorderWidth(divideWidthMatch[1], exact)
+      };
+    }
+    if (baseClass === "divide-x-reverse") {
+      return { cat: "visual", val: prefix + "divide-x:reverse" };
+    }
+    if (baseClass === "divide-y-reverse") {
+      return { cat: "visual", val: prefix + "divide-y:reverse" };
+    }
+    const divideXWidthMatch = baseClass.match(/^divide-x-(\d+)$/);
+    if (divideXWidthMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-x-w:" + getBorderWidth(divideXWidthMatch[1], exact)
+      };
+    }
+    if (baseClass === "divide-x") {
+      return { cat: "visual", val: prefix + "divide-x-w:thin" };
+    }
+    if (baseClass === "divide-y") {
+      return { cat: "visual", val: prefix + "divide-y-w:thin" };
+    }
+    const divideYWidthMatch = baseClass.match(/^divide-y-(\d+)$/);
+    if (divideYWidthMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-y-w:" + getBorderWidth(divideYWidthMatch[1], exact)
+      };
+    }
+    const divideStyleMatch = baseClass.match(/^divide-(solid|dashed|dotted|double|none)$/);
+    if (divideStyleMatch) {
+      return {
+        cat: "visual",
+        val: prefix + "divide-style:" + divideStyleMatch[1]
+        // Fixed category from 'color' to 'visual'
+      };
+    }
     return null;
   }
   function convertClasses(classString, exact) {

package/dist/senangstart-tw.min.js

@@ -1,2 +1,2 @@
 /* SenangStart TW v0.2.0 | MIT */
-(()=>{var y={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},K={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},N={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},O={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},$={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},M={italic:"italic","not-italic":"not-italic",antialiased:"antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline","line-through":"line-through","no-underline":"no-underline",truncate:"truncate","cursor-pointer":"cursor:pointer","cursor-default":"cursor:default","cursor-not-allowed":"cursor:not-allowed","select-none":"select:none","select-text":"select:text","select-all":"select:all"};function m(l,i){return l.startsWith("[")&&l.endsWith("]")?l:i?["full","screen","auto"].includes(l)?y[l]||`[${l}]`:`tw-${l}`:y[l]||`[${l}]`}var J={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function Q(l,i){return i?`tw-${l}`:J[l]||`[${l}px]`}function P(l,i){let f=l.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/),e="",t=l;if(f){let a=f[1].slice(0,-1);["sm","md","lg","xl","2xl"].includes(a)?e=`tw-${a}:`:e=f[1],t=f[2]}if($[t])return{cat:"layout",val:e+$[t]};if(M[t])return{cat:"visual",val:e+M[t]};let u=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(u)return{cat:"visual",val:e+"text:"+u[1]};if(["text-left","text-center","text-right","text-justify"].includes(t))return{cat:"visual",val:e+"text:"+t.replace("text-","")};let s=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(s){let a=i?`tw-${s[1]}`:O[s[1]]||s[1];return{cat:"visual",val:e+"text-size:"+a}}let o=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(o){let a=o[1];return a==="transparent"?{cat:"visual",val:e+"bg:[transparent]"}:a==="current"?{cat:"visual",val:e+"bg:[currentColor]"}:a==="inherit"?{cat:"visual",val:e+"bg:[inherit]"}:{cat:"visual",val:e+"bg:"+a}}let r=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(r)return{cat:"visual",val:e+"border:"+r[1]};let c=t.match(/^p([trblxy])?-(.+)$/);if(c){let a=c[1]?"-"+c[1]:"";return{cat:"space",val:e+"p"+a+":"+m(c[2],i)}}let g=t.match(/^-?m([trblxy])?-(\d+\.?\d*|px|auto|full|screen)$/);if(g){let a=t.startsWith("-"),n=g[1]?"-"+g[1]:"",h=m(g[2],i);return a&&(h="[-"+h+"]"),{cat:"space",val:e+"m"+n+":"+h}}let v=t.match(/^gap-([xy])?-?(.+)$/);if(v){let a=v[1]?"-"+v[1]:"";return{cat:"space",val:e+"g"+a+":"+m(v[2],i)}}let x=t.match(/^(min-w|max-w|w)-(.+)$/);if(x){let a=x[1],n=x[2],b={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[n]||m(n,i);return{cat:"space",val:e+a+":"+b}}let p=t.match(/^(min-h|max-h|h)-(.+)$/);if(p){let a=p[1],n=p[2],b={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[n]||m(n,i);return{cat:"space",val:e+a+":"+b}}let k=t.match(/^rounded(?:-(.+))?$/);if(k){let a=k[1]||"",n=i?a===""?"tw-DEFAULT":`tw-${a}`:K[a]||"medium";return{cat:"visual",val:e+"rounded:"+n}}let j=t.match(/^shadow(?:-(.+))?$/);if(j){let a=j[1]||"",n=i?a===""?"tw-DEFAULT":`tw-${a}`:N[a]||"medium";return{cat:"visual",val:e+"shadow:"+n}}let S=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(S)return{cat:"visual",val:e+"font:tw-"+S[1]};let d=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(d&&(d[2]||!d[1]&&t==="border")){let a=d[1]?"-"+d[1]+"-w":"-w",n=d[2]||"1";return{cat:"visual",val:e+"border"+a+":"+Q(n,i)}}let w=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);if(w){let a=w[1],n=w[2];return n==="0"?n="none":n.startsWith("[")&&n.endsWith("]")||(n=m(n,i)),{cat:"layout",val:e+a+":"+n}}if(t==="outline-none")return{cat:"visual",val:e+"outline:none"};let z=t.match(/^order-(\d+|first|last|none)$/);if(z)return{cat:"layout",val:e+"order:"+z[1]};let W=t.match(/^grid-cols-(\d+|none)$/);if(W)return{cat:"layout",val:e+"grid-cols:"+W[1]};let V=t.match(/^col-span-(\d+|full)$/);if(V)return{cat:"layout",val:e+"col-span:"+V[1]};let C=t.match(/^grid-rows-(\d+|none)$/);if(C)return{cat:"layout",val:e+"grid-rows:"+C[1]};let T=t.match(/^row-span-(\d+|full)$/);if(T)return{cat:"layout",val:e+"row-span:"+T[1]};let H=t.match(/^opacity-(\d+)$/);if(H)return{cat:"visual",val:e+"opacity:"+H[1]};let L=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(L)return{cat:"visual",val:e+"bg-image:gradient-to-"+L[1]};let q=t.match(/^from-(.+)$/);if(q)return{cat:"visual",val:e+"from:"+q[1]};let A=t.match(/^via-(.+)$/);if(A)return{cat:"visual",val:e+"via:"+A[1]};let D=t.match(/^to-(.+)$/);if(D)return{cat:"visual",val:e+"to:"+D[1]};let E=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(E){let a=E[1]||"all";return{cat:"visual",val:e+"transition:"+a}}let F=t.match(/^duration-(\d+)$/);if(F){let a=parseInt(F[1]),n;return a<=75?n="instant":a<=100?n="quick":a<=150?n="fast":a<=200?n="normal":a<=300?n="slow":a<=500?n="slower":n="lazy",{cat:"visual",val:e+"duration:"+n}}let U=t.match(/^ease-(linear|in|out|in-out)$/);if(U)return{cat:"visual",val:e+"ease:"+U[1]};let B=t.match(/^ring(?:-(\d+))?$/);if(B){let a=B[1]||"3";if(a==="0")return{cat:"visual",val:e+"ring:none"};let h={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[a]||`[${a}px]`;return{cat:"visual",val:e+"ring:"+h}}let G=t.match(/^ring-offset-(\d+)$/);if(G)return{cat:"visual",val:e+"ring-offset:"+G[1]};let I=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);return I?{cat:"visual",val:e+"ring-color:"+I[1]}:null}function R(l,i){let f=l.trim().split(/\s+/).filter(o=>o),e=[],t=[],u=[],s=[];for(let o of f){let r=P(o,i);r?r.cat==="layout"?e.push(r.val):r.cat==="space"?t.push(r.val):r.cat==="visual"&&u.push(r.val):s.push(o)}return{layout:e,space:t,visual:u,unknown:s}}function X(l,i){return l.replace(/class=(['"])([^"']+)\1/g,(f,e,t)=>{let{layout:u,space:s,visual:o,unknown:r}=R(t,i),c=[];return u.length&&c.push(`layout="${u.join(" ")}"`),s.length&&c.push(`space="${s.join(" ")}"`),o.length&&c.push(`visual="${o.join(" ")}"`),r.length&&c.push(`class="${r.join(" ")}"`),c.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:P,convertClasses:R,convertHTML:X,scales:{spacing:y,radius:K,shadow:N,fontSize:O},mappings:{layout:$,visual:M}});})();
+(()=>{var $={0:"none",px:"thin",.5:"regular",1:"tiny",1.5:"tiny-2x",2:"small",2.5:"small-2x",3:"small-3x",3.5:"small-4x",4:"medium",5:"medium-2x",6:"medium-3x",7:"medium-4x",8:"large",9:"large-2x",10:"large-3x",11:"large-4x",12:"big",14:"big-2x",16:"big-3x",20:"big-4x",24:"giant",28:"giant-2x",32:"giant-3x",36:"giant-4x",40:"vast",44:"vast-2x",48:"vast-3x",52:"vast-4x",56:"vast-5x",60:"vast-6x",64:"vast-7x",72:"vast-8x",80:"vast-9x",96:"vast-10x",full:"[100%]",screen:"[100vw]",auto:"auto"},Q={none:"none",sm:"small","":"small",md:"small",lg:"medium",xl:"medium","2xl":"big","3xl":"big",full:"round"},Z={none:"none",sm:"small","":"small",md:"medium",lg:"big",xl:"giant","2xl":"giant",inner:"none"},_={xs:"mini",sm:"small",base:"base",lg:"large",xl:"big","2xl":"huge","3xl":"grand","4xl":"giant","5xl":"mount","6xl":"mega","7xl":"giga","8xl":"tera","9xl":"hero"},k={container:"container",flex:"flex","inline-flex":"inline-flex",grid:"grid","inline-grid":"inline-grid",block:"block","inline-block":"inline",hidden:"hidden","flex-row":"row","flex-col":"col","flex-row-reverse":"row-reverse","flex-col-reverse":"col-reverse","flex-wrap":"wrap","flex-nowrap":"nowrap","flex-wrap-reverse":"wrap-reverse","flex-grow":"grow","flex-grow-0":"grow-0",grow:"grow","grow-0":"grow-0","flex-shrink":"shrink","flex-shrink-0":"shrink-0",shrink:"shrink","shrink-0":"shrink-0","flex-1":"flex:1","flex-auto":"flex:auto","flex-initial":"flex:initial","flex-none":"flex:none","justify-start":"justify:start","justify-end":"justify:end","justify-center":"justify:center","justify-between":"justify:between","justify-around":"justify:around","justify-evenly":"justify:evenly","items-start":"items:start","items-end":"items:end","items-center":"items:center","items-baseline":"items:baseline","items-stretch":"items:stretch","self-auto":"self:auto","self-start":"self:start","self-end":"self:end","self-center":"self:center","self-stretch":"self:stretch",relative:"relative",absolute:"absolute",fixed:"fixed",sticky:"sticky",static:"static","overflow-auto":"overflow:auto","overflow-hidden":"overflow:hidden","overflow-visible":"overflow:visible","overflow-scroll":"overflow:scroll","object-contain":"object:contain","object-cover":"object:cover","object-fill":"object:fill","object-none":"object:none","object-scale-down":"object:scale-down"},M={italic:"italic","not-italic":"not-italic",antialiased:"antialiased",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize","normal-case":"normal-case",underline:"underline","line-through":"line-through","no-underline":"no-underline",truncate:"truncate","cursor-pointer":"cursor:pointer","cursor-default":"cursor:default","cursor-not-allowed":"cursor:not-allowed","select-none":"select:none","select-text":"select:text","select-all":"select:all"};function v(l,n){return l.startsWith("[")&&l.endsWith("]")?l:n?["full","screen","auto"].includes(l)?$[l]||`[${l}]`:`tw-${l}`:$[l]||`[${l}]`}var at={0:"none",1:"thin",2:"regular",3:"thick",4:"tiny",8:"small"};function p(l,n){return n?`tw-${l}`:at[l]||`[${l}px]`}function tt(l,n){let f=l.match(/^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/),e="",t=l;if(f){let a=f[1].slice(0,-1);["sm","md","lg","xl","2xl"].includes(a)?e=`tw-${a}:`:e=f[1],t=f[2]}if(k[t])return{cat:"layout",val:e+k[t]};if(M[t])return{cat:"visual",val:e+M[t]};let d=t.match(/^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(d)return{cat:"visual",val:e+"text:"+d[1]};if(["text-left","text-center","text-right","text-justify"].includes(t))return{cat:"visual",val:e+"text:"+t.replace("text-","")};let o=t.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);if(o){let a=n?`tw-${o[1]}`:_[o[1]]||o[1];return{cat:"visual",val:e+"text-size:"+a}}let c=t.match(/^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/);if(c){let a=c[1];return a==="transparent"?{cat:"visual",val:e+"bg:[transparent]"}:a==="current"?{cat:"visual",val:e+"bg:[currentColor]"}:a==="inherit"?{cat:"visual",val:e+"bg:[inherit]"}:{cat:"visual",val:e+"bg:"+a}}let r=t.match(/^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(r)return{cat:"visual",val:e+"border:"+r[1]};let u=t.match(/^p([trblxy])?-(.+)$/);if(u){let a=u[1]?"-"+u[1]:"";return{cat:"space",val:e+"p"+a+":"+v(u[2],n)}}let m=t.match(/^-?m([trblxy])?-(\[.+\]|\d+\.?\d*|px|auto|full|screen)$/);if(m){let a=t.startsWith("-"),i=m[1]?"-"+m[1]:"",s=v(m[2],n);return a&&(s.startsWith("[")&&s.endsWith("]")?s=`[-${s.slice(1,-1)}]`:s=`-${s}`),{cat:"space",val:e+"m"+i+":"+s}}let g=t.match(/^gap-([xy])?-?(.+)$/);if(g){let a=g[1]?"-"+g[1]:"";return{cat:"space",val:e+"g"+a+":"+v(g[2],n)}}let w=t.match(/^(min-w|max-w|w)-(.+)$/);if(w){let a=w[1],i=w[2],x={max:"[max-content]",min:"[min-content]",fit:"[fit-content]",prose:"[65ch]"}[i]||v(i,n);return{cat:"space",val:e+a+":"+x}}let b=t.match(/^(min-h|max-h|h)-(.+)$/);if(b){let a=b[1],i=b[2],x={screen:"[100vh]",svh:"[100svh]",lvh:"[100lvh]",dvh:"[100dvh]",max:"[max-content]",min:"[min-content]",fit:"[fit-content]"}[i]||v(i,n);return{cat:"space",val:e+a+":"+x}}let j=t.match(/^rounded(?:-(.+))?$/);if(j){let a=j[1]||"",i=n?a===""?"tw-DEFAULT":`tw-${a}`:Q[a]||"medium";return{cat:"visual",val:e+"rounded:"+i}}let z=t.match(/^shadow(?:-(.+))?$/);if(z){let a=z[1]||"",i=n?a===""?"tw-DEFAULT":`tw-${a}`:Z[a]||"medium";return{cat:"visual",val:e+"shadow:"+i}}let W=t.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);if(W)return{cat:"visual",val:e+"font:tw-"+W[1]};let h=t.match(/^border(?:-([trblxy]))?(?:-(\d+))?$/);if(h&&(h[2]||!h[1]&&t==="border")){let a=h[1]?"-"+h[1]+"-w":"-w",i=h[2]||"1";return{cat:"visual",val:e+"border"+a+":"+p(i,n)}}let y=t.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);if(y){let a=y[1],i=y[2];return i==="0"?i="none":i.startsWith("[")&&i.endsWith("]")||(i=v(i,n)),{cat:"layout",val:e+a+":"+i}}if(t==="outline-none")return{cat:"visual",val:e+"outline:none"};let S=t.match(/^order-(\d+|first|last|none)$/);if(S)return{cat:"layout",val:e+"order:"+S[1]};let C=t.match(/^grid-cols-(\d+|none)$/);if(C)return{cat:"layout",val:e+"grid-cols:"+C[1]};let V=t.match(/^col-span-(\d+|full)$/);if(V)return{cat:"layout",val:e+"col-span:"+V[1]};let T=t.match(/^grid-rows-(\d+|none)$/);if(T)return{cat:"layout",val:e+"grid-rows:"+T[1]};let H=t.match(/^row-span-(\d+|full)$/);if(H)return{cat:"layout",val:e+"row-span:"+H[1]};let L=t.match(/^opacity-(\d+)$/);if(L)return{cat:"visual",val:e+"opacity:"+L[1]};let q=t.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);if(q)return{cat:"visual",val:e+"bg-image:gradient-to-"+q[1]};let A=t.match(/^from-(.+)$/);if(A)return{cat:"visual",val:e+"from:"+A[1]};let D=t.match(/^via-(.+)$/);if(D)return{cat:"visual",val:e+"via:"+D[1]};let E=t.match(/^to-(.+)$/);if(E)return{cat:"visual",val:e+"to:"+E[1]};let F=t.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);if(F){let a=F[1]||"all";return{cat:"visual",val:e+"transition:"+a}}let U=t.match(/^duration-(\d+)$/);if(U){let a=parseInt(U[1]),i;return a<=75?i="instant":a<=100?i="quick":a<=150?i="fast":a<=200?i="normal":a<=300?i="slow":a<=500?i="slower":i="lazy",{cat:"visual",val:e+"duration:"+i}}let X=t.match(/^ease-(linear|in|out|in-out)$/);if(X)return{cat:"visual",val:e+"ease:"+X[1]};let Y=t.match(/^ring(?:-(\d+))?$/);if(Y){let a=Y[1]||"3";if(a==="0")return{cat:"visual",val:e+"ring:none"};let s={1:"thin",2:"regular",3:"small",4:"medium",8:"big"}[a]||`[${a}px]`;return{cat:"visual",val:e+"ring:"+s}}let B=t.match(/^ring-offset-(\d+)$/);if(B)return{cat:"visual",val:e+"ring-offset:"+B[1]};let G=t.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(G)return{cat:"visual",val:e+"ring-color:"+G[1]};let I=t.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(I)return{cat:"visual",val:e+"divide-x:"+I[1]};let K=t.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(K)return{cat:"visual",val:e+"divide-y:"+K[1]};let N=t.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);if(N)return{cat:"visual",val:e+"divide:"+N[1]};let O=t.match(/^divide-(\d+)$/);if(O)return{cat:"visual",val:e+"divide-w:"+p(O[1],n)};if(t==="divide-x-reverse")return{cat:"visual",val:e+"divide-x:reverse"};if(t==="divide-y-reverse")return{cat:"visual",val:e+"divide-y:reverse"};let P=t.match(/^divide-x-(\d+)$/);if(P)return{cat:"visual",val:e+"divide-x-w:"+p(P[1],n)};if(t==="divide-x")return{cat:"visual",val:e+"divide-x-w:thin"};if(t==="divide-y")return{cat:"visual",val:e+"divide-y-w:thin"};let R=t.match(/^divide-y-(\d+)$/);if(R)return{cat:"visual",val:e+"divide-y-w:"+p(R[1],n)};let J=t.match(/^divide-(solid|dashed|dotted|double|none)$/);return J?{cat:"visual",val:e+"divide-style:"+J[1]}:null}function et(l,n){let f=l.trim().split(/\s+/).filter(c=>c),e=[],t=[],d=[],o=[];for(let c of f){let r=tt(c,n);r?r.cat==="layout"?e.push(r.val):r.cat==="space"?t.push(r.val):r.cat==="visual"&&d.push(r.val):o.push(c)}return{layout:e,space:t,visual:d,unknown:o}}function it(l,n){return l.replace(/class=(['"])([^"']+)\1/g,(f,e,t)=>{let{layout:d,space:o,visual:c,unknown:r}=et(t,n),u=[];return d.length&&u.push(`layout="${d.join(" ")}"`),o.length&&u.push(`space="${o.join(" ")}"`),c.length&&u.push(`visual="${c.join(" ")}"`),r.length&&u.push(`class="${r.join(" ")}"`),u.join(" ")||'class=""'})}typeof window<"u"&&(window.SenangStartTW={convertClass:tt,convertClasses:et,convertHTML:it,scales:{spacing:$,radius:Q,shadow:Z,fontSize:_},mappings:{layout:k,visual:M}});})();

package/docs/.vitepress/config.js

@@ -222,7 +222,11 @@ const enSidebar = {
             { text: 'Border Color', link: '/reference/visual/border' },
             { text: 'Border Width', link: '/reference/visual/border-width' },
             { text: 'Border Radius', link: '/reference/visual/border-radius' },
-            { text: 'Border Style', link: '/reference/visual/border-style' }
+            { text: 'Border Style', link: '/reference/visual/border-style' },
+            { text: 'Divide Color', link: '/reference/visual/divide' },
+            { text: 'Divide Width', link: '/reference/visual/divide-width' },
+            { text: 'Divide Style', link: '/reference/visual/divide-style' },
+            { text: 'Divide Reverse', link: '/reference/visual/divide-reverse' }
           ]
         },
         {
@@ -590,7 +594,11 @@ const msSidebar = {
             { text: 'Warna Sempadan', link: '/ms/reference/visual/border' },
             { text: 'Lebar Sempadan', link: '/ms/reference/visual/border-width' },
             { text: 'Radius Sempadan', link: '/ms/reference/visual/border-radius' },
-            { text: 'Gaya Sempadan', link: '/ms/reference/visual/border-style' }
+            { text: 'Gaya Sempadan', link: '/ms/reference/visual/border-style' },
+            { text: 'Warna Pemisah', link: '/ms/reference/visual/divide-color' },
+            { text: 'Lebar Pemisah', link: '/ms/reference/visual/divide-width' },
+            { text: 'Gaya Pemisah', link: '/ms/reference/visual/divide-style' },
+            { text: 'Pemisah Terbalik', link: '/ms/reference/visual/divide-reverse' }
           ]
         },
         {

package/docs/guide/getting-started.md

@@ -123,6 +123,12 @@ Let's create a simple card:
 - `space="w:[320px] p:medium"` — 320px width, medium padding
 - `visual="bg:white rounded:big shadow:medium"` — White background, rounded corners, shadow
 
+## For AI Assistants
+
+If you are using AI coding assistants (like Cursor, Windsurf, or others), you can provide them with our specialized context file. This file contains the full list of available references and usage instructions in a format optimized for LLMs.
+
+File location: [`https://bookklik-technologies.github.io/senangstart-css/llms.txt`](https://bookklik-technologies.github.io/senangstart-css/llms.txt)
+
 ## Next Steps
 
 - [Tri-Attribute Syntax](/guide/tri-attribute) — Deep dive into layout, space, visual

package/docs/ms/guide/getting-started.md

@@ -123,6 +123,12 @@ Mari cipta kad ringkas:
 - `space="w:[320px] p:medium"` — Lebar 320px, padding medium
 - `visual="bg:white rounded:big shadow:medium"` — Latar putih, sudut bulat, bayang
 
+## Untuk Pembantu AI
+
+Jika anda menggunakan pembantu pengekodan AI (seperti Cursor, Windsurf, atau lain-lain), anda boleh membekalkan fail konteks khusus kami kepada mereka. Fail ini mengandungi senarai penuh rujukan yang tersedia dan arahan penggunaan dalam format yang disokong untuk LLMs.
+
+Lokasi fail: [`https://bookklik-technologies.github.io/senangstart-css/llms.txt`](https://bookklik-technologies.github.io/senangstart-css/llms.txt)
+
 ## Langkah Seterusnya
 
 - [Sintaksis Tri-Atribusi](/ms/guide/tri-attribute) — Selami layout, space, visual

package/docs/ms/reference/space/height.md

@@ -17,13 +17,16 @@ space="h:[value]"
 
 ## Nilai Skala
 
-`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`
+`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
 
 ## Contoh
 
 ```html
 <div space="h:[100vh]">Full viewport height</div>
 <div space="min-h:[400px]">Min height</div>
+<div space="h:max">Content height</div>
+<div space="max-h:max">Max content height</div>
+<div space="min-h:min">Min content height</div>
 ```
 
 ## Pratonton
@@ -58,12 +61,14 @@ space="h:[value]"
 
 <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
 
-### Tinggi Minimum
+### Tinggi Berdasarkan Kandungan
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:[80px]"</code> - Tetapkan kekangan tinggi minimum</p>
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:max"</code> - Guna min, max, atau fit untuk tinggi berdasarkan kandungan</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
+  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
+  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
 </div>
 </div>
 
@@ -71,8 +76,38 @@ space="h:[value]"
 <summary>Lihat Kod</summary>
 
 ```html
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
+  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
+  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Tinggi Min/Max dengan Nilai Kandungan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:min"</code> - Hadkan tinggi menggunakan nilai kandungan</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
+  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
+  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
+  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
+  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
 </div>
 ```
 

package/docs/ms/reference/space/width.md

@@ -17,7 +17,7 @@ space="w:[value]"
 
 ## Nilai Skala
 
-`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`
+`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
 
 ## Contoh
 
@@ -25,6 +25,9 @@ space="w:[value]"
 <div space="w:[100%]">Full width</div>
 <div space="max-w:[1200px]">Max width container</div>
 <div space="min-w:[300px]">Min width</div>
+<div space="w:max">Content width</div>
+<div space="max-w:max">Max content width</div>
+<div space="min-w:min">Min content width</div>
 ```
 
 ## Pratonton
@@ -59,12 +62,14 @@ space="w:[value]"
 
 <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
 
-### Lebar Maksimum
+### Saiz Berdasarkan Kandungan
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="max-w:[200px]"</code> - Hadkan lebar maksimum</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:max"</code> - Guna min, max, atau fit untuk saiz berdasarkan kandungan</p>
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
+  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
+  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
+  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
 </div>
 </div>
 
@@ -73,7 +78,37 @@ space="w:[value]"
 
 ```html
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
+  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
+  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
+  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Lebar Maksimum dengan Nilai Kandungan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="max-w:min"</code> - Hadkan lebar maksimum menggunakan nilai kandungan</p>
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
+  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
+  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
+  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
+  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
 </div>
 ```
 

package/docs/ms/reference/visual/divide-reverse.md

@@ -0,0 +1,66 @@
+# Divide Reverse
+
+Songsangkan sisi sempadan untuk flex-reverse
+
+## Sintaks
+```
+visual="divide-{x|y}:reverse"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `divide-x:reverse` | `--ss-divide-x-reverse: 1` | Songsangkan pemisah paksi-X |
+| `divide-y:reverse` | `--ss-divide-y-reverse: 1` | Songsangkan pemisah paksi-Y |
+
+## Contoh
+
+```html
+<div layout="flex flex-row-reverse" visual="divide-x:gray-300 divide-x-w:thin divide-x:reverse">
+<div layout="flex flex-col-reverse" visual="divide-y:gray-300 divide-y-w:thin divide-y:reverse">
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Songsang vs Biasa
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="divide-x:reverse"</code> - Perbandingan pemisah aliran biasa vs songsang</p>
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:small">1</div>
+    <div space="p:small">2</div>
+    <div space="p:small">3</div>
+  </div>
+  <div layout="flex row-reverse" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-x:reverse">
+    <div space="p:small">1(R)</div>
+    <div space="p:small">2(R)</div>
+    <div space="p:small">3(R)</div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:small">1</div>
+    <div space="p:small">2</div>
+    <div space="p:small">3</div>
+  </div>
+  <div layout="flex row-reverse" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-x:reverse">
+    <div space="p:small">1(R)</div>
+    <div space="p:small">2(R)</div>
+    <div space="p:small">3(R)</div>
+  </div>
+</div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/visual/divide-style.md

@@ -0,0 +1,80 @@
+# Divide Style
+
+Tetapkan gaya pemisah
+
+## Sintaks
+```
+visual="divide-style:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `solid` | `border-style: solid` | Pemisah pepejal |
+| `dashed` | `border-style: dashed` | Pemisah putus-putus |
+| `dotted` | `border-style: dotted` | Pemisah bertitik |
+| `double` | `border-style: double` | Pemisah berganda |
+| `none` | `border-style: none` | Tiada pemisah |
+
+## Contoh
+
+```html
+<div visual="divide:gray-300 divide-style:dashed">
+<div visual="divide:gray-300 divide-style:dotted">
+<div visual="divide:gray-300 divide-style:double">
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Gaya Pemisah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="divide-style:dashed"</code> - Pilihan gaya pemisah berbeza</p>
+<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:solid border:neutral-500 border-w:regular border-style:solid">
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dashed border:neutral-500 border-w:regular border-style:dashed">
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dotted border:neutral-500 border-w:regular border-style:dotted">
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:solid border:neutral-500 border-w:regular border-style:solid">
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dashed border:neutral-500 border-w:regular border-style:dashed">
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dotted border:neutral-500 border-w:regular border-style:dotted">
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+  </div>
+</div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/visual/divide-width.md

@@ -0,0 +1,89 @@
+# Divide Width
+
+Tetapkan lebar pemisah
+
+## Sintaks
+```
+visual="divide-w:[value]" | visual="divide-{x|y}-w:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `border-width: var(--s-none)` | Tiada pemisah (0px) |
+| `thin` | `border-width: var(--s-thin)` | Pemisah nipis (1px) |
+| `regular` | `border-width: var(--s-regular)` | Pemisah standard (2px) |
+| `thick` | `border-width: var(--s-thick)` | Pemisah tebal (3px) |
+
+## Contoh
+
+```html
+<div visual="divide:gray-300 divide-w:thin">
+<div visual="divide:gray-300 divide-w:regular">
+<div visual="divide:gray-300 divide-w:thick">
+<div visual="divide-y:primary divide-y-w:regular">
+<div visual="divide-x:primary divide-x-w:thin">
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Lebar Pemisah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="divide-w:regular"</code> - Pilihan lebar pemisah berbeza</p>
+<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thin">
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thick">
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+  </div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thin">
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thick">
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+  </div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="divide:[custom-value]">Custom</div>
+```