@takumi-rs/helpers 0.7.2

package/README.md

@@ -0,0 +1,26 @@
+# @takumi-rs/helpers
+
+Types and helper functions for [takumi](https://github.com/kane50613/takumi).
+
+## Example
+
+```ts
+import { container, text, image, style } from "@takumi-rs/helpers";
+
+const root = container({
+  width: 1200,
+  height: 630,
+  children: [
+    text(
+      style({
+        font_size: 24,
+        font_weight: 700,
+        color: 0xffffff,
+      }),
+      "Hello, world!"
+    ),
+  ],
+});
+
+// Fetch takumi server or with @takumi-rs/core
+```

package/dist/index.d.ts

@@ -0,0 +1,368 @@
+// Generated by dts-bundle-generator v9.5.1
+
+/**
+ * Defines how flex items are aligned along the cross axis.
+ *
+ * This enum determines how flex items are aligned within the flex container
+ * along the cross axis (perpendicular to the main axis).
+ */
+export type AlignItems = "start" | "end" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+/**
+ * Represents a color in various formats with support for RGB, RGBA, and integer RGB values.
+ *
+ * The enum supports three color formats:
+ * - `Rgb`: RGB color with 8-bit components (r, g, b)
+ * - `Rgba`: RGBA color with 8-bit RGB components and 32-bit float alpha (r, g, b, a)
+ * - `RgbInt`: Single 32-bit integer containing RGB values
+ */
+export type Color = [
+	number,
+	number,
+	number
+] | [
+	number,
+	number,
+	number,
+	number
+] | number;
+/**
+ * Represents a gradient with color steps and an angle for directional gradients.
+ */
+export type Gradient = {
+	/**
+	 * The color stops that make up the gradient
+	 */
+	stops: Array<Color>;
+	/**
+	 * The angle in degrees for the gradient direction (0-360)
+	 */
+	angle: number;
+};
+/**
+ * Represents a color input that can be either a color or a gradient.
+ */
+export type ColorInput = Color | Gradient;
+/**
+ * Represents a value that can be a specific length, percentage, or automatic.
+ *
+ * This corresponds to CSS values that can be specified as pixels, percentages,
+ * or the 'auto' keyword for automatic sizing.
+ */
+export type LengthUnit = "auto" | {
+	"percentage": number;
+} | {
+	"rem": number;
+} | {
+	"em": number;
+} | {
+	"vh": number;
+} | {
+	"vw": number;
+} | number;
+/**
+ * Defines a box shadow for an element.
+ *
+ * This struct contains the properties for a box shadow, including color,
+ * offset, blur radius, spread radius, and inset flag.
+ */
+export type BoxShadow = {
+	/**
+	 * Color of the box shadow
+	 */
+	color: ColorInput;
+	/**
+	 * Horizontal offset of the box shadow
+	 */
+	offset_x: LengthUnit;
+	/**
+	 * Vertical offset of the box shadow
+	 */
+	offset_y: LengthUnit;
+	/**
+	 * Blur radius of the box shadow (must be non-negative)
+	 */
+	blur_radius: LengthUnit;
+	/**
+	 * Spread radius of the box shadow
+	 */
+	spread_radius: LengthUnit;
+	/**
+	 * Whether the shadow is inset (inside the element)
+	 */
+	inset: boolean;
+};
+/**
+ * Defines a box shadow for an element.
+ *
+ * This enum allows for flexible specification of box shadows, including
+ * a single shadow or multiple shadows.
+ */
+export type BoxShadowInput = BoxShadow | Array<BoxShadow>;
+/**
+ * Defines the direction of flex items within a flex container.
+ *
+ * This enum determines how flex items are laid out along the main axis.
+ */
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+/**
+ * Defines how flex items should wrap.
+ *
+ * This enum determines how flex items should wrap within the flex container.
+ */
+export type FlexWrap = "no-wrap" | "wrap" | "wrap-reverse";
+/**
+ * Represents font weight as a numeric value.
+ *
+ * This wraps a u16 value that corresponds to CSS font-weight values
+ * (e.g., 100 for thin, 400 for normal, 700 for bold, 900 for black).
+ */
+export type FontWeight = number;
+/**
+ * Represents spacing between flex items.
+ *
+ * Can be either a single value applied to both axes, or separate values
+ * for horizontal and vertical spacing.
+ */
+export type Gap = LengthUnit | [
+	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";
+/**
+ * Defines how an image should be resized to fit its container.
+ *
+ * Similar to CSS object-fit property.
+ */
+export type ObjectFit = "contain" | "cover" | "fill" | "scale-down" | "none";
+/**
+ * Defines the positioning method for an element.
+ *
+ * This enum determines how an element is positioned within its containing element.
+ */
+export type Position = "static" | "relative" | "absolute" | "fixed" | "sticky";
+/**
+ * Represents values that can be applied to all sides of an element.
+ *
+ * This enum allows for flexible specification of values like padding, margin,
+ * or border sizes using either a single value for all sides, separate values
+ * for vertical/horizontal axes, or individual values for each side.
+ */
+export type SidesValue<T> = T | [
+	T,
+	T
+] | [
+	T,
+	T,
+	T,
+	T
+];
+/**
+ * Text alignment options for text rendering.
+ *
+ * Corresponds to CSS text-align property values.
+ */
+export type TextAlign = "left" | "right" | "center" | "justify" | "start" | "end";
+/**
+ * Main styling structure that contains all layout and visual properties.
+ *
+ * This structure combines both layout properties (like width, height, padding)
+ * and inheritable properties (like font settings, colors) that can be passed
+ * down to child elements.
+ */
+export type Style = {
+	/**
+	 * Width of the element
+	 */
+	width: LengthUnit;
+	/**
+	 * Height of the element
+	 */
+	height: LengthUnit;
+	/**
+	 * Max width of the element
+	 */
+	max_width: LengthUnit;
+	/**
+	 * Max height of the element
+	 */
+	max_height: LengthUnit;
+	/**
+	 * Min width of the element
+	 */
+	min_width: LengthUnit;
+	/**
+	 * Min height of the element
+	 */
+	min_height: LengthUnit;
+	/**
+	 * Aspect ratio of the element
+	 */
+	aspect_ratio?: number;
+	/**
+	 * Internal spacing around the element's content
+	 */
+	padding: SidesValue<LengthUnit>;
+	/**
+	 * External spacing around the element
+	 */
+	margin: SidesValue<LengthUnit>;
+	/**
+	 * Positioning offset from the element's normal position
+	 */
+	inset: SidesValue<LengthUnit>;
+	/**
+	 * Direction of flex layout (row or column)
+	 */
+	flex_direction: FlexDirection;
+	/**
+	 * How flex items are aligned along the main axis
+	 */
+	justify_content?: JustifyContent;
+	/**
+	 * How flex items are aligned along the cross axis
+	 */
+	align_items?: AlignItems;
+	/**
+	 * How flex items should wrap
+	 */
+	flex_wrap: FlexWrap;
+	/**
+	 * The initial size of the flex item
+	 */
+	flex_basis: LengthUnit;
+	/**
+	 * Positioning method (relative, absolute, etc.)
+	 */
+	position: Position;
+	/**
+	 * Spacing between flex items
+	 */
+	gap: Gap;
+	/**
+	 * How much the element should grow relative to other flex items
+	 */
+	flex_grow: number;
+	/**
+	 * How much the element should shrink relative to other flex items
+	 */
+	flex_shrink: number;
+	/**
+	 * Width of the element's border
+	 */
+	border_width: SidesValue<LengthUnit>;
+	/**
+	 * How images should be fitted within their container
+	 */
+	object_fit: ObjectFit;
+	/**
+	 * Element's background color
+	 */
+	background_color?: ColorInput;
+	/**
+	 * Box shadow for the element
+	 */
+	box_shadow?: BoxShadowInput;
+	/**
+	 * 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?: number;
+};
+/**
+ * Represents a value that can be a specific length, percentage, or automatic.
+ *
+ * This corresponds to CSS values that can be specified as pixels, percentages,
+ * or the 'auto' keyword for automatic sizing.
+ */
+export type ValuePercentageAuto = "auto" | {
+	"percentage": number;
+} | number;
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+	[key: string]: JsonValue;
+};
+export type AnyNode = {
+	type: string;
+	[key: string]: JsonValue;
+};
+export type StyleInput = Partial<Style>;
+export type Node = ContainerNode | TextNode | ImageNode | AnyNode;
+export type ContainerNode = StyleInput & {
+	type: "container";
+	children: Node[];
+};
+export type TextNode = StyleInput & {
+	type: "text";
+	text: string;
+};
+export type ImageNode = StyleInput & {
+	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>;
+/**
+ * Convert a number to a percentage struct.
+ * @param percentage - The percentage to convert (0.0 - 100.0).
+ * @returns The percentage struct.
+ */
+export declare function percentage(percentage: number): {
+	percentage: number;
+};
+export declare function vw(vw: number): {
+	vw: number;
+};
+export declare function vh(vh: number): {
+	vh: number;
+};
+export declare function em(em: number): {
+	em: number;
+};
+export declare function rem(rem: number): {
+	rem: number;
+};
+
+export {};

package/dist/index.js

@@ -0,0 +1 @@
+function b(e){return{type:"container",...e}}function c(e,t){return{...t,type:"text",text:e}}function A(e,t){return{...t,type:"image",src:e}}function T(e){return e}function w(e){return{percentage:e}}function S(e){return{vw:e}}function D(e){return{vh:e}}function v(e){return{em:e}}function R(e){return{rem:e}}export{S as vw,D as vh,c as text,T as style,R as rem,w as percentage,A as image,v as em,b as container};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@takumi-rs/helpers",
+  "version": "0.7.2",
+  "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"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.1.8",
+    "bun-plugin-dts": "^0.3.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "license": "MIT",
+  "type": "module"
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}