@grasco/profile-picture 0.1.0

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@grasco/profile-picture",
+  "version": "0.1.0",
+  "description": "Lightweight, tree-shakeable profile picture component with ribbon and badge support",
+  "author": "Grasco Lab",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": true,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./standalone": {
+      "import": {
+        "types": "./dist/standalone.d.ts",
+        "default": "./dist/standalone.standalone.js"
+      }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue.d.ts",
+        "default": "./dist/vue.js"
+      },
+      "require": {
+        "types": "./dist/vue.d.cts",
+        "default": "./dist/vue.cjs"
+      }
+    },
+    "./svelte": {
+      "import": {
+        "types": "./dist/svelte.d.ts",
+        "default": "./dist/svelte.js"
+      },
+      "require": {
+        "types": "./dist/svelte.d.cts",
+        "default": "./dist/svelte.cjs"
+      }
+    },
+    "./angular": {
+      "import": {
+        "types": "./dist/angular.d.ts",
+        "default": "./dist/angular.js"
+      },
+      "require": {
+        "types": "./dist/angular.d.cts",
+        "default": "./dist/angular.cjs"
+      }
+    },
+    "./tailwind.safelist": {
+      "import": "./tailwind.safelist.js",
+      "require": "./tailwind.safelist.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "tailwind.safelist.js",
+    "TREE_SHAKING.md",
+    "OPTIMIZATION_SUMMARY.md",
+    "BEFORE_AFTER.md",
+    "CHANGES.md",
+    "QUICK_START_TREE_SHAKING.md",
+    "BUILD_VERIFICATION.md"
+  ],
+  "scripts": {
+    "build": "tsup && bun run build:css",
+    "build:js": "tsup",
+    "build:css": "bunx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css -m",
+    "dev": "tsup --watch",
+    "dev:css": "bunx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "bun run build",
+    "serve": "bunx serve -p 3334",
+    "publish:npm": "npm publish --access public"
+  },
+  "dependencies": {
+    "lit": "^3.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "postcss-load-config": "^6.0.1",
+    "react": "^18.2.0",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "react",
+    "avatar",
+    "profile-picture",
+    "component",
+    "tailwindcss",
+    "shadcn",
+    "vue",
+    "svelte",
+    "angular"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/grasco-lab/main-backend.git",
+    "directory": "sdk/profile-picture"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tailwind.safelist.js

@@ -0,0 +1,90 @@
+/**
+ * Tailwind Safelist for @grasco/profile-picture
+ *
+ * This file documents classes that may be used dynamically and need
+ * to be safelisted for Tailwind's tree shaking.
+ *
+ * Usage in your tailwind.config.js:
+ * ```js
+ * import { safelist } from '@grasco/profile-picture/tailwind.safelist';
+ *
+ * export default {
+ *   safelist,
+ *   content: ['./node_modules/@grasco/profile-picture/dist/**\/*.{js,ts}'],
+ *   // ... rest of config
+ * }
+ * ```
+ */
+
+export const safelist = [
+  // Border colors - common patterns
+  // Users can pass "white" → becomes "border-white"
+  // Or pass complete class "border-white" directly
+  {
+    pattern:
+      /^border-(white|black|gray|slate|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(-\d+)?$/,
+  },
+
+  // Background colors - common patterns
+  // Users can pass "blue-500" → becomes "bg-blue-500"
+  // Or pass complete class "bg-blue-500" directly
+  {
+    pattern:
+      /^bg-(white|black|gray|slate|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(-\d+)?$/,
+  },
+
+  // Text colors for badges and ribbons
+  {
+    pattern:
+      /^text-(white|black|gray|slate|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(-\d+)?$/,
+  },
+
+  // Gradient backgrounds
+  {
+    pattern: /^bg-gradient-(to|from|via)-(t|tr|r|br|b|bl|l|tl)$/,
+  },
+  {
+    pattern:
+      /^(from|to|via)-(white|black|gray|slate|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(-\d+)?$/,
+  },
+
+  // Border widths (already static, but included for completeness)
+  "border",
+  "border-2",
+  "border-[3px]",
+  "border-4",
+
+  // Variants (already static)
+  "rounded-full",
+  "rounded-lg",
+  "rounded-none",
+
+  // Default background
+  "bg-gray-100",
+
+  // Animations
+  "animate-pulse",
+];
+
+/**
+ * Recommended: Use complete class names to avoid safelist
+ *
+ * Instead of:  bgColor="blue-500"     → requires safelist
+ * Prefer:      bgColor="bg-blue-500"  → detected by Tailwind scanner
+ *
+ * Or use hex:  bgColor="#3b82f6"      → uses inline style, no class
+ */
+export const recommendations = {
+  goodExamples: [
+    'bgColor="bg-blue-500"',
+    'borderColor="border-white"',
+    'bgGradient="bg-gradient-to-br from-purple-500 to-pink-500"',
+    'bgColor="#3b82f6"',
+  ],
+  badExamples: [
+    'bgColor="blue-500"', // Missing "bg-" prefix
+    'borderColor="white"', // Missing "border-" prefix
+  ],
+};
+
+export default safelist;