@takumi-rs/helpers 0.13.0 → 0.14.1

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { ReactNode } from 'react';
+
 /**
  * Defines how flex items are aligned along the cross axis.
  *
@@ -48,7 +50,7 @@ export type ColorInput = Color | Gradient;
  * This corresponds to CSS values that can be specified as pixels, percentages,
  * or the 'auto' keyword for automatic sizing.
  */
-export type LengthUnit = "auto" | {
+export type LengthUnit = "auto" | "min-content" | "max-content" | {
 	"percentage": number;
 } | {
 	"rem": number;
@@ -113,7 +115,7 @@ export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
  *
  * This enum determines how flex items should wrap within the flex container.
  */
-export type FlexWrap = "no-wrap" | "wrap" | "wrap-reverse";
+export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
 /**
  * Represents font weight as a numeric value.
  *
@@ -138,7 +140,9 @@ export type GridAutoFlow = "row" | "column" | "row-dense" | "column-dense";
 /**
  * Represents a grid placement with serde support
  */
-export type GridPlacement = null | number | number | string;
+export type GridPlacement = "auto" | {
+	"span": number;
+} | number | string;
 /**
  * Represents a grid line placement with serde support
  */
@@ -157,14 +161,14 @@ export type GridLine = {
  */
 export type GridTrackSize = {
 	"fr": number;
-} | "min-content" | "max-content" | LengthUnit;
+} | LengthUnit;
 /**
  * Defines how flex items are aligned along the main axis.
  *
  * This enum determines how space is distributed between and around flex items
  * along the main axis of the flex container.
  */
-export type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+export type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-evenly" | "space-around";
 /**
  * Defines how an image should be resized to fit its container.
  *
@@ -280,6 +284,14 @@ export type Style = {
 	 * How flex items are aligned along the main axis
 	 */
 	justify_content?: JustifyContent;
+	/**
+	 * How flex items are aligned along the cross axis when there's extra space
+	 */
+	align_content?: JustifyContent;
+	/**
+	 * How grid items are aligned along the inline (row) axis
+	 */
+	justify_items?: AlignItems;
 	/**
 	 * How flex items are aligned along the cross axis
 	 */
@@ -289,7 +301,7 @@ export type Style = {
 	 */
 	flex_wrap: FlexWrap;
 	/**
-	 * The initial size of the flex item
+	 * The initial size of the flex item before growing or shrinking
 	 */
 	flex_basis: LengthUnit;
 	/**
@@ -297,19 +309,19 @@ export type Style = {
 	 */
 	position: Position$1;
 	/**
-	 * Spacing between flex items
+	 * Spacing between flex items or grid tracks
 	 */
 	gap: Gap;
 	/**
-	 * How much the element should grow relative to other flex items
+	 * How much the element should grow relative to other flex items (0.0 = no growth)
 	 */
 	flex_grow: number;
 	/**
-	 * How much the element should shrink relative to other flex items
+	 * How much the element should shrink relative to other flex items (0.0 = no shrinking)
 	 */
 	flex_shrink: number;
 	/**
-	 * Width of the element's border
+	 * Width of the element's border on each side
 	 */
 	border_width: SidesValue<LengthUnit>;
 	/**
@@ -396,7 +408,60 @@ export type Style = {
 	 * Letter spacing for text rendering
 	 * Value is measured in EM units
 	 */
-	letter_spacing?: number;
+	letter_spacing?: LengthUnit;
+};
+/**
+ * Style properties that can be inherited by child elements.
+ *
+ * These properties are typically passed down from parent to child elements
+ * in the layout hierarchy, such as font settings and colors.
+ */
+export type InheritableStyle = {
+	/**
+	 * How text should be overflowed
+	 */
+	text_overflow?: TextOverflow;
+	/**
+	 * Color of the element's border
+	 */
+	border_color?: ColorInput;
+	/**
+	 * Text color for child text elements
+	 */
+	color?: ColorInput;
+	/**
+	 * Font size in pixels for text rendering
+	 */
+	font_size?: LengthUnit;
+	/**
+	 * Font family name for text rendering
+	 */
+	font_family?: string;
+	/**
+	 * Line height multiplier for text spacing
+	 */
+	line_height?: LengthUnit;
+	/**
+	 * Font weight for text rendering
+	 */
+	font_weight?: FontWeight;
+	/**
+	 * Maximum number of lines for text before truncation
+	 */
+	line_clamp?: number;
+	/**
+	 * Corner radius for rounded borders in pixels
+	 */
+	border_radius?: SidesValue<LengthUnit>;
+	/**
+	 * Text alignment within the element
+	 */
+	text_align?: TextAlign;
+	/**
+	 * Letter spacing for text rendering
+	 * Value is measured in EM units
+	 */
+	letter_spacing?: LengthUnit;
 };
 /**
  * Represents a value that can be a specific length, percentage, or automatic.
@@ -414,24 +479,27 @@ export type AnyNode = {
 	type: string;
 	[key: string]: JsonValue;
 };
-export type StyleInput = Partial<Style>;
-export type Node = ContainerNode | TextNode | ImageNode | AnyNode;
-export type ContainerNode = StyleInput & {
+export type PartialStyle = Partial<Style>;
+export type JsxParsedStyle = {
+	[key in keyof Style]: Style[key] | undefined;
+};
+type Node$1 = ContainerNode | TextNode | ImageNode | AnyNode;
+export type ContainerNode = PartialStyle & {
 	type: "container";
-	children?: Node[];
+	children?: Node$1[];
 };
-export type TextNode = StyleInput & {
+export type TextNode = PartialStyle & {
 	type: "text";
 	text: string;
 };
-export type ImageNode = StyleInput & {
+export type ImageNode = PartialStyle & {
 	type: "image";
 	src: string;
 };
 export declare function container(props: Omit<ContainerNode, "type">): ContainerNode;
-export declare function text(text: string, style?: StyleInput): TextNode;
-export declare function image(src: string, style?: StyleInput): ImageNode;
-export declare function style(style: StyleInput): Partial<Style>;
+export declare function text(text: string, style?: PartialStyle): TextNode;
+export declare function image(src: string, style?: PartialStyle): ImageNode;
+export declare function style(style: PartialStyle): Partial<Style>;
 /**
  * Convert a number to a percentage struct.
  * @param percentage - The percentage to convert (0.0 - 100.0).
@@ -460,8 +528,11 @@ export declare function gradient(from: ColorInput, to: ColorInput, angle?: numbe
 	to: ColorInput;
 	angle: number;
 };
+export type Nodes = Node$1 | Nodes[];
+export declare function fromJsx(element: ReactNode): Promise<Nodes | undefined>;
 
 export {
+	Node$1 as Node,
 	Position$1 as Position,
 };
 

package/dist/index.js

@@ -1 +1 @@
-function i(e){return{type:"container",...e}}function s(e,t){return{...t,type:"text",text:e}}function r(e,t){return{...t,type:"image",src:e}}function n(e){return e}function a(e){return{percentage:e}}function l(e){return{vw:e}}function p(e){return{vh:e}}function h(e){return{em:e}}function m(e){return{rem:e}}function f(e){return{fr:e}}function u(e,t,o=0){return{from:e,to:t,angle:o}}export{l as vw,p as vh,s as text,n as style,m as rem,a as percentage,r as image,u as gradient,f as fr,h as em,i as container};
+function $(t){return{type:"container",...t}}function C(t,e){return{...e,type:"text",text:t}}function E(t,e){return{...e,type:"image",src:t}}function st(t){return t}function J(t){return{percentage:t}}function S(t){return{vw:t}}function j(t){return{vh:t}}function G(t){return{em:t}}function k(t){return{rem:t}}function B(t){return{fr:t}}function xt(t,e,o=0){return{from:t,to:e,angle:o}}function X(t){return t.replace(/[A-Z]/g,(e)=>`_${e.toLowerCase()}`)}var M=["-moz-","-webkit-","-o-","-ms-"];function Z(t){if(typeof t!=="string")return t;if(W(t))return;if(t[0]==="-"){for(let e of M)if(t.startsWith(e))return t.slice(e.length);throw new Error(`Unsupported prefix in value: ${t}`)}return t}function W(t){return t==="inherit"||t==="initial"||t==="revert"||t==="unset"}function c(t){if(t.length===7)return Number.parseInt(t.slice(1),16);if(t.length===9){let e=Number.parseInt(t.slice(1),16);return[e>>24&255,e>>16&255,e>>8&255,(e&255)/255]}throw new Error(`Invalid hex color: ${t}`)}function U(t){let e=t.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);if(e){let[,o,f,n]=e;return[Number(o),Number(f),Number(n)]}return null}function a(t){let e=t.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*\)$/);if(e){let[,o,f,n,r]=e,m=Number(o),y=Number(f),d=Number(n),h=Number(r);if(m<0||m>255||y<0||y>255||d<0||d>255)return null;if(h<0||h>1)return null;return[m,y,d,h]}return null}function x(t){if(t.startsWith("#"))return c(t);if(t.startsWith("rgb(")){let e=U(t);if(e!==null)return e}if(t.startsWith("rgba(")){let e=a(t);if(e!==null)return e}throw new Error(`Invalid RGB color: ${t}`)}function i(t){if(typeof t==="number")return t;if(t==="auto"||t==="min-content"||t==="max-content")return t;let e=t.match(/^(-?[\d.]+)(.*)$/);if(!e)return 0;let[,o,f]=e;if(!o)return 0;let n=Number.parseFloat(o);switch(f){case"%":return J(n);case"rem":return k(n);case"em":return G(n);case"vh":return j(n);case"vw":return S(n);case"px":case"":return n;default:return n}}function s(t){if(typeof t==="number")return i(t);let o=t.trim().split(/\s+/).map(i);if(o.length===1)return o[0];if(o.length===2||o.length===4)return o;if(o.length===3&&o[0]!==void 0&&o[1]!==void 0&&o[2]!==void 0)return[o[0],o[1],o[2],o[1]];throw new Error(`Invalid sides value: ${t}. Expected 1 to at most 4 values.`)}function q(t){if(t.inset!==void 0)return s(t.inset);let e=t.top!==void 0?i(t.top):void 0,o=t.right!==void 0?i(t.right):void 0,f=t.bottom!==void 0?i(t.bottom):void 0,n=t.left!==void 0?i(t.left):void 0;if(e===void 0&&o===void 0&&f===void 0&&n===void 0)return;return[e??0,o??0,f??0,n??0]}function Q(t){if(typeof t==="number")return t;if(typeof t==="string"&&t.includes("/")){let[e,o]=t.split("/").map(Number.parseFloat);if(e===void 0||o===void 0)throw new Error(`Invalid aspect ratio: ${t}. Expected format 'width/height'.`);if(o===0)throw new Error(`Invalid aspect ratio: ${t}. Denominator cannot be zero.`);return e/o}if(typeof t==="string")return Number.parseFloat(t);throw new Error(`Invalid aspect ratio: ${t}`)}function H(t){switch(t){case"block":case"flex":case"grid":case"none":return t;default:return console.warn(`Invalid display value: ${t}, fallback to 'block'.`),"block"}}function P(t){switch(t){case"relative":case"absolute":return t;case"static":return"relative";default:return console.warn(`Invalid position value: ${t}, fallback to 'relative'.`),"relative"}}function Y(t){let e=t.trim().split(/\s+/);if(e.length<2)throw new Error(`Invalid box-shadow: ${t}`);let o=!1,f="black",n=0;if(e[0]==="inset")o=!0,n=1;let r=/^(#|rgb|rgba|hsl|hsla|[a-zA-Z]+)/,m=[];for(let p=n;p<e.length;p++){let w=e[p]??"";if(p===e.length-1&&r.test(w))f=w;else m.push(w)}if(m.length<2||m.length>4)throw new Error(`Invalid box-shadow format: ${t}`);let[y="0px",d="0px",h="0px",F="0px"]=m;try{return{color:x(f),offset_x:i(y)??0,offset_y:i(d)??0,blur_radius:i(h)??0,spread_radius:i(F)??0,inset:o}}catch{throw new Error(`Invalid box-shadow color: ${f}`)}}function V(t){return t.trim().split(/\s+/).map((o)=>{if(o.endsWith("fr")){let f=Number.parseFloat(o.slice(0,-2));if(Number.isNaN(f))return{fr:0};return{fr:f}}return i(o)??0})}function g(t){switch(t){case"row":case"column":case"row dense":case"column dense":return t.replace(" ","-");default:return console.warn(`Invalid grid-auto-flow value: ${t}, fallback to 'row'.`),"row"}}function L(t){if(t.startsWith("span ")){let o=Number.parseInt(t.slice(5));if(Number.isNaN(o))throw new Error(`Invalid span value: ${t}`);return{start:o,end:null}}if(t.includes("/")){let o=t.split("/");if(o.length!==2)throw new Error(`Invalid grid line format: ${t}`);let[f="",n=""]=o.map((y)=>y.trim()),r=f==="auto"?null:Number.parseInt(f)||f,m=n==="auto"?null:Number.parseInt(n)||n;return{start:r,end:m}}if(t==="auto")return{start:null,end:null};let e=Number.parseInt(t);if(Number.isNaN(e))return{start:t,end:null};return{start:e,end:null}}function _(t){let e=t.match(/repeat\(([^,]+),\s*(.+)\)/);if(e){let o=u(e);if(!o)throw new Error(`Invalid repeat function: ${t}`);return o}return v(t)}function u(t){let[,e,o]=t;if(!e||!o)return;let f;if(e==="auto-fill")f="auto-fill";else if(e==="auto-fit")f="auto-fit";else{let r=Number.parseInt(e);if(Number.isNaN(r))return;f=r}let n=o.trim().split(/\s+/).map((r)=>{if(r.endsWith("fr")){let m=Number.parseFloat(r.slice(0,-2));return Number.isNaN(m)?0:{fr:m}}return i(r)??0});return[{repeat:[f,n]}]}function v(t){return t.trim().split(/\s+/).map((o)=>{if(o.endsWith("fr")){let f=Number.parseFloat(o.slice(0,-2));return{single:Number.isNaN(f)?0:{fr:f}}}return{single:i(o)??0}})}function I(t){if(typeof t==="number")return Math.max(1,Math.min(1000,t));if(typeof t==="string")switch(t){case"normal":return 400;case"bold":return 700;case"lighter":return 300;case"bolder":return 600;default:{let e=Number.parseInt(t);if(!Number.isNaN(e))return Math.max(1,Math.min(1000,e))}}return console.warn(`Invalid font-weight value: ${t}, fallback to 400.`),400}function l(t){if(typeof t==="string")return V(t);if(Array.isArray(t))return t;return typeof t==="number"?[t]:[B(1)]}function A(t){if(typeof t==="string")return L(t);if(typeof t==="number")return{start:t,end:null};return t}function K(t){if(typeof t==="string")return _(t);if(Array.isArray(t))return t;return typeof t==="number"?[{single:t}]:[{single:0}]}function z(t){if(typeof t==="string")return _(t);if(Array.isArray(t))return t;return typeof t==="number"?[{single:t}]:[{single:0}]}function R(t){if(t==="none")return 0;return Number(t)}var b=Symbol("skip-parsing"),tt={display:H,position:P,width:i,height:i,maxWidth:i,maxHeight:i,minWidth:i,minHeight:i,aspectRatio:Q,padding:s,margin:s,flexDirection:b,flexWrap:b,justifyContent:(t)=>t,alignContent:(t)=>t,alignItems:(t)=>t,justifyItems:(t)=>t,flexBasis:i,gap:i,flexGrow:(t)=>Number(t),flexShrink:(t)=>Number(t),borderWidth:s,backgroundColor:x,boxShadow:Y,objectFit:b,gridAutoColumns:l,gridAutoRows:l,gridAutoFlow:g,gridColumn:A,gridRow:A,gridTemplateColumns:K,gridTemplateRows:z,textOverflow:(t)=>t,borderColor:x,color:x,fontSize:i,fontFamily:b,lineHeight:i,fontWeight:I,lineClamp:R,borderRadius:(t)=>s(t),textAlign(t){if(t==="match-parent")return void console.warn("Unsupported value for text-align found:",t);return t},letterSpacing:i,inset:(t)=>s(t)},et=new Set(["top","right","bottom","left"]);function ot(t,e,o){if(et.has(e))return;let f=Z(o);if(f===void 0||f===null)return;let n=tt[e];if(!n){console.warn(`No parser found for CSS property: ${e}`);return}let r=X(e);if(n===b){t[r]=f;return}try{let m=n(f);if(m!=null&&m!==void 0)t[r]=m}catch(m){console.warn(`Failed to parse ${e}:`,m)}}function D(t){if(!t)return;let e={};for(let[f,n]of Object.entries(t))ot(e,f,n);let o=q(t);if(o!==void 0)e.inset=o;return Object.keys(e).length>0?e:void 0}var ft=Symbol.for("react.transitional.element");function nt(t){return typeof t==="object"&&t!==null&&"$$typeof"in t&&t.$$typeof===ft}function N(t){let e=[];for(let o of t)if(Array.isArray(o))e.push(...N(o));else e.push(o);return e}async function T(t){if(t===void 0||t===null)return;if(t instanceof Promise)return T(await t);if(typeof t==="object"&&Symbol.iterator in t)return yt(t);if(nt(t))return it(t);return C(String(t))}async function it(t){if(typeof t.type==="function"){let f=t.type;return T(f(t.props))}if(typeof t.type==="symbol"&&t.type===Symbol.for("react.fragment"))return await O(t)||[];if(rt(t,"img")&&t.props.src)return E(t.props.src,D(t.props.style));let e=await O(t),o=mt(t.props);return $({children:e,...D(o)})}function mt(t){return typeof t==="object"&&t&&"style"in t?t.style:void 0}function rt(t,e){return t.type===e}async function O(t){if(typeof t.props!=="object"||t.props===null||!("children"in t.props))return;let e=await T(t.props.children);if(!e)return;return Array.isArray(e)?N(e):[e]}async function yt(t){let e=await Promise.all(Array.from(t).map(T));return N(e.filter((o)=>o!==void 0))}export{S as vw,j as vh,C as text,st as style,k as rem,J as percentage,E as image,xt as gradient,T as fromJsx,B as fr,G as em,$ as container};

package/package.json

@@ -1,20 +1,11 @@
 {
   "name": "@takumi-rs/helpers",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "author": {
     "email": "me@kane.tw",
     "name": "Kane Wang",
     "url": "https://kane.tw"
   },
-  "files": [
-    "dist",
-    "package.json",
-    "README.md",
-    "tsconfig.json"
-  ],
-  "scripts": {
-    "build": "bun build.ts"
-  },
   "repository": {
     "url": "git+https://github.com/kane50613/takumi.git"
   },
@@ -22,12 +13,23 @@
     "@types/bun": "catalog:",
     "@types/react": "^19.1.8",
     "bun-plugin-dts": "^0.3.0",
+    "csstype": "^3.1.3",
+    "react": "^19.1.0",
     "typescript": "catalog:"
   },
   "exports": {
     "types": "./dist/index.d.ts",
     "default": "./dist/index.js"
   },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "tsconfig.json"
+  ],
   "license": "MIT",
+  "scripts": {
+    "build": "bun build.ts"
+  },
   "type": "module"
 }

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",