@flochat/react 1.0.0

package/README.md

@@ -0,0 +1,91 @@
+# Flochat
+
+Professional Floating Social Contact Component for React Applications.
+
+Flochat is a high-performance, customizable React component designed to integrate social media and contact links into web applications with a refined user experience. It provides a non-intrusive interface for users to connect via various platforms.
+
+## Key Features
+
+- **Configurable Layouts**: Supports Multiple expansion styles including Stack, Fan, and Grid.
+- **Aesthetic Versatility**: Includes a curated set of professional gradients and support for custom branding.
+- **Extensive Platform Support**: Pre-configured for major platforms including WhatsApp, LinkedIn, Twitter, Instagram, GitHub, and more.
+- **Technical Excellence**: Optimized for performance, fully responsive, and compatible with both light and dark mode architectures.
+- **Modern Stack**: Built with React, Framer Motion for fluid transitions, and Lucide React for iconography.
+
+## Installation
+
+Install the package and its required peer dependencies:
+
+```bash
+npm install @flochat/react framer-motion lucide-react
+```
+
+## Quick Start
+
+```tsx
+import { Flochat } from "@flochat/react";
+
+const App = () => (
+  <Flochat
+    position="bottom-right"
+    socialLinks={[
+      {
+        platform: "linkedin",
+        url: "https://linkedin.com/in/...",
+        label: "LinkedIn",
+      },
+      { platform: "whatsapp", url: "https://wa.me/...", label: "WhatsApp" },
+      { platform: "email", url: "mailto:support@example.com", label: "Email" },
+    ]}
+  />
+);
+
+export default App;
+```
+
+## API Reference
+
+### Flochat Props
+
+| Property         | Type                                                    | Default          | Description                                                 |
+| :--------------- | :------------------------------------------------------ | :--------------- | :---------------------------------------------------------- |
+| `size`           | `'sm' \| 'md' \| 'lg' \| 'xl'`                          | `'md'`           | Specifies the dimensions of the component.                  |
+| `position`       | `'bottom-right' \| 'bottom-left'`                       | `'bottom-right'` | Determines the anchored position on the viewport.           |
+| `socialLinks`    | `SocialLink[]`                                          | `[]`             | Array of contact and social link objects.                   |
+| `animationStyle` | `'fan' \| 'stack' \| 'grid'`                            | `'stack'`        | The animation pattern for menu expansion.                   |
+| `color`          | `string`                                                | `'blue'`         | Preset gradient name or `'custom'`.                         |
+| `showLabels`     | `boolean`                                               | `false`          | When enabled, displays text labels alongside icons.         |
+| `toggleIcon`     | `'share' \| 'message' \| 'zap' \| 'sparkles' \| 'grid'` | `'share'`        | The primary button icon.                                    |
+| `brandColors`    | `boolean`                                               | `false`          | If true, uses official platform colors for contact buttons. |
+| `bottomOffset`   | `number`                                                | `32`             | Adjusts the vertical offset from the bottom.                |
+
+### SocialLink Interface
+
+```typescript
+interface SocialLink {
+  platform:
+    | "instagram"
+    | "twitter"
+    | "facebook"
+    | "linkedin"
+    | "youtube"
+    | "github"
+    | "whatsapp"
+    | "email"
+    | "phone";
+  url: string;
+  label: string;
+}
+```
+
+## Development and Build
+
+Flochat is distributed as a tree-shakeable package. To integrate into your development workflow:
+
+```bash
+npm run build
+```
+
+## License
+
+This project is licensed under the MIT License.

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SocialLink {
+    platform: 'instagram' | 'twitter' | 'facebook' | 'linkedin' | 'youtube' | 'github' | 'whatsapp' | 'email' | 'phone';
+    url: string;
+    label: string;
+}
+interface FlochatProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    position?: 'bottom-right' | 'bottom-left';
+    bottomOffset?: number;
+    color?: string;
+    customColors?: {
+        primary: string;
+        secondary: string;
+        hover: string;
+    };
+    socialLinks?: SocialLink[];
+    showLabels?: boolean;
+    animationStyle?: 'fan' | 'stack' | 'grid';
+    toggleIcon?: 'share' | 'message' | 'zap' | 'sparkles' | 'grid';
+    brandColors?: boolean;
+    isAbsolute?: boolean;
+}
+declare function Flochat({ size, position, bottomOffset, color, customColors, socialLinks, showLabels, animationStyle, toggleIcon, brandColors, isAbsolute }: FlochatProps): react_jsx_runtime.JSX.Element;
+
+export { Flochat, type FlochatProps, type SocialLink };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SocialLink {
+    platform: 'instagram' | 'twitter' | 'facebook' | 'linkedin' | 'youtube' | 'github' | 'whatsapp' | 'email' | 'phone';
+    url: string;
+    label: string;
+}
+interface FlochatProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    position?: 'bottom-right' | 'bottom-left';
+    bottomOffset?: number;
+    color?: string;
+    customColors?: {
+        primary: string;
+        secondary: string;
+        hover: string;
+    };
+    socialLinks?: SocialLink[];
+    showLabels?: boolean;
+    animationStyle?: 'fan' | 'stack' | 'grid';
+    toggleIcon?: 'share' | 'message' | 'zap' | 'sparkles' | 'grid';
+    brandColors?: boolean;
+    isAbsolute?: boolean;
+}
+declare function Flochat({ size, position, bottomOffset, color, customColors, socialLinks, showLabels, animationStyle, toggleIcon, brandColors, isAbsolute }: FlochatProps): react_jsx_runtime.JSX.Element;
+
+export { Flochat, type FlochatProps, type SocialLink };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var D=(n,t)=>{for(var m in t)h(n,m,{get:t[m],enumerable:!0})},L=(n,t,m,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of P(t))!z.call(n,a)&&a!==m&&h(n,a,{get:()=>t[a],enumerable:!(i=v(t,a))||i.enumerable});return n};var O=n=>L(h({},"__esModule",{value:!0}),n);var G={};D(G,{Flochat:()=>$});module.exports=O(G);var w=require("react"),o=require("lucide-react"),b=require("framer-motion"),e=require("react/jsx-runtime"),R={sm:{button:"40px",icon:16,social:14},md:{button:"48px",icon:20,social:16},lg:{button:"56px",icon:24,social:18},xl:{button:"64px",icon:28,social:20}},F={blue:{from:"#1E40AF",to:"#3B82F6"},emerald:{from:"#065F46",to:"#10B981"},rose:{from:"#9F1239",to:"#F43F5E"},amber:{from:"#92400E",to:"#F59E0B"},violet:{from:"#5B21B6",to:"#8B5CF6"},indigo:{from:"#3730A3",to:"#6366F1"},cyan:{from:"#0E7490",to:"#06B6D4"},slate:{from:"#1E293B",to:"#475569"},orange:{from:"#9A3412",to:"#F97316"},pink:{from:"#9D174D",to:"#EC4899"},teal:{from:"#0D9488",to:"#2DD4BF"},lime:{from:"#4D7C0F",to:"#A3E635"},gold:{from:"#A16207",to:"#EAB308"},crimson:{from:"#991B1B",to:"#EF4444"},fuchsia:{from:"#86198F",to:"#E879F9"}},T={instagram:{icon:o.Instagram,color:"#E4405F"},twitter:{icon:o.Twitter,color:"#1DA1F2"},facebook:{icon:o.Facebook,color:"#1877F2"},linkedin:{icon:o.Linkedin,color:"#0A66C2"},youtube:{icon:o.Youtube,color:"#FF0000"},github:{icon:o.Github,color:"#181717"},whatsapp:{icon:o.MessageCircle,color:"#25D366"},email:{icon:o.Mail,color:"#EA4335"},phone:{icon:o.Phone,color:"#34A853"}},_={share:o.Share2,message:o.MessageCircle,zap:o.Zap,sparkles:o.Sparkles,grid:o.Grid3X3};function $({size:n="md",position:t="bottom-right",bottomOffset:m=32,color:i="blue",customColors:a,socialLinks:x=[],showLabels:k=!1,animationStyle:u="stack",toggleIcon:E="share",brandColors:A=!1,isAbsolute:S=!1}){let[g,C]=(0,w.useState)(!1),I=_[E],s=R[n],y=(r,l)=>{if(l&&a)return{backgroundColor:a.primary};let c=F[r]||F.blue;return{background:`linear-gradient(135deg, ${c.from}, ${c.to})`}},B=(r,l)=>{let c=60+r*54;if(u==="stack")return{x:0,y:-c};if(u==="fan"){let p=Math.PI/2.5*(r/Math.max(1,l-1)),f=80;return{x:(t==="bottom-right"?-1:1)*Math.sin(p)*f,y:-Math.cos(p)*f}}if(u==="grid"){let p=Math.floor(r/2),f=r%2;return{x:(t==="bottom-right"?-1:1)*(f*54),y:-(p+1)*54}}return{x:0,y:0}};return(0,e.jsxs)("div",{style:{position:S?"absolute":"fixed",zIndex:9999,bottom:`${m}px`,right:t==="bottom-right"?"32px":"auto",left:t==="bottom-left"?"32px":"auto",fontFamily:"system-ui, -apple-system, sans-serif"},children:[(0,e.jsx)(b.AnimatePresence,{children:g&&x.map((r,l)=>{let c=T[r.platform],p=c.icon,{x:f,y:M}=B(l,x.length);return(0,e.jsx)(b.motion.div,{initial:{opacity:0,scale:.5,x:0,y:0},animate:{opacity:1,scale:1,x:f,y:M},exit:{opacity:0,scale:.5,x:0,y:0},transition:{type:"spring",stiffness:400,damping:25,delay:l*.05},style:{position:"absolute",display:"flex",alignItems:"center",left:t==="bottom-left"?0:"auto",right:t==="bottom-right"?0:"auto"},children:(0,e.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"12px",flexDirection:t==="bottom-right"?"row-reverse":"row"},children:[(0,e.jsx)("a",{href:r.url,target:"_blank",rel:"noopener noreferrer",style:{...A?{backgroundColor:c.color}:y(i,i==="custom"),width:s.button,height:s.button,borderRadius:"9999px",display:"flex",alignItems:"center",justifyContent:"center",color:"white",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",transition:"transform 0.2s",cursor:"pointer"},onMouseEnter:d=>d.currentTarget.style.transform="scale(1.1)",onMouseLeave:d=>d.currentTarget.style.transform="scale(1)",children:(0,e.jsx)(p,{size:s.social})}),k&&(0,e.jsx)("span",{style:{backgroundColor:"white",border:"1px solid #e2e8f0",padding:"4px 8px",borderRadius:"4px",fontSize:"11px",fontWeight:600,color:"#1a202c",boxShadow:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",whiteSpace:"nowrap"},children:r.label})]})},`${r.platform}-${l}`)})}),(0,e.jsx)(b.motion.button,{onClick:()=>C(!g),style:{...y(i,i==="custom"),width:s.button,height:s.button,borderRadius:"9999px",display:"flex",alignItems:"center",justifyContent:"center",color:"white",boxShadow:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",cursor:"pointer",position:"relative",zIndex:10,border:"none",outline:"none"},animate:{rotate:g?90:0},whileTap:{scale:.92},children:g?(0,e.jsx)(o.X,{size:s.icon}):(0,e.jsx)(I,{size:s.icon})})]})}0&&(module.exports={Flochat});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{useState as M}from"react";import{Share2 as v,X as P,Instagram as z,Twitter as D,Facebook as L,Linkedin as O,Youtube as R,Github as T,MessageCircle as x,Mail as _,Phone as $,Zap as G,Sparkles as X,Grid3X3 as Z}from"lucide-react";import{motion as u,AnimatePresence as j}from"framer-motion";import{jsx as t,jsxs as h}from"react/jsx-runtime";var N={sm:{button:"40px",icon:16,social:14},md:{button:"48px",icon:20,social:16},lg:{button:"56px",icon:24,social:18},xl:{button:"64px",icon:28,social:20}},d={blue:{from:"#1E40AF",to:"#3B82F6"},emerald:{from:"#065F46",to:"#10B981"},rose:{from:"#9F1239",to:"#F43F5E"},amber:{from:"#92400E",to:"#F59E0B"},violet:{from:"#5B21B6",to:"#8B5CF6"},indigo:{from:"#3730A3",to:"#6366F1"},cyan:{from:"#0E7490",to:"#06B6D4"},slate:{from:"#1E293B",to:"#475569"},orange:{from:"#9A3412",to:"#F97316"},pink:{from:"#9D174D",to:"#EC4899"},teal:{from:"#0D9488",to:"#2DD4BF"},lime:{from:"#4D7C0F",to:"#A3E635"},gold:{from:"#A16207",to:"#EAB308"},crimson:{from:"#991B1B",to:"#EF4444"},fuchsia:{from:"#86198F",to:"#E879F9"}},W={instagram:{icon:z,color:"#E4405F"},twitter:{icon:D,color:"#1DA1F2"},facebook:{icon:L,color:"#1877F2"},linkedin:{icon:O,color:"#0A66C2"},youtube:{icon:R,color:"#FF0000"},github:{icon:T,color:"#181717"},whatsapp:{icon:x,color:"#25D366"},email:{icon:_,color:"#EA4335"},phone:{icon:$,color:"#34A853"}},Y={share:v,message:x,zap:G,sparkles:X,grid:Z};function Q({size:y="md",position:e="bottom-right",bottomOffset:F=32,color:l="blue",customColors:f,socialLinks:b=[],showLabels:w=!1,animationStyle:m="stack",toggleIcon:k="share",brandColors:E=!1,isAbsolute:A=!1}){let[c,S]=M(!1),C=Y[k],r=N[y],g=(o,n)=>{if(n&&f)return{backgroundColor:f.primary};let a=d[o]||d.blue;return{background:`linear-gradient(135deg, ${a.from}, ${a.to})`}},I=(o,n)=>{let a=60+o*54;if(m==="stack")return{x:0,y:-a};if(m==="fan"){let i=Math.PI/2.5*(o/Math.max(1,n-1)),s=80;return{x:(e==="bottom-right"?-1:1)*Math.sin(i)*s,y:-Math.cos(i)*s}}if(m==="grid"){let i=Math.floor(o/2),s=o%2;return{x:(e==="bottom-right"?-1:1)*(s*54),y:-(i+1)*54}}return{x:0,y:0}};return h("div",{style:{position:A?"absolute":"fixed",zIndex:9999,bottom:`${F}px`,right:e==="bottom-right"?"32px":"auto",left:e==="bottom-left"?"32px":"auto",fontFamily:"system-ui, -apple-system, sans-serif"},children:[t(j,{children:c&&b.map((o,n)=>{let a=W[o.platform],i=a.icon,{x:s,y:B}=I(n,b.length);return t(u.div,{initial:{opacity:0,scale:.5,x:0,y:0},animate:{opacity:1,scale:1,x:s,y:B},exit:{opacity:0,scale:.5,x:0,y:0},transition:{type:"spring",stiffness:400,damping:25,delay:n*.05},style:{position:"absolute",display:"flex",alignItems:"center",left:e==="bottom-left"?0:"auto",right:e==="bottom-right"?0:"auto"},children:h("div",{style:{display:"flex",alignItems:"center",gap:"12px",flexDirection:e==="bottom-right"?"row-reverse":"row"},children:[t("a",{href:o.url,target:"_blank",rel:"noopener noreferrer",style:{...E?{backgroundColor:a.color}:g(l,l==="custom"),width:r.button,height:r.button,borderRadius:"9999px",display:"flex",alignItems:"center",justifyContent:"center",color:"white",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",transition:"transform 0.2s",cursor:"pointer"},onMouseEnter:p=>p.currentTarget.style.transform="scale(1.1)",onMouseLeave:p=>p.currentTarget.style.transform="scale(1)",children:t(i,{size:r.social})}),w&&t("span",{style:{backgroundColor:"white",border:"1px solid #e2e8f0",padding:"4px 8px",borderRadius:"4px",fontSize:"11px",fontWeight:600,color:"#1a202c",boxShadow:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",whiteSpace:"nowrap"},children:o.label})]})},`${o.platform}-${n}`)})}),t(u.button,{onClick:()=>S(!c),style:{...g(l,l==="custom"),width:r.button,height:r.button,borderRadius:"9999px",display:"flex",alignItems:"center",justifyContent:"center",color:"white",boxShadow:"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",cursor:"pointer",position:"relative",zIndex:10,border:"none",outline:"none"},animate:{rotate:c?90:0},whileTap:{scale:.92},children:c?t(P,{size:r.icon}):t(C,{size:r.icon})})]})}export{Q as Flochat};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@flochat/react",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --minify",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "eslint src/**/*.ts*"
+  },
+  "dependencies": {
+    "framer-motion": "^12.23.12",
+    "lucide-react": "^0.539.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}