@parto-system-design/ui 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parto-system-design/ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Parto Design System UI components with RTL support",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -71,10 +71,8 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.554.0",
     "moment-jalaali": "^0.10.4",
-    "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.66.1",
-    "react-player": "^2.16.0",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
@@ -82,29 +80,56 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
+    "next-themes": ">=0.4",
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "peerDependenciesMeta": {
+    "next-themes": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@eslint/js": "^9.39.3",
+    "@size-limit/esbuild": "^12.0.0",
+    "@size-limit/file": "^12.0.0",
     "@tailwindcss/cli": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/moment-jalaali": "^0.7.9",
     "@types/node": "^20.11.5",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "autoprefixer": "^10.4.17",
     "copyfiles": "^2.4.1",
+    "eslint": "^9.39.3",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.3.0",
+    "jsdom": "^28.1.0",
     "postcss": "^8.4.33",
+    "size-limit": "^12.0.0",
     "tailwindcss": "^4.1.17",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vite-plugin-dts": "^3.7.2"
+    "typescript-eslint": "^8.56.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup && tailwindcss -i ./src/globals.css -o ./dist/index.css && copyfiles -u 1 \"src/assets/fonts/*.woff2\" dist",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "typecheck": "tsc --noEmit --skipLibCheck"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "size": "size-limit",
+    "size:check": "size-limit --limit"
   }
 }

package/tailwind.config.ts

@@ -132,6 +132,29 @@ const config: Config = {
           5: 'hsl(var(--code-block-5))',
         },
         
+        // Engagement Rate Tier Colors (social listening domain)
+        engagement: {
+          excellent: 'hsl(var(--engagement-excellent))',
+          'excellent-hover': 'hsl(var(--engagement-excellent-hover))',
+          'very-good': 'hsl(var(--engagement-very-good))',
+          'very-good-hover': 'hsl(var(--engagement-very-good-hover))',
+          good: 'hsl(var(--engagement-good))',
+          'good-hover': 'hsl(var(--engagement-good-hover))',
+          average: 'hsl(var(--engagement-average))',
+          'average-hover': 'hsl(var(--engagement-average-hover))',
+          low: 'hsl(var(--engagement-low))',
+          'low-hover': 'hsl(var(--engagement-low-hover))',
+          poor: 'hsl(var(--engagement-poor))',
+          'poor-hover': 'hsl(var(--engagement-poor-hover))',
+          inactive: 'hsl(var(--engagement-inactive))',
+        },
+        // Sentiment Colors (social listening domain)
+        sentiment: {
+          positive: 'hsl(var(--sentiment-positive))',
+          negative: 'hsl(var(--sentiment-negative))',
+          neutral: 'hsl(var(--sentiment-neutral))',
+        },
+
         // Legacy Shadcn compatibility aliases
         input: 'hsl(var(--background-control))',
         ring: 'hsl(var(--border-strong))',
@@ -476,13 +499,80 @@ const config: Config = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0' },
         },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        'fade-out': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(4px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'slide-down': {
+          '0%': { transform: 'translateY(-4px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        'scale-in': {
+          '0%': { transform: 'scale(0.95)', opacity: '0' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'fade-in': 'fade-in 0.2s ease-out',
+        'fade-out': 'fade-out 0.2s ease-out',
+        'slide-up': 'slide-up 0.2s ease-out',
+        'slide-down': 'slide-down 0.2s ease-out',
+        'scale-in': 'scale-in 0.2s ease-out',
+        shimmer: 'shimmer 2s linear infinite',
       },
       fontWeight: {
+        thin: '100',
+        extralight: '200',
+        light: '300',
         regular: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+      },
+      fontSize: {
+        '2xs': ['0.625rem', { lineHeight: '1rem' }],
+        xs: ['0.75rem', { lineHeight: '1.125rem' }],
+        sm: ['0.875rem', { lineHeight: '1.375rem' }],
+        base: ['1rem', { lineHeight: '1.625rem' }],
+        lg: ['1.125rem', { lineHeight: '1.75rem' }],
+        xl: ['1.25rem', { lineHeight: '1.875rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.375rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.75rem' }],
+        '5xl': ['3rem', { lineHeight: '3.5rem' }],
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
+        card: '0 2px 8px 0 rgb(0 0 0 / 0.04)',
+        dropdown: '0 4px 16px 0 rgb(0 0 0 / 0.12)',
+        dialog: '0 16px 48px 0 rgb(0 0 0 / 0.16)',
+      },
+      // Icon sizing tokens — maps CSS vars --icon-xs/sm/md to Tailwind utilities
+      // Enables: size-icon-xs, h-icon-sm, w-icon-md, etc.
+      spacing: {
+        'icon-xs': 'var(--icon-xs)',  // 12px
+        'icon-sm': 'var(--icon-sm)',  // 16px
+        'icon-md': 'var(--icon-md)',  // 18px
       },
     },
   },