@takumi-rs/helpers 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -48,7 +48,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 +113,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 +138,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 +159,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 +282,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 +299,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 +307,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 +406,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 +477,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).
@@ -462,6 +528,7 @@ export declare function gradient(from: ColorInput, to: ColorInput, angle?: numbe
 };
 
 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 r(e){return{type:"container",...e}}function i(e,t){return{...t,type:"text",text:e}}function s(e,t){return{...t,type:"image",src:e}}function a(e){return e}function n(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,i as text,a as style,m as rem,n as percentage,s as image,u as gradient,f as fr,h as em,r as container};

package/package.json

@@ -1,20 +1,11 @@
 {
   "name": "@takumi-rs/helpers",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "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",