@takumi-rs/helpers 0.24.0 → 0.26.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(e,r)=>{for(var t in r)u(e,t,{get:r[t],enumerable:!0})},x=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of p(r))!m.call(e,n)&&n!==t&&u(e,n,{get:()=>r[n],enumerable:!(o=i(r,n))||o.enumerable});return e};var f=e=>x(u({},"__esModule",{value:!0}),e);var v={};a(v,{container:()=>c,em:()=>C,fr:()=>P,image:()=>y,percentage:()=>g,rem:()=>s,rgba:()=>S,style:()=>b,text:()=>l,vh:()=>N,vw:()=>d});module.exports=f(v);function c(e){return{type:"container",...e}}function l(e,r){return{...r,type:"text",text:e}}function y(e,r){return{...r,type:"image",src:e}}function b(e){return e}function g(e){return{percentage:e}}function d(e){return{vw:e}}function N(e){return{vh:e}}function C(e){return{em:e}}function s(e){return{rem:e}}function P(e){return{fr:e}}function S(e,r,t,o=1){return[e,r,t,o]}0&&(module.exports={container,em,fr,image,percentage,rem,rgba,style,text,vh,vw});
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var p=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},d=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of a(t))!c.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(o=m(t,r))||o.enumerable});return e};var y=e=>d(i({},"__esModule",{value:!0}),e);var P={};p(P,{container:()=>f,em:()=>C,fr:()=>h,image:()=>x,percentage:()=>b,rem:()=>S,rgba:()=>I,style:()=>N,text:()=>l,vh:()=>s,vw:()=>g});module.exports=y(P);function u(e,t){t&&Object.keys(t).length>0&&(e.style=t)}function f(e){let t={type:"container",children:e.children};return u(t,e.style),t}function l(e,t){let n={type:"text",text:e};return u(n,t),n}function x(e){let t={type:"image",src:e.src};return u(t,e.style),t}function N(e){return e}function b(e){return{percentage:e}}function g(e){return{vw:e}}function s(e){return{vh:e}}function C(e){return{em:e}}function S(e){return{rem:e}}function h(e){return{fr:e}}function I(e,t,n,o=1){return[e,t,n,o]}0&&(module.exports={container,em,fr,image,percentage,rem,rgba,style,text,vh,vw});

package/dist/index.d.cts

@@ -1,9 +1,9 @@
-import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-C93nbSJX.cjs';
-export { N as Node } from './types-C93nbSJX.cjs';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-kk-nArin.cjs';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-kk-nArin.cjs';
 
 declare function container(props: Omit<ContainerNode, "type">): ContainerNode;
 declare function text(text: string, style?: PartialStyle): TextNode;
-declare function image(src: string, style?: PartialStyle): ImageNode;
+declare function image(props: Omit<ImageNode, "type">): ImageNode;
 declare function style(style: PartialStyle): Partial<Style>;
 /**
  * Convert a number to a percentage struct.

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-C93nbSJX.js';
-export { N as Node } from './types-C93nbSJX.js';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-kk-nArin.js';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-kk-nArin.js';
 
 declare function container(props: Omit<ContainerNode, "type">): ContainerNode;
 declare function text(text: string, style?: PartialStyle): TextNode;
-declare function image(src: string, style?: PartialStyle): ImageNode;
+declare function image(props: Omit<ImageNode, "type">): ImageNode;
 declare function style(style: PartialStyle): Partial<Style>;
 /**
  * Convert a number to a percentage struct.

package/dist/index.js

@@ -1 +1 @@
-function o(e){return{type:"container",...e}}function u(e,r){return{...r,type:"text",text:e}}function i(e,r){return{...r,type:"image",src:e}}function p(e){return e}function m(e){return{percentage:e}}function a(e){return{vw:e}}function x(e){return{vh:e}}function f(e){return{em:e}}function c(e){return{rem:e}}function l(e){return{fr:e}}function y(e,r,t,n=1){return[e,r,t,n]}export{o as container,f as em,l as fr,i as image,m as percentage,c as rem,y as rgba,p as style,u as text,x as vh,a as vw};
+function r(e,t){t&&Object.keys(t).length>0&&(e.style=t)}function i(e){let t={type:"container",children:e.children};return r(t,e.style),t}function u(e,t){let n={type:"text",text:e};return r(n,t),n}function m(e){let t={type:"image",src:e.src};return r(t,e.style),t}function a(e){return e}function c(e){return{percentage:e}}function p(e){return{vw:e}}function d(e){return{vh:e}}function y(e){return{em:e}}function f(e){return{rem:e}}function l(e){return{fr:e}}function x(e,t,n,o=1){return[e,t,n,o]}export{i as container,y as em,l as fr,m as image,c as percentage,f as rem,x as rgba,a as style,u as text,d as vh,p as vw};

package/dist/jsx/jsx.cjs

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var b=(t,r)=>{for(var e in r)p(t,e,{get:r[e],enumerable:!0})},x=(t,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of S(r))!P.call(t,i)&&i!==e&&p(t,i,{get:()=>r[i],enumerable:!(n=h(r,i))||n.enumerable});return t};var E=t=>x(p({},"__esModule",{value:!0}),t);var W={};b(W,{fromJsx:()=>a});module.exports=E(W);var g=require("react"),d=require("react-dom/server");function c(t){return{type:"container",...t}}function f(t,r){return{...r,type:"text",text:t}}function s(t,r){return{...r,type:"image",src:t}}function o(t){return{em:t}}function u(t,r,e,n=1){return[t,r,e,n]}var m={p:{margin:[o(1),0]},blockquote:{margin:[o(1),40]},center:{textAlign:"center"},hr:{margin:[o(.5),"auto"],borderWidth:1},h1:{fontSize:o(2),margin:[o(.67),0],fontWeight:700},h2:{fontSize:o(1.5),margin:[o(.83),0],fontWeight:700},h3:{fontSize:o(1.17),margin:[o(1),0],fontWeight:700},h4:{margin:[o(1.33),0],fontWeight:700},h5:{fontSize:o(.83),margin:[o(1.67),0],fontWeight:700},h6:{fontSize:o(.67),margin:[o(2.33),0],fontWeight:700},strong:{fontWeight:700},b:{fontWeight:700},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{fontFamily:"monospace",margin:[o(1),0]},mark:{backgroundColor:u(255,255,0),color:0},big:{fontSize:o(1.2)},small:{fontSize:o(1/1.2)}};var w=Symbol.for("react.transitional.element");function N(t){return typeof t=="object"&&t!==null&&"$$typeof"in t&&t.$$typeof===w}async function a(t){if(t==null)return[];if(t instanceof Promise)return a(await t);if(typeof t=="object"&&Symbol.iterator in t)return T(t);if(N(t)){let r=await C(t);return Array.isArray(r)?r:r?[r]:[]}return[f(String(t))]}async function C(t){if(typeof t.type=="function"){let n=t.type;return a(n(t.props))}if(typeof t.type=="symbol"&&t.type===Symbol.for("react.fragment"))return await l(t)||[];if(y(t,"img"))return R(t);if(y(t,"svg"))return[k(t)];let r=await l(t),e=I(t.props);return[c({children:r,...m[t.type],...e})]}function R(t){if(!t.props.src)throw new Error("Image element must have a 'src' prop.");let r=t.props.style?.width??t.props.width,e=t.props.style?.height??t.props.height;return[s(t.props.src,{...t.props.style,width:r,height:e})]}function k(t){return s((0,d.renderToStaticMarkup)((0,g.cloneElement)(t,{xmlns:"http://www.w3.org/2000/svg",...t.props},t.props.children)))}function I(t){return typeof t=="object"&&t&&"style"in t?t.style:void 0}function y(t,r){return t.type===r}async function l(t){return typeof t.props!="object"||t.props===null||!("children"in t.props)?[]:await a(t.props.children)}async function T(t){return(await Promise.all(Array.from(t).map(a))).flat()}0&&(module.exports={fromJsx});
+"use strict";var s=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},k=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of N(e))!w.call(t,i)&&i!==r&&s(t,i,{get:()=>e[i],enumerable:!(o=R(e,i))||o.enumerable});return t};var C=t=>k(s({},"__esModule",{value:!0}),t);var M={};x(M,{fromJsx:()=>v});module.exports=C(M);var S=require("react"),h=require("react-dom/server");function p(t,e){e&&Object.keys(e).length>0&&(t.style=e)}function c(t){let e={type:"container",children:t.children};return p(e,t.style),e}function m(t,e){let r={type:"text",text:t};return p(r,e),r}function f(t){let e={type:"image",src:t.src};return p(e,t.style),e}function u(t){return{percentage:t}}function n(t){return{em:t}}function d(t,e,r,o=1){return[t,e,r,o]}var y={p:{margin:[n(1),0]},blockquote:{margin:[n(1),40]},center:{textAlign:"center"},hr:{margin:[n(.5),"auto"],borderWidth:1},h1:{fontSize:n(2),margin:[n(.67),0],fontWeight:700},h2:{fontSize:n(1.5),margin:[n(.83),0],fontWeight:700},h3:{fontSize:n(1.17),margin:[n(1),0],fontWeight:700},h4:{margin:[n(1.33),0],fontWeight:700},h5:{fontSize:n(.83),margin:[n(1.67),0],fontWeight:700},h6:{fontSize:n(.67),margin:[n(2.33),0],fontWeight:700},strong:{fontWeight:700},b:{fontWeight:700},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{fontFamily:"monospace",margin:[n(1),0]},mark:{backgroundColor:d(255,255,0),color:0},big:{fontSize:n(1.2)},small:{fontSize:n(1/1.2)}};var T=Symbol.for("react.transitional.element"),A=Symbol.for("react.element"),I=Symbol.for("react.forward_ref"),$=Symbol.for("react.memo");function _(t){return typeof t=="object"&&t!==null&&"$$typeof"in t&&(t.$$typeof===T||t.$$typeof===A)}async function v(t){let e=await a(t);return e.length===0?c({}):e.length===1&&e[0]!==void 0?e[0]:c({children:e,style:{width:u(100),height:u(100)}})}async function a(t){if(t==null)return[];if(t instanceof Promise)return a(await t);if(typeof t=="object"&&Symbol.iterator in t)return L(t);if(_(t)){let e=await P(t);return Array.isArray(e)?e:e?[e]:[]}return[m(String(t))]}function b(t){return typeof t=="function"}function F(t){if(typeof t.type!="object"||t.type===null)return;let e=t.type;if(e.$$typeof===I&&e.render)return a(e.render(t.props,null))}function W(t){if(typeof t.type!="object"||t.type===null)return;let e=t.type;if(e.$$typeof!==$)return;let r=e.type;if(b(r))return a(r(t.props));let o={...t,type:r};return P(o)}async function P(t){if(b(t.type))return a(t.type(t.props));let e=F(t);if(e!==void 0)return e;let r=W(t);if(r!==void 0)return r;if(typeof t.type=="symbol"&&t.type===Symbol.for("react.fragment"))return await E(t)||[];if(g(t,"img"))return[O(t)];if(g(t,"svg"))return[j(t)];let o=await E(t),i=l(t.props);return typeof t.type=="string"&&t.type in y&&Object.assign(i,y[t.type]),[c({children:o,style:i})]}function O(t){if(!t.props.src)throw new Error("Image element must have a 'src' prop.");let e=l(t.props);return f({src:t.props.src,style:e})}function j(t){let e=l(t.props),r=(0,h.renderToStaticMarkup)((0,S.cloneElement)(t,{xmlns:"http://www.w3.org/2000/svg",...t.props},t.props.children));return f({src:r,style:e})}function l(t){return typeof t!="object"||t===null?{}:"style"in t&&typeof t.style=="object"?t.style:{}}function g(t,e){return t.type===e}function E(t){return typeof t.props!="object"||t.props===null||!("children"in t.props)?Promise.resolve([]):a(t.props.children)}async function L(t){return(await Promise.all(Array.from(t).map(a))).flat()}0&&(module.exports={fromJsx});

package/dist/jsx/jsx.d.cts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { N as Node } from '../types-C93nbSJX.cjs';
+import { N as Node } from '../types-kk-nArin.cjs';
 
-declare function fromJsx(element: ReactNode): Promise<Node[]>;
+declare function fromJsx(element: ReactNode): Promise<Node>;
 
 export { fromJsx };

package/dist/jsx/jsx.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { N as Node } from '../types-C93nbSJX.js';
+import { N as Node } from '../types-kk-nArin.js';
 
-declare function fromJsx(element: ReactNode): Promise<Node[]>;
+declare function fromJsx(element: ReactNode): Promise<Node>;
 
 export { fromJsx };

package/dist/jsx/jsx.js

@@ -1 +1 @@
-import{cloneElement as y}from"react";import{renderToStaticMarkup as l}from"react-dom/server";function p(t){return{type:"container",...t}}function s(t,r){return{...r,type:"text",text:t}}function a(t,r){return{...r,type:"image",src:t}}function o(t){return{em:t}}function c(t,r,e,n=1){return[t,r,e,n]}var f={p:{margin:[o(1),0]},blockquote:{margin:[o(1),40]},center:{textAlign:"center"},hr:{margin:[o(.5),"auto"],borderWidth:1},h1:{fontSize:o(2),margin:[o(.67),0],fontWeight:700},h2:{fontSize:o(1.5),margin:[o(.83),0],fontWeight:700},h3:{fontSize:o(1.17),margin:[o(1),0],fontWeight:700},h4:{margin:[o(1.33),0],fontWeight:700},h5:{fontSize:o(.83),margin:[o(1.67),0],fontWeight:700},h6:{fontSize:o(.67),margin:[o(2.33),0],fontWeight:700},strong:{fontWeight:700},b:{fontWeight:700},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{fontFamily:"monospace",margin:[o(1),0]},mark:{backgroundColor:c(255,255,0),color:0},big:{fontSize:o(1.2)},small:{fontSize:o(1/1.2)}};var g=Symbol.for("react.transitional.element");function d(t){return typeof t=="object"&&t!==null&&"$$typeof"in t&&t.$$typeof===g}async function i(t){if(t==null)return[];if(t instanceof Promise)return i(await t);if(typeof t=="object"&&Symbol.iterator in t)return x(t);if(d(t)){let r=await h(t);return Array.isArray(r)?r:r?[r]:[]}return[s(String(t))]}async function h(t){if(typeof t.type=="function"){let n=t.type;return i(n(t.props))}if(typeof t.type=="symbol"&&t.type===Symbol.for("react.fragment"))return await m(t)||[];if(u(t,"img"))return S(t);if(u(t,"svg"))return[P(t)];let r=await m(t),e=b(t.props);return[p({children:r,...f[t.type],...e})]}function S(t){if(!t.props.src)throw new Error("Image element must have a 'src' prop.");let r=t.props.style?.width??t.props.width,e=t.props.style?.height??t.props.height;return[a(t.props.src,{...t.props.style,width:r,height:e})]}function P(t){return a(l(y(t,{xmlns:"http://www.w3.org/2000/svg",...t.props},t.props.children)))}function b(t){return typeof t=="object"&&t&&"style"in t?t.style:void 0}function u(t,r){return t.type===r}async function m(t){return typeof t.props!="object"||t.props===null||!("children"in t.props)?[]:await i(t.props.children)}async function x(t){return(await Promise.all(Array.from(t).map(i))).flat()}export{i as fromJsx};
+import{cloneElement as h}from"react";import{renderToStaticMarkup as b}from"react-dom/server";function c(t,e){e&&Object.keys(e).length>0&&(t.style=e)}function a(t){let e={type:"container",children:t.children};return c(e,t.style),e}function l(t,e){let n={type:"text",text:t};return c(n,e),n}function s(t){let e={type:"image",src:t.src};return c(e,t.style),e}function p(t){return{percentage:t}}function r(t){return{em:t}}function m(t,e,n,i=1){return[t,e,n,i]}var f={p:{margin:[r(1),0]},blockquote:{margin:[r(1),40]},center:{textAlign:"center"},hr:{margin:[r(.5),"auto"],borderWidth:1},h1:{fontSize:r(2),margin:[r(.67),0],fontWeight:700},h2:{fontSize:r(1.5),margin:[r(.83),0],fontWeight:700},h3:{fontSize:r(1.17),margin:[r(1),0],fontWeight:700},h4:{margin:[r(1.33),0],fontWeight:700},h5:{fontSize:r(.83),margin:[r(1.67),0],fontWeight:700},h6:{fontSize:r(.67),margin:[r(2.33),0],fontWeight:700},strong:{fontWeight:700},b:{fontWeight:700},code:{fontFamily:"monospace"},kbd:{fontFamily:"monospace"},pre:{fontFamily:"monospace",margin:[r(1),0]},mark:{backgroundColor:m(255,255,0),color:0},big:{fontSize:r(1.2)},small:{fontSize:r(1/1.2)}};var P=Symbol.for("react.transitional.element"),R=Symbol.for("react.element"),N=Symbol.for("react.forward_ref"),w=Symbol.for("react.memo");function x(t){return typeof t=="object"&&t!==null&&"$$typeof"in t&&(t.$$typeof===P||t.$$typeof===R)}async function M(t){let e=await o(t);return e.length===0?a({}):e.length===1&&e[0]!==void 0?e[0]:a({children:e,style:{width:p(100),height:p(100)}})}async function o(t){if(t==null)return[];if(t instanceof Promise)return o(await t);if(typeof t=="object"&&Symbol.iterator in t)return I(t);if(x(t)){let e=await S(t);return Array.isArray(e)?e:e?[e]:[]}return[l(String(t))]}function E(t){return typeof t=="function"}function k(t){if(typeof t.type!="object"||t.type===null)return;let e=t.type;if(e.$$typeof===N&&e.render)return o(e.render(t.props,null))}function C(t){if(typeof t.type!="object"||t.type===null)return;let e=t.type;if(e.$$typeof!==w)return;let n=e.type;if(E(n))return o(n(t.props));let i={...t,type:n};return S(i)}async function S(t){if(E(t.type))return o(t.type(t.props));let e=k(t);if(e!==void 0)return e;let n=C(t);if(n!==void 0)return n;if(typeof t.type=="symbol"&&t.type===Symbol.for("react.fragment"))return await g(t)||[];if(d(t,"img"))return[T(t)];if(d(t,"svg"))return[A(t)];let i=await g(t),y=u(t.props);return typeof t.type=="string"&&t.type in f&&Object.assign(y,f[t.type]),[a({children:i,style:y})]}function T(t){if(!t.props.src)throw new Error("Image element must have a 'src' prop.");let e=u(t.props);return s({src:t.props.src,style:e})}function A(t){let e=u(t.props),n=b(h(t,{xmlns:"http://www.w3.org/2000/svg",...t.props},t.props.children));return s({src:n,style:e})}function u(t){return typeof t!="object"||t===null?{}:"style"in t&&typeof t.style=="object"?t.style:{}}function d(t,e){return t.type===e}function g(t){return typeof t.props!="object"||t.props===null||!("children"in t.props)?Promise.resolve([]):o(t.props.children)}async function I(t){return(await Promise.all(Array.from(t).map(o))).flat()}export{M as fromJsx};

package/dist/{types-C93nbSJX.d.cts → types-kk-nArin.d.cts}

@@ -17,7 +17,7 @@ type Color = [number, number, number] | [number, number, number, number] | numbe
  * This corresponds to CSS values that can be specified as pixels, percentages,
  * or the 'auto' keyword for automatic sizing.
  */
-type LengthUnit = "auto" | "min-content" | "max-content" | {
+type LengthUnit = "auto" | {
     "percentage": number;
 } | {
     "rem": number;
@@ -70,6 +70,13 @@ type BoxShadow = {
  */
 type BoxShadows = Array<BoxShadow>;
 
+/**
+ * Defines how the width and height of an element are calculated.
+ *
+ * This enum determines whether the width and height properties include padding and border, or just the content area.
+ */
+type BoxSizing = "content-box" | "border-box";
+
 /**
  * This enum determines the layout algorithm used for the children of a node.
  */
@@ -140,6 +147,14 @@ type GridLine = {
     end: GridPlacement | null;
 };
 
+/**
+ * Represents `grid-template-areas` value
+ *
+ * Supports either a 2D matrix of area names (use "." for empty) or a CSS string value
+ * like: "a a ." "b b c"
+ */
+type GridTemplateAreas = Array<Array<string>> | string;
+
 /**
  * Represents a grid track sizing function with serde support
  */
@@ -175,9 +190,14 @@ type GridRepeatTrack = {
      */
     size: GridTrackSize;
     /**
-     * The names of the grid lines
+     * The names for the line preceding this track within the repeat() clause
      */
     names: Array<string>;
+    /**
+     * The names for the final line after the last track within the repeat() clause
+     * Only set on the last track of the repeat fragment. For other tracks this is None.
+     */
+    endNames: Array<string> | null;
 };
 
 /**
@@ -186,13 +206,9 @@ type GridRepeatTrack = {
 type GridRepetitionCount = "auto-fill" | "auto-fit" | number;
 
 /**
- * Represents a track sizing function
+ * Represents a track sizing function or a list of line names between tracks
  */
-type GridTemplateComponent = {
-    "single": GridTrackSize;
-} | {
-    "repeat": [GridRepetitionCount, Array<GridRepeatTrack>];
-};
+type GridTemplateComponent = Array<string> | GridTrackSize | [GridRepetitionCount, Array<GridRepeatTrack>];
 
 /**
  * Defines how images should be scaled when rendered.
@@ -207,6 +223,11 @@ type ImageScalingAlgorithm = "auto" | "smooth" | "pixelated";
  */
 type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-evenly" | "space-around";
 
+/**
+ * Represents a line height value, number value is parsed as em.
+ */
+type LineHeight = number | string | LengthUnit;
+
 /**
  * Represents an angle value in degrees.
  */
@@ -283,6 +304,16 @@ type TextAlign = "left" | "right" | "center" | "justify" | "start" | "end";
  */
 type TextOverflow = "ellipsis" | "clip";
 
+/**
+ * Controls the slant (italic/oblique) of text rendering.
+ */
+type TextStyle = "normal" | "italic" | "oblique";
+
+/**
+ * Controls text case transformation when rendering.
+ */
+type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
+
 /**
  * Main styling structure that contains all layout and visual properties.
  */
@@ -495,10 +526,26 @@ type Style = {
      * Defines the line names and track sizing functions of the grid rows.
      */
     gridTemplateRows?: Array<GridTemplateComponent>;
+    /**
+     * Defines named grid areas specified via `grid-template-areas`.
+     */
+    gridTemplateAreas?: GridTemplateAreas;
+    /**
+     * How the width and height of an element are calculated.
+     */
+    boxSizing?: BoxSizing;
     /**
      * How text should be overflowed.
      */
     textOverflow?: TextOverflow;
+    /**
+     * Controls text case transformation when rendering.
+     */
+    textTransform?: TextTransform;
+    /**
+     * Font slant style (normal, italic, oblique).
+     */
+    textStyle?: TextStyle;
     /**
      * Color of the element's border.
      */
@@ -516,9 +563,9 @@ type Style = {
      */
     fontFamily?: FontFamily;
     /**
-     * Line height for text spacing.
+     * Line height for text spacing, number is em.
      */
-    lineHeight?: LengthUnit;
+    lineHeight?: LineHeight;
     /**
      * Font weight for text rendering.
      */
@@ -570,17 +617,22 @@ type AnyNode = {
 };
 type PartialStyle = Partial<Style>;
 type Node = ContainerNode | TextNode | ImageNode | AnyNode;
-type ContainerNode = PartialStyle & {
+type ContainerNode = {
     type: "container";
+    style?: PartialStyle;
     children?: Node[];
 };
-type TextNode = PartialStyle & {
+type TextNode = {
     type: "text";
     text: string;
+    style?: PartialStyle;
 };
-type ImageNode = PartialStyle & {
+type ImageNode = {
     type: "image";
     src: string;
+    width?: number;
+    height?: number;
+    style?: PartialStyle;
 };
 
-export type { ContainerNode as C, ImageNode as I, Node as N, PartialStyle as P, Style as S, TextNode as T, Color as a };
+export type { AnyNode as A, ContainerNode as C, ImageNode as I, JsonValue as J, Node as N, PartialStyle as P, Style as S, TextNode as T, Color as a };

package/dist/{types-C93nbSJX.d.ts → types-kk-nArin.d.ts}

@@ -17,7 +17,7 @@ type Color = [number, number, number] | [number, number, number, number] | numbe
  * This corresponds to CSS values that can be specified as pixels, percentages,
  * or the 'auto' keyword for automatic sizing.
  */
-type LengthUnit = "auto" | "min-content" | "max-content" | {
+type LengthUnit = "auto" | {
     "percentage": number;
 } | {
     "rem": number;
@@ -70,6 +70,13 @@ type BoxShadow = {
  */
 type BoxShadows = Array<BoxShadow>;
 
+/**
+ * Defines how the width and height of an element are calculated.
+ *
+ * This enum determines whether the width and height properties include padding and border, or just the content area.
+ */
+type BoxSizing = "content-box" | "border-box";
+
 /**
  * This enum determines the layout algorithm used for the children of a node.
  */
@@ -140,6 +147,14 @@ type GridLine = {
     end: GridPlacement | null;
 };
 
+/**
+ * Represents `grid-template-areas` value
+ *
+ * Supports either a 2D matrix of area names (use "." for empty) or a CSS string value
+ * like: "a a ." "b b c"
+ */
+type GridTemplateAreas = Array<Array<string>> | string;
+
 /**
  * Represents a grid track sizing function with serde support
  */
@@ -175,9 +190,14 @@ type GridRepeatTrack = {
      */
     size: GridTrackSize;
     /**
-     * The names of the grid lines
+     * The names for the line preceding this track within the repeat() clause
      */
     names: Array<string>;
+    /**
+     * The names for the final line after the last track within the repeat() clause
+     * Only set on the last track of the repeat fragment. For other tracks this is None.
+     */
+    endNames: Array<string> | null;
 };
 
 /**
@@ -186,13 +206,9 @@ type GridRepeatTrack = {
 type GridRepetitionCount = "auto-fill" | "auto-fit" | number;
 
 /**
- * Represents a track sizing function
+ * Represents a track sizing function or a list of line names between tracks
  */
-type GridTemplateComponent = {
-    "single": GridTrackSize;
-} | {
-    "repeat": [GridRepetitionCount, Array<GridRepeatTrack>];
-};
+type GridTemplateComponent = Array<string> | GridTrackSize | [GridRepetitionCount, Array<GridRepeatTrack>];
 
 /**
  * Defines how images should be scaled when rendered.
@@ -207,6 +223,11 @@ type ImageScalingAlgorithm = "auto" | "smooth" | "pixelated";
  */
 type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-evenly" | "space-around";
 
+/**
+ * Represents a line height value, number value is parsed as em.
+ */
+type LineHeight = number | string | LengthUnit;
+
 /**
  * Represents an angle value in degrees.
  */
@@ -283,6 +304,16 @@ type TextAlign = "left" | "right" | "center" | "justify" | "start" | "end";
  */
 type TextOverflow = "ellipsis" | "clip";
 
+/**
+ * Controls the slant (italic/oblique) of text rendering.
+ */
+type TextStyle = "normal" | "italic" | "oblique";
+
+/**
+ * Controls text case transformation when rendering.
+ */
+type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
+
 /**
  * Main styling structure that contains all layout and visual properties.
  */
@@ -495,10 +526,26 @@ type Style = {
      * Defines the line names and track sizing functions of the grid rows.
      */
     gridTemplateRows?: Array<GridTemplateComponent>;
+    /**
+     * Defines named grid areas specified via `grid-template-areas`.
+     */
+    gridTemplateAreas?: GridTemplateAreas;
+    /**
+     * How the width and height of an element are calculated.
+     */
+    boxSizing?: BoxSizing;
     /**
      * How text should be overflowed.
      */
     textOverflow?: TextOverflow;
+    /**
+     * Controls text case transformation when rendering.
+     */
+    textTransform?: TextTransform;
+    /**
+     * Font slant style (normal, italic, oblique).
+     */
+    textStyle?: TextStyle;
     /**
      * Color of the element's border.
      */
@@ -516,9 +563,9 @@ type Style = {
      */
     fontFamily?: FontFamily;
     /**
-     * Line height for text spacing.
+     * Line height for text spacing, number is em.
      */
-    lineHeight?: LengthUnit;
+    lineHeight?: LineHeight;
     /**
      * Font weight for text rendering.
      */
@@ -570,17 +617,22 @@ type AnyNode = {
 };
 type PartialStyle = Partial<Style>;
 type Node = ContainerNode | TextNode | ImageNode | AnyNode;
-type ContainerNode = PartialStyle & {
+type ContainerNode = {
     type: "container";
+    style?: PartialStyle;
     children?: Node[];
 };
-type TextNode = PartialStyle & {
+type TextNode = {
     type: "text";
     text: string;
+    style?: PartialStyle;
 };
-type ImageNode = PartialStyle & {
+type ImageNode = {
     type: "image";
     src: string;
+    width?: number;
+    height?: number;
+    style?: PartialStyle;
 };
 
-export type { ContainerNode as C, ImageNode as I, Node as N, PartialStyle as P, Style as S, TextNode as T, Color as a };
+export type { AnyNode as A, ContainerNode as C, ImageNode as I, JsonValue as J, Node as N, PartialStyle as P, Style as S, TextNode as T, Color as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takumi-rs/helpers",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "author": {
     "email": "me@kane.tw",
     "name": "Kane Wang",
@@ -14,6 +14,7 @@
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "bun-plugin-dts": "^0.3.0",
+    "lucide-react": "^0.540.0",
     "react": "^19.1.0",
     "tsup": "^8.5.0",
     "typescript": "catalog:"