fluekit 2.0.1 → 2.1.0

package/README.md

@@ -60,21 +60,35 @@ import { Container, Column, Row, Text, SizedBox, Alignment, MainAxisAlignment }
 
 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):
+To enable this feature and configure the design width, wrap your application with `FlueConfigProvider`:
 
-```typescript
-import { setDefaultVW } from "fluekit";
+```vue
+<!-- App.vue -->
+<template>
+  <FlueConfigProvider
+    :transform="true"
+    :designWidth="750"
+    assetBaseURL="https://cdn.example.com/assets/"
+  >
+    <Root></Root>
+  </FlueConfigProvider>
+</template>
 
-// Call this in your main.ts or App.vue setup
-setDefaultVW(375);
+<script setup>
+import { FlueConfigProvider } from "fluekit";
+</script>
 ```
 
-To disable automatic conversion:
+#### Bypassing Conversion
+
+If you want to use exact pixel values without conversion, you can explicitly use the `px` unit string:
 
-```typescript
-import { setTransform } from "fluekit";
+```vue
+<!-- This will be converted to vw -->
+<Container :width="100" />
 
-setTransform(false); // Numbers will be treated as px
+<!-- This will remain exactly 100px -->
+<Container width="100px" />
 ```
 
 ## 🧩 Component Overview
@@ -98,6 +112,7 @@ setTransform(false); // Numbers will be treated as px
 ### Painting & Effects
 
 - **Opacity / AnimatedOpacity**: Makes its child partially transparent.
+- **BackdropFilter**: Applies a filter (e.g., blur) to the existing painted content.
 - **Transform**: Applies a transformation before painting its child.
 - **Decorations**: Rich styling support via `BoxDecoration` (borders, shadows, gradients, images).
 

package/dist/ActionChip.d.ts

@@ -0,0 +1,31 @@
+import { Component } from 'vue';
+import { Color } from './Color';
+interface Props {
+    label: string;
+    avatar?: Component;
+    backgroundColor?: string | Color;
+    labelColor?: string | Color;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        avatar?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    pressed: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onPressed?: (() => any) | undefined;
+}>, {
+    backgroundColor: string | Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/AlertDialog.d.ts

@@ -21,12 +21,16 @@ interface Props {
     titleStyle?: TextStyle;
     titleColor?: string;
     titleFontSize?: number;
+    variant?: "material" | "ios";
+    okText?: string;
+    cancelText?: string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
         actions?(_: {}): any;
+        actions?(_: {}): any;
     };
     refs: {};
     rootEl: any;
@@ -43,9 +47,12 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }>, {
     alignment: Alignment;
     visible: boolean;
+    variant: "material" | "ios";
     barrierDismissible: boolean;
     barrierColor: string;
     actionsAlignment: MainAxisAlignment;
+    okText: string;
+    cancelText: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/AnimatedContainer.d.ts

@@ -2,6 +2,7 @@ import { BoxConstraints } from './BoxConstraints';
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
 import { Alignment } from './FlexProps';
+import { Color } from './Color';
 interface Props {
     width?: number | string;
     height?: number | string;
@@ -9,7 +10,7 @@ interface Props {
     margin?: EdgeInsets;
     decoration?: BoxDecoration;
     foregroundDecoration?: BoxDecoration;
-    color?: string;
+    color?: string | Color;
     alignment?: Alignment | string;
     clipBehavior?: "none" | "hardEdge" | "antiAlias" | string;
     transform?: string;

package/dist/AppBar.d.ts

@@ -1,7 +1,8 @@
 import { EdgeInsets } from './EdgeInsets';
+import { Color } from './Color';
 export interface AppBarProps {
     title?: string;
-    backgroundColor?: string;
+    backgroundColor?: string | Color;
     height?: number;
     centerTitle?: boolean;
     elevation?: number;
@@ -20,7 +21,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<AppBarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AppBarProps> & Readonly<{}>, {
     height: number;
-    backgroundColor: string;
+    backgroundColor: string | Color;
     elevation: number;
     centerTitle: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/BackdropFilter.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'vue';
+import { ImageFilter } from './ImageFilter';
+interface Props {
+    filter: ImageFilter | string;
+    blendMode?: CSSProperties["mixBlendMode"];
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+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<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Border.d.ts

@@ -1,10 +1,11 @@
 import { CSSProperties } from 'vue';
+import { Color } from './Color';
 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;
-    color?: string;
+    color?: string | Color;
     style?: BorderStyleType;
     [BORDER_SIDE_SYMBOL]?: true;
 };
@@ -19,7 +20,7 @@ export declare function BorderSide(side: Omit<BorderSide, typeof BORDER_SIDE_SYM
 export interface BorderFunction {
     (side: Omit<BorderSide, typeof BORDER_SIDE_SYMBOL>): BorderSide;
     all: (options?: {
-        color?: string;
+        color?: string | Color;
         width?: number | string;
         style?: BorderStyleType;
     }) => Borders;

package/dist/Box.d.ts

@@ -5,6 +5,7 @@ import { EdgeInsets } from './EdgeInsets';
 import { Borders } from './Border';
 import { BorderRadius } from './BorderRadius';
 import { BoxShadow } from './BoxShadow';
+import { Color } from './Color';
 interface Props {
     width?: number | string;
     height?: number | string;
@@ -15,7 +16,7 @@ interface Props {
     transformAlignment?: Alignment;
     constraints?: BoxConstraints;
     clipBehavior?: "none" | "hardEdge" | "antiAlias" | string;
-    color?: string;
+    color?: string | Color;
     border?: Borders;
     borderRadius?: BorderRadius;
     boxShadow?: BoxShadow[];

package/dist/BoxDecoration.d.ts

@@ -3,19 +3,12 @@ import { Alignment } from './Alignment';
 import { Borders } from './Border';
 import { BorderRadius } from './BorderRadius';
 import { BoxShadowProps } from './BoxShadow';
+import { Color } from './Color';
+import { ImageFilter } from './ImageFilter';
+import { BoxFit } from './BoxFit';
 import { ImageProvider } from './ImageProvider';
 export * from './Gradient';
-type Valueof<T> = T[keyof T];
-export type BoxFit = Valueof<typeof BoxFit>;
-export declare const BoxFit: {
-    readonly fitWidth: "fitWidth";
-    readonly fitHeight: "fitHeight";
-    readonly fill: "fill";
-    readonly contain: "contain";
-    readonly cover: "cover";
-    readonly none: "none";
-    readonly scaleDown: "scaleDown";
-};
+export { Clip } from './Clip';
 export type ImageRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
 export type Overflow = "none" | "visible" | "hidden" | "scroll" | "auto";
 export type BoxAlignment = Alignment;
@@ -34,7 +27,6 @@ export declare enum BoxShape {
     rectangle = "rectangle",
     circle = "circle"
 }
-export declare function setBaseUrl(url: string): void;
 export declare function normalizeSrc(src: string): string;
 export interface DecorationImageProps {
     image: ImageProvider | string;
@@ -53,7 +45,7 @@ export declare function DecorationImage(props: DecorationImageProps): Decoration
  */
 declare const BOX_DECORATION_SYMBOL: unique symbol;
 export type BoxDecorationProps = {
-    color?: string;
+    color?: string | Color;
     border?: Borders;
     borderRadius?: BorderRadius;
     boxShadow?: BoxShadowProps | BoxShadowProps[];
@@ -62,6 +54,7 @@ export type BoxDecorationProps = {
     overflow?: Overflow;
     opacity?: number;
     shape?: BoxShape;
+    backdropFilter?: ImageFilter | string;
 };
 export type BoxDecoration = BoxDecorationProps & {
     [BOX_DECORATION_SYMBOL]?: true;
@@ -73,14 +66,3 @@ export declare function BoxDecoration(props?: BoxDecorationProps): BoxDecoration
  * 类型守卫：检查对象是否通过 BoxDecoration 构造函数创建
  */
 export declare function isBoxDecoration(value: any): value is BoxDecoration;
-/**
- * Clip
- * 对应 Flutter 的 Clip
- */
-export declare const Clip: {
-    readonly none: "none";
-    readonly hardEdge: "hardEdge";
-    readonly antiAlias: "antiAlias";
-    readonly antiAliasWithSaveLayer: "antiAliasWithSaveLayer";
-};
-export type Clip = keyof typeof Clip;

package/dist/BoxFit.d.ts

@@ -0,0 +1,12 @@
+export declare const BoxFit: {
+    readonly fitWidth: "fitWidth";
+    readonly fitHeight: "fitHeight";
+    readonly fill: "fill";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly none: "none";
+    readonly scaleDown: "scaleDown";
+};
+type Valueof<T> = T[keyof T];
+export type BoxFit = Valueof<typeof BoxFit>;
+export {};

package/dist/BoxShadow.d.ts

@@ -1,3 +1,4 @@
+import { Color } from './Color';
 export interface Offset {
     x: number;
     y: number;
@@ -9,7 +10,7 @@ export declare enum BlurStyle {
     inner = "inner"
 }
 export interface BoxShadowProps {
-    color?: string;
+    color?: string | Color;
     offset?: Offset;
     blurRadius?: number;
     spreadRadius?: number;

package/dist/Button.d.ts

@@ -1,15 +1,16 @@
+import { BorderRadius } from './BorderRadius';
 import { ButtonStyle } from './ButtonStyle';
-import { Behavior } from './useGesture';
+import { Color } from './Color';
 import { EdgeInsets } from './EdgeInsets';
-import { BorderRadius } from './BorderRadius';
+import { Behavior } from './useGesture';
 interface Props {
     disabled?: boolean;
     behavior?: Behavior;
     text?: string;
     style?: ButtonStyle;
     variant?: "ios" | "raw";
-    color?: string;
-    disabledColor?: string;
+    color?: string | Color;
+    disabledColor?: string | Color;
     pressedOpacity?: number;
     padding?: EdgeInsets;
     borderRadius?: BorderRadius;
@@ -38,7 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }>, {
     disabled: boolean;
     behavior: Behavior;
-    disabledColor: string;
+    disabledColor: string | Color;
     pressedOpacity: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/ButtonStyle.d.ts

@@ -5,12 +5,13 @@ import { BorderRadius } from './BorderRadius';
 import { EdgeInsets } from './EdgeInsets';
 import { SizeType } from './Size';
 import { TextStyle } from './TextStyle';
+import { Color } from './Color';
 export interface ButtonStyle {
     textStyle?: TextStyle;
-    backgroundColor?: string;
-    foregroundColor?: string;
-    overlayColor?: string;
-    shadowColor?: string;
+    backgroundColor?: string | Color;
+    foregroundColor?: string | Color;
+    overlayColor?: string | Color;
+    shadowColor?: string | Color;
     elevation?: number;
     padding?: EdgeInsets;
     minimumSize?: SizeType;

package/dist/Card.d.ts

@@ -1,8 +1,9 @@
 import { BorderRadius } from './BorderRadius';
 import { EdgeInsets } from './EdgeInsets';
+import { Color } from './Color';
 interface Props {
-    color?: string;
-    shadowColor?: string;
+    color?: string | Color;
+    shadowColor?: string | Color;
     elevation?: number;
     shape?: BorderRadius;
     margin?: EdgeInsets;
@@ -20,12 +21,12 @@ 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<{}>, {
-    color: string;
+    color: string | Color;
     margin: EdgeInsets;
     clipBehavior: "none" | "hardEdge" | "antiAlias" | string;
     elevation: number;
     variant: "material" | "ios";
-    shadowColor: string;
+    shadowColor: string | Color;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Checkbox.d.ts

@@ -1,8 +1,9 @@
+import { Color } from './Color';
 export interface CheckboxProps<T> {
     value?: T;
     onChanged?: (value: T) => void;
-    activeColor?: string;
-    checkColor?: string;
+    activeColor?: string | Color;
+    checkColor?: string | Color;
     labelPosition?: "left" | "right";
     hideIcon?: boolean;
 }

package/dist/Chip.d.ts

@@ -0,0 +1,36 @@
+import { Component } from 'vue';
+import { Color } from './Color';
+interface Props {
+    label: string;
+    avatar?: Component;
+    backgroundColor?: string | Color;
+    labelColor?: string | Color;
+    deletable?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        avatar?(_: {}): any;
+        deleteIcon?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    delete: () => any;
+    pressed: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    onPressed?: (() => any) | undefined;
+}>, {
+    backgroundColor: string | Color;
+    labelColor: string | Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ChoiceChip.d.ts

@@ -0,0 +1,35 @@
+import { Component } from 'vue';
+import { Color } from './Color';
+interface Props {
+    label: string;
+    selected: boolean;
+    avatar?: Component;
+    backgroundColor?: string | Color;
+    selectedColor?: string | Color;
+    labelColor?: string | Color;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        avatar?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    selected: (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSelected?: ((value: boolean) => any) | undefined;
+}>, {
+    backgroundColor: string | Color;
+    selected: boolean;
+    selectedColor: string | Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/CircleAvatar.d.ts

@@ -0,0 +1,29 @@
+import { Color } from './Color';
+interface Props {
+    backgroundImage?: string;
+    backgroundColor?: string | Color;
+    foregroundColor?: string | Color;
+    radius?: number;
+    minRadius?: number;
+    maxRadius?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    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<{}>, {
+    backgroundColor: string | Color;
+    foregroundColor: string | Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/CircularProgressIndicator.d.ts

@@ -25,8 +25,8 @@ interface Props {
     size?: number;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: number;
     color: string | Color;
+    size: number;
     value: number | null;
     strokeWidth: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/Clip.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Clip
+ * 对应 Flutter 的 Clip
+ */
+export declare const Clip: {
+    readonly none: "none";
+    readonly hardEdge: "hardEdge";
+    readonly antiAlias: "antiAlias";
+    readonly antiAliasWithSaveLayer: "antiAliasWithSaveLayer";
+};
+export type Clip = keyof typeof Clip;

package/dist/Color.d.ts

@@ -87,6 +87,13 @@ export declare class Color {
      */
     get value(): number;
 }
+/**
+ * Resolves a color value to a CSS string.
+ *
+ * @param color A string color, a Color object, or undefined/null.
+ * @returns The CSS string representation or undefined.
+ */
+export declare function resolveColor(color: string | Color | undefined | null): string | undefined;
 export declare function withOpacity(color: string | Color, opacity: number): string;
 export declare function withAlpha(color: string | Color, alpha: number): string;
 export declare function withRed(color: string | Color, red: number): string;

package/dist/Colors.d.ts

@@ -6,7 +6,7 @@ export declare const Colors: {
     withGreen: (color: Color | string, green: number) => Color;
     withBlue: (color: Color | string, blue: number) => Color;
     computeLuminance: (color: Color | string) => number;
-    lighten: (color: Color | string, amount: number) => Color;
+    lighten: (color: Color | string, amount: number) => string;
     transparent: Color;
     black: Color;
     black87: Color;

package/dist/Container.d.ts

@@ -2,6 +2,7 @@ import { BoxConstraints } from './BoxConstraints';
 import { Alignment } from './Alignment';
 import { BoxDecoration } from './BoxDecoration';
 import { EdgeInsets } from './EdgeInsets';
+import { Color } from './Color';
 interface Props {
     width?: number | string;
     height?: number | string;
@@ -9,7 +10,7 @@ interface Props {
     margin?: EdgeInsets;
     decoration?: BoxDecoration;
     foregroundDecoration?: BoxDecoration;
-    color?: string;
+    color?: string | Color;
     alignment?: Alignment;
     clipBehavior?: "none" | "hardEdge" | "antiAlias" | string;
     transform?: string;

package/dist/CupertinoActivityIndicator.d.ts

@@ -17,7 +17,7 @@ interface Props {
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     color: string | Color;
-    radius: number;
     animating: boolean;
+    radius: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/CupertinoColors.d.ts

@@ -6,8 +6,8 @@ export declare const CupertinoColors: {
     withGreen: (color: Color | string, green: number) => Color;
     withBlue: (color: Color | string, blue: number) => Color;
     computeLuminance: (color: Color | string) => number;
-    lighten: (color: Color | string, amount: number) => Color;
-    darken: (color: Color | string, amount: number) => Color;
+    lighten: (color: Color | string, amount: number) => string;
+    darken: (color: Color | string, amount: number) => string;
     activeBlue: Color;
     activeGreen: Color;
     activeOrange: Color;

package/dist/CupertinoContextMenu.d.ts

@@ -13,15 +13,11 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {
-        anchorRef: HTMLDivElement;
-    };
+    refs: {};
     rootEl: HTMLDivElement;
 };
 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<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    anchorRef: HTMLDivElement;
-}, HTMLDivElement>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/CupertinoNavigationBar.d.ts

@@ -1,8 +1,9 @@
 import { EdgeInsets } from './EdgeInsets';
 import { Borders } from './Border';
+import { Color } from './Color';
 export interface CupertinoNavigationBarProps {
     middle?: string;
-    backgroundColor?: string;
+    backgroundColor?: string | Color;
     border?: Borders | null;
     padding?: EdgeInsets;
 }
@@ -19,7 +20,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<CupertinoNavigationBarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CupertinoNavigationBarProps> & Readonly<{}>, {
     border: Borders | null;
-    backgroundColor: string;
+    backgroundColor: string | Color;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/CupertinoPageScaffold.d.ts

@@ -1,5 +1,6 @@
+import { Color } from './Color';
 export interface CupertinoPageScaffoldProps {
-    backgroundColor?: string;
+    backgroundColor?: string | Color;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -13,7 +14,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<CupertinoPageScaffoldProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CupertinoPageScaffoldProps> & Readonly<{}>, {
-    backgroundColor: string;
+    backgroundColor: string | Color;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;