@takumi-rs/helpers 0.27.6 → 0.28.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-BsvAnIiU.cjs';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-BsvAnIiU.cjs';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-8M7fRh4t.cjs';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-8M7fRh4t.cjs';
 
 declare function container(props: Omit<ContainerNode, "type">): ContainerNode;
 declare function text(text: string, style?: PartialStyle): TextNode;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-BsvAnIiU.js';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-BsvAnIiU.js';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-8M7fRh4t.js';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-8M7fRh4t.js';
 
 declare function container(props: Omit<ContainerNode, "type">): ContainerNode;
 declare function text(text: string, style?: PartialStyle): TextNode;

package/dist/jsx/jsx.d.cts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { N as Node } from '../types-BsvAnIiU.cjs';
+import { N as Node } from '../types-8M7fRh4t.cjs';
 
 declare function fromJsx(element: ReactNode): Promise<Node>;
 

package/dist/jsx/jsx.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { N as Node } from '../types-BsvAnIiU.js';
+import { N as Node } from '../types-8M7fRh4t.js';
 
 declare function fromJsx(element: ReactNode): Promise<Node>;
 

package/dist/{types-BsvAnIiU.d.cts → types-8M7fRh4t.d.cts}

@@ -32,6 +32,18 @@ type LengthUnit = "auto" | {
     "vh": number;
 } | {
     "vw": number;
+} | {
+    "cm": number;
+} | {
+    "mm": number;
+} | {
+    "in": number;
+} | {
+    "Q": number;
+} | {
+    "Pt": number;
+} | {
+    "Pc": number;
 } | number | string;
 
 /**
@@ -51,7 +63,7 @@ type GradientStop = {
     /**
      * The position of the gradient stop.
      */
-    hint: StopPosition | null;
+    hint?: StopPosition;
 } | StopPosition;
 
 /**
@@ -68,6 +80,38 @@ type LinearGradient = {
     stops: Array<GradientStop>;
 } | string;
 
+/**
+ * Procedural noise gradient that generates organic, natural-looking patterns using fractal Brownian motion.
+ * This creates dynamic textures that can be used as backgrounds or overlays with customizable parameters
+ * for controlling the noise characteristics and visual appearance.
+ */
+type NoiseV1 = {
+    /**
+     * Controls the scale of the noise pattern. Higher values create finer, more detailed patterns
+     */
+    frequency?: number;
+    /**
+     * Random seed value that determines the unique noise pattern generated
+     */
+    seed?: number;
+    /**
+     * Number of noise layers combined to create complex patterns. More octaves add detail
+     */
+    octaves?: number;
+    /**
+     * Controls how much each octave contributes to the final pattern. Lower values create smoother patterns
+     */
+    persistence?: number;
+    /**
+     * Controls the frequency multiplier between octaves. Higher values create more varied patterns
+     */
+    lacunarity?: number;
+    /**
+     * Controls the opacity of the noise pattern. 0.0 is fully transparent, 1.0 is fully opaque
+     */
+    opacity?: number;
+};
+
 /**
  * Supported shapes for radial gradients
  */
@@ -103,7 +147,7 @@ type RadialGradient = {
 /**
  * Background image variants supported by Takumi.
  */
-type BackgroundImage = LinearGradient | RadialGradient;
+type BackgroundImage = LinearGradient | RadialGradient | NoiseV1;
 
 /**
  * A collection of background images.
@@ -134,16 +178,7 @@ type PositionComponent = {
 /**
  * Parsed `background-position` value for one layer.
  */
-type BackgroundPosition = {
-    /**
-     * X-axis position component.
-     */
-    x: PositionComponent;
-    /**
-     * Y-axis position component.
-     */
-    y: PositionComponent;
-};
+type BackgroundPosition = [PositionComponent, PositionComponent] | string;
 
 /**
  * A list of `background-position` values (one per layer).
@@ -306,11 +341,11 @@ type GridLine = {
     /**
      * The start line placement
      */
-    start: GridPlacement | null;
+    start?: GridPlacement;
     /**
      * The end line placement
      */
-    end: GridPlacement | null;
+    end?: GridPlacement;
 };
 
 /**
@@ -363,7 +398,7 @@ type GridRepeatTrack = {
      * 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;
+    endNames?: Array<string>;
 };
 
 /**
@@ -407,11 +442,6 @@ type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "
  */
 type LineHeight = number | string | LengthUnit;
 
-/**
- * Represents either a linear gradient or a solid color.
- */
-type LinearGradientOrColor = LinearGradient | Color;
-
 /**
  * Defines how an image should be resized to fit its container.
  *
@@ -429,7 +459,7 @@ type Position = "relative" | "absolute";
 /**
  * Represents the values for the four sides of a box (top, right, bottom, left).
  */
-type Sides<T> = T | [T, T] | [T, T, T, T] | string;
+type Sides<T> = string | [T, T, T, T] | [T, T] | T;
 
 /**
  * Text alignment options for text rendering.
@@ -455,6 +485,22 @@ type TextStyle = "normal" | "italic" | "oblique";
  */
 type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 
+/**
+ * Represents a single CSS transform operation
+ */
+type Transform = {
+    "translate": [LengthUnit, LengthUnit];
+} | {
+    "scale": [number, number];
+} | {
+    "rotate": Angle;
+};
+
+/**
+ * A collection of transform operations that can be applied together
+ */
+type Transforms = Array<Transform> | string;
+
 /**
  * Main styling structure that contains all layout and visual properties.
  */
@@ -591,6 +637,30 @@ type Style = {
      * Positioning method (relative, absolute, etc.).
      */
     position: Position;
+    /**
+     * Transform for the element.
+     */
+    transform?: Transforms;
+    /**
+     * Transform origin for the element.
+     */
+    transformOrigin?: BackgroundPosition;
+    /**
+     * Mask image for the element.
+     */
+    maskImage?: BackgroundImages;
+    /**
+     * Mask size for the element.
+     */
+    maskSize?: BackgroundSizes;
+    /**
+     * Mask position for the element.
+     */
+    maskPosition?: BackgroundPositions;
+    /**
+     * Mask repeat for the element.
+     */
+    maskRepeat?: BackgroundRepeats;
     /**
      * Spacing between rows and columns in flex or grid layouts.
      */
@@ -726,7 +796,7 @@ type Style = {
     /**
      * Text color for child text elements.
      */
-    color?: LinearGradientOrColor;
+    color?: Color;
     /**
      * Font size for text rendering.
      */

package/dist/{types-BsvAnIiU.d.ts → types-8M7fRh4t.d.ts}

@@ -32,6 +32,18 @@ type LengthUnit = "auto" | {
     "vh": number;
 } | {
     "vw": number;
+} | {
+    "cm": number;
+} | {
+    "mm": number;
+} | {
+    "in": number;
+} | {
+    "Q": number;
+} | {
+    "Pt": number;
+} | {
+    "Pc": number;
 } | number | string;
 
 /**
@@ -51,7 +63,7 @@ type GradientStop = {
     /**
      * The position of the gradient stop.
      */
-    hint: StopPosition | null;
+    hint?: StopPosition;
 } | StopPosition;
 
 /**
@@ -68,6 +80,38 @@ type LinearGradient = {
     stops: Array<GradientStop>;
 } | string;
 
+/**
+ * Procedural noise gradient that generates organic, natural-looking patterns using fractal Brownian motion.
+ * This creates dynamic textures that can be used as backgrounds or overlays with customizable parameters
+ * for controlling the noise characteristics and visual appearance.
+ */
+type NoiseV1 = {
+    /**
+     * Controls the scale of the noise pattern. Higher values create finer, more detailed patterns
+     */
+    frequency?: number;
+    /**
+     * Random seed value that determines the unique noise pattern generated
+     */
+    seed?: number;
+    /**
+     * Number of noise layers combined to create complex patterns. More octaves add detail
+     */
+    octaves?: number;
+    /**
+     * Controls how much each octave contributes to the final pattern. Lower values create smoother patterns
+     */
+    persistence?: number;
+    /**
+     * Controls the frequency multiplier between octaves. Higher values create more varied patterns
+     */
+    lacunarity?: number;
+    /**
+     * Controls the opacity of the noise pattern. 0.0 is fully transparent, 1.0 is fully opaque
+     */
+    opacity?: number;
+};
+
 /**
  * Supported shapes for radial gradients
  */
@@ -103,7 +147,7 @@ type RadialGradient = {
 /**
  * Background image variants supported by Takumi.
  */
-type BackgroundImage = LinearGradient | RadialGradient;
+type BackgroundImage = LinearGradient | RadialGradient | NoiseV1;
 
 /**
  * A collection of background images.
@@ -134,16 +178,7 @@ type PositionComponent = {
 /**
  * Parsed `background-position` value for one layer.
  */
-type BackgroundPosition = {
-    /**
-     * X-axis position component.
-     */
-    x: PositionComponent;
-    /**
-     * Y-axis position component.
-     */
-    y: PositionComponent;
-};
+type BackgroundPosition = [PositionComponent, PositionComponent] | string;
 
 /**
  * A list of `background-position` values (one per layer).
@@ -306,11 +341,11 @@ type GridLine = {
     /**
      * The start line placement
      */
-    start: GridPlacement | null;
+    start?: GridPlacement;
     /**
      * The end line placement
      */
-    end: GridPlacement | null;
+    end?: GridPlacement;
 };
 
 /**
@@ -363,7 +398,7 @@ type GridRepeatTrack = {
      * 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;
+    endNames?: Array<string>;
 };
 
 /**
@@ -407,11 +442,6 @@ type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "
  */
 type LineHeight = number | string | LengthUnit;
 
-/**
- * Represents either a linear gradient or a solid color.
- */
-type LinearGradientOrColor = LinearGradient | Color;
-
 /**
  * Defines how an image should be resized to fit its container.
  *
@@ -429,7 +459,7 @@ type Position = "relative" | "absolute";
 /**
  * Represents the values for the four sides of a box (top, right, bottom, left).
  */
-type Sides<T> = T | [T, T] | [T, T, T, T] | string;
+type Sides<T> = string | [T, T, T, T] | [T, T] | T;
 
 /**
  * Text alignment options for text rendering.
@@ -455,6 +485,22 @@ type TextStyle = "normal" | "italic" | "oblique";
  */
 type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 
+/**
+ * Represents a single CSS transform operation
+ */
+type Transform = {
+    "translate": [LengthUnit, LengthUnit];
+} | {
+    "scale": [number, number];
+} | {
+    "rotate": Angle;
+};
+
+/**
+ * A collection of transform operations that can be applied together
+ */
+type Transforms = Array<Transform> | string;
+
 /**
  * Main styling structure that contains all layout and visual properties.
  */
@@ -591,6 +637,30 @@ type Style = {
      * Positioning method (relative, absolute, etc.).
      */
     position: Position;
+    /**
+     * Transform for the element.
+     */
+    transform?: Transforms;
+    /**
+     * Transform origin for the element.
+     */
+    transformOrigin?: BackgroundPosition;
+    /**
+     * Mask image for the element.
+     */
+    maskImage?: BackgroundImages;
+    /**
+     * Mask size for the element.
+     */
+    maskSize?: BackgroundSizes;
+    /**
+     * Mask position for the element.
+     */
+    maskPosition?: BackgroundPositions;
+    /**
+     * Mask repeat for the element.
+     */
+    maskRepeat?: BackgroundRepeats;
     /**
      * Spacing between rows and columns in flex or grid layouts.
      */
@@ -726,7 +796,7 @@ type Style = {
     /**
      * Text color for child text elements.
      */
-    color?: LinearGradientOrColor;
+    color?: Color;
     /**
      * Font size for text rendering.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takumi-rs/helpers",
-  "version": "0.27.6",
+  "version": "0.28.0",
   "author": {
     "email": "me@kane.tw",
     "name": "Kane Wang",
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@types/bun": "catalog:",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "bun-plugin-dts": "^0.3.0",
-    "lucide-react": "^0.541.0",
+    "lucide-react": "^0.542.0",
     "react": "^19.1.0",
     "tsup": "^8.5.0",
     "typescript": "catalog:"