@takumi-rs/helpers 0.26.1 → 0.27.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-kk-nArin.cjs';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-kk-nArin.cjs';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-CHKaewqR.cjs';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-CHKaewqR.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-kk-nArin.js';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-kk-nArin.js';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-CHKaewqR.js';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-CHKaewqR.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-kk-nArin.cjs';
+import { N as Node } from '../types-CHKaewqR.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-kk-nArin.js';
+import { N as Node } from '../types-CHKaewqR.js';
 
 declare function fromJsx(element: ReactNode): Promise<Node>;
 

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

@@ -6,6 +6,11 @@
  */
 type AlignItems = "start" | "end" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
 
+/**
+ * Represents an angle value in degrees.
+ */
+type Angle = number;
+
 /**
  * Represents a color with 8-bit RGBA components.
  */
@@ -29,6 +34,167 @@ type LengthUnit = "auto" | {
     "vw": number;
 } | number | string;
 
+/**
+ * Represents a gradient stop position.
+ * If a percentage or number (0.0-1.0) is provided, it is treated as a percentage.
+ */
+type StopPosition = LengthUnit | string;
+
+/**
+ * Represents a gradient stop.
+ */
+type GradientStop = {
+    /**
+     * The color of the gradient stop.
+     */
+    color: Color;
+    /**
+     * The position of the gradient stop.
+     */
+    hint: StopPosition | null;
+} | StopPosition;
+
+/**
+ * Represents a linear gradient.
+ */
+type LinearGradient = {
+    /**
+     * The angle of the gradient.
+     */
+    angle: Angle;
+    /**
+     * The steps of the gradient.
+     */
+    stops: Array<GradientStop>;
+} | string;
+
+/**
+ * Supported shapes for radial gradients
+ */
+type RadialShape = "circle" | "ellipse";
+
+/**
+ * Supported size keywords for radial gradients
+ */
+type RadialSize = "closest-side" | "farthest-side" | "closest-corner" | "farthest-corner";
+
+/**
+ * Represents a radial gradient.
+ */
+type RadialGradient = {
+    /**
+     * The radial gradient shape
+     */
+    shape: RadialShape;
+    /**
+     * The sizing mode for the gradient
+     */
+    size: RadialSize;
+    /**
+     * Center position in normalized coordinates [0.0, 1.0]
+     */
+    center: [number, number];
+    /**
+     * Gradient stops
+     */
+    stops: Array<GradientStop>;
+};
+
+/**
+ * Background image variants supported by Takumi.
+ */
+type BackgroundImage = LinearGradient | RadialGradient;
+
+/**
+ * A collection of background images.
+ */
+type BackgroundImages = Array<BackgroundImage> | string;
+
+/**
+ * Horizontal keywords for `background-position`.
+ */
+type PositionKeywordX = "left" | "center" | "right";
+
+/**
+ * Vertical keywords for `background-position`.
+ */
+type PositionKeywordY = "top" | "center" | "bottom";
+
+/**
+ * A single `background-position` component for an axis.
+ */
+type PositionComponent = {
+    "keyword-x": PositionKeywordX;
+} | {
+    "keyword-y": PositionKeywordY;
+} | {
+    "length": LengthUnit;
+};
+
+/**
+ * Parsed `background-position` value for one layer.
+ */
+type BackgroundPosition = {
+    /**
+     * X-axis position component.
+     */
+    x: PositionComponent;
+    /**
+     * Y-axis position component.
+     */
+    y: PositionComponent;
+};
+
+/**
+ * A list of `background-position` values (one per layer).
+ */
+type BackgroundPositions = Array<BackgroundPosition> | string;
+
+/**
+ * Per-axis repeat style.
+ */
+type BackgroundRepeatStyle = "repeat" | "no-repeat" | "space" | "round";
+
+/**
+ * Combined repeat for X and Y axes.
+ */
+type BackgroundRepeat = {
+    /**
+     * Repeat style along the X axis.
+     */
+    x: BackgroundRepeatStyle;
+    /**
+     * Repeat style along the Y axis.
+     */
+    y: BackgroundRepeatStyle;
+};
+
+/**
+ * A list of background-repeat values (layered).
+ */
+type BackgroundRepeats = Array<BackgroundRepeat> | string;
+
+/**
+ * Parsed `background-size` for one layer.
+ */
+type BackgroundSize = "Cover" | "Contain" | {
+    "Explicit": {
+        /**
+         * Width value for the background image.
+         */
+        width: LengthUnit;
+        /**
+         * Height value for the background image.
+         */
+        height: LengthUnit;
+    };
+};
+
+/**
+ * A list of `background-size` values (one per layer).
+ */
+type BackgroundSizes = Array<BackgroundSize> | string;
+
 /**
  * Represents a box shadow with all its properties.
  *
@@ -210,6 +376,19 @@ type GridRepetitionCount = "auto-fill" | "auto-fit" | number;
  */
 type GridTemplateComponent = Array<string> | GridTrackSize | [GridRepetitionCount, Array<GridRepeatTrack>];
 
+/**
+ * A transparent wrapper around a list of `GridTemplateComponent`.
+ *
+ * This exists to provide a distinct type for template component lists while
+ * preserving JSON compatibility (serialized as a plain array) and clean TS types.
+ */
+type GridTemplateComponents = Array<GridTemplateComponent> | string;
+
+/**
+ * A wrapper around a list of `GridTrackSize` that can also be parsed from a CSS string.
+ */
+type GridTrackSizes = Array<GridTrackSize> | string;
+
 /**
  * Defines how images should be scaled when rendered.
  */
@@ -228,49 +407,11 @@ type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "
  */
 type LineHeight = number | string | LengthUnit;
 
-/**
- * Represents an angle value in degrees.
- */
-type Angle = number;
-
-/**
- * Represents a gradient stop.
- */
-type GradientStop = {
-    /**
-     * The color of the gradient stop.
-     */
-    color: Color;
-    /**
-     * The position of the gradient stop (0% to 100%).
-     */
-    hint: number | null;
-} | number;
-
-/**
- * Represents a linear gradient.
- */
-type LinearGradient = {
-    /**
-     * The angle of the gradient.
-     */
-    angle: Angle;
-    /**
-     * The steps of the gradient.
-     */
-    stops: Array<GradientStop>;
-} | string;
-
 /**
  * Represents either a linear gradient or a solid color.
  */
 type LinearGradientOrColor = LinearGradient | Color;
 
-/**
- * A collection of linear gradients.
- */
-type LinearGradients = Array<LinearGradient> | string;
-
 /**
  * Defines how an image should be resized to fit its container.
  *
@@ -469,27 +610,39 @@ type Style = {
     /**
      * Longhand: top border width. Overrides `border_width` top value.
      */
-    borderWidthTop?: LengthUnit;
+    borderTopWidth?: LengthUnit;
     /**
      * Longhand: right border width. Overrides `border_width` right value.
      */
-    borderWidthRight?: LengthUnit;
+    borderRightWidth?: LengthUnit;
     /**
      * Longhand: bottom border width. Overrides `border_width` bottom value.
      */
-    borderWidthBottom?: LengthUnit;
+    borderBottomWidth?: LengthUnit;
     /**
      * Longhand: left border width. Overrides `border_width` left value.
      */
-    borderWidthLeft?: LengthUnit;
+    borderLeftWidth?: LengthUnit;
     /**
      * How images should be fitted within their container.
      */
     objectFit: ObjectFit;
     /**
-     * Background gradient(s).
+     * Background image(s): linear or radial gradients.
+     */
+    backgroundImage?: BackgroundImages;
+    /**
+     * Background positions per layer.
+     */
+    backgroundPosition?: BackgroundPositions;
+    /**
+     * Background sizes per layer.
+     */
+    backgroundSize?: BackgroundSizes;
+    /**
+     * Background repeat per layer.
      */
-    backgroundImage?: LinearGradients;
+    backgroundRepeat?: BackgroundRepeats;
     /**
      * Background color for the element.
      */
@@ -501,11 +654,11 @@ type Style = {
     /**
      * Controls the size of implicitly-created grid columns.
      */
-    gridAutoColumns?: Array<GridTrackSize>;
+    gridAutoColumns?: GridTrackSizes;
     /**
      * Controls the size of implicitly-created grid rows.
      */
-    gridAutoRows?: Array<GridTrackSize>;
+    gridAutoRows?: GridTrackSizes;
     /**
      * Controls how auto-placed items are inserted in the grid.
      */
@@ -521,11 +674,11 @@ type Style = {
     /**
      * Defines the line names and track sizing functions of the grid columns.
      */
-    gridTemplateColumns?: Array<GridTemplateComponent>;
+    gridTemplateColumns?: GridTemplateComponents;
     /**
      * Defines the line names and track sizing functions of the grid rows.
      */
-    gridTemplateRows?: Array<GridTemplateComponent>;
+    gridTemplateRows?: GridTemplateComponents;
     /**
      * Defines named grid areas specified via `grid-template-areas`.
      */

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

@@ -6,6 +6,11 @@
  */
 type AlignItems = "start" | "end" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
 
+/**
+ * Represents an angle value in degrees.
+ */
+type Angle = number;
+
 /**
  * Represents a color with 8-bit RGBA components.
  */
@@ -29,6 +34,167 @@ type LengthUnit = "auto" | {
     "vw": number;
 } | number | string;
 
+/**
+ * Represents a gradient stop position.
+ * If a percentage or number (0.0-1.0) is provided, it is treated as a percentage.
+ */
+type StopPosition = LengthUnit | string;
+
+/**
+ * Represents a gradient stop.
+ */
+type GradientStop = {
+    /**
+     * The color of the gradient stop.
+     */
+    color: Color;
+    /**
+     * The position of the gradient stop.
+     */
+    hint: StopPosition | null;
+} | StopPosition;
+
+/**
+ * Represents a linear gradient.
+ */
+type LinearGradient = {
+    /**
+     * The angle of the gradient.
+     */
+    angle: Angle;
+    /**
+     * The steps of the gradient.
+     */
+    stops: Array<GradientStop>;
+} | string;
+
+/**
+ * Supported shapes for radial gradients
+ */
+type RadialShape = "circle" | "ellipse";
+
+/**
+ * Supported size keywords for radial gradients
+ */
+type RadialSize = "closest-side" | "farthest-side" | "closest-corner" | "farthest-corner";
+
+/**
+ * Represents a radial gradient.
+ */
+type RadialGradient = {
+    /**
+     * The radial gradient shape
+     */
+    shape: RadialShape;
+    /**
+     * The sizing mode for the gradient
+     */
+    size: RadialSize;
+    /**
+     * Center position in normalized coordinates [0.0, 1.0]
+     */
+    center: [number, number];
+    /**
+     * Gradient stops
+     */
+    stops: Array<GradientStop>;
+};
+
+/**
+ * Background image variants supported by Takumi.
+ */
+type BackgroundImage = LinearGradient | RadialGradient;
+
+/**
+ * A collection of background images.
+ */
+type BackgroundImages = Array<BackgroundImage> | string;
+
+/**
+ * Horizontal keywords for `background-position`.
+ */
+type PositionKeywordX = "left" | "center" | "right";
+
+/**
+ * Vertical keywords for `background-position`.
+ */
+type PositionKeywordY = "top" | "center" | "bottom";
+
+/**
+ * A single `background-position` component for an axis.
+ */
+type PositionComponent = {
+    "keyword-x": PositionKeywordX;
+} | {
+    "keyword-y": PositionKeywordY;
+} | {
+    "length": LengthUnit;
+};
+
+/**
+ * Parsed `background-position` value for one layer.
+ */
+type BackgroundPosition = {
+    /**
+     * X-axis position component.
+     */
+    x: PositionComponent;
+    /**
+     * Y-axis position component.
+     */
+    y: PositionComponent;
+};
+
+/**
+ * A list of `background-position` values (one per layer).
+ */
+type BackgroundPositions = Array<BackgroundPosition> | string;
+
+/**
+ * Per-axis repeat style.
+ */
+type BackgroundRepeatStyle = "repeat" | "no-repeat" | "space" | "round";
+
+/**
+ * Combined repeat for X and Y axes.
+ */
+type BackgroundRepeat = {
+    /**
+     * Repeat style along the X axis.
+     */
+    x: BackgroundRepeatStyle;
+    /**
+     * Repeat style along the Y axis.
+     */
+    y: BackgroundRepeatStyle;
+};
+
+/**
+ * A list of background-repeat values (layered).
+ */
+type BackgroundRepeats = Array<BackgroundRepeat> | string;
+
+/**
+ * Parsed `background-size` for one layer.
+ */
+type BackgroundSize = "Cover" | "Contain" | {
+    "Explicit": {
+        /**
+         * Width value for the background image.
+         */
+        width: LengthUnit;
+        /**
+         * Height value for the background image.
+         */
+        height: LengthUnit;
+    };
+};
+
+/**
+ * A list of `background-size` values (one per layer).
+ */
+type BackgroundSizes = Array<BackgroundSize> | string;
+
 /**
  * Represents a box shadow with all its properties.
  *
@@ -210,6 +376,19 @@ type GridRepetitionCount = "auto-fill" | "auto-fit" | number;
  */
 type GridTemplateComponent = Array<string> | GridTrackSize | [GridRepetitionCount, Array<GridRepeatTrack>];
 
+/**
+ * A transparent wrapper around a list of `GridTemplateComponent`.
+ *
+ * This exists to provide a distinct type for template component lists while
+ * preserving JSON compatibility (serialized as a plain array) and clean TS types.
+ */
+type GridTemplateComponents = Array<GridTemplateComponent> | string;
+
+/**
+ * A wrapper around a list of `GridTrackSize` that can also be parsed from a CSS string.
+ */
+type GridTrackSizes = Array<GridTrackSize> | string;
+
 /**
  * Defines how images should be scaled when rendered.
  */
@@ -228,49 +407,11 @@ type JustifyContent = "start" | "end" | "flex-start" | "flex-end" | "center" | "
  */
 type LineHeight = number | string | LengthUnit;
 
-/**
- * Represents an angle value in degrees.
- */
-type Angle = number;
-
-/**
- * Represents a gradient stop.
- */
-type GradientStop = {
-    /**
-     * The color of the gradient stop.
-     */
-    color: Color;
-    /**
-     * The position of the gradient stop (0% to 100%).
-     */
-    hint: number | null;
-} | number;
-
-/**
- * Represents a linear gradient.
- */
-type LinearGradient = {
-    /**
-     * The angle of the gradient.
-     */
-    angle: Angle;
-    /**
-     * The steps of the gradient.
-     */
-    stops: Array<GradientStop>;
-} | string;
-
 /**
  * Represents either a linear gradient or a solid color.
  */
 type LinearGradientOrColor = LinearGradient | Color;
 
-/**
- * A collection of linear gradients.
- */
-type LinearGradients = Array<LinearGradient> | string;
-
 /**
  * Defines how an image should be resized to fit its container.
  *
@@ -469,27 +610,39 @@ type Style = {
     /**
      * Longhand: top border width. Overrides `border_width` top value.
      */
-    borderWidthTop?: LengthUnit;
+    borderTopWidth?: LengthUnit;
     /**
      * Longhand: right border width. Overrides `border_width` right value.
      */
-    borderWidthRight?: LengthUnit;
+    borderRightWidth?: LengthUnit;
     /**
      * Longhand: bottom border width. Overrides `border_width` bottom value.
      */
-    borderWidthBottom?: LengthUnit;
+    borderBottomWidth?: LengthUnit;
     /**
      * Longhand: left border width. Overrides `border_width` left value.
      */
-    borderWidthLeft?: LengthUnit;
+    borderLeftWidth?: LengthUnit;
     /**
      * How images should be fitted within their container.
      */
     objectFit: ObjectFit;
     /**
-     * Background gradient(s).
+     * Background image(s): linear or radial gradients.
+     */
+    backgroundImage?: BackgroundImages;
+    /**
+     * Background positions per layer.
+     */
+    backgroundPosition?: BackgroundPositions;
+    /**
+     * Background sizes per layer.
+     */
+    backgroundSize?: BackgroundSizes;
+    /**
+     * Background repeat per layer.
      */
-    backgroundImage?: LinearGradients;
+    backgroundRepeat?: BackgroundRepeats;
     /**
      * Background color for the element.
      */
@@ -501,11 +654,11 @@ type Style = {
     /**
      * Controls the size of implicitly-created grid columns.
      */
-    gridAutoColumns?: Array<GridTrackSize>;
+    gridAutoColumns?: GridTrackSizes;
     /**
      * Controls the size of implicitly-created grid rows.
      */
-    gridAutoRows?: Array<GridTrackSize>;
+    gridAutoRows?: GridTrackSizes;
     /**
      * Controls how auto-placed items are inserted in the grid.
      */
@@ -521,11 +674,11 @@ type Style = {
     /**
      * Defines the line names and track sizing functions of the grid columns.
      */
-    gridTemplateColumns?: Array<GridTemplateComponent>;
+    gridTemplateColumns?: GridTemplateComponents;
     /**
      * Defines the line names and track sizing functions of the grid rows.
      */
-    gridTemplateRows?: Array<GridTemplateComponent>;
+    gridTemplateRows?: GridTemplateComponents;
     /**
      * Defines named grid areas specified via `grid-template-areas`.
      */

package/package.json

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