@dito-uai/components 5.0.0-alpha2 → 5.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dito-uai/components",
-  "version": "5.0.0-alpha2",
+  "version": "5.0.0-alpha21",
   "descriptin": "Dito's design system component library, made in TSX",
   "repository": "git+https://github.com/ditointernet/dito-uai.git",
   "publishConfig": {
@@ -9,10 +9,12 @@
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "types": "dist/**/*.d.ts",
+  "types": "./dist/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist/"
+    "dist/",
+    "./tailwind.config.ts",
+    "./lib/colors-utils.ts"
   ],
   "exports": {
     ".": {
@@ -25,7 +27,9 @@
         "default": "./dist/index.mjs"
       }
     },
-    "./global.css": "./dist/global.css"
+    "./global.css": "./dist/global.css",
+    "./tailwind.config": "./tailwind.config.ts",
+    "./colors": "./lib/colors-utils.ts"
   },
   "scripts": {
     "dev": "yarn build",
@@ -34,7 +38,7 @@
     "build": "yarn build:css & yarn build:js --watch",
     "build:js": "tsup",
     "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir dist",
-    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify"
+    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify -v"
   },
   "packageManager": "yarn@4.1.1",
   "devDependencies": {
@@ -47,7 +51,7 @@
     "postcss": "^8.4.38",
     "supports-color": "^9.4.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.13",
     "tsup": "^8.2.3",
     "typescript": "^5.5.4",
     "vite": "^5.3.5"
@@ -58,14 +62,15 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -88,4 +93,4 @@
     "react-hook-form": "^7.52.1",
     "zod": "^3.23.8"
   }
-}
+}

package/tailwind.config.ts

@@ -0,0 +1,180 @@
+import TailwindsForms from '@tailwindcss/forms';
+import TailwindsTypography from '@tailwindcss/typography';
+import TailwindsAnimate from 'tailwindcss-animate';
+import { COLORS } from './src/lib/colors-utils';
+
+/** @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/,
+    },
+  ],
+};

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAG9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/lib/colors-utils.d.ts

@@ -1,88 +0,0 @@
-export declare const COLORS: {
-    neutral: {
-        white: string;
-        black: string;
-        neutral_900: string;
-        neutral_700: string;
-        neutral_600: string;
-        neutral_500: string;
-        neutral_400: string;
-        neutral_300: string;
-        neutral_200: string;
-        neutral_100: string;
-    };
-    brand: {
-        navy_900: string;
-        navy_600: string;
-        navy_100: string;
-        green_900: string;
-        green_600: string;
-        green_100: string;
-    };
-    secondary: {
-        indigo_900: string;
-        indigo_600: string;
-        indigo_100: string;
-        purple_900: string;
-        purple_600: string;
-        purple_100: string;
-        blue_900: string;
-        blue_600: string;
-        blue_100: string;
-        pink_900: string;
-        pink_600: string;
-        pink_100: string;
-        green_900: string;
-        green_600: string;
-        green_100: string;
-        platform_background: string;
-    };
-    chart: {
-        midnight_blue_900: string;
-        midnight_blue_600: string;
-        midnight_blue_100: string;
-        green_900: string;
-        green_600: string;
-        green_100: string;
-        purple_900: string;
-        purple_600: string;
-        purple_100: string;
-        pink_900: string;
-        pink_600: string;
-        pink_100: string;
-        light_blue_900: string;
-        light_blue_600: string;
-        light_blue_100: string;
-        orange_900: string;
-        orange_600: string;
-        orange_100: string;
-        red_900: string;
-        red_600: string;
-        red_100: string;
-        blue_900: string;
-        blue_600: string;
-        blue_100: string;
-        yellow_900: string;
-        yellow_600: string;
-        yellow_100: string;
-    };
-    notification: {
-        critical_900: string;
-        critical_600: string;
-        critical_300: string;
-        critical_100: string;
-        warning_900: string;
-        warning_600: string;
-        warning_300: string;
-        warning_100: string;
-        success_900: string;
-        success_600: string;
-        success_300: string;
-        success_100: string;
-        information_900: string;
-        information_600: string;
-        information_300: string;
-        information_100: string;
-    };
-};
-//# sourceMappingURL=colors-utils.d.ts.map

package/dist/lib/colors-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-utils.d.ts","sourceRoot":"","sources":["../../src/lib/colors-utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFlB,CAAC"}

package/dist/lib/css-util.d.ts

@@ -1,3 +0,0 @@
-import type { ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
-//# sourceMappingURL=css-util.d.ts.map

package/dist/lib/css-util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-util.d.ts","sourceRoot":"","sources":["../../src/lib/css-util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/ui/accordion.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare const Accordion: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    triggerClassName?: string;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
-//# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,SAAS,oQAYb,CAAC;AAEH,QAAA,MAAM,aAAa,iKAYjB,CAAC;AAIH,QAAA,MAAM,gBAAgB;uBAGC,MAAM;2CAkB3B,CAAC;AAIH,QAAA,MAAM,gBAAgB,oKAWpB,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/ui/avatar.d.ts

@@ -1,221 +0,0 @@
-import React from 'react';
-import { VariantProps } from 'tailwind-variants';
-declare const avatarVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, "flex items-center justify-center rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}>, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, "flex items-center justify-center rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}>, unknown, unknown, undefined>>;
-export type AvatarProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof avatarVariants> & {
-    asChild?: boolean;
-};
-declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, "flex items-center justify-center rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}>, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, undefined, "flex items-center justify-center rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}, {
-    color: {
-        default: string;
-        indigo: string;
-    };
-    type: {
-        icon: string;
-        capitals: string;
-        image: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-}>, unknown, unknown, undefined>>> & {
-    asChild?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export default Avatar;
-//# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAM,MAAM,mBAAmB,CAAC;AAErD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwClB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAC7D,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAHE,OAAO;wCAmBpB,CAAC;AAGF,eAAe,MAAM,CAAC"}