@parto-system-design/ui 4.0.0

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@parto-system-design/ui",
+  "version": "4.0.0",
+  "description": "Parto Design System UI components with RTL support",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css",
+    "./tailwind.config": "./tailwind.config.ts"
+  },
+  "files": [
+    "dist",
+    "tailwind.config.ts"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@nivo/bar": "^0.99.0",
+    "@nivo/bump": "^0.99.0",
+    "@nivo/core": "^0.99.0",
+    "@nivo/heatmap": "^0.99.0",
+    "@nivo/line": "^0.99.0",
+    "@nivo/pie": "^0.99.0",
+    "@nivo/stream": "^0.99.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@visx/scale": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/wordcloud": "^3.12.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "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",
+    "vaul": "^1.1.2",
+    "zod": "^4.1.12"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "@types/moment-jalaali": "^0.7.9",
+    "@types/node": "^20.11.5",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.17",
+    "copyfiles": "^2.4.1",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^4.1.17",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite-plugin-dts": "^3.7.2"
+  },
+  "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"
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,552 @@
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+
+const config: Config = {
+  darkMode: ['class', '[data-theme*="dark"]'],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        // Supabase Design System - Background Colors
+        background: {
+          DEFAULT: 'hsl(var(--background-default))',
+          200: 'hsl(var(--background-200))',
+          alternative: {
+            DEFAULT: 'hsl(var(--background-alternative-default))',
+            200: 'hsl(var(--background-alternative-200))',
+          },
+          selection: 'hsl(var(--background-selection))',
+          control: 'hsl(var(--background-control))',
+          surface: {
+            75: 'hsl(var(--background-surface-75))',
+            100: 'hsl(var(--background-surface-100))',
+            200: 'hsl(var(--background-surface-200))',
+            300: 'hsl(var(--background-surface-300))',
+            400: 'hsl(var(--background-surface-400))',
+          },
+          overlay: {
+            DEFAULT: 'hsl(var(--background-overlay-default))',
+            hover: 'hsl(var(--background-overlay-hover))',
+          },
+          muted: 'hsl(var(--background-muted))',
+          button: {
+            DEFAULT: 'hsl(var(--background-button-default))',
+          },
+          dialog: {
+            DEFAULT: 'hsl(var(--background-dialog-default))',
+          },
+          dash: {
+            sidebar: 'hsl(var(--background-dash-sidebar))',
+            canvas: 'hsl(var(--background-dash-canvas))',
+          },
+        },
+        // Shorthand background colors for Supabase compatibility
+        alternative: 'hsl(var(--background-alternative-default))',
+        selection: 'hsl(var(--background-selection))',
+        overlay: {
+          DEFAULT: 'hsl(var(--background-overlay-default))',
+          hover: 'hsl(var(--background-overlay-hover))',
+        },
+        
+        // Supabase Design System - Foreground Colors
+        foreground: {
+          DEFAULT: 'hsl(var(--foreground-default))',
+          light: 'hsl(var(--foreground-light))',
+          lighter: 'hsl(var(--foreground-lighter))',
+          muted: 'hsl(var(--foreground-muted))',
+          contrast: 'hsl(var(--foreground-contrast))',
+        },
+        
+        // Supabase Design System - Border Colors
+        border: {
+          DEFAULT: 'hsl(var(--border-default))',
+          muted: 'hsl(var(--border-muted))',
+          secondary: 'hsl(var(--border-secondary))',
+          overlay: 'hsl(var(--border-overlay))',
+          control: 'hsl(var(--border-control))',
+          alternative: 'hsl(var(--border-alternative))',
+          strong: 'hsl(var(--border-strong))',
+          stronger: 'hsl(var(--border-stronger))',
+          button: {
+            DEFAULT: 'hsl(var(--border-button-default))',
+            hover: 'hsl(var(--border-button-hover))',
+          },
+        },
+        // Shorthand border colors for Supabase compatibility
+        strong: 'hsl(var(--border-strong))',
+        stronger: 'hsl(var(--border-stronger))',
+        
+        // Supabase Design System - Brand Colors
+        brand: {
+          DEFAULT: 'hsl(var(--brand-default))',
+          200: 'hsl(var(--brand-200))',
+          300: 'hsl(var(--brand-300))',
+          400: 'hsl(var(--brand-400))',
+          500: 'hsl(var(--brand-500))',
+          600: 'hsl(var(--brand-600))',
+          link: 'hsl(var(--brand-link))',
+        },
+        
+        // Supabase Design System - Warning Colors
+        warning: {
+          DEFAULT: 'hsl(var(--warning-default))',
+          200: 'hsl(var(--warning-200))',
+          300: 'hsl(var(--warning-300))',
+          400: 'hsl(var(--warning-400))',
+          500: 'hsl(var(--warning-500))',
+          600: 'hsl(var(--warning-600))',
+        },
+        
+        // Supabase Design System - Destructive Colors
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive-default))',
+          200: 'hsl(var(--destructive-200))',
+          300: 'hsl(var(--destructive-300))',
+          400: 'hsl(var(--destructive-400))',
+          500: 'hsl(var(--destructive-500))',
+          600: 'hsl(var(--destructive-600))',
+          foreground: 'hsl(var(--destructive-600))',
+        },
+        
+        // Supabase Design System - Secondary Colors
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary-default))',
+          200: 'hsl(var(--secondary-200))',
+          400: 'hsl(var(--secondary-400))',
+          foreground: 'hsl(var(--foreground-default))',
+        },
+        
+        // Supabase Design System - Code Block Colors
+        'code-block': {
+          1: 'hsl(var(--code-block-1))',
+          2: 'hsl(var(--code-block-2))',
+          3: 'hsl(var(--code-block-3))',
+          4: 'hsl(var(--code-block-4))',
+          5: 'hsl(var(--code-block-5))',
+        },
+        
+        // Legacy Shadcn compatibility aliases
+        input: 'hsl(var(--background-control))',
+        ring: 'hsl(var(--border-strong))',
+        primary: {
+          DEFAULT: 'hsl(var(--brand-default))',
+          foreground: 'hsl(var(--foreground-contrast))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--background-muted))',
+          foreground: 'hsl(var(--foreground-muted))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--background-surface-200))',
+          foreground: 'hsl(var(--foreground-default))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--background-overlay-default))',
+          foreground: 'hsl(var(--foreground-default))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--background-surface-100))',
+          foreground: 'hsl(var(--foreground-default))',
+        },
+        // Sidebar colors - mapped to Supabase Design System tokens
+        sidebar: {
+          DEFAULT: 'hsl(var(--background-dash-sidebar))',
+          foreground: 'hsl(var(--foreground-default))',
+          border: 'hsl(var(--border-muted))',
+          ring: 'hsl(var(--brand-default))',
+          accent: {
+            DEFAULT: 'hsl(var(--background-selection))',
+            foreground: 'hsl(var(--foreground-default))',
+          },
+        },
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))',
+        },
+        
+        // Tailwind Standard Palettes
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827',
+          950: '#030712',
+        },
+        zinc: {
+          50: '#fafafa',
+          100: '#f4f4f5',
+          200: '#e4e4e7',
+          300: '#d4d4d8',
+          400: '#a1a1aa',
+          500: '#71717a',
+          600: '#52525b',
+          700: '#3f3f46',
+          800: '#27272a',
+          900: '#18181b',
+          950: '#09090b',
+        },
+        neutral: {
+          50: '#fafafa',
+          100: '#f5f5f5',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+          950: '#0a0a0a',
+        },
+        stone: {
+          50: '#fafaf9',
+          100: '#f5f5f4',
+          200: '#e7e5e4',
+          300: '#d6d3d1',
+          400: '#a8a29e',
+          500: '#78716c',
+          600: '#57534e',
+          700: '#44403c',
+          800: '#292524',
+          900: '#1c1917',
+          950: '#0c0a09',
+        },
+        red: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+          950: '#450a0a',
+        },
+        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: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+          950: '#451a03',
+        },
+        yellow: {
+          50: '#fefce8',
+          100: '#fef9c3',
+          200: '#fef08a',
+          300: '#fde047',
+          400: '#facc15',
+          500: '#eab308',
+          600: '#ca8a04',
+          700: '#a16207',
+          800: '#854d0e',
+          900: '#713f12',
+          950: '#422006',
+        },
+        lime: {
+          50: '#f7fee7',
+          100: '#ecfccb',
+          200: '#d9f99d',
+          300: '#bef264',
+          400: '#a3e635',
+          500: '#84cc16',
+          600: '#65a30d',
+          700: '#4d7c0f',
+          800: '#3f6212',
+          900: '#365314',
+          950: '#1a2e05',
+        },
+        green: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+          950: '#052e16',
+        },
+        emerald: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          200: '#a7f3d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+          950: '#022c22',
+        },
+        teal: {
+          50: '#f0fdfa',
+          100: '#ccfbf1',
+          200: '#99f6e4',
+          300: '#5eead4',
+          400: '#2dd4bf',
+          500: '#14b8a6',
+          600: '#0d9488',
+          700: '#0f766e',
+          800: '#115e59',
+          900: '#134e4a',
+          950: '#042f2e',
+        },
+        cyan: {
+          50: '#ecfeff',
+          100: '#cffafe',
+          200: '#a5f3fc',
+          300: '#67e8f9',
+          400: '#22d3ee',
+          500: '#06b6d4',
+          600: '#0891b2',
+          700: '#0e7490',
+          800: '#155e75',
+          900: '#164e63',
+          950: '#083344',
+        },
+        sky: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+          950: '#082f49',
+        },
+        blue: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        indigo: {
+          50: '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+          950: '#1e1b4b',
+        },
+        violet: {
+          50: '#f5f3ff',
+          100: '#ede9fe',
+          200: '#ddd6fe',
+          300: '#c4b5fd',
+          400: '#a78bfa',
+          500: '#8b5cf6',
+          600: '#7c3aed',
+          700: '#6d28d9',
+          800: '#5b21b6',
+          900: '#4c1d95',
+          950: '#2e1065',
+        },
+        purple: {
+          50: '#faf5ff',
+          100: '#f3e8ff',
+          200: '#e9d5ff',
+          300: '#d8b4fe',
+          400: '#c084fc',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7e22ce',
+          800: '#6b21a8',
+          900: '#581c87',
+          950: '#3b0764',
+        },
+        fuchsia: {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          200: '#f5d0fe',
+          300: '#f0abfc',
+          400: '#e879f9',
+          500: '#d946ef',
+          600: '#c026d3',
+          700: '#a21caf',
+          800: '#86198f',
+          900: '#701a75',
+          950: '#4a044e',
+        },
+        pink: {
+          50: '#fdf2f8',
+          100: '#fce7f3',
+          200: '#fbcfe8',
+          300: '#f9a8d4',
+          400: '#f472b6',
+          500: '#ec4899',
+          600: '#db2777',
+          700: '#be185d',
+          800: '#9d174d',
+          900: '#831843',
+          950: '#500724',
+        },
+        rose: {
+          50: '#fff1f2',
+          100: '#ffe4e6',
+          200: '#fecdd3',
+          300: '#fda4af',
+          400: '#fb7185',
+          500: '#f43f5e',
+          600: '#e11d48',
+          700: '#be123c',
+          800: '#9f1239',
+          900: '#881337',
+          950: '#4c0519',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      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',
+      },
+      fontWeight: {
+        regular: '400',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+    // Supabase Shorthand Classes Plugin
+    plugin(function({ addUtilities }) {
+      addUtilities({
+        // Background shorthands
+        '.bg': {
+          backgroundColor: 'hsl(var(--background-default))',
+        },
+        '.bg-muted': {
+          backgroundColor: 'hsl(var(--background-muted))',
+        },
+        '.bg-alternative': {
+          backgroundColor: 'hsl(var(--background-alternative-default))',
+        },
+        '.bg-selection': {
+          backgroundColor: 'hsl(var(--background-selection))',
+        },
+        // Text shorthands
+        '.text': {
+          color: 'hsl(var(--foreground-default))',
+        },
+        '.text-light': {
+          color: 'hsl(var(--foreground-light))',
+        },
+        '.text-lighter': {
+          color: 'hsl(var(--foreground-lighter))',
+        },
+        '.text-muted': {
+          color: 'hsl(var(--foreground-muted))',
+        },
+        '.text-contrast': {
+          color: 'hsl(var(--foreground-contrast))',
+        },
+        // Border shorthands (override default)
+        '.border': {
+          borderColor: 'hsl(var(--border-default))',
+        },
+        '.border-muted': {
+          borderColor: 'hsl(var(--border-muted))',
+        },
+        '.border-strong': {
+          borderColor: 'hsl(var(--border-strong))',
+        },
+        '.border-stronger': {
+          borderColor: 'hsl(var(--border-stronger))',
+        },
+        '.border-button': {
+          borderColor: 'hsl(var(--border-button-default))',
+        },
+        '.border-button-hover': {
+          borderColor: 'hsl(var(--border-button-hover))',
+        },
+        // Font weight shorthand
+        '.font-regular': {
+          fontWeight: '400',
+        },
+      });
+    }),
+  ],
+};
+
+export default config;
+