@meistrari/tela-build 1.0.0

package/utils/design-tokens.ts

@@ -0,0 +1,431 @@
+const BASE_COLORS = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: {
+        1000: '#FFFFFF',
+        DEFAULT: '#FFF',
+        900: 'rgba(255, 255, 255, 0.9)',
+        800: 'rgba(255, 255, 255, 0.8)',
+        600: 'rgba(255, 255, 255, 0.6)',
+        400: 'rgba(255, 255, 255, 0.4)',
+    },
+    gray: {
+        20: '#FAFBFB', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        40: '#F4F5F7', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        50: '#F9FAFB',
+        60: '#EFF1F3', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        80: '#EAECEF', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        100: '#F3F4F6', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        120: '#DFE3E7', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        160: '#D4D9DE', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        200: '#E7E9ED',
+        240: '#BDC4CC', // @NOTE: This color is only for existing components in external apps. Don't use it elsewhere.
+        300: '#D1D5DB',
+        400: '#9CA3AF',
+        500: '#6B7280',
+        600: '#4B5563',
+        700: '#374151',
+        800: '#1F2937',
+        900: '#111827',
+        950: '#030712',
+    },
+    neutral: {
+        50: '#FAFAFA',
+        100: '#F5F5F5',
+        200: '#E8E8E8',
+        300: '#D9D9D9',
+        400: '#A3A3A3',
+        500: '#737373',
+        600: '#525252',
+        700: '#404040',
+        800: '#262626',
+        900: '#171717',
+        950: '#0A0A0A',
+    },
+    orange: {
+        50: '#FFF7ED',
+        100: '#FFEDD5',
+        200: '#FED7AA',
+        300: '#FDBA74',
+        400: '#FB923C',
+        500: '#F97316',
+        600: '#EA580C',
+        700: '#C2410C',
+        800: '#9A3412',
+        900: '#7C2D12',
+        950: '#431407',
+    },
+    amber: {
+        50: '#FFFCEF',
+        100: '#FCF3CA',
+        200: '#F8E691',
+        300: '#F5D569',
+        400: '#F2C351',
+        500: '#E8A341',
+        600: '#CF7D2D',
+        700: '#AB5920',
+        800: '#864520',
+        900: '#703715',
+        950: '#3F1E0B',
+    },
+    yellow: {
+        50: '#FFFDE9',
+        100: '#FDF8C8',
+        200: '#FCF39D',
+        300: '#FBE362',
+        400: '#F2CE4D',
+        500: '#E3B743',
+        600: '#C08D33',
+        700: '#976423',
+        800: '#7E5223',
+        900: '#6A411C',
+        950: '#3E240F',
+    },
+    lime: {
+        50: '#FAFFEB',
+        100: '#F0FDCE',
+        200: '#E0F9A9',
+        300: '#C9F279',
+        400: '#B1E556',
+        500: '#95CB47',
+        600: '#73A330',
+        700: '#577A27',
+        800: '#476022',
+        900: '#3D541D',
+        950: '#1D2D0A',
+    },
+    green: {
+        50: '#F1FDF4',
+        100: '#E3FAE9',
+        200: '#C9F7D5',
+        300: '#9EEDB0',
+        400: '#78DB8A',
+        500: '#5DC16B',
+        600: '#4DA255',
+        700: '#3B7F44',
+        800: '#316439',
+        900: '#275130',
+        950: '#142E1A',
+    },
+    emerald: {
+        50: '#F0FDF6',
+        100: '#D9F9E6',
+        200: '#B6F0D1',
+        300: '#90E6BC',
+        400: '#6CCF9D',
+        500: '#57B886',
+        600: '#43966D',
+        700: '#38765B',
+        800: '#265E47',
+        900: '#234D3D',
+        950: '#0E2B22',
+    },
+    teal: {
+        50: '#F4FBF9',
+        100: '#D5F9F1',
+        200: '#B1F3E4',
+        300: '#80E6D3',
+        400: '#69CFBE',
+        500: '#56B4A6',
+        600: '#469188',
+        700: '#32756E',
+        800: '#2D5E5A',
+        900: '#264E4B',
+        950: '#162E2E',
+    },
+    cyan: {
+        50: '#EEFCFE',
+        100: '#DBF9FD',
+        200: '#B6F3FC',
+        300: '#87E8F9',
+        400: '#69D1EB',
+        500: '#4BB2D0',
+        600: '#418FAF',
+        700: '#37728C',
+        800: '#2B5D74',
+        900: '#254E63',
+        950: '#183241',
+    },
+    sky: {
+        50: '#F4FAFE',
+        100: '#E1F2FF',
+        200: '#C0E5FD',
+        300: '#93D2F8',
+        400: '#60B9F2',
+        500: '#46A1E3',
+        600: '#3983C3',
+        700: '#2C679D',
+        800: '#255781',
+        900: '#234969',
+        950: '#152E45',
+    },
+    blue: {
+        50: '#F2F6FC',
+        100: '#DEE9FB',
+        200: '#C3DAFC',
+        300: '#9CC4FB',
+        400: '#70A2F1',
+        500: '#4C7FEE',
+        600: '#3562E7',
+        700: '#284DD2',
+        800: '#253EA7',
+        900: '#243987',
+        950: '#192452',
+    },
+    indigo: {
+        50: '#EEF1FF',
+        100: '#E2E7FB',
+        200: '#CAD2F9',
+        300: '#AAB5F6',
+        400: '#828CF2',
+        500: '#6469E8',
+        600: '#4D46DC',
+        700: '#413BC1',
+        800: '#35309F',
+        900: '#312D7F',
+        950: '#1E1B4B',
+    },
+    purple: {
+        50: '#FAF7FD',
+        100: '#F2EAFD',
+        200: '#E5D5FB',
+        300: '#D3B6FB',
+        400: '#B885F5',
+        500: '#9E5BEF',
+        600: '#873CE2',
+        700: '#762AC9',
+        800: '#6426A3',
+        900: '#511E83',
+        950: '#360E5F',
+    },
+    pink: {
+        50: '#F9F3F7',
+        100: '#FAE8F4',
+        200: '#F5D1E7',
+        300: '#EDABD1',
+        400: '#E77AB5',
+        500: '#DB5799',
+        600: '#CA3975',
+        700: '#AD2A5C',
+        800: '#91264D',
+        900: '#782544',
+        950: '#470F23',
+    },
+    rose: {
+        50: '#FFF1F2',
+        100: '#FAE5E6',
+        200: '#F8CDD2',
+        300: '#F2A7AF',
+        400: '#EB7988',
+        500: '#E44F63',
+        600: '#D0394D',
+        700: '#AE273E',
+        800: '#90233A',
+        900: '#7D2038',
+        950: '#4C0519',
+    },
+    red: {
+        50: '#FEF2F2',
+        100: '#FEE2E2',
+        200: '#FECACA',
+        300: '#FCA5A5',
+        400: '#F87171',
+        500: '#EF4444',
+        600: '#DC2626',
+        700: '#B91C1C',
+        800: '#991B1B',
+        900: '#7F1D1D',
+        950: '#450A0A',
+    },
+} as const
+
+// @NOTE: Legacy colors are only for existing components in external apps. Don't use them elsewhere.
+const LEGACY_COLORS = {
+    dark: {
+        50: '#c5c5c5',
+        100: '#c3c3c3',
+        200: '#ababab',
+        300: '#878787',
+        400: '#555555',
+        500: '#343434',
+        600: '#1c1c1c',
+        700: '#080808',
+        800: '#050505',
+        900: '#0b0b0b',
+        950: '#111111',
+    },
+    base: {
+        500: '#f6f6f6',
+        600: '#ebebeb',
+        darkish: '#ebebeb',
+        700: '#d9d9d9',
+        darker: '#d9d9d9',
+        800: '#cbcbcb',
+        darkest: '#cbcbcb',
+        900: '#bdbdbd',
+        950: '#a0a0a0',
+        DEFAULT: '#f6f6f6',
+    },
+    caution: {
+        bright: '#FFEFDB',
+        DEFAULT: '#F3A743',
+        dark: '#926429',
+    },
+    negative: {
+        bright: '#FFDBDB',
+        DEFAULT: '#EF4343',
+        dark: '#8F2828',
+    },
+    black: {
+        1000: '#030C16',
+        900: '#1C242D',
+        800: '#3F4650',
+        DEFAULT: '#1C242D',
+        700: '#3F4650',
+        560: '#767E88',
+        500: '#767E88',
+        400: '#9DA2AA',
+        320: '#9DA2AA',
+    },
+}
+
+export const DT = {
+    colors: {
+        ...BASE_COLORS,
+        ...LEGACY_COLORS,
+        background: {
+            DEFAULT: BASE_COLORS.white.DEFAULT,
+            subtle: BASE_COLORS.gray[50],
+            muted: BASE_COLORS.gray[100],
+            lowered: BASE_COLORS.gray[200],
+            success: BASE_COLORS.green[200],
+            error: BASE_COLORS.red[200],
+            warning: BASE_COLORS.amber[200],
+        },
+        text: {
+            primary: BASE_COLORS.gray[800],
+            secondary: BASE_COLORS.gray[500],
+            tertiary: BASE_COLORS.gray[400],
+            subtle: BASE_COLORS.gray[300],
+            contrast: BASE_COLORS.gray[900],
+            success: BASE_COLORS.green[600],
+            error: BASE_COLORS.red[600],
+            warning: BASE_COLORS.amber[600],
+            pending: BASE_COLORS.blue[600],
+        },
+        border: {
+            DEFAULT: BASE_COLORS.gray[200],
+            subtle: BASE_COLORS.gray[100],
+            strong: BASE_COLORS.gray[300],
+            inverse: BASE_COLORS.white.DEFAULT,
+        },
+        icon: {
+            DEFAULT: BASE_COLORS.gray[700],
+            secondary: BASE_COLORS.gray[500],
+            subtle: BASE_COLORS.gray[300],
+            inverse: BASE_COLORS.white.DEFAULT,
+        },
+    },
+    fontSize: {
+        // headers (you should use <h.> tags for these sizes)
+        'h1': ['32px', {
+            'line-height': '36px',
+            'letter-spacing': '-1px',
+        }],
+        'h2': ['24px', {
+            'line-height': '28px',
+            'letter-spacing': '-0.8px',
+        }],
+        'h3': ['20px', {
+            'line-height': '24px',
+            'letter-spacing': '-0.5px',
+        }],
+        'h4': ['16px', {
+            'line-height': '20px',
+            'letter-spacing': '-0.2px',
+        }],
+        'h5': ['14px', {
+            'line-height': '16px',
+            'letter-spacing': '-0.15px',
+        }],
+        'h6': ['12px', {
+            'line-height': '14px',
+            'letter-spacing': '-0.1px',
+        }],
+        // body
+        '3xl': ['20px', {
+            'line-height': '32px',
+            'letter-spacing': '-0.2px',
+        }],
+        '2xl': ['18px', {
+            'line-height': '24px',
+            'letter-spacing': '-0.4px',
+        }],
+        'xl': ['16px', {
+            'line-height': '20px',
+            'letter-spacing': '-0.2px',
+        }],
+        'md': ['12px', {
+            'line-height': '16px',
+            'letter-spacing': '0px',
+        }],
+        'lg': ['14px', {
+            'line-height': '18px',
+            'letter-spacing': '-0.15px',
+        }],
+        'sm': ['12px', {
+            'line-height': '16px',
+            'letter-spacing': '0px',
+        }],
+        'xs': ['11px', {
+            'line-height': '16px',
+            'letter-spacing': '0px',
+        }],
+        'xxs': ['9px', {
+            'line-height': '16px',
+            'letter-spacing': '1px',
+        }],
+    },
+    fontWeight: {
+        regular: '400',
+        medium: '460',
+        semibold: '580',
+    },
+    margin: {
+        0: '0',
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+    },
+    padding: {
+        0: '0',
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        card: '20px', // Standard card padding
+    },
+    boxShadow: {
+        'sm': '0px 1px 4px 0px rgba(103, 127, 148, 0.03)',
+        'md': '0px 3px 12px 0px rgba(103, 127, 148, 0.08)',
+        'DEFAULT': '0px 3px 12px 0px rgba(103, 127, 148, 0.08)',
+        'lg': '0px 12px 52px 0px rgba(103, 127, 148, 0.16)',
+        'flying': '0px 3px 12px 0px rgba(103, 127, 148, 0.08), 0px 12px 52px 0px rgba(103, 127, 148, 0.16)',
+        'subtle': '0px 1px 4px 0px rgba(103, 127, 148, 0.03)',
+        'in-out': '0px 1px 4px 0px rgba(103, 127, 148, 0.03), 0px 5px 6px 0px rgba(103, 127, 148, 0.03) inset',
+        'inner': '0px -4px 9px 0px rgba(0, 0, 0, 0.02) inset',
+    },
+}

package/utils/fold.ts

@@ -0,0 +1,8 @@
+/**
+ * Template literal tag that folds the string into a single line
+ * - Trims the string
+ * - Replaces multiple spaces with a single space
+ */
+export function fold(strings: TemplateStringsArray, ...values: any[]) {
+    return strings.reduce((result, str, i) => result + str + (values[i] || ''), '').trim().replace(/\s+/g, ' ')
+}

package/utils/select-menu.ts

@@ -0,0 +1,10 @@
+export type SelectMenuOptions = Array<{
+    value: string
+    label: string
+    description?: string
+    icon?: string | any
+    group?: string
+    to?: string
+    externalIconSrc?: string
+    tooltipContent?: Component
+}>

package/utils/status.ts

@@ -0,0 +1 @@
+export type TelaStatusValue = 'empty' | 'neutral' | 'warning' | 'error' | 'success'

package/utils/without-keys.ts

@@ -0,0 +1,34 @@
+export function withoutKeys<T, K extends (keyof T)[]>(obj: T, keys: K): Omit<T, K[number]> {
+    const result: any = {}
+    for (const key in obj) {
+        if (!keys.includes(key as any))
+            result[key] = obj[key]
+    }
+    return result
+}
+
+export function deepWithoutKeys<T, K extends string[]>(obj: T, keys: K): Omit<T, K[number]> {
+    if (obj === null || typeof obj !== 'object')
+        return obj
+
+    if (Array.isArray(obj)) {
+        const copy: any[] = []
+        for (let i = 0; i < obj.length; i++)
+            copy[i] = deepWithoutKeys(obj[i], keys)
+
+        return copy as unknown as T
+    }
+
+    if (obj instanceof Object) {
+        const copy: { [key: string]: any } = {}
+        for (const attr in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, attr)) {
+                if (!keys.includes(attr))
+                    copy[attr] = deepWithoutKeys(obj[attr], keys)
+            }
+        }
+        return copy as T
+    }
+
+    return obj
+}