@dito-uai/components 5.1.0-alpha.7 → 5.1.0-alpha.70

package/package.json

@@ -1,92 +1,133 @@
 {
   "name": "@dito-uai/components",
-  "version": "5.1.0-alpha.7",
-  "descriptin": "Dito's design system component library, made in TSX",
+  "version": "5.1.0-alpha.70",
+  "description": "Dito's design system component library, made in TSX",
+  "license": "MIT",
   "repository": "git+https://github.com/ditointernet/dito-uai.git",
+  "homepage": "https://github.com/ditointernet/dito-uai#readme",
+  "bugs": {
+    "url": "https://github.com/ditointernet/dito-uai/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist/",
     "./tailwind.config.ts",
-    "./lib/colors-utils.ts"
+    "./tailwind-preset.ts",
+    "./lib/colors-utils.ts",
+    "./llms.md"
   ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
+      "import": "./dist/index.js",
+      "require": "./dist/index.mjs"
     },
     "./global.css": "./dist/global.css",
     "./tailwind.config": {
-      "import": {
-        "types": "./tailwind.config.ts",
-        "default": "./tailwind.config.ts"
-      },
-      "require": {
-        "types": "./tailwind.config.ts",
-        "default": "./tailwind.config.ts"
-      }
+      "import": "./tailwind-preset.ts",
+      "require": "./tailwind-preset.ts"
     }
   },
   "scripts": {
-    "dev": "yarn build --watch",
-    "semantic-release": "semantic-release",
-    "build": "yarn bundle",
-    "bundle": "yarn build:js & yarn build:types & yarn build:css",
+    "dev": "INCLUDE_STORYBOOK=true storybook dev -p 6006 --config-dir ./.storybook",
+    "build:storybook": "INCLUDE_STORYBOOK=true storybook build --config-dir ./.storybook --output-dir ./storybook-static",
+    "build:uai": "yarn build:js && yarn build:types && yarn build:css",
     "build:js": "tsup",
-    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir dist",
-    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify -v"
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir dist --project tsconfig.build.json",
+    "build:css": "tailwindcss -i ./src/global.css -o ./dist/global.css --minify -v",
+    "publish:uai": "semantic-release",
+    "format:ts": "prettier",
+    "format:ts:all": "yarn format:ts --check \"src/**/*.{ts,tsx}\"",
+    "format": "yarn format:ts:all",
+    "lint:ts": "eslint --cache",
+    "lint:ts:all": "yarn lint:ts \"src/**/*.{ts,tsx}\"",
+    "lint": "yarn lint:ts:all --fix",
+    "cz": "cz"
   },
-  "packageManager": "yarn@4.1.1",
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "13.1.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "9.0.0",
     "@semantic-release/github": "^10.1.3",
     "@semantic-release/release-notes-generator": "^14.0.1",
+    "@storybook/addon-docs": "10.1.2",
+    "@storybook/addon-onboarding": "10.1.2",
+    "@storybook/addon-vitest": "10.1.3",
+    "@storybook/react-vite": "10.1.2",
+    "@types/eslint__js": "^8.42.3",
+    "@types/postcss-flexbugs-fixes": "^5",
+    "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^4.0.15",
     "autoprefixer": "^10.4.19",
-    "esbuild": "^0.23.0",
+    "chromatic": "^11.7.0",
+    "commitizen": "^4.3.0",
+    "commitlint": "^19.3.0",
+    "cz-conventional-changelog": "3.3.0",
+    "cz-customizable": "6.9.2",
+    "dotenv-cli": "^7.4.2",
+    "esbuild": "^0.12.15",
     "esbuild-plugin-svgr": "^2.1.0",
     "esbuild-plugin-tsc": "^0.4.0",
     "esbuild-ts-paths": "^1.1.3",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "10.1.2",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "firebase-tools": "13.14.2",
+    "husky": "7.0.1",
+    "lint-staged": "15.2.7",
+    "playwright": "^1.57.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
     "semantic-release": "^17",
+    "storybook": "10.1.2",
     "supports-color": "^9.4.0",
-    "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.13",
     "tsup": "^8.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5"
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.3.5",
+    "vite-plugin-checker": "^0.11.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.15"
   },
   "dependencies": {
-    "@dito-uai/icons": "^1.8.0",
+    "@dito-uai/icons": "^1.12.0",
     "@hookform/resolvers": "^3.9.0",
     "@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-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
     "@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-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@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",
     "lucide-react": "^0.418.0",
@@ -95,8 +136,9 @@
     "postcss-nested": "^6.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.1",
-    "tailwind-merge": "^2.4.0",
+    "react-toastify": "9.1.3",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.1.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
@@ -105,8 +147,30 @@
     "lucide-react": "^0.377.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.1",
     "zod": "^3.23.8"
   },
-  "stableVersion": "5.0.0-alpha31"
+  "engines": {
+    "node": ">= 20"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-customizable",
+      "defaultType": "fix",
+      "defaultScope": "components"
+    },
+    "cz-customizable": {
+      "config": ".cz-config.cjs"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true"
+    }
+  },
+  "resolutions": {
+    "underscore.string": "npm:underscore.string@*",
+    "eslint": "npm:eslint@9.8.0",
+    "typescript-eslint": "npm:typescript-eslint@8.0.0"
+  },
+  "packageManager": "yarn@4.3.1"
 }

package/tailwind-preset.ts

@@ -0,0 +1,281 @@
+import TailwindsForms from '@tailwindcss/forms';
+import TailwindsTypography from '@tailwindcss/typography';
+import TailwindsAnimate from 'tailwindcss-animate';
+
+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',
+  },
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  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.secondary.indigo_100,
+        'indigo-600': COLORS.secondary.indigo_600,
+        'indigo-900': COLORS.secondary.indigo_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' },
+        },
+        rotate: {
+          '100%': { transform: 'rotate(360deg)' },
+        },
+        dash: {
+          '0%': {
+            'stroke-dasharray': '1, 200',
+            'stroke-dashoffset': '0',
+          },
+          '50%': {
+            'stroke-dasharray': '90, 200',
+            'stroke-dashoffset': '-35px',
+          },
+          '100%': {
+            'stroke-dashoffset': '-125px',
+          },
+        },
+        border: {
+          to: { '--border-angle': '360deg' },
+        },
+        'dito-uai-skeleton-pulse': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '.5' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        rotate: 'rotate 2s linear infinite',
+        border: 'border 2s linear infinite',
+        dash: 'dash 1.5s ease-in-out infinite',
+        'dito-uai-skeleton-pulse':
+          'dito-uai-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+    },
+  },
+  plugins: [
+    TailwindsAnimate,
+    TailwindsTypography,
+    TailwindsForms({ strategy: 'class' }),
+  ],
+};