fluekit 1.0.0 → 1.1.0

package/README.md

@@ -1,17 +1,16 @@
 # FlueKit
 
-**FlueKit** (Fluent Layouts for Vue) is a Vue 3 library that provides Flutter-like layout components for building complex UIs with ease. It brings the power and simplicity of Flutter's layout model to the web.
+**FlueKit** is a Vue 3 component library that brings **Flutter's layout paradigm** to the web. It allows you to build complex, responsive user interfaces using declarative, composable widgets instead of struggling with CSS layout quirks.
 
-## Features
+## ✨ Features
 
-- **Layout Primitives**: `Row`, `Column`, `Stack`, `Positioned`, `Expanded`, `SizedBox`, `Center`, `Align`
-- **Container System**: `Container`, `AnimatedContainer`, `Padding`, `ConstrainedBox`
-- **Scrolling**: `ListView`, `GridView`, `ScrollView` (SingleChildScrollView)
-- **Styling**: `BoxDecoration`, `TextStyle`, `EdgeInsets`, `BorderRadius`
-- **Interactions**: `GestureDetector`, `IgnorePointer`, `AbsorbPointer`
-- **Animations**: `AnimatedContainer`, `AnimatedOpacity`
+- **Flutter-like API**: Familiar widget names and properties (`Row`, `Column`, `Stack`, `Container`, `Expanded`, etc.).
+- **Responsive by Default**: Built-in `px` to `vw` conversion system for mobile-first development.
+- **Type Safe**: Written in TypeScript with full type definitions.
+- **Composable**: Build UIs by nesting components, just like in Flutter.
+- **Zero-CSS Layouts**: Handle alignment, padding, margin, and positioning purely through props.
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install fluekit
@@ -21,43 +20,92 @@ pnpm add fluekit
 yarn add fluekit
 ```
 
-## Quick Start
+## 🚀 Usage
+
+### Basic Example
 
 ```vue
 <script setup>
-import { Container, Center, Text, Column, SizedBox } from "fluekit";
+import { Container, Column, Row, Text, SizedBox, Alignment, MainAxisAlignment } from "fluekit";
 </script>
 
 <template>
-  <Center>
-    <Container
-      :width="300"
-      :height="200"
-      color="#2196F3"
-      :decoration="{
-        borderRadius: { all: 16 },
-        boxShadow: [{ color: 'black', blurRadius: 10, offset: { x: 0, y: 4 } }]
-      }"
-      alignment="center"
-    >
-      <Column mainAxisAlignment="center">
-        <Text :style="{ color: 'white', fontSize: 24, fontWeight: 'bold' }">
-          Hello FlueKit
-        </Text>
-        <SizedBox :height="10" />
-        <Text :style="{ color: 'white', fontSize: 16 }">
-          Flutter-like layouts for Vue 3
-        </Text>
-      </Column>
-    </Container>
-  </Center>
+  <Container alignment="center" color="#f5f5f5" :height="400">
+    <Column :mainAxisAlignment="MainAxisAlignment.center">
+      <!-- Avatar -->
+      <Container
+        :width="80"
+        :height="80"
+        :decoration="{
+          color: 'blue',
+          borderRadius: { all: 40 },
+          boxShadow: [{ color: '#00000033', blurRadius: 10, offset: { x: 0, y: 5 } }],
+        }"
+      />
+
+      <SizedBox :height="20" />
+
+      <!-- Text Content -->
+      <Text :style="{ fontSize: 24, fontWeight: 'bold' }"> Hello FlueKit </Text>
+
+      <SizedBox :height="8" />
+
+      <Text :style="{ color: '#666' }"> Flutter-style layouts in Vue 3 </Text>
+    </Column>
+  </Container>
 </template>
 ```
 
-## Documentation
+### Responsive Design (px to vw)
+
+FlueKit automatically converts number values (e.g., `:width="100"`) to `vw` units based on a default design width of **750px**.
+
+To change the design width (e.g., to 375px):
+
+```typescript
+import { setDefaultVW } from "fluekit";
+
+// Call this in your main.ts or App.vue setup
+setDefaultVW(375);
+```
+
+To disable automatic conversion:
+
+```typescript
+import { setTransform } from "fluekit";
+
+setTransform(false); // Numbers will be treated as px
+```
+
+## 🧩 Component Overview
+
+### Layout Widgets
+
+- **Container**: A convenience widget that combines common painting, positioning, and sizing.
+- **Row / Column**: Flexbox layouts for horizontal and vertical arrays.
+- **Stack / Positioned**: Overlapping layouts.
+- **Expanded**: Expands a child of a Row or Column to fill available space.
+- **SizedBox**: A box with a specified size.
+- **Center / Align**: Alignment widgets.
+- **Wrap**: A widget that displays its children in multiple horizontal or vertical runs.
+
+### Scrolling
+
+- **ListView**: A scrollable list of widgets.
+- **GridView**: A scrollable, 2D array of widgets.
+- **ScrollView**: A box in which a single widget can be scrolled.
+
+### Painting & Effects
+
+- **Opacity / AnimatedOpacity**: Makes its child partially transparent.
+- **Transform**: Applies a transformation before painting its child.
+- **Decorations**: Rich styling support via `BoxDecoration` (borders, shadows, gradients, images).
+
+### Interactions
 
-Visit the [documentation website](https://fitz.github.io/fluekit) for detailed guides and API references.
+- **GestureDetector**: Detects gestures (tap, double tap, pan, long press).
+- **IgnorePointer**: Invisible widget that controls hit-testing.
 
-## License
+## 📄 License
 
 MIT

package/dist/Align.d.ts

@@ -1,6 +1,6 @@
-import { FlexAlignment } from './FlexProps';
+import { Alignment } from './Alignment';
 interface Props {
-    alignment?: FlexAlignment;
+    alignment?: Alignment;
     widthFactor?: number;
     heightFactor?: number;
 }
@@ -14,7 +14,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    alignment: FlexAlignment;
+    alignment: Alignment;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Alignment.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties } from 'vue';
+/**
+ * Alignment Geometry
+ * 对应 Flutter 的 Alignment 常量
+ */
+export declare const Alignment: {
+    readonly topLeft: "topLeft";
+    readonly topCenter: "topCenter";
+    readonly topRight: "topRight";
+    readonly centerLeft: "centerLeft";
+    readonly center: "center";
+    readonly centerRight: "centerRight";
+    readonly bottomLeft: "bottomLeft";
+    readonly bottomCenter: "bottomCenter";
+    readonly bottomRight: "bottomRight";
+};
+export type Alignment = keyof typeof Alignment | string;
+/**
+ * 将 Alignment 转换为 Flexbox 样式
+ * @param alignment
+ * @param direction "row" (default) or "column"
+ */
+export declare function alignmentToFlex(alignment: Alignment, direction?: "row" | "column"): CSSProperties;
+export declare const alignmentToStyle: typeof alignmentToFlex;
+/**
+ * 将 Alignment 转换为 CSS background-position / object-position 字符串
+ * e.g. "left top", "center", "right bottom"
+ */
+export declare function alignmentToCssPosition(alignment: Alignment): string;
+/**
+ * 将 Alignment 转换为 CSS transform-origin
+ */
+export declare function alignmentToOrigin(alignment: Alignment): string;
+/**
+ * 将 Alignment 转换为 Grid Alignment (justify-items / align-items)
+ * 用于 Stack
+ */
+export declare function alignmentToGrid(alignment: Alignment): CSSProperties;

package/dist/AnimatedContainer.d.ts

@@ -1,19 +1,19 @@
 import { BoxConstraints } from './BoxConstraints';
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
-import { FlexAlignment } from './FlexProps';
+import { Alignment } from './FlexProps';
 interface Props {
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
     padding?: EdgeInsets;
     margin?: EdgeInsets;
     decoration?: BoxDecoration;
     foregroundDecoration?: BoxDecoration;
     color?: string;
-    alignment?: FlexAlignment | string;
+    alignment?: Alignment | string;
     clipBehavior?: "none" | "hardEdge" | "antiAlias" | string;
     transform?: string;
-    transformAlignment?: FlexAlignment | string;
+    transformAlignment?: Alignment | string;
     constraints?: BoxConstraints;
     duration?: number;
     curve?: string;

package/dist/AnimatedOpacity.d.ts

@@ -1,25 +1,33 @@
-interface Props {
-    opacity: number;
-    duration?: number;
-    curve?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opacity: {
+        type: NumberConstructor;
+        required: true;
     };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    curve: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opacity: {
+        type: NumberConstructor;
+        required: true;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    curve: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
     duration: number;
     curve: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/Border.d.ts

@@ -1,16 +1,47 @@
 import { CSSProperties } from 'vue';
 export type BorderStyleType = "none" | "solid" | "dashed" | "dotted" | "double";
+declare const BORDER_SIDE_SYMBOL: unique symbol;
+declare const BORDERS_SYMBOL: unique symbol;
 export type BorderSide = {
-    width?: number | string;
+    width?: number;
     color?: string;
     style?: BorderStyleType;
+    [BORDER_SIDE_SYMBOL]?: true;
 };
-export declare function Border(side: BorderSide): BorderSide;
-export interface Borders extends BorderSide {
-    all?: BorderSide;
+export interface Borders {
+    left?: BorderSide;
+    top?: BorderSide;
+    right?: BorderSide;
+    bottom?: BorderSide;
+    [BORDERS_SYMBOL]?: true;
+}
+export declare function Border(side: Omit<BorderSide, typeof BORDER_SIDE_SYMBOL>): BorderSide;
+export declare namespace Border {
+    var all: ({ color, width, style, }?: {
+        color?: string;
+        width?: number;
+        style?: BorderStyleType;
+    }) => {
+        top: BorderSide;
+        bottom: BorderSide;
+        left: BorderSide;
+        right: BorderSide;
+        [BORDERS_SYMBOL]: true;
+    };
+}
+/**
+ * 类型守卫：检查对象是否通过 Border 构造函数创建（单个边框边）
+ */
+export declare function isBorderSide(value: any): value is BorderSide;
+/**
+ * 类型守卫：检查对象是否通过 Border.all 创建（完整边框）
+ */
+export declare function isBorders(value: any): value is Borders;
+export interface Borders {
     left?: BorderSide;
     top?: BorderSide;
     right?: BorderSide;
     bottom?: BorderSide;
 }
 export declare function borderToStyle(border: Borders): CSSProperties;
+export {};

package/dist/BorderRadius.d.ts

@@ -1,12 +1,44 @@
 import { CSSProperties } from 'vue';
-export type BorderRadiusValue = number | string;
-export type BorderRadiusType = BorderRadiusValue | {
+export type BorderRadiusValue = number;
+export interface BorderRadiusProps {
     topLeft?: BorderRadiusValue;
     bottom?: BorderRadiusValue;
     topRight?: BorderRadiusValue;
     bottomLeft?: BorderRadiusValue;
     bottomRight?: BorderRadiusValue;
-    all?: BorderRadiusValue;
+}
+declare const BORDER_RADIUS_SYMBOL: unique symbol;
+export type BorderRadius = BorderRadiusProps & {
+    [BORDER_RADIUS_SYMBOL]?: true;
 };
-export declare function BorderRadius(borderRadius: BorderRadiusType): BorderRadiusType;
-export declare function borderRadiusToStyle(props?: BorderRadiusType): CSSProperties;
+export type BorderRadiusType = BorderRadius;
+export declare function BorderRadius(borderRadius: BorderRadiusProps): BorderRadius;
+export declare namespace BorderRadius {
+    var all: (radius: BorderRadiusValue) => {
+        topLeft: number;
+        topRight: number;
+        bottomLeft: number;
+        bottomRight: number;
+        [BORDER_RADIUS_SYMBOL]: true;
+    };
+    var circular: (radius: BorderRadiusValue) => {
+        topLeft: number;
+        topRight: number;
+        bottomLeft: number;
+        bottomRight: number;
+        [BORDER_RADIUS_SYMBOL]: true;
+    };
+    var only: ({ topLeft, topRight, bottomLeft, bottomRight, }: {
+        topLeft?: BorderRadiusValue;
+        topRight?: BorderRadiusValue;
+        bottomLeft?: BorderRadiusValue;
+        bottomRight?: BorderRadiusValue;
+    }) => BorderRadius;
+    var zero: BorderRadius;
+}
+/**
+ * 类型守卫：检查对象是否通过 BorderRadius 构造函数创建
+ */
+export declare function isBorderRadius(value: any): value is BorderRadius;
+export declare function borderRadiusToStyle(props?: BorderRadiusProps): CSSProperties;
+export {};

package/dist/BoxConstraints.d.ts

@@ -1,9 +1,32 @@
 import { CSSProperties } from 'vue';
-export interface BoxConstraints {
+declare const BOX_CONSTRAINTS_SYMBOL: unique symbol;
+export interface BoxConstraintsProps {
     minWidth?: number;
     maxWidth?: number;
     minHeight?: number;
     maxHeight?: number;
 }
-export declare function BoxConstraints(props?: BoxConstraints): BoxConstraints;
-export declare function boxConstraintsToStyle(constraints?: BoxConstraints): CSSProperties;
+export type BoxConstraints = BoxConstraintsProps & {
+    [BOX_CONSTRAINTS_SYMBOL]?: true;
+};
+export declare function BoxConstraints(props?: BoxConstraintsProps): BoxConstraints;
+export declare namespace BoxConstraints {
+    var tight: (size: {
+        width: number;
+        height: number;
+    }) => BoxConstraints;
+    var loose: (size: {
+        width: number;
+        height: number;
+    }) => BoxConstraints;
+    var expand: ({ width, height, }?: {
+        width?: number;
+        height?: number;
+    }) => BoxConstraints;
+}
+/**
+ * 类型守卫：检查对象是否通过 BoxConstraints 创建
+ */
+export declare function isBoxConstraints(value: any): value is BoxConstraints;
+export declare function boxConstraintsToStyle(constraints?: BoxConstraintsProps): CSSProperties;
+export {};

package/dist/BoxDecoration.d.ts

@@ -1,6 +1,9 @@
-import { BorderRadiusType } from './BorderRadius';
 import { CSSProperties } from 'vue';
+import { Alignment } from './Alignment';
 import { Borders } from './Border';
+import { BorderRadius } from './BorderRadius';
+import { BoxShadowProps } from './BoxShadow';
+export * from './Gradient';
 type Valueof<T> = T[keyof T];
 export type BoxFit = Valueof<typeof BoxFit>;
 export declare const BoxFit: {
@@ -13,31 +16,29 @@ export declare const BoxFit: {
     readonly scaleDown: "scaleDown";
 };
 export type ImageRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
-export type BorderRadiusValue = number | string;
-export type BorderRadius = BorderRadiusType;
 export type Overflow = "none" | "visible" | "hidden" | "scroll" | "auto";
-export type BoxAlignment = keyof typeof BoxAlignment | string;
+export type BoxAlignment = Alignment;
 export declare const BoxAlignment: {
+    readonly topLeft: "topLeft";
+    readonly topCenter: "topCenter";
+    readonly topRight: "topRight";
+    readonly centerLeft: "centerLeft";
     readonly center: "center";
-    readonly top: "top";
-    readonly bottom: "bottom";
-    readonly left: "left";
-    readonly right: "right";
-    readonly topLeft: "left top";
-    readonly topCenter: "center top";
-    readonly topRight: "right top";
-    readonly centerLeft: "left center";
-    readonly centerRight: "right center";
-    readonly bottomLeft: "left bottom";
-    readonly bottomCenter: "center bottom";
-    readonly bottomRight: "right bottom";
+    readonly centerRight: "centerRight";
+    readonly bottomLeft: "bottomLeft";
+    readonly bottomCenter: "bottomCenter";
+    readonly bottomRight: "bottomRight";
 };
+export declare enum BoxShape {
+    rectangle = "rectangle",
+    circle = "circle"
+}
 export declare function setBaseUrl(url: string): void;
 export declare function normalizeSrc(src: string): string;
 export type ImageProvider = string;
 export declare const NetworkImage: (url: string) => string;
 export declare const AssetImage: (url: string) => string;
-export interface DecorationImage {
+export interface DecorationImageProps {
     image: ImageProvider;
     fit?: BoxFit;
     alignment?: BoxAlignment;
@@ -47,34 +48,33 @@ export interface DecorationImage {
     clip?: string;
     origin?: string;
 }
-export declare function DecorationImage(props: DecorationImage): DecorationImage;
+export type DecorationImage = DecorationImageProps;
+export declare function DecorationImage(props: DecorationImageProps): DecorationImageProps;
 /**
  * BoxDecoration接口定义
  */
-export type BoxDecoration = {
+declare const BOX_DECORATION_SYMBOL: unique symbol;
+export type BoxDecorationProps = {
     color?: string;
     border?: Borders;
     borderRadius?: BorderRadius;
-    boxShadow?: BoxShadow | BoxShadow[];
+    boxShadow?: BoxShadowProps | BoxShadowProps[];
     gradient?: string;
-    image?: DecorationImage;
+    image?: DecorationImageProps;
     overflow?: Overflow;
-    opacity?: number | string;
+    opacity?: number;
+    shape?: BoxShape;
 };
-export interface BoxShadow {
-    color?: string;
-    offset?: {
-        x: number;
-        y: number;
-    };
-    blurRadius?: number;
-    spreadRadius?: number;
-    inset?: boolean;
-}
-export declare function decorationImageToStyle(di: DecorationImage): CSSProperties;
-export declare function boxDecorationToStyle(decoration?: BoxDecoration): CSSProperties;
-export declare function BoxDecoration(props?: BoxDecoration): BoxDecoration;
-export declare function LinearGradient(direction: string, ...colors: string[]): string;
+export type BoxDecoration = BoxDecorationProps & {
+    [BOX_DECORATION_SYMBOL]?: true;
+};
+export declare function decorationImageToStyle(di: DecorationImageProps): CSSProperties;
+export declare function boxDecorationToStyle(decoration?: BoxDecorationProps): CSSProperties;
+export declare function BoxDecoration(props?: BoxDecorationProps): BoxDecoration;
+/**
+ * 类型守卫：检查对象是否通过 BoxDecoration 构造函数创建
+ */
+export declare function isBoxDecoration(value: any): value is BoxDecoration;
 /**
  * Clip
  * 对应 Flutter 的 Clip
@@ -86,4 +86,3 @@ export declare const Clip: {
     readonly antiAliasWithSaveLayer: "antiAliasWithSaveLayer";
 };
 export type Clip = keyof typeof Clip;
-export {};

package/dist/BoxShadow.d.ts

@@ -0,0 +1,28 @@
+export interface Offset {
+    x: number;
+    y: number;
+}
+export declare enum BlurStyle {
+    normal = "normal",
+    solid = "solid",
+    outer = "outer",
+    inner = "inner"
+}
+export interface BoxShadowProps {
+    color?: string;
+    offset?: Offset;
+    blurRadius?: number;
+    spreadRadius?: number;
+    blurStyle?: BlurStyle;
+}
+declare const BOX_SHADOW_SYMBOL: unique symbol;
+export type BoxShadow = BoxShadowProps & {
+    [BOX_SHADOW_SYMBOL]?: true;
+};
+export declare function BoxShadow(props?: BoxShadowProps): BoxShadow;
+/**
+ * 类型守卫：检查对象是否通过 BoxShadow 构造函数创建
+ */
+export declare function isBoxShadow(value: any): value is BoxShadow;
+export declare function boxShadowToCSS(shadow: BoxShadowProps): string;
+export {};

package/dist/Container.d.ts

@@ -1,19 +1,19 @@
 import { BoxConstraints } from './BoxConstraints';
+import { Alignment } from './Alignment';
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
-import { FlexAlignment } from './FlexProps';
 interface Props {
-    width?: number | string;
-    height?: number | string;
+    width?: number;
+    height?: number;
     padding?: EdgeInsets;
     margin?: EdgeInsets;
     decoration?: BoxDecoration;
     foregroundDecoration?: BoxDecoration;
     color?: string;
-    alignment?: FlexAlignment | string;
+    alignment?: Alignment;
     clipBehavior?: "none" | "hardEdge" | "antiAlias" | string;
     transform?: string;
-    transformAlignment?: FlexAlignment | string;
+    transformAlignment?: Alignment;
     constraints?: BoxConstraints;
 }
 declare function __VLS_template(): {

package/dist/EdgeInsets.d.ts

@@ -1,19 +1,47 @@
-export interface EdgeInsets {
-    top?: number | string;
-    right?: number | string;
-    bottom?: number | string;
-    left?: number | string;
-    all?: number | string;
-    horizontal?: number | string;
-    vertical?: number | string;
+declare const EDGE_INSETS_SYMBOL: unique symbol;
+export interface EdgeInsetsProps {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    horizontal?: number;
+    vertical?: number;
 }
-export declare function EdgeInsets(edgeInsets: EdgeInsets): EdgeInsets;
-export declare function edgeInsetsToStyle(type: "margin" | "padding", edgeInsets: EdgeInsets | undefined): {
+export type EdgeInsets = EdgeInsetsProps & {
+    [EDGE_INSETS_SYMBOL]?: true;
+};
+export declare function EdgeInsets(edgeInsets: EdgeInsetsProps): EdgeInsets;
+export declare namespace EdgeInsets {
+    var all: (value: number) => {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        [EDGE_INSETS_SYMBOL]: true;
+    };
+    var symmetric: ({ vertical, horizontal }: {
+        vertical?: number;
+        horizontal?: number;
+    }) => EdgeInsets;
+    var only: ({ top, right, bottom, left, }: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    }) => EdgeInsets;
+    var zero: EdgeInsets;
+}
+/**
+ * 类型守卫：检查对象是否通过 EdgeInsets 创建
+ */
+export declare function isEdgeInsets(value: any): value is EdgeInsets;
+export declare function edgeInsetsToStyle(type: "margin" | "padding", edgeInsets: EdgeInsetsProps | undefined): {
     [x: string]: string;
 };
-export declare const paddingToStyle: (value?: EdgeInsets) => {
+export declare const paddingToStyle: (value?: EdgeInsetsProps) => {
     [x: string]: string;
 };
-export declare const marginToStyle: (value?: EdgeInsets) => {
+export declare const marginToStyle: (value?: EdgeInsetsProps) => {
     [x: string]: string;
 };
+export {};

package/dist/Expanded.d.ts

@@ -1,8 +1,8 @@
 interface Props {
     flex?: number;
     alignSelf?: "auto" | "start" | "end" | "center" | "stretch" | "baseline";
-    minSize?: number | string;
-    maxSize?: number | string;
+    minSize?: number;
+    maxSize?: number;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;