@vetc-miniapp/ui-react 0.0.23 → 0.0.25

package/dist/tokens/colors.d.ts

@@ -0,0 +1,127 @@
+/**
+ * VETC Design System — Color Tokens
+ * Resolved from tokens_vetc.json
+ */
+export declare const colorGlobal: {
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly blue02: "#f4fbff";
+    readonly blue05: "#e4f4ff";
+    readonly blue10: "#cae9ff";
+    readonly blue15: "#afddff";
+    readonly blue20: "#95d1ff";
+    readonly blue25: "#7ac4fb";
+    readonly blue30: "#60b6f4";
+    readonly blue35: "#45a8eb";
+    readonly blue40: "#2b99df";
+    readonly blue45: "#108ad1";
+    readonly blue50: "#007ac1";
+    readonly blue60: "#005c9e";
+    readonly blue70: "#004179";
+    readonly blue80: "#002853";
+    readonly blue90: "#00122a";
+    readonly green02: "#f2fef2";
+    readonly green05: "#dffbdf";
+    readonly green10: "#bff4bf";
+    readonly green15: "#9feca7";
+    readonly green20: "#82e194";
+    readonly green25: "#68d583";
+    readonly green30: "#50c775";
+    readonly green35: "#39b669";
+    readonly green40: "#25a45e";
+    readonly green45: "#23965b";
+    readonly green50: "#208758";
+    readonly green60: "#1b6b4d";
+    readonly green70: "#15503f";
+    readonly green80: "#0f342d";
+    readonly green90: "#081a18";
+    readonly gray02: "#f9fafa";
+    readonly gray05: "#f1f1f2";
+    readonly gray10: "#e3e4e6";
+    readonly gray15: "#d4d6d9";
+    readonly gray20: "#c6c8cc";
+    readonly gray25: "#b8babf";
+    readonly gray30: "#abacb2";
+    readonly gray35: "#9d9ea5";
+    readonly gray40: "#8f9098";
+    readonly gray45: "#82828a";
+    readonly gray50: "#74747d";
+    readonly gray60: "#5e5d64";
+    readonly gray70: "#47464b";
+    readonly gray80: "#2f2f32";
+    readonly gray90: "#181719";
+    readonly red02: "#fff6f9";
+    readonly red05: "#ffe7f0";
+    readonly red10: "#ffd0de";
+    readonly red15: "#ffb8cc";
+    readonly red20: "#ffa1b8";
+    readonly red25: "#ff89a3";
+    readonly red30: "#fb718d";
+    readonly red35: "#f55c78";
+    readonly red40: "#ee4b62";
+    readonly red45: "#e53b4d";
+    readonly red50: "#da2c39";
+    readonly red60: "#b4211f";
+    readonly red70: "#852419";
+    readonly red80: "#571f12";
+    readonly red90: "#2b130a";
+    readonly orange02: "#fffbf0";
+    readonly orange05: "#fff3da";
+    readonly orange10: "#ffe3b4";
+    readonly orange15: "#ffd08f";
+    readonly orange20: "#ffbb69";
+    readonly orange25: "#ffa447";
+    readonly orange30: "#ff8c2f";
+    readonly orange35: "#ef7720";
+    readonly orange40: "#dd6e1d";
+    readonly orange45: "#cb651b";
+    readonly orange50: "#b85c18";
+    readonly orange60: "#934913";
+    readonly orange70: "#6f370f";
+    readonly orange80: "#4a250a";
+    readonly orange90: "#251205";
+    readonly yellow02: "#fff8e7";
+    readonly yellow05: "#ffefbc";
+    readonly yellow10: "#ffe374";
+    readonly yellow15: "#ffd62b";
+    readonly yellow20: "#f9c600";
+    readonly yellow25: "#e9b900";
+    readonly yellow30: "#daaa00";
+    readonly yellow35: "#ca9b00";
+    readonly yellow40: "#bb8b00";
+    readonly yellow45: "#ab7b00";
+    readonly yellow50: "#9c6b00";
+    readonly yellow60: "#7c4b00";
+    readonly yellow70: "#5d2f00";
+    readonly yellow80: "#3e1800";
+    readonly yellow90: "#1f0700";
+};
+export declare const colorAlias: {
+    readonly brand: "#25a45e";
+    readonly brandDark: "#208758";
+    readonly brandLight: "#dffbdf";
+    readonly positive: "#208758";
+    readonly positiveVariant: "#dffbdf";
+    readonly onPositive: "#ffffff";
+    readonly onPositiveVariant: "#1b6b4d";
+    readonly negative: "#da2c39";
+    readonly onNegative: "#ffffff";
+    readonly warning: "#ff8c2f";
+    readonly onWarning: "#ffffff";
+    readonly outline: "#74747d";
+    readonly outlineVariant: "#e3e4e6";
+    readonly outlineInverse: "#8f9098";
+    readonly theme: "#ffffff";
+    readonly themeVariant: "#f1f1f2";
+    readonly inverseTheme: "#181719";
+    readonly primaryOnTheme: "#181719";
+    readonly secondaryOnTheme: "#5e5d64";
+    readonly primaryOnInverseTheme: "#ffffff";
+    readonly secondaryOnInverseTheme: "#c6c8cc";
+    readonly disabledBackground: "#e3e4e6";
+    readonly disabledContent: "#abacb2";
+    readonly disabledOutline: "#c6c8cc";
+    readonly overlay: "rgba(0, 0, 0, 0.4)";
+    readonly overlayVariant: "rgba(0, 0, 0, 0.16)";
+    readonly skeleton: "rgba(0, 0, 0, 0.1)";
+};

package/dist/tokens/colors.js

@@ -0,0 +1,75 @@
+/**
+ * VETC Design System — Color Tokens
+ * Resolved from tokens_vetc.json
+ */
+// ─── Global palette ───────────────────────────────────────────────────────────
+export const colorGlobal = {
+    white: '#ffffff',
+    black: '#000000',
+    // Blue
+    blue02: '#f4fbff', blue05: '#e4f4ff', blue10: '#cae9ff',
+    blue15: '#afddff', blue20: '#95d1ff', blue25: '#7ac4fb',
+    blue30: '#60b6f4', blue35: '#45a8eb', blue40: '#2b99df',
+    blue45: '#108ad1', blue50: '#007ac1', blue60: '#005c9e',
+    blue70: '#004179', blue80: '#002853', blue90: '#00122a',
+    // Green (Brand)
+    green02: '#f2fef2', green05: '#dffbdf', green10: '#bff4bf',
+    green15: '#9feca7', green20: '#82e194', green25: '#68d583',
+    green30: '#50c775', green35: '#39b669', green40: '#25a45e',
+    green45: '#23965b', green50: '#208758', green60: '#1b6b4d',
+    green70: '#15503f', green80: '#0f342d', green90: '#081a18',
+    // Gray
+    gray02: '#f9fafa', gray05: '#f1f1f2', gray10: '#e3e4e6',
+    gray15: '#d4d6d9', gray20: '#c6c8cc', gray25: '#b8babf',
+    gray30: '#abacb2', gray35: '#9d9ea5', gray40: '#8f9098',
+    gray45: '#82828a', gray50: '#74747d', gray60: '#5e5d64',
+    gray70: '#47464b', gray80: '#2f2f32', gray90: '#181719',
+    // Red
+    red02: '#fff6f9', red05: '#ffe7f0', red10: '#ffd0de',
+    red15: '#ffb8cc', red20: '#ffa1b8', red25: '#ff89a3',
+    red30: '#fb718d', red35: '#f55c78', red40: '#ee4b62',
+    red45: '#e53b4d', red50: '#da2c39', red60: '#b4211f',
+    red70: '#852419', red80: '#571f12', red90: '#2b130a',
+    // Orange
+    orange02: '#fffbf0', orange05: '#fff3da', orange10: '#ffe3b4',
+    orange15: '#ffd08f', orange20: '#ffbb69', orange25: '#ffa447',
+    orange30: '#ff8c2f', orange35: '#ef7720', orange40: '#dd6e1d',
+    orange45: '#cb651b', orange50: '#b85c18', orange60: '#934913',
+    orange70: '#6f370f', orange80: '#4a250a', orange90: '#251205',
+    // Yellow
+    yellow02: '#fff8e7', yellow05: '#ffefbc', yellow10: '#ffe374',
+    yellow15: '#ffd62b', yellow20: '#f9c600', yellow25: '#e9b900',
+    yellow30: '#daaa00', yellow35: '#ca9b00', yellow40: '#bb8b00',
+    yellow45: '#ab7b00', yellow50: '#9c6b00', yellow60: '#7c4b00',
+    yellow70: '#5d2f00', yellow80: '#3e1800', yellow90: '#1f0700',
+};
+// ─── Semantic alias tokens ─────────────────────────────────────────────────────
+export const colorAlias = {
+    brand: colorGlobal.green40, // #25a45e
+    brandDark: colorGlobal.green50, // #208758
+    brandLight: colorGlobal.green05, // #dffbdf
+    positive: colorGlobal.green50, // #208758
+    positiveVariant: colorGlobal.green05, // #dffbdf
+    onPositive: colorGlobal.white,
+    onPositiveVariant: colorGlobal.green60,
+    negative: colorGlobal.red50, // #da2c39
+    onNegative: colorGlobal.white,
+    warning: colorGlobal.orange30, // #ff8c2f
+    onWarning: colorGlobal.white,
+    outline: colorGlobal.gray50, // #74747d
+    outlineVariant: colorGlobal.gray10, // #e3e4e6
+    outlineInverse: colorGlobal.gray40,
+    theme: colorGlobal.white,
+    themeVariant: colorGlobal.gray05, // #f1f1f2
+    inverseTheme: colorGlobal.gray90,
+    primaryOnTheme: colorGlobal.gray90, // #181719
+    secondaryOnTheme: colorGlobal.gray60, // #5e5d64
+    primaryOnInverseTheme: colorGlobal.white,
+    secondaryOnInverseTheme: colorGlobal.gray20,
+    disabledBackground: colorGlobal.gray10, // #e3e4e6
+    disabledContent: colorGlobal.gray30, // #abacb2
+    disabledOutline: colorGlobal.gray20,
+    overlay: 'rgba(0, 0, 0, 0.4)',
+    overlayVariant: 'rgba(0, 0, 0, 0.16)',
+    skeleton: 'rgba(0, 0, 0, 0.1)',
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';

package/dist/tokens/index.js

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,56 @@
+/**
+ * VETC Design System — Spacing & Sizing Tokens
+ * Base unit: 4px
+ */
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "1px";
+    readonly 2: "2px";
+    readonly 4: "4px";
+    readonly 6: "6px";
+    readonly 8: "8px";
+    readonly 10: "10px";
+    readonly 12: "12px";
+    readonly 14: "14px";
+    readonly 16: "16px";
+    readonly 20: "20px";
+    readonly 24: "24px";
+    readonly 32: "32px";
+    readonly 40: "40px";
+    readonly 48: "48px";
+    readonly 56: "56px";
+    readonly 64: "64px";
+    readonly 72: "72px";
+    readonly 80: "80px";
+};
+export declare const borderRadius: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "24px";
+    readonly pill: "1000px";
+};
+/** Component height standards from Figma */
+export declare const componentHeight: {
+    readonly buttonLg: "48px";
+    readonly buttonSm: "32px";
+    readonly input: "48px";
+    readonly navBar: "56px";
+    readonly bottomNav: "56px";
+    readonly tabBar: "56px";
+    readonly listItem: "56px";
+    readonly chip: "32px";
+    readonly chipSm: "24px";
+    readonly iconStd: "24px";
+    readonly iconSm: "20px";
+};
+/** Shadow tokens */
+export declare const shadow: {
+    readonly none: "none";
+    readonly sm: "0 1px 4px rgba(0, 0, 0, 0.08)";
+    readonly md: "0 2px 8px rgba(0, 0, 0, 0.12)";
+    readonly lg: "0 4px 16px rgba(0, 0, 0, 0.16)";
+};

package/dist/tokens/spacing.js

@@ -0,0 +1,56 @@
+/**
+ * VETC Design System — Spacing & Sizing Tokens
+ * Base unit: 4px
+ */
+export const spacing = {
+    0: '0px',
+    1: '1px',
+    2: '2px',
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    10: '10px',
+    12: '12px',
+    14: '14px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    32: '32px',
+    40: '40px',
+    48: '48px',
+    56: '56px',
+    64: '64px',
+    72: '72px',
+    80: '80px',
+};
+export const borderRadius = {
+    none: '0px',
+    xs: '4px',
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    '2xl': '24px',
+    pill: '1000px',
+};
+/** Component height standards from Figma */
+export const componentHeight = {
+    buttonLg: '48px',
+    buttonSm: '32px',
+    input: '48px',
+    navBar: '56px',
+    bottomNav: '56px',
+    tabBar: '56px',
+    listItem: '56px',
+    chip: '32px',
+    chipSm: '24px',
+    iconStd: '24px',
+    iconSm: '20px',
+};
+/** Shadow tokens */
+export const shadow = {
+    none: 'none',
+    sm: '0 1px 4px rgba(0, 0, 0, 0.08)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.12)',
+    lg: '0 4px 16px rgba(0, 0, 0, 0.16)',
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,121 @@
+/**
+ * VETC Design System — Typography Tokens
+ * From Figma: Tasco DLS Mini App — Typography page
+ * Font weights: Regular=400, Medium=500, SemiBold=600, Bold=700
+ * Font sizes: 2XS=10 / XS=12 / SM=14 / Base=16 / LG=20 / XL=24 / 2XL=28 / 3XL=32 / 4XL=36
+ */
+export declare const fontFamily: {
+    readonly primary: "\"Roboto\", system-ui, -apple-system, sans-serif";
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly black: 900;
+};
+/** Font sizes from Figma Typography scale */
+export declare const fontSize: {
+    readonly '2xs': "10px";
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly base: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
+    readonly '2xl': "28px";
+    readonly '3xl': "32px";
+    readonly '4xl': "36px";
+};
+/** Line heights from Figma (pixel ratios per size) */
+export declare const lineHeight: {
+    readonly tight: "120%";
+    readonly normal: "140%";
+    readonly relaxed: "150%";
+};
+export declare const letterSpacing: {
+    readonly none: "0";
+    readonly sm: "0.1px";
+    readonly md: "0.25px";
+    readonly lg: "0.5px";
+};
+/** Typography style presets — Figma: Display=bold(700), Headline/Title/Label=semibold(600), Body=regular(400) */
+export declare const textStyle: {
+    readonly display4xl: {
+        readonly fontSize: "36px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly display3xl: {
+        readonly fontSize: "32px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly display2xl: {
+        readonly fontSize: "28px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly headlineXl: {
+        readonly fontSize: "24px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "140%";
+    };
+    readonly headlineLg: {
+        readonly fontSize: "20px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "140%";
+    };
+    readonly titleBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly titleSm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly labelBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+    };
+    readonly labelSm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly labelXs: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly bodyBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly bodySm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.25px";
+    };
+    readonly bodyXs: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly body2xs: {
+        readonly fontSize: "10px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+};

package/dist/tokens/typography.js

@@ -0,0 +1,57 @@
+/**
+ * VETC Design System — Typography Tokens
+ * From Figma: Tasco DLS Mini App — Typography page
+ * Font weights: Regular=400, Medium=500, SemiBold=600, Bold=700
+ * Font sizes: 2XS=10 / XS=12 / SM=14 / Base=16 / LG=20 / XL=24 / 2XL=28 / 3XL=32 / 4XL=36
+ */
+export const fontFamily = {
+    primary: '"Roboto", system-ui, -apple-system, sans-serif',
+};
+export const fontWeight = {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900,
+};
+/** Font sizes from Figma Typography scale */
+export const fontSize = {
+    '2xs': '10px', // 2X-Small
+    xs: '12px', // X-Small
+    sm: '14px', // Small
+    base: '16px', // Base
+    lg: '20px', // Large
+    xl: '24px', // X-Large
+    '2xl': '28px', // 2X-Large
+    '3xl': '32px', // 3X-Large
+    '4xl': '36px', // 4X-Large
+};
+/** Line heights from Figma (pixel ratios per size) */
+export const lineHeight = {
+    tight: '120%', // display: 36→44 ≈ 122%
+    normal: '140%', // heading: 20→28 = 140%
+    relaxed: '150%', // body/label: 16→24 = 150%
+};
+export const letterSpacing = {
+    none: '0',
+    sm: '0.1px',
+    md: '0.25px',
+    lg: '0.5px',
+};
+/** Typography style presets — Figma: Display=bold(700), Headline/Title/Label=semibold(600), Body=regular(400) */
+export const textStyle = {
+    display4xl: { fontSize: fontSize['4xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    display3xl: { fontSize: fontSize['3xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    display2xl: { fontSize: fontSize['2xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    headlineXl: { fontSize: fontSize.xl, fontWeight: fontWeight.bold, lineHeight: lineHeight.normal },
+    headlineLg: { fontSize: fontSize.lg, fontWeight: fontWeight.semibold, lineHeight: lineHeight.normal },
+    titleBase: { fontSize: fontSize.base, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    titleSm: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    labelBase: { fontSize: fontSize.base, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed },
+    labelSm: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    labelXs: { fontSize: fontSize.xs, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    bodyBase: { fontSize: fontSize.base, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    bodySm: { fontSize: fontSize.sm, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.md },
+    bodyXs: { fontSize: fontSize.xs, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    body2xs: { fontSize: fontSize['2xs'], fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+};

package/dist/types/app.d.ts

@@ -0,0 +1,21 @@
+export type IAppConfig = {
+    pages: IPageConfig[];
+} & IAppState;
+export type IAppState = {
+    locale?: string;
+    theme?: "light" | "dark";
+};
+export type IPageConfig = {
+    /** Key định danh page dùng cho navigation */
+    key: string;
+    /** Tên hiển thị (optional, dùng cho header native) */
+    title?: string;
+    page: React.ComponentType<any>;
+    url: string;
+    /** Có cho phép back không */
+    canGoBack?: boolean;
+    /** Có phải root page không */
+    isRoot?: boolean;
+    /** Params mặc định khi mở page */
+    defaultParams?: Record<string, unknown>;
+};

package/dist/types/app.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "MiniApp Platform UI React",
-  "main": "src/ui-react/index.js",
-  "types": "src/ui-react/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/tokens.css"
+  },
   "type": "module",
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
-    "build": "webpack"
+    "build": "tsc -p tsconfig.build.json && cp src/ui-react/styles/tokens.css dist/styles/tokens.css"
   },
   "keywords": [
     "miniapp",
@@ -20,6 +28,7 @@
   "author": "Hieuth052@gmail.com",
   "license": "MIT",
   "devDependencies": {
+    "@ant-design/icons": "^6.2.2",
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
@@ -28,14 +37,21 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^25.2.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "antd": "^6.3.7",
     "babel-loader": "^10.0.0",
+    "css-loader": "^7.1.4",
+    "html-webpack-plugin": "^5.6.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^4.57.1",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",
     "webpack": "^5.104.1",
     "webpack-cli": "^6.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "webpack-dev-server": "^5.2.3"
   },
   "dependencies": {
     "acorn": "^8.15.0",
@@ -49,7 +65,9 @@
     "webpack-sources": "^3.3.3"
   },
   "peerDependencies": {
+    "@ant-design/icons": ">=5.0.0",
+    "antd": ">=5.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   }
-}
+}

package/src/dist/ui-react/index.js

@@ -1,2 +0,0 @@
-/*! For license information please see index.js.LICENSE.txt */
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=e(require("react")):n["vetc-miniapp/ui-react"]=e(n.react)}(this,n=>(()=>{"use strict";var e={155(e){e.exports=n},698(n,e){var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(n,e,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==e.key&&(o=""+e.key),"key"in e)for(var i in t={},e)"key"!==i&&(t[i]=e[i]);else t=e;return e=t.ref,{$$typeof:r,type:n,key:o,ref:void 0!==e?e:null,props:t}}e.Fragment=t,e.jsx=o,e.jsxs=o},848(n,e,r){n.exports=r(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var i=r[n]={exports:{}};return e[n](i,i.exports,t),i.exports}t.d=(n,e)=>{for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{App:()=>x,appConfig:()=>h,useAppPause:()=>u,useAppResume:()=>a,useDidHide:()=>f,useDidShow:()=>c,useListenerScanQr:()=>m,useNavigate:()=>y});var i=t(155);function u(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppPause error]",n)}};return window.MiniApp.on("appPause",n),function(){window.MiniApp.off("appPause",n)}}},[])}function a(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if(console.warn("MiniApp: useAppResume"),"undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppResume error]",n)}};return window.MiniApp.on("appResume",n),function(){window.MiniApp.off("appResume",n)}}},[])}function c(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(console.log("didShow",e),null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didShow",e),function(){window.MiniApp.off("didShow",e)}}},[n])}function f(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didHide",e),function(){window.MiniApp.off("didHide",e)}}},[n])}function p(){var n,e,r="function"==typeof Symbol?Symbol:{},t=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,t,o,i){var c=t&&t.prototype instanceof a?t:a,f=Object.create(c.prototype);return l(f,"_invoke",function(r,t,o){var i,a,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:n,a:d,f:d.bind(n,4),d:function(e,r){return i=e,a=0,c=n,s.n=r,u}};function d(r,t){for(a=r,c=t,e=0;!l&&f&&!o&&e<p.length;e++){var o,i=p[e],d=s.p,v=i[2];r>3?(o=v===t)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=n):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,s.v=t,s.n=i[1]):d<v&&(o=r<3||i[0]>t||t>v)&&(i[4]=r,i[5]=t,s.n=v,a=0))}if(o||r>1)return u;throw l=!0,t}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,v),a=p,c=v;(e=a<2?n:c)||!l;){i||(a?a<3?(a>1&&(s.n=-1),d(a,c)):s.n=c:s.v=c);try{if(f=2,i){if(a||(o="next"),e=i[o]){if(!(e=e.call(i,c)))throw TypeError("iterator result is not an object");if(!e.done)return e;c=e.value,a<2&&(a=0)}else 1===a&&(e=i.return)&&e.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=n}else if((e=(l=s.n<0)?c:r.call(t,s))!==u)break}catch(e){i=n,a=1,c=e}finally{f=1}}return{value:e,done:l}}}(r,o,i),!0),f}var u={};function a(){}function c(){}function f(){}e=Object.getPrototypeOf;var s=[][t]?e(e([][t]())):(l(e={},t,function(){return this}),e),d=f.prototype=a.prototype=Object.create(s);function v(n){return Object.setPrototypeOf?Object.setPrototypeOf(n,f):(n.__proto__=f,l(n,o,"GeneratorFunction")),n.prototype=Object.create(d),n}return c.prototype=f,l(d,"constructor",f),l(f,"constructor",c),c.displayName="GeneratorFunction",l(f,o,"GeneratorFunction"),l(d),l(d,o,"Generator"),l(d,t,function(){return this}),l(d,"toString",function(){return"[object Generator]"}),(p=function(){return{w:i,m:v}})()}function l(n,e,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(n){o=0}l=function(n,e,r,t){function i(e,r){l(n,e,function(n){return this._invoke(e,r,n)})}e?o?o(n,e,{value:r,enumerable:!t,configurable:!t,writable:!t}):n[e]=r:(i("next",0),i("throw",1),i("return",2))},l(n,e,r,t)}function s(n,e,r,t,o,i,u){try{var a=n[i](u),c=a.value}catch(n){return void r(n)}a.done?e(c):Promise.resolve(c).then(t,o)}var d="undefined"!=typeof window,v=function(){return d&&window.flutter_inappwebview&&window.flutter_inappwebview.callHandler&&"function"==typeof window.flutter_inappwebview.callHandler?window.flutter_inappwebview:null},w=function(){var n,e=(n=p().m(function n(e){var r,t,o,i,u=arguments;return p().w(function(n){for(;;)switch(n.p=n.n){case 0:if(r=u.length>1&&void 0!==u[1]?u[1]:{},t=v()){n.n=1;break}return n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"});case 1:return n.p=1,n.n=2,t.callHandler("MiniAppBridge",{action:e,payload:r});case 2:return o=n.v,n.a(2,o);case 3:return n.p=3,i=n.v,console.error("Bridge error:",i),n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"})}},n,null,[[1,3]])}),function(){var e=this,r=arguments;return new Promise(function(t,o){var i=n.apply(e,r);function u(n){s(i,t,o,u,a,"next",n)}function a(n){s(i,t,o,u,a,"throw",n)}u(void 0)})});return function(n){return e.apply(this,arguments)}}();function y(){return function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("number"==typeof n)return w("navigate",{type:"native",action:"pop",delta:Math.abs(n)});w("navigate",{type:"native",action:"push",route:n,params:e,options:r})}}var h={locale:"vi",theme:"light",pages:[]};function m(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(n){try{var r;null===(r=e.current)||void 0===r||r.call(e,n)}catch(n){console.error("[useListenerScanQr error]",n)}};return window.MiniApp.on("onScanQRResult",n),function(){window.MiniApp.off("onScanQRResult",n)}}},[])}var b=t(848);function g(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=Array(e);r<e;r++)t[r]=n[r];return t}var A=new Map,S="/";function j(){return A.get(S)}function M(n){S=n}function x(n){var e,r,t=n.config,o=n.children,u=(e=(0,i.useState)(null),r=2,function(n){if(Array.isArray(n))return n}(e)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=r){var t,o,i,u,a=[],c=!0,f=!1;try{if(i=(r=r.call(n)).next,0===e){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(a.push(t.value),a.length!==e);c=!0);}catch(n){f=!0,o=n}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(e,r)||function(n,e){if(n){if("string"==typeof n)return g(n,e);var r={}.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?g(n,e):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=u[0],c=u[1],f=(0,i.useRef)(!1);(0,i.useEffect)(function(){var n;if(null!=t&&null!==(n=t.pages)&&void 0!==n&&n.length&&!f.current){f.current=!0,function(n){A=new Map(n.pages.map(function(n){return[n.path,n]}))}(t),M((window.location.pathname||"/").replace("/miniapp","")||"/");var e=j();e||(M("/"),e=j()),c(e||null),w("registerAppConfig",{config:t})}},[t]);var p=(0,i.useMemo)(function(){return a&&a.Component?a.Component:null},[a]);return p?(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(p,{}),o]}):(console.warn("MiniApp: Page not found"),(0,b.jsx)("div",{}))}return o})());

package/src/dist/ui-react/index.js.LICENSE.txt

@@ -1,11 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/src/ui-react/bridge.js

@@ -1,36 +0,0 @@
-const isBrowser = typeof window !== "undefined";
-
-const getBridge = () => {
-  if (!isBrowser || !window.flutter_inappwebview || !window.flutter_inappwebview.callHandler || typeof window.flutter_inappwebview.callHandler != "function") {
-    return null;
-  }
-  return window.flutter_inappwebview;
-};
-
-export const callHost = async (action, payload = {}) => {
-  const bridge = getBridge();
-  if (!bridge) {
-//    return Promise.reject(new Error("MiniApp bridge not available"));
-
-    return {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-  }
-  try {
-    const response = await bridge.callHandler("MiniAppBridge", {
-      action,
-      payload,
-    });
-
-    return response;
-  } catch (error) {
-    console.error("Bridge error:", error);
-//    throw error;
-
-    return {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-  }
-};