sevatech-library 1.0.0

package/dist/types/constants/typography.constant.d.ts

@@ -0,0 +1,710 @@
+export declare const FONT_FAMILY: {
+    primary: string;
+};
+export declare const FONT_SIZE: {
+    readonly '5xl': "48px";
+    readonly '4xl': "32px";
+    readonly '3xl': "28px";
+    readonly '2xl': "24px";
+    readonly xl: "20px";
+    readonly lg: "18px";
+    readonly md: "16px";
+    readonly base: "14px";
+    readonly sm: "12px";
+    readonly xs: "10px";
+};
+export declare const FONT_WEIGHT: {
+    readonly bold: 700;
+    readonly semiBold: 600;
+    readonly medium: 500;
+    readonly regular: 400;
+};
+export declare const LINE_HEIGHT: {
+    readonly tight: 1.2;
+    readonly normal: 1.5;
+    readonly relaxed: 1.75;
+    readonly loose: 2;
+};
+export declare const FONT_STYLE: {
+    readonly normal: "normal";
+    readonly underline: "underline";
+    readonly strikethrough: "line-through";
+};
+export declare const createTypography: (fontSize: string | number, fontWeight?: number, lineHeight?: number, fontStyle?: string) => {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+    fontStyle: string;
+};
+export declare const TYPOGRAPHY: {
+    readonly h1: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly h2: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly h3: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly h4: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly h5: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly h6: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly body: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly caption: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text14Medium: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text14Regular: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text14SemiBold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text14Bold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text12Medium: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text12Regular: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text12SemiBold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text12Bold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text10Medium: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text10Regular: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text10SemiBold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly text10Bold: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly textFieldLabel: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+    readonly textFieldHelper: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: number;
+        fontStyle: string;
+    };
+};
+/**
+ * ============================================
+ * CÁCH SỬ DỤNG TYPOGRAPHY
+ * ============================================
+ *
+ * 1. Sử dụng TYPOGRAPHY presets trực tiếp:
+ *    ----
+ *    import { TYPOGRAPHY } from '@/common/constant/typography.constant';
+ *
+ *    <Text style={TYPOGRAPHY.h1}>Heading 1</Text>
+ *    <Text style={TYPOGRAPHY.text14Medium}>14px Medium</Text>
+ *    <Text style={TYPOGRAPHY.text12Bold}>12px Bold</Text>
+ *
+ * 2. Kết hợp với các styles khác (CSS-in-JS):
+ *    ----
+ *    const styles = {
+ *      title: {
+ *        ...TYPOGRAPHY.h2,
+ *        color: '#07554B',
+ *        marginBottom: '16px',
+ *      }
+ *    };
+ *
+ * 3. Sử dụng hàm createTypography để tạo custom style:
+ *    ----
+ *    import { createTypography, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from '@/common/constant/typography.constant';
+ *
+ *    const customStyle = createTypography(
+ *      FONT_SIZE.lg,           // 18px
+ *      FONT_WEIGHT.semiBold,   // 600
+ *      LINE_HEIGHT.relaxed,    // 1.75
+ *      'underline'             // style
+ *    );
+ *    <Text style={customStyle}>Custom Text</Text>
+ *
+ * 4. Sử dụng từng hằng số riêng lẻ:
+ *    ----
+ *    import { FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from '@/common/constant/typography.constant';
+ *
+ *    <Text style={{
+ *      fontSize: FONT_SIZE.md,
+ *      fontWeight: FONT_WEIGHT.bold,
+ *      lineHeight: LINE_HEIGHT.loose,
+ *    }}>
+ *      Custom Combination
+ *    </Text>
+ *
+ * 5. Dùng trong Styled Components / Emotion:
+ *    ----
+ *    import styled from 'styled-components';
+ *    import { TYPOGRAPHY } from '@/common/constant/typography.constant';
+ *
+ *    const Title = styled.h1`
+ *      ${TYPOGRAPHY.h1}
+ *      color: #07554B;
+ *    `;
+ */
+export declare const TYPOGRAPHY_STYLES: {
+    '2xl': {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    xl: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    lg: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    md: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    sm: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    xs: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textXl: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textLg: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textMd: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textSm: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textXs: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+    };
+    textSmall: {
+        regular: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: number;
+            verticalAlign: string;
+        };
+        medium: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: string;
+            verticalAlign: string;
+        };
+        semiBold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: number;
+            verticalAlign: string;
+        };
+        bold: {
+            fontFamily: string;
+            fontWeight: number;
+            fontStyle: string;
+            fontSize: string;
+            lineHeight: string;
+            letterSpacing: number;
+            verticalAlign: string;
+        };
+    };
+};
+//# sourceMappingURL=typography.constant.d.ts.map

package/dist/types/constants/typography.constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.constant.d.ts","sourceRoot":"","sources":["../../../src/constants/typography.constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;CAWZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAGX,eAAO,MAAM,gBAAgB,GAC3B,UAAU,MAAM,GAAG,MAAM,EACzB,aAAa,MAAM,EACnB,aAAa,MAAM,EACnB,YAAY,MAAM;;;;;;CAOlB,CAAC;AAGH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwc7B,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './constants';
+export * from './utils';
+export * from './styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}