@dito-uai/components 5.1.0-alpha.5 → 5.1.0-alpha.51

package/tailwind.config.ts

@@ -1,267 +1,17 @@
-import TailwindsForms from '@tailwindcss/forms';
-import TailwindsTypography from '@tailwindcss/typography';
-import TailwindsAnimate from 'tailwindcss-animate';
+import preset from './tailwind-preset';
 
-export const COLORS = {
-  neutral: {
-    white: '#ffffff',
-    black: '#000000',
-    neutral_900: '#21242b',
-    neutral_700: '#343841',
-    neutral_600: '#484d59',
-    neutral_500: '#6a7486',
-    neutral_400: '#8d95a7',
-    neutral_300: '#bdc2cc',
-    neutral_200: '#d7dae0',
-    neutral_100: '#eff0f2',
-  },
-  brand: {
-    navy_900: '#223154',
-    navy_600: '#364b74',
-    navy_100: '#e6e8ed',
-    green_900: '#006a31',
-    green_600: '#00bd6a',
-    green_100: '#e5f7ed',
-  },
-  secondary: {
-    indigo_900: '#353877',
-    indigo_600: '#4b5398',
-    indigo_100: '#e8eaf2',
-    purple_900: '#541f8e',
-    purple_600: '#852ca5',
-    purple_100: '#f7e7fc',
-    blue_900: '#4a58d5',
-    blue_600: '#549eff',
-    blue_100: '#e4f1ff',
-    pink_900: '#a50a54',
-    pink_600: '#f1167f',
-    pink_100: '#fee6f1',
-    green_900: '#127a6e',
-    green_600: '#06c5ae',
-    green_100: '#e6f9f7',
-    platform_background: '#f3f4f8',
-  },
-  chart: {
-    midnight_blue_900: '#0a0259',
-    midnight_blue_600: '#271bae',
-    midnight_blue_100: '#ebf0ff',
-    green_900: '#005b42',
-    green_600: '#0bcc96',
-    green_100: '#e5fff4',
-    purple_900: '#4c178e',
-    purple_600: '#8929ff',
-    purple_100: '#f6eeff',
-    pink_900: '#b91d70',
-    pink_600: '#ff00b8',
-    pink_100: '#fff1fb',
-    light_blue_900: '#094170',
-    light_blue_600: '#00beff',
-    light_blue_100: '#ebf9ff',
-    orange_900: '#b84300',
-    orange_600: '#ff7a00',
-    orange_100: '#fff0df',
-    red_900: '#8b0c23',
-    red_600: '#db0028',
-    red_100: '#ffecef',
-    blue_900: '#09006d',
-    blue_600: '#1456ff',
-    blue_100: '#e6f2ff',
-    yellow_900: '#9d670b',
-    yellow_600: '#f1c40f',
-    yellow_100: '#fff9e7',
-  },
-  notification: {
-    critical_900: '#9e0505',
-    critical_600: '#d31d26',
-    critical_300: '#ffadb0',
-    critical_100: '#ffebeb',
-    warning_900: '#8a4900',
-    warning_600: '#ffca42',
-    warning_300: '#ffe8a9',
-    warning_100: '#fff6ce',
-    success_900: '#074a1b',
-    success_600: '#228000',
-    success_300: '#80e09c',
-    success_100: '#defce7',
-    information_900: '#1e4664',
-    information_600: '#0d74a0',
-    information_300: '#b0e7ff',
-    information_100: '#e0f8ff',
-  },
-};
+export { COLORS } from './tailwind-preset';
+
+const includeStorybook = process.env.INCLUDE_STORYBOOK === 'true';
+
+const contentPaths = ['./src/ui/**/*.{ts,tsx}'];
+
+if (includeStorybook) {
+  contentPaths.push('./src/storybook/stories/*.stories.@(js|jsx|mjs|ts|tsx)');
+}
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  mode: 'jit',
-  content: ['./src/**/*.{ts,tsx}'],
-  theme: {
-    screens: {
-      sm: '480px',
-      md: '768px',
-      lg: '976px',
-      xl: '1440px',
-    },
-    fontFamily: {
-      sans: ['Poppins', 'sans-serif'],
-    },
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--gradient-color-stops))',
-      },
-      colors: () => ({
-        primary: COLORS.brand.green_600,
-        'primary-foreground': '#ffffff',
-        accent: COLORS.brand.navy_600,
-        'accent-foreground': '#ffffff',
-        'neutral-100': COLORS.neutral.neutral_100,
-        'neutral-200': COLORS.neutral.neutral_200,
-        'neutral-300': COLORS.neutral.neutral_300,
-        'neutral-400': COLORS.neutral.neutral_400,
-        'neutral-500': COLORS.neutral.neutral_500,
-        'neutral-600': COLORS.neutral.neutral_600,
-        'neutral-700': COLORS.neutral.neutral_700,
-        'neutral-900': COLORS.neutral.neutral_900,
-        'midnight-blue-900': COLORS.chart.midnight_blue_900,
-        'midnight-blue-600': COLORS.chart.midnight_blue_600,
-        'midnight-blue-100': COLORS.chart.midnight_blue_100,
-        'red-100': COLORS.chart.red_100,
-        'red-600': COLORS.chart.red_600,
-        'red-900': COLORS.chart.red_900,
-        'orange-100': COLORS.chart.orange_100,
-        'orange-600': COLORS.chart.orange_600,
-        'orange-900': COLORS.chart.orange_900,
-        'yellow-100': COLORS.chart.yellow_100,
-        'yellow-600': COLORS.chart.yellow_600,
-        'yellow-900': COLORS.chart.yellow_900,
-        'green-100': COLORS.brand.green_100,
-        'green-600': COLORS.brand.green_600,
-        'green-900': COLORS.brand.green_900,
-        'blue-100': COLORS.secondary.blue_100,
-        'blue-600': COLORS.secondary.blue_600,
-        'blue-900': COLORS.secondary.blue_900,
-        'light-blue-100': COLORS.chart.light_blue_100,
-        'light-blue-600': COLORS.chart.light_blue_600,
-        'light-blue-900': COLORS.chart.light_blue_900,
-        'indigo-100': COLORS.brand.navy_100,
-        'indigo-600': COLORS.brand.navy_600,
-        'indigo-900': COLORS.brand.navy_900,
-        'navy-100': COLORS.brand.navy_100,
-        'navy-600': COLORS.brand.navy_600,
-        'navy-900': COLORS.brand.navy_900,
-        'purple-100': COLORS.chart.purple_100,
-        'purple-600': COLORS.chart.purple_600,
-        'purple-900': COLORS.chart.purple_900,
-        'pink-100': COLORS.chart.pink_100,
-        'pink-600': COLORS.chart.pink_600,
-        'pink-900': COLORS.chart.pink_900,
-        notification: {
-          'critical-100': COLORS.notification.critical_100,
-          'critical-300': COLORS.notification.critical_300,
-          'critical-600': COLORS.notification.critical_600,
-          'critical-900': COLORS.notification.critical_900,
-          'warning-100': COLORS.notification.warning_100,
-          'warning-300': COLORS.notification.warning_300,
-          'warning-600': COLORS.notification.warning_600,
-          'warning-900': COLORS.notification.warning_900,
-          'success-100': COLORS.notification.success_100,
-          'success-300': COLORS.notification.success_300,
-          'success-600': COLORS.notification.success_600,
-          'success-900': COLORS.notification.success_900,
-          'information-100': COLORS.notification.information_100,
-          'information-300': COLORS.notification.information_300,
-          'information-600': COLORS.notification.information_600,
-          'information-900': COLORS.notification.information_900,
-        },
-        secondary: {
-          'indigo-100': COLORS.secondary.indigo_100,
-          'indigo-600': COLORS.secondary.indigo_600,
-          'indigo-900': COLORS.secondary.indigo_900,
-        },
-      }),
-      height: {
-        1: '8px',
-        2: '16px',
-        3: '24px',
-        4: '32px',
-        5: '40px',
-        6: '48px',
-        7: '56px',
-      },
-      gap: {
-        1: '8px',
-        2: '16px',
-        3: '32px',
-        4: '48px',
-      },
-      spacing: {
-        0.25: '2px',
-        0.5: '4px',
-        0.75: '6px',
-        1: '8px',
-        2: '16px',
-        3: '24px',
-        4: '32px',
-        5: '40px',
-        6: '48px',
-        7: '56px',
-        8: '64px',
-        9: '72px',
-        10: '128px',
-      },
-      maxWidth: {
-        '1/4': '25%',
-        '1/2': '50%',
-        '3/4': '75%',
-      },
-      borderRadius: {
-        sm: '4px',
-        m: '8px',
-        x: '16px',
-        xl: '32px',
-      },
-      boxShadow: {
-        down: '0px 4px 8px 0px #00000014',
-      },
-      fontSize: {
-        xs: ['10px', { lineHeight: '16px' }],
-        sm: ['12px', { lineHeight: '18px' }],
-        base: ['14px', { lineHeight: '20px' }],
-        lg: ['16px', { lineHeight: '24px' }],
-        xl: ['22px', { lineHeight: '32px' }],
-        '2xl': ['28px', { lineHeight: '40px' }],
-        '3xl': ['30px', { lineHeight: '44px' }],
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [
-    TailwindsAnimate,
-    TailwindsTypography,
-    TailwindsForms({ strategy: 'class' }),
-  ],
-  safelist: [
-    {
-      pattern: /bg-/,
-    },
-    {
-      pattern: /text-/,
-    },
-    {
-      pattern:
-        /m-|mx-|my-|mr-|mt-|mb-|ml–|p-|px–|py-|pr-|pt-|pb-|pl-|rounded|gap|w|h/,
-    },
-  ],
+  presets: [preset],
+  content: contentPaths,
 };

package/dist/ui/form-item.d.ts

@@ -1,16 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { LabelProps } from './label';
-import { InputDescriptionProps } from './input-description';
-export type FormItem = HTMLAttributes<HTMLDivElement> & {
-    label: LabelProps;
-    description: InputDescriptionProps;
-    invalid?: boolean;
-    errorMessage?: string;
-    disabled?: boolean;
-    value?: string;
-    maxLength?: number;
-    id: string;
-};
-declare const FormItem: ({ id, className, label, description, errorMessage, invalid, children, disabled, value, maxLength, ...props }: FormItem) => import("react/jsx-runtime").JSX.Element;
-export default FormItem;
-//# sourceMappingURL=form-item.d.ts.map

package/dist/ui/form-item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-item.d.ts","sourceRoot":"","sources":["../../src/ui/form-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAG9E,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,qBAAqB,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,QAAA,MAAM,QAAQ,iHAYX,QAAQ,4CAqBV,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/ui/form.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=form.d.ts.map

package/dist/ui/form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.tsx"],"names":[],"mappings":""}