@vetc-miniapp/ui-react 0.0.26 → 0.0.28

package/dist/hooks/use-navigate.js

@@ -1,23 +0,0 @@
-import { callHost } from "../bridge";
-/* ================= Hook ================= */
-export function useNavigate() {
-    return (route, params = {}, options = {}) => {
-        // POP navigation
-        if (typeof route === "number") {
-            callHost("navigate", {
-                type: "native",
-                action: "pop",
-                delta: Math.abs(route),
-            });
-            return;
-        }
-        // Gửi sang native host
-        callHost("navigate", {
-            type: "native",
-            action: "push",
-            route,
-            params,
-            options,
-        }).catch(console.error);
-    };
-}

package/dist/hooks/use-tap-app-bar.js

@@ -1,20 +0,0 @@
-import { useEffect, useRef } from "react";
-export function useTapAppBar(route, callback) {
-    const saved = useRef(callback);
-    // luôn giữ callback mới nhất
-    useEffect(() => {
-        saved.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = (data) => {
-            if (data?.route === route) {
-                saved.current?.(data);
-            }
-        };
-        bridge.on("onTapAppBar", handler);
-        return () => bridge.off("onTapAppBar", handler);
-    }, [route]);
-}

package/dist/styles/VETCProvider.js

@@ -1,124 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ConfigProvider, App as AntApp, theme } from 'antd';
-import { colorAlias, colorGlobal } from '../tokens/colors';
-export const vetcAntdTheme = {
-    token: {
-        // Brand / Primary
-        colorPrimary: colorAlias.brand, // #25a45e
-        colorPrimaryHover: colorGlobal.green35,
-        colorPrimaryActive: colorAlias.brandDark,
-        colorPrimaryBg: colorGlobal.green02,
-        colorPrimaryBgHover: colorGlobal.green05,
-        // Error / Danger
-        colorError: colorAlias.negative, // #da2c39
-        colorErrorHover: colorGlobal.red60,
-        colorErrorBg: colorGlobal.red02,
-        // Warning
-        colorWarning: colorAlias.warning, // #ff8c2f
-        colorWarningBg: colorGlobal.orange02,
-        // Success
-        colorSuccess: colorAlias.positive, // #208758
-        colorSuccessBg: colorGlobal.green02,
-        // Text
-        colorText: colorAlias.primaryOnTheme, // #181719
-        colorTextSecondary: colorAlias.secondaryOnTheme, // #5e5d64
-        colorTextDisabled: colorAlias.disabledContent, // #abacb2
-        colorTextPlaceholder: colorGlobal.gray50,
-        // Background
-        colorBgContainer: colorAlias.theme, // #ffffff
-        colorBgLayout: colorAlias.themeVariant, // #f1f1f2
-        colorBgSpotlight: colorAlias.inverseTheme,
-        // Border
-        colorBorder: colorGlobal.gray20, // #c6c8cc
-        colorBorderSecondary: colorGlobal.gray10, // #e3e4e6
-        colorSplit: colorGlobal.gray10,
-        // Fill states
-        colorFill: colorGlobal.gray05,
-        colorFillSecondary: colorGlobal.gray10,
-        colorFillTertiary: colorGlobal.gray15,
-        // Typography
-        fontFamily: '"Roboto", system-ui, -apple-system, sans-serif',
-        fontSize: 16,
-        fontSizeSM: 13,
-        fontSizeLG: 18,
-        fontSizeXL: 19,
-        fontSizeHeading1: 32,
-        fontSizeHeading2: 28,
-        fontSizeHeading3: 24,
-        fontSizeHeading4: 19,
-        fontSizeHeading5: 16,
-        fontWeightStrong: 600,
-        lineHeight: 1.5,
-        // Shape
-        borderRadius: 8,
-        borderRadiusSM: 6,
-        borderRadiusLG: 12,
-        borderRadiusXS: 4,
-        // Size
-        controlHeight: 48,
-        controlHeightSM: 32,
-        controlHeightLG: 56,
-        // Padding
-        paddingXS: 8,
-        paddingSM: 12,
-        padding: 16,
-        paddingMD: 16,
-        paddingLG: 24,
-        // Motion
-        motionDurationFast: '150ms',
-        motionDurationMid: '250ms',
-    },
-    components: {
-        Button: {
-            primaryColor: '#ffffff',
-            defaultBorderColor: colorGlobal.gray20,
-            defaultColor: colorAlias.primaryOnTheme,
-            borderRadius: 12,
-            borderRadiusSM: 8,
-            borderRadiusLG: 12,
-            controlHeight: 48,
-            controlHeightSM: 32,
-            paddingInline: 16,
-            paddingInlineSM: 12,
-            fontWeight: 600,
-        },
-        Input: {
-            borderRadius: 8,
-            controlHeight: 48,
-            paddingInline: 12,
-            colorBorder: colorGlobal.gray20,
-            hoverBorderColor: colorAlias.outline,
-            activeBorderColor: colorAlias.brand,
-        },
-        Select: {
-            borderRadius: 8,
-            controlHeight: 48,
-        },
-        Checkbox: {
-            borderRadius: 4,
-            controlInteractiveSize: 20,
-        },
-        Radio: {
-            radioSize: 20,
-            dotSize: 8,
-        },
-        Switch: {
-            trackHeight: 32,
-            trackMinWidth: 52,
-            handleSize: 28,
-            colorPrimary: colorAlias.brand,
-        },
-        Modal: {
-            borderRadiusLG: 16,
-            paddingContentHorizontalLG: 16,
-            paddingMD: 16,
-        },
-        Card: {
-            borderRadius: 16,
-            paddingLG: 16,
-        },
-    },
-};
-export function VETCProvider({ children }) {
-    return (_jsx(ConfigProvider, { theme: { ...vetcAntdTheme, algorithm: theme.defaultAlgorithm }, children: _jsx(AntApp, { children: children }) }));
-}

package/dist/tokens/colors.js

@@ -1,75 +0,0 @@
-/**
- * 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.js

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

package/dist/tokens/spacing.js

@@ -1,56 +0,0 @@
-/**
- * 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.js

@@ -1,57 +0,0 @@
-/**
- * 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.js

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