@takumi-rs/helpers 0.29.8 → 0.30.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-BQVVNqov.cjs';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-BQVVNqov.cjs';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-Bg4T_32S.cjs';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-Bg4T_32S.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-BQVVNqov.js';
-export { A as AnyNode, J as JsonValue, N as Node } from './types-BQVVNqov.js';
+import { C as ContainerNode, P as PartialStyle, T as TextNode, I as ImageNode, S as Style, a as Color } from './types-Bg4T_32S.js';
+export { A as AnyNode, J as JsonValue, N as Node } from './types-Bg4T_32S.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-BQVVNqov.cjs';
+import { N as Node } from '../types-Bg4T_32S.cjs';
 
 type ReactElementLike = {
     type: string | ((props: unknown) => ReactElementLike) | ReactElementLike;

package/dist/jsx/jsx.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { N as Node } from '../types-BQVVNqov.js';
+import { N as Node } from '../types-Bg4T_32S.js';
 
 type ReactElementLike = {
     type: string | ((props: unknown) => ReactElementLike) | ReactElementLike;

package/dist/{types-BQVVNqov.d.cts → types-Bg4T_32S.d.cts}

@@ -269,7 +269,7 @@ type BoxShadow = {
 /**
  * Represents a collection of box shadows, have custom `FromCss` implementation for comma-separated values.
  */
-type BoxShadows = Array<BoxShadow>;
+type BoxShadows = Array<BoxShadow> | string;
 
 /**
  * Defines how the width and height of an element are calculated.
@@ -278,6 +278,11 @@ type BoxShadows = Array<BoxShadow>;
  */
 type BoxSizing = "content-box" | "border-box";
 
+/**
+ * Represents a CSS property value that can be explicitly set, inherited from parent, or reset to initial value.
+ */
+type CssValue<T> = "initial" | "inherit" | T;
+
 /**
  * This enum determines the layout algorithm used for the children of a node.
  */
@@ -493,7 +498,44 @@ type TextAlign = "left" | "right" | "center" | "justify" | "start" | "end";
  *
  * This enum determines how text should be handled when it exceeds the container width.
  */
-type TextOverflow = "ellipsis" | "clip";
+type TextOverflow = "clip" | "ellipsis";
+
+/**
+ * Represents a text shadow with all its properties.
+ */
+type TextShadow = {
+    /**
+     * Horizontal offset of the shadow.
+     */
+    offsetX: LengthUnit;
+    /**
+     * Vertical offset of the shadow.
+     */
+    offsetY: LengthUnit;
+    /**
+     * Blur radius of the shadow. Higher values create a more blurred shadow.
+     */
+    blurRadius: LengthUnit;
+    /**
+     * Color of the shadow.
+     */
+    color: Color;
+} | string;
+
+/**
+ * Represents a collection of text shadows; has custom `FromCss` implementation for comma-separated values.
+ */
+type TextShadows = Array<TextShadow> | string;
+
+/**
+ * Parsed `text-stroke` value.
+ *
+ * `color` is optional; when absent the element's `color` property should be used.
+ */
+type TextStroke = {
+    width: LengthUnit;
+    color: Color | null;
+} | string;
 
 /**
  * Controls text case transformation when rendering.
@@ -558,353 +600,99 @@ type Transforms = Array<Transform> | string;
 type WordBreak = "normal" | "break-all" | "keep-all";
 
 /**
- * Main styling structure that contains all layout and visual properties.
+ * Defines the style of an element.
  */
 type Style = {
-    /**
-     * Display algorithm to use for the element.
-     */
-    display: Display;
-    /**
-     * Width of the element.
-     */
-    width: LengthUnit;
-    /**
-     * Height of the element.
-     */
-    height: LengthUnit;
-    /**
-     * Max width of the element.
-     */
-    maxWidth: LengthUnit;
-    /**
-     * Max height of the element.
-     */
-    maxHeight: LengthUnit;
-    /**
-     * Min width of the element.
-     */
-    minWidth: LengthUnit;
-    /**
-     * Min height of the element.
-     */
-    minHeight: LengthUnit;
-    /**
-     * Aspect ratio of the element (width/height).
-     */
-    aspectRatio?: number;
-    /**
-     * Internal spacing around the element's content (top, right, bottom, left).
-     */
-    padding: Sides<LengthUnit>;
-    /**
-     * Longhand: top padding. Overrides `padding` top value.
-     */
-    paddingTop?: LengthUnit;
-    /**
-     * Longhand: right padding. Overrides `padding` right value.
-     */
-    paddingRight?: LengthUnit;
-    /**
-     * Longhand: bottom padding. Overrides `padding` bottom value.
-     */
-    paddingBottom?: LengthUnit;
-    /**
-     * Longhand: left padding. Overrides `padding` left value.
-     */
-    paddingLeft?: LengthUnit;
-    /**
-     * External spacing around the element (top, right, bottom, left).
-     */
-    margin: Sides<LengthUnit>;
-    /**
-     * Longhand: top margin. Overrides `margin` top value.
-     */
-    marginTop?: LengthUnit;
-    /**
-     * Longhand: right margin. Overrides `margin` right value.
-     */
-    marginRight?: LengthUnit;
-    /**
-     * Longhand: bottom margin. Overrides `margin` bottom value.
-     */
-    marginBottom?: LengthUnit;
-    /**
-     * Longhand: left margin. Overrides `margin` left value.
-     */
-    marginLeft?: LengthUnit;
-    /**
-     * Positioning offsets (top, right, bottom, left) from the element's normal position.
-     */
-    inset: Sides<LengthUnit>;
-    /**
-     * Longhand: top offset. Overrides `inset` top value.
-     */
-    top?: LengthUnit;
-    /**
-     * Longhand: right offset. Overrides `inset` right value.
-     */
-    right?: LengthUnit;
-    /**
-     * Longhand: bottom offset. Overrides `inset` bottom value.
-     */
-    bottom?: LengthUnit;
-    /**
-     * Longhand: left offset. Overrides `inset` left value.
-     */
-    left?: LengthUnit;
-    /**
-     * Direction of flex layout (row or column).
-     */
-    flexDirection: FlexDirection;
-    /**
-     * How a single grid item is aligned along the inline (row) axis, overriding the container's justify-items value.
-     */
-    justifySelf?: AlignItems;
-    /**
-     * How items are aligned along the main axis.
-     */
-    justifyContent?: JustifyContent;
-    /**
-     * How lines are aligned within the flex container when there's extra space in the cross axis.
-     */
-    alignContent?: JustifyContent;
-    /**
-     * How grid items are aligned along the inline (row) axis within their grid areas.
-     */
-    justifyItems?: AlignItems;
-    /**
-     * How items are aligned along the cross axis.
-     */
-    alignItems?: AlignItems;
-    /**
-     * How a single item is aligned along the cross axis, overriding the container's align-items value.
-     */
-    alignSelf?: AlignItems;
-    /**
-     * How flex items should wrap.
-     */
-    flexWrap: FlexWrap;
-    /**
-     * The initial main size of the flex item before growing or shrinking.
-     */
-    flexBasis: LengthUnit;
-    /**
-     * 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.
-     */
-    gap: Gap;
-    /**
-     * How much the flex item should grow relative to other flex items when positive free space is distributed.
-     */
-    flexGrow: number;
-    /**
-     * How much the flex item should shrink relative to other flex items when negative free space is distributed.
-     */
-    flexShrink: number;
-    /**
-     * Shorthand border radius (top-left, top-right, bottom-right, bottom-left).
-     */
-    borderRadius?: Sides<LengthUnit>;
-    /**
-     * Longhand: top-left border radius. Overrides `border_radius` top-left value.
-     */
-    borderTopLeftRadius?: LengthUnit;
-    /**
-     * Longhand: top-right border radius. Overrides `border_radius` top-right value.
-     */
-    borderTopRightRadius?: LengthUnit;
-    /**
-     * Longhand: bottom-right border radius. Overrides `border_radius` bottom-right value.
-     */
-    borderBottomRightRadius?: LengthUnit;
-    /**
-     * Longhand: bottom-left border radius. Overrides `border_radius` bottom-left value.
-     */
-    borderBottomLeftRadius?: LengthUnit;
-    /**
-     * Width of the element's border on each side (top, right, bottom, left).
-     */
-    borderWidth: Sides<LengthUnit>;
-    /**
-     * Longhand: top border width. Overrides `border_width` top value.
-     */
-    borderTopWidth?: LengthUnit;
-    /**
-     * Longhand: right border width. Overrides `border_width` right value.
-     */
-    borderRightWidth?: LengthUnit;
-    /**
-     * Longhand: bottom border width. Overrides `border_width` bottom value.
-     */
-    borderBottomWidth?: LengthUnit;
-    /**
-     * Longhand: left border width. Overrides `border_width` left value.
-     */
-    borderLeftWidth?: LengthUnit;
-    /**
-     * How images should be fitted within their container.
-     */
-    objectFit: ObjectFit;
-    /**
-     * 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.
-     */
-    backgroundRepeat?: BackgroundRepeats;
-    /**
-     * Background color for the element.
-     */
-    backgroundColor?: Color;
-    /**
-     * Box shadow effect for the element.
-     */
-    boxShadow?: BoxShadows;
-    /**
-     * Controls the size of implicitly-created grid columns.
-     */
-    gridAutoColumns?: GridTrackSizes;
-    /**
-     * Controls the size of implicitly-created grid rows.
-     */
-    gridAutoRows?: GridTrackSizes;
-    /**
-     * Controls how auto-placed items are inserted in the grid.
-     */
-    gridAutoFlow?: GridAutoFlow;
-    /**
-     * Specifies a grid item's size and location within the grid column.
-     */
-    gridColumn?: GridLine;
-    /**
-     * Specifies a grid item's size and location within the grid row.
-     */
-    gridRow?: GridLine;
-    /**
-     * Defines the line names and track sizing functions of the grid columns.
-     */
-    gridTemplateColumns?: GridTemplateComponents;
-    /**
-     * Defines the line names and track sizing functions of the grid rows.
-     */
-    gridTemplateRows?: GridTemplateComponents;
-    /**
-     * 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).
-     */
-    fontStyle?: FontStyle;
-    /**
-     * Color of the element's border.
-     */
-    borderColor?: Color;
-    /**
-     * Text color for child text elements.
-     */
-    color?: Color;
-    /**
-     * Font size for text rendering.
-     */
-    fontSize?: LengthUnit;
-    /**
-     * Font family name for text rendering.
-     */
-    fontFamily?: FontFamily;
-    /**
-     * Line height for text spacing, number is em.
-     */
-    lineHeight?: LineHeight;
-    /**
-     * Font weight for text rendering.
-     */
-    fontWeight?: FontWeight;
-    /**
-     * Controls variable font axis values via CSS font-variation-settings property.
-     */
-    fontVariationSettings?: FontVariationSettings;
-    /**
-     * Controls OpenType font features via CSS font-feature-settings property.
-     */
-    fontFeatureSettings?: FontFeatureSettings;
-    /**
-     * Maximum number of lines for text before truncation.
-     */
-    lineClamp?: number;
-    /**
-     * Text alignment within the element.
-     */
-    textAlign?: TextAlign;
-    /**
-     * Additional spacing between characters in text.
-     */
-    letterSpacing?: LengthUnit;
-    /**
-     * Additional spacing between words in text.
-     */
-    wordSpacing?: LengthUnit;
-    /**
-     * Controls how images are scaled when rendered.
-     */
-    imageRendering?: ImageScalingAlgorithm;
-    /**
-     * How text should be overflowed.
-     */
-    overflowWrap?: OverflowWrap;
-    /**
-     * How text should be broken at word boundaries.
-     */
-    wordBreak?: WordBreak;
+    boxSizing: CssValue<BoxSizing>;
+    display: CssValue<Display>;
+    width: CssValue<LengthUnit>;
+    height: CssValue<LengthUnit>;
+    maxWidth: CssValue<LengthUnit>;
+    maxHeight: CssValue<LengthUnit>;
+    minWidth: CssValue<LengthUnit>;
+    minHeight: CssValue<LengthUnit>;
+    aspectRatio: CssValue<number | null>;
+    padding: CssValue<Sides<LengthUnit>>;
+    paddingTop: CssValue<LengthUnit | null>;
+    paddingRight: CssValue<LengthUnit | null>;
+    paddingBottom: CssValue<LengthUnit | null>;
+    paddingLeft: CssValue<LengthUnit | null>;
+    margin: CssValue<Sides<LengthUnit>>;
+    marginTop: CssValue<LengthUnit | null>;
+    marginRight: CssValue<LengthUnit | null>;
+    marginBottom: CssValue<LengthUnit | null>;
+    marginLeft: CssValue<LengthUnit | null>;
+    inset: CssValue<Sides<LengthUnit>>;
+    top: CssValue<LengthUnit | null>;
+    right: CssValue<LengthUnit | null>;
+    bottom: CssValue<LengthUnit | null>;
+    left: CssValue<LengthUnit | null>;
+    flexDirection: CssValue<FlexDirection>;
+    justifySelf: CssValue<AlignItems | null>;
+    justifyContent: CssValue<JustifyContent | null>;
+    alignContent: CssValue<JustifyContent | null>;
+    justifyItems: CssValue<AlignItems | null>;
+    alignItems: CssValue<AlignItems | null>;
+    alignSelf: CssValue<AlignItems | null>;
+    flexWrap: CssValue<FlexWrap>;
+    flexBasis: CssValue<LengthUnit>;
+    position: CssValue<Position>;
+    transform: CssValue<Transforms | null>;
+    transformOrigin: CssValue<BackgroundPosition | null>;
+    maskImage: CssValue<BackgroundImages | null>;
+    maskSize: CssValue<BackgroundSizes | null>;
+    maskPosition: CssValue<BackgroundPositions | null>;
+    maskRepeat: CssValue<BackgroundRepeats | null>;
+    gap: CssValue<Gap>;
+    flexGrow: CssValue<number>;
+    flexShrink: CssValue<number>;
+    borderRadius: CssValue<Sides<LengthUnit>>;
+    borderTopLeftRadius: CssValue<LengthUnit | null>;
+    borderTopRightRadius: CssValue<LengthUnit | null>;
+    borderBottomRightRadius: CssValue<LengthUnit | null>;
+    borderBottomLeftRadius: CssValue<LengthUnit | null>;
+    borderWidth: CssValue<Sides<LengthUnit>>;
+    borderTopWidth: CssValue<LengthUnit | null>;
+    borderRightWidth: CssValue<LengthUnit | null>;
+    borderBottomWidth: CssValue<LengthUnit | null>;
+    borderLeftWidth: CssValue<LengthUnit | null>;
+    objectFit: CssValue<ObjectFit>;
+    backgroundImage: CssValue<BackgroundImages | null>;
+    backgroundPosition: CssValue<BackgroundPositions | null>;
+    backgroundSize: CssValue<BackgroundSizes | null>;
+    backgroundRepeat: CssValue<BackgroundRepeats | null>;
+    backgroundColor: CssValue<Color>;
+    boxShadow: CssValue<BoxShadows | null>;
+    gridAutoColumns: CssValue<GridTrackSizes | null>;
+    gridAutoRows: CssValue<GridTrackSizes | null>;
+    gridAutoFlow: CssValue<GridAutoFlow | null>;
+    gridColumn: CssValue<GridLine | null>;
+    gridRow: CssValue<GridLine | null>;
+    gridTemplateColumns: CssValue<GridTemplateComponents | null>;
+    gridTemplateRows: CssValue<GridTemplateComponents | null>;
+    gridTemplateAreas: CssValue<GridTemplateAreas | null>;
+    textOverflow: CssValue<TextOverflow>;
+    textTransform: CssValue<TextTransform>;
+    fontStyle: CssValue<FontStyle>;
+    borderColor: CssValue<Color>;
+    color: CssValue<Color>;
+    fontSize: CssValue<LengthUnit>;
+    fontFamily: CssValue<FontFamily | null>;
+    lineHeight: CssValue<LineHeight>;
+    fontWeight: CssValue<FontWeight>;
+    fontVariationSettings: CssValue<FontVariationSettings | null>;
+    fontFeatureSettings: CssValue<FontFeatureSettings | null>;
+    lineClamp: CssValue<number | null>;
+    textAlign: CssValue<TextAlign>;
+    textStrokeWidth: CssValue<LengthUnit>;
+    textStrokeColor: CssValue<Color | null>;
+    textStroke: CssValue<TextStroke | null>;
+    textShadow: CssValue<TextShadows | null>;
+    letterSpacing: CssValue<LengthUnit | null>;
+    wordSpacing: CssValue<LengthUnit | null>;
+    imageRendering: CssValue<ImageScalingAlgorithm>;
+    overflowWrap: CssValue<OverflowWrap>;
+    wordBreak: CssValue<WordBreak>;
 };
 
 type JsonValue = string | number | boolean | null | JsonValue[] | {

package/dist/{types-BQVVNqov.d.ts → types-Bg4T_32S.d.ts}

@@ -269,7 +269,7 @@ type BoxShadow = {
 /**
  * Represents a collection of box shadows, have custom `FromCss` implementation for comma-separated values.
  */
-type BoxShadows = Array<BoxShadow>;
+type BoxShadows = Array<BoxShadow> | string;
 
 /**
  * Defines how the width and height of an element are calculated.
@@ -278,6 +278,11 @@ type BoxShadows = Array<BoxShadow>;
  */
 type BoxSizing = "content-box" | "border-box";
 
+/**
+ * Represents a CSS property value that can be explicitly set, inherited from parent, or reset to initial value.
+ */
+type CssValue<T> = "initial" | "inherit" | T;
+
 /**
  * This enum determines the layout algorithm used for the children of a node.
  */
@@ -493,7 +498,44 @@ type TextAlign = "left" | "right" | "center" | "justify" | "start" | "end";
  *
  * This enum determines how text should be handled when it exceeds the container width.
  */
-type TextOverflow = "ellipsis" | "clip";
+type TextOverflow = "clip" | "ellipsis";
+
+/**
+ * Represents a text shadow with all its properties.
+ */
+type TextShadow = {
+    /**
+     * Horizontal offset of the shadow.
+     */
+    offsetX: LengthUnit;
+    /**
+     * Vertical offset of the shadow.
+     */
+    offsetY: LengthUnit;
+    /**
+     * Blur radius of the shadow. Higher values create a more blurred shadow.
+     */
+    blurRadius: LengthUnit;
+    /**
+     * Color of the shadow.
+     */
+    color: Color;
+} | string;
+
+/**
+ * Represents a collection of text shadows; has custom `FromCss` implementation for comma-separated values.
+ */
+type TextShadows = Array<TextShadow> | string;
+
+/**
+ * Parsed `text-stroke` value.
+ *
+ * `color` is optional; when absent the element's `color` property should be used.
+ */
+type TextStroke = {
+    width: LengthUnit;
+    color: Color | null;
+} | string;
 
 /**
  * Controls text case transformation when rendering.
@@ -558,353 +600,99 @@ type Transforms = Array<Transform> | string;
 type WordBreak = "normal" | "break-all" | "keep-all";
 
 /**
- * Main styling structure that contains all layout and visual properties.
+ * Defines the style of an element.
  */
 type Style = {
-    /**
-     * Display algorithm to use for the element.
-     */
-    display: Display;
-    /**
-     * Width of the element.
-     */
-    width: LengthUnit;
-    /**
-     * Height of the element.
-     */
-    height: LengthUnit;
-    /**
-     * Max width of the element.
-     */
-    maxWidth: LengthUnit;
-    /**
-     * Max height of the element.
-     */
-    maxHeight: LengthUnit;
-    /**
-     * Min width of the element.
-     */
-    minWidth: LengthUnit;
-    /**
-     * Min height of the element.
-     */
-    minHeight: LengthUnit;
-    /**
-     * Aspect ratio of the element (width/height).
-     */
-    aspectRatio?: number;
-    /**
-     * Internal spacing around the element's content (top, right, bottom, left).
-     */
-    padding: Sides<LengthUnit>;
-    /**
-     * Longhand: top padding. Overrides `padding` top value.
-     */
-    paddingTop?: LengthUnit;
-    /**
-     * Longhand: right padding. Overrides `padding` right value.
-     */
-    paddingRight?: LengthUnit;
-    /**
-     * Longhand: bottom padding. Overrides `padding` bottom value.
-     */
-    paddingBottom?: LengthUnit;
-    /**
-     * Longhand: left padding. Overrides `padding` left value.
-     */
-    paddingLeft?: LengthUnit;
-    /**
-     * External spacing around the element (top, right, bottom, left).
-     */
-    margin: Sides<LengthUnit>;
-    /**
-     * Longhand: top margin. Overrides `margin` top value.
-     */
-    marginTop?: LengthUnit;
-    /**
-     * Longhand: right margin. Overrides `margin` right value.
-     */
-    marginRight?: LengthUnit;
-    /**
-     * Longhand: bottom margin. Overrides `margin` bottom value.
-     */
-    marginBottom?: LengthUnit;
-    /**
-     * Longhand: left margin. Overrides `margin` left value.
-     */
-    marginLeft?: LengthUnit;
-    /**
-     * Positioning offsets (top, right, bottom, left) from the element's normal position.
-     */
-    inset: Sides<LengthUnit>;
-    /**
-     * Longhand: top offset. Overrides `inset` top value.
-     */
-    top?: LengthUnit;
-    /**
-     * Longhand: right offset. Overrides `inset` right value.
-     */
-    right?: LengthUnit;
-    /**
-     * Longhand: bottom offset. Overrides `inset` bottom value.
-     */
-    bottom?: LengthUnit;
-    /**
-     * Longhand: left offset. Overrides `inset` left value.
-     */
-    left?: LengthUnit;
-    /**
-     * Direction of flex layout (row or column).
-     */
-    flexDirection: FlexDirection;
-    /**
-     * How a single grid item is aligned along the inline (row) axis, overriding the container's justify-items value.
-     */
-    justifySelf?: AlignItems;
-    /**
-     * How items are aligned along the main axis.
-     */
-    justifyContent?: JustifyContent;
-    /**
-     * How lines are aligned within the flex container when there's extra space in the cross axis.
-     */
-    alignContent?: JustifyContent;
-    /**
-     * How grid items are aligned along the inline (row) axis within their grid areas.
-     */
-    justifyItems?: AlignItems;
-    /**
-     * How items are aligned along the cross axis.
-     */
-    alignItems?: AlignItems;
-    /**
-     * How a single item is aligned along the cross axis, overriding the container's align-items value.
-     */
-    alignSelf?: AlignItems;
-    /**
-     * How flex items should wrap.
-     */
-    flexWrap: FlexWrap;
-    /**
-     * The initial main size of the flex item before growing or shrinking.
-     */
-    flexBasis: LengthUnit;
-    /**
-     * 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.
-     */
-    gap: Gap;
-    /**
-     * How much the flex item should grow relative to other flex items when positive free space is distributed.
-     */
-    flexGrow: number;
-    /**
-     * How much the flex item should shrink relative to other flex items when negative free space is distributed.
-     */
-    flexShrink: number;
-    /**
-     * Shorthand border radius (top-left, top-right, bottom-right, bottom-left).
-     */
-    borderRadius?: Sides<LengthUnit>;
-    /**
-     * Longhand: top-left border radius. Overrides `border_radius` top-left value.
-     */
-    borderTopLeftRadius?: LengthUnit;
-    /**
-     * Longhand: top-right border radius. Overrides `border_radius` top-right value.
-     */
-    borderTopRightRadius?: LengthUnit;
-    /**
-     * Longhand: bottom-right border radius. Overrides `border_radius` bottom-right value.
-     */
-    borderBottomRightRadius?: LengthUnit;
-    /**
-     * Longhand: bottom-left border radius. Overrides `border_radius` bottom-left value.
-     */
-    borderBottomLeftRadius?: LengthUnit;
-    /**
-     * Width of the element's border on each side (top, right, bottom, left).
-     */
-    borderWidth: Sides<LengthUnit>;
-    /**
-     * Longhand: top border width. Overrides `border_width` top value.
-     */
-    borderTopWidth?: LengthUnit;
-    /**
-     * Longhand: right border width. Overrides `border_width` right value.
-     */
-    borderRightWidth?: LengthUnit;
-    /**
-     * Longhand: bottom border width. Overrides `border_width` bottom value.
-     */
-    borderBottomWidth?: LengthUnit;
-    /**
-     * Longhand: left border width. Overrides `border_width` left value.
-     */
-    borderLeftWidth?: LengthUnit;
-    /**
-     * How images should be fitted within their container.
-     */
-    objectFit: ObjectFit;
-    /**
-     * 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.
-     */
-    backgroundRepeat?: BackgroundRepeats;
-    /**
-     * Background color for the element.
-     */
-    backgroundColor?: Color;
-    /**
-     * Box shadow effect for the element.
-     */
-    boxShadow?: BoxShadows;
-    /**
-     * Controls the size of implicitly-created grid columns.
-     */
-    gridAutoColumns?: GridTrackSizes;
-    /**
-     * Controls the size of implicitly-created grid rows.
-     */
-    gridAutoRows?: GridTrackSizes;
-    /**
-     * Controls how auto-placed items are inserted in the grid.
-     */
-    gridAutoFlow?: GridAutoFlow;
-    /**
-     * Specifies a grid item's size and location within the grid column.
-     */
-    gridColumn?: GridLine;
-    /**
-     * Specifies a grid item's size and location within the grid row.
-     */
-    gridRow?: GridLine;
-    /**
-     * Defines the line names and track sizing functions of the grid columns.
-     */
-    gridTemplateColumns?: GridTemplateComponents;
-    /**
-     * Defines the line names and track sizing functions of the grid rows.
-     */
-    gridTemplateRows?: GridTemplateComponents;
-    /**
-     * 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).
-     */
-    fontStyle?: FontStyle;
-    /**
-     * Color of the element's border.
-     */
-    borderColor?: Color;
-    /**
-     * Text color for child text elements.
-     */
-    color?: Color;
-    /**
-     * Font size for text rendering.
-     */
-    fontSize?: LengthUnit;
-    /**
-     * Font family name for text rendering.
-     */
-    fontFamily?: FontFamily;
-    /**
-     * Line height for text spacing, number is em.
-     */
-    lineHeight?: LineHeight;
-    /**
-     * Font weight for text rendering.
-     */
-    fontWeight?: FontWeight;
-    /**
-     * Controls variable font axis values via CSS font-variation-settings property.
-     */
-    fontVariationSettings?: FontVariationSettings;
-    /**
-     * Controls OpenType font features via CSS font-feature-settings property.
-     */
-    fontFeatureSettings?: FontFeatureSettings;
-    /**
-     * Maximum number of lines for text before truncation.
-     */
-    lineClamp?: number;
-    /**
-     * Text alignment within the element.
-     */
-    textAlign?: TextAlign;
-    /**
-     * Additional spacing between characters in text.
-     */
-    letterSpacing?: LengthUnit;
-    /**
-     * Additional spacing between words in text.
-     */
-    wordSpacing?: LengthUnit;
-    /**
-     * Controls how images are scaled when rendered.
-     */
-    imageRendering?: ImageScalingAlgorithm;
-    /**
-     * How text should be overflowed.
-     */
-    overflowWrap?: OverflowWrap;
-    /**
-     * How text should be broken at word boundaries.
-     */
-    wordBreak?: WordBreak;
+    boxSizing: CssValue<BoxSizing>;
+    display: CssValue<Display>;
+    width: CssValue<LengthUnit>;
+    height: CssValue<LengthUnit>;
+    maxWidth: CssValue<LengthUnit>;
+    maxHeight: CssValue<LengthUnit>;
+    minWidth: CssValue<LengthUnit>;
+    minHeight: CssValue<LengthUnit>;
+    aspectRatio: CssValue<number | null>;
+    padding: CssValue<Sides<LengthUnit>>;
+    paddingTop: CssValue<LengthUnit | null>;
+    paddingRight: CssValue<LengthUnit | null>;
+    paddingBottom: CssValue<LengthUnit | null>;
+    paddingLeft: CssValue<LengthUnit | null>;
+    margin: CssValue<Sides<LengthUnit>>;
+    marginTop: CssValue<LengthUnit | null>;
+    marginRight: CssValue<LengthUnit | null>;
+    marginBottom: CssValue<LengthUnit | null>;
+    marginLeft: CssValue<LengthUnit | null>;
+    inset: CssValue<Sides<LengthUnit>>;
+    top: CssValue<LengthUnit | null>;
+    right: CssValue<LengthUnit | null>;
+    bottom: CssValue<LengthUnit | null>;
+    left: CssValue<LengthUnit | null>;
+    flexDirection: CssValue<FlexDirection>;
+    justifySelf: CssValue<AlignItems | null>;
+    justifyContent: CssValue<JustifyContent | null>;
+    alignContent: CssValue<JustifyContent | null>;
+    justifyItems: CssValue<AlignItems | null>;
+    alignItems: CssValue<AlignItems | null>;
+    alignSelf: CssValue<AlignItems | null>;
+    flexWrap: CssValue<FlexWrap>;
+    flexBasis: CssValue<LengthUnit>;
+    position: CssValue<Position>;
+    transform: CssValue<Transforms | null>;
+    transformOrigin: CssValue<BackgroundPosition | null>;
+    maskImage: CssValue<BackgroundImages | null>;
+    maskSize: CssValue<BackgroundSizes | null>;
+    maskPosition: CssValue<BackgroundPositions | null>;
+    maskRepeat: CssValue<BackgroundRepeats | null>;
+    gap: CssValue<Gap>;
+    flexGrow: CssValue<number>;
+    flexShrink: CssValue<number>;
+    borderRadius: CssValue<Sides<LengthUnit>>;
+    borderTopLeftRadius: CssValue<LengthUnit | null>;
+    borderTopRightRadius: CssValue<LengthUnit | null>;
+    borderBottomRightRadius: CssValue<LengthUnit | null>;
+    borderBottomLeftRadius: CssValue<LengthUnit | null>;
+    borderWidth: CssValue<Sides<LengthUnit>>;
+    borderTopWidth: CssValue<LengthUnit | null>;
+    borderRightWidth: CssValue<LengthUnit | null>;
+    borderBottomWidth: CssValue<LengthUnit | null>;
+    borderLeftWidth: CssValue<LengthUnit | null>;
+    objectFit: CssValue<ObjectFit>;
+    backgroundImage: CssValue<BackgroundImages | null>;
+    backgroundPosition: CssValue<BackgroundPositions | null>;
+    backgroundSize: CssValue<BackgroundSizes | null>;
+    backgroundRepeat: CssValue<BackgroundRepeats | null>;
+    backgroundColor: CssValue<Color>;
+    boxShadow: CssValue<BoxShadows | null>;
+    gridAutoColumns: CssValue<GridTrackSizes | null>;
+    gridAutoRows: CssValue<GridTrackSizes | null>;
+    gridAutoFlow: CssValue<GridAutoFlow | null>;
+    gridColumn: CssValue<GridLine | null>;
+    gridRow: CssValue<GridLine | null>;
+    gridTemplateColumns: CssValue<GridTemplateComponents | null>;
+    gridTemplateRows: CssValue<GridTemplateComponents | null>;
+    gridTemplateAreas: CssValue<GridTemplateAreas | null>;
+    textOverflow: CssValue<TextOverflow>;
+    textTransform: CssValue<TextTransform>;
+    fontStyle: CssValue<FontStyle>;
+    borderColor: CssValue<Color>;
+    color: CssValue<Color>;
+    fontSize: CssValue<LengthUnit>;
+    fontFamily: CssValue<FontFamily | null>;
+    lineHeight: CssValue<LineHeight>;
+    fontWeight: CssValue<FontWeight>;
+    fontVariationSettings: CssValue<FontVariationSettings | null>;
+    fontFeatureSettings: CssValue<FontFeatureSettings | null>;
+    lineClamp: CssValue<number | null>;
+    textAlign: CssValue<TextAlign>;
+    textStrokeWidth: CssValue<LengthUnit>;
+    textStrokeColor: CssValue<Color | null>;
+    textStroke: CssValue<TextStroke | null>;
+    textShadow: CssValue<TextShadows | null>;
+    letterSpacing: CssValue<LengthUnit | null>;
+    wordSpacing: CssValue<LengthUnit | null>;
+    imageRendering: CssValue<ImageScalingAlgorithm>;
+    overflowWrap: CssValue<OverflowWrap>;
+    wordBreak: CssValue<WordBreak>;
 };
 
 type JsonValue = string | number | boolean | null | JsonValue[] | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takumi-rs/helpers",
-  "version": "0.29.8",
+  "version": "0.30.0",
   "author": {
     "email": "me@kane.tw",
     "name": "Kane Wang",
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@types/bun": "^1.2.21",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "bun-plugin-dts": "^0.3.0",
-    "lucide-react": "^0.542.0",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tsup": "^8.5.0",
@@ -40,7 +40,7 @@
     "README.md",
     "tsconfig.json"
   ],
-  "license": "MIT",
+  "license": "(MIT OR Apache-2.0)",
   "scripts": {
     "build": "tsup-node src/index.ts src/jsx/jsx.ts --minify --dts --format esm,cjs --no-splitting"
   },