@vetc-miniapp/ui-react 0.0.24 → 0.0.26

package/dist/styles/VETCProvider.d.ts

@@ -0,0 +1,114 @@
+/**
+ * VETC Design System — Ant Design Theme Provider
+ * Wraps children with ConfigProvider using VETC token overrides.
+ */
+import React from 'react';
+export declare const vetcAntdTheme: {
+    token: {
+        colorPrimary: "#25a45e";
+        colorPrimaryHover: "#39b669";
+        colorPrimaryActive: "#208758";
+        colorPrimaryBg: "#f2fef2";
+        colorPrimaryBgHover: "#dffbdf";
+        colorError: "#da2c39";
+        colorErrorHover: "#b4211f";
+        colorErrorBg: "#fff6f9";
+        colorWarning: "#ff8c2f";
+        colorWarningBg: "#fffbf0";
+        colorSuccess: "#208758";
+        colorSuccessBg: "#f2fef2";
+        colorText: "#181719";
+        colorTextSecondary: "#5e5d64";
+        colorTextDisabled: "#abacb2";
+        colorTextPlaceholder: "#74747d";
+        colorBgContainer: "#ffffff";
+        colorBgLayout: "#f1f1f2";
+        colorBgSpotlight: "#181719";
+        colorBorder: "#c6c8cc";
+        colorBorderSecondary: "#e3e4e6";
+        colorSplit: "#e3e4e6";
+        colorFill: "#f1f1f2";
+        colorFillSecondary: "#e3e4e6";
+        colorFillTertiary: "#d4d6d9";
+        fontFamily: string;
+        fontSize: number;
+        fontSizeSM: number;
+        fontSizeLG: number;
+        fontSizeXL: number;
+        fontSizeHeading1: number;
+        fontSizeHeading2: number;
+        fontSizeHeading3: number;
+        fontSizeHeading4: number;
+        fontSizeHeading5: number;
+        fontWeightStrong: number;
+        lineHeight: number;
+        borderRadius: number;
+        borderRadiusSM: number;
+        borderRadiusLG: number;
+        borderRadiusXS: number;
+        controlHeight: number;
+        controlHeightSM: number;
+        controlHeightLG: number;
+        paddingXS: number;
+        paddingSM: number;
+        padding: number;
+        paddingMD: number;
+        paddingLG: number;
+        motionDurationFast: string;
+        motionDurationMid: string;
+    };
+    components: {
+        Button: {
+            primaryColor: string;
+            defaultBorderColor: "#c6c8cc";
+            defaultColor: "#181719";
+            borderRadius: number;
+            borderRadiusSM: number;
+            borderRadiusLG: number;
+            controlHeight: number;
+            controlHeightSM: number;
+            paddingInline: number;
+            paddingInlineSM: number;
+            fontWeight: number;
+        };
+        Input: {
+            borderRadius: number;
+            controlHeight: number;
+            paddingInline: number;
+            colorBorder: "#c6c8cc";
+            hoverBorderColor: "#74747d";
+            activeBorderColor: "#25a45e";
+        };
+        Select: {
+            borderRadius: number;
+            controlHeight: number;
+        };
+        Checkbox: {
+            borderRadius: number;
+            controlInteractiveSize: number;
+        };
+        Radio: {
+            radioSize: number;
+            dotSize: number;
+        };
+        Switch: {
+            trackHeight: number;
+            trackMinWidth: number;
+            handleSize: number;
+            colorPrimary: "#25a45e";
+        };
+        Modal: {
+            borderRadiusLG: number;
+            paddingContentHorizontalLG: number;
+            paddingMD: number;
+        };
+        Card: {
+            borderRadius: number;
+            paddingLG: number;
+        };
+    };
+};
+export interface VETCProviderProps {
+    children: React.ReactNode;
+}
+export declare function VETCProvider({ children }: VETCProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/styles/VETCProvider.js

@@ -0,0 +1,124 @@
+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/{src/ui-react → dist}/styles/tokens.css

@@ -417,10 +417,31 @@
   --vetc-transition-fast:          150ms ease;
   --vetc-transition-base:          250ms ease;
   --vetc-transition-slow:          350ms ease;
+
+  /* ── Safe Area Insets ───────────────────── */
+  --safe-area-inset-top:           env(safe-area-inset-top,    0px);
+  --safe-area-inset-bottom:        env(safe-area-inset-bottom, 0px);
+  --safe-area-inset-left:          env(safe-area-inset-left,   0px);
+  --safe-area-inset-right:         env(safe-area-inset-right,  0px);
+}
+
+/* ════════════════════════════════════════════════════════════
+   8. SAFE AREA UTILITY CLASSES
+   ════════════════════════════════════════════════════════════ */
+.safe-area {
+  padding:
+    var(--safe-area-inset-top,    0px)
+    var(--safe-area-inset-right,  0px)
+    var(--safe-area-inset-bottom, 0px)
+    var(--safe-area-inset-left,   0px);
 }
+.safe-top    { padding-top:    var(--safe-area-inset-top,    0px); }
+.safe-bottom { padding-bottom: var(--safe-area-inset-bottom, 0px); }
+.safe-left   { padding-left:   var(--safe-area-inset-left,   0px); }
+.safe-right  { padding-right:  var(--safe-area-inset-right,  0px); }
 
 /* ════════════════════════════════════════════════════════════
-   8. BASE RESET
+   9. BASE RESET
    ════════════════════════════════════════════════════════════ */
 *, *::before, *::after {
   box-sizing: border-box;

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.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)',
+};