@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/BulkActionBar.tsx

@@ -0,0 +1,72 @@
+import { cn } from "../support/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+import React from "react";
+import { Button } from "./button";
+
+export interface BulkActionBarProps {
+    selectedCount: number;
+    onClearSelection?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    label?: string;
+}
+
+export function BulkActionBar({
+    selectedCount,
+    onClearSelection,
+    children,
+    className,
+    label = "selected",
+}: BulkActionBarProps) {
+    return (
+        <AnimatePresence>
+            {selectedCount > 0 && (
+                <motion.div
+                    initial={{ opacity: 0, y: 30, scale: 0.95 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: 30, scale: 0.95 }}
+                    transition={{ duration: 0.18, ease: "easeOut" }}
+                    className={cn(
+                        "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
+                        "flex items-center gap-3 px-4 py-2",
+                        "bg-dashboard-card dark:bg-dashboard-card/95 border border-dashboard-border shadow-2xl backdrop-blur-md",
+                        "rounded-full text-xs text-dashboard-foreground select-none",
+                        className,
+                    )}
+                    role="toolbar"
+                    aria-label="Bulk actions toolbar"
+                >
+                    {/* Selected Count Indicator */}
+                    <div className="flex items-center gap-2 pl-1 pr-2 border-r border-dashboard-border">
+                        <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-dashboard-primary text-white font-mono text-[11px] font-bold">
+                            {selectedCount}
+                        </span>
+                        <span className="text-dashboard-muted-foreground font-medium">
+                            {label}
+                        </span>
+                    </div>
+
+                    {/* Actions Slot */}
+                    <div className="flex items-center gap-1.5">{children}</div>
+
+                    {/* Clear Button */}
+                    {onClearSelection && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-xs"
+                            onClick={onClearSelection}
+                            aria-label="Clear selection"
+                            className="rounded-full text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary shrink-0 size-7"
+                        >
+                            <X className="w-3.5 h-3.5" />
+                        </Button>
+                    )}
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+}
+
+export default BulkActionBar;

package/src/components/Carousel.tsx

@@ -0,0 +1,107 @@
+import { motion, useMotionValue } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+interface CarouselProps {
+    children: React.ReactNode[];
+    autoSlide?: boolean;
+    autoSlideInterval?: number;
+    className?: string;
+}
+
+export const Carousel = ({
+    children,
+    autoSlide = true,
+    autoSlideInterval = 5000,
+    className = "",
+}: CarouselProps) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const x = useMotionValue(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+
+    const next = () => {
+        setCurrentIndex((prev) => (prev + 1) % children.length);
+    };
+
+    const prev = () => {
+        setCurrentIndex(
+            (prev) => (prev - 1 + children.length) % children.length,
+        );
+    };
+
+    useEffect(() => {
+        if (autoSlide && !isDragging) {
+            const interval = setInterval(next, autoSlideInterval);
+            return () => clearInterval(interval);
+        }
+    }, [currentIndex, autoSlide, autoSlideInterval, isDragging]);
+
+    const handleDragEnd = (
+        _: any,
+        {
+            offset,
+            velocity,
+        }: { offset: { x: number }; velocity: { x: number } },
+    ) => {
+        const swipe = offset.x + velocity.x * 50;
+        if (swipe < -50) {
+            next();
+        } else if (swipe > 50) {
+            prev();
+        }
+        setIsDragging(false);
+    };
+
+    const handleDragStart = () => {
+        setIsDragging(true);
+    };
+
+    return (
+        <div
+            className={`relative overflow-hidden ${className}`}
+            ref={containerRef}
+        >
+            <motion.div
+                className="flex"
+                animate={{ x: `-${currentIndex * 100}%` }}
+                transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                drag="x"
+                dragConstraints={{ left: 0, right: 0 }}
+                dragElastic={0.2}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+                style={{ x }}
+            >
+                {children.map((child, index) => (
+                    <motion.div
+                        key={index}
+                        className="w-full shrink-0"
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        {child}
+                    </motion.div>
+                ))}
+            </motion.div>
+
+            {/* Dots indicator */}
+            <div className="flex justify-center items-center gap-1.5 mt-5">
+                {children.map((_, index) => (
+                    <button
+                        key={index}
+                        type="button"
+                        aria-label={`Go to slide ${index + 1}`}
+                        onClick={() => setCurrentIndex(index)}
+                        className={`rounded-full transition-all cursor-pointer ${
+                            index === currentIndex
+                                ? "bg-dashboard-primary w-5 h-1.5"
+                                : "bg-dashboard-secondary border border-dashboard-border hover:bg-dashboard-secondary/80 w-1.5 h-1.5"
+                        }`}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/ChatBot.tsx

@@ -0,0 +1,205 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, Cpu, X } from "lucide-react";
+import { useState } from "react";
+
+interface ChatBotProps {
+    type?: "whatsapp" | "messenger";
+    link?: string;
+}
+
+export const ChatBot = ({ type = "whatsapp", link = "" }: ChatBotProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [input, setInput] = useState("");
+
+    const suggestedQuestions = [
+        "What services do you offer?",
+        "How do I start a project?",
+        "What is your tech stack?",
+        "Tell me about SaaS architecture",
+    ];
+
+    const handleSend = (text?: string) => {
+        const messageToSend = text || input;
+        if (!messageToSend.trim() || !link) return;
+
+        let url: string;
+        if (type === "messenger") {
+            url = link.startsWith("http") ? link : `https://m.me/${link}`;
+        } else {
+            const encodedMessage = encodeURIComponent(messageToSend);
+            if (link.startsWith("http")) {
+                const separator = link.includes("?") ? "&" : "?";
+                url = `${link}${separator}text=${encodedMessage}`;
+            } else {
+                url = `https://wa.me/${link}?text=${encodedMessage}`;
+            }
+        }
+        window.open(url, "_blank");
+
+        setInput("");
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="fixed bottom-8 right-8 z-100">
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                        className="absolute bottom-24 right-0 w-[400px] h-auto bg-dashboard-card backdrop-blur-2xl rounded-xl border border-dashboard-border flex flex-col overflow-hidden shadow-2xl"
+                    >
+                        <div className="p-4 border-b border-dashboard-border flex items-center justify-between bg-dashboard-secondary/40">
+                            <div className="flex items-center gap-3">
+                                <div
+                                    className="w-8 h-8 rounded-full flex items-center justify-center shadow-xs"
+                                    style={{
+                                        backgroundColor:
+                                            type === "whatsapp"
+                                                ? "#25D366"
+                                                : "#0084FF",
+                                    }}
+                                >
+                                    <Cpu className="w-4 h-4 text-white" />
+                                </div>
+                                <div>
+                                    <div className="text-xs font-semibold text-dashboard-foreground">
+                                        Gostack AI
+                                    </div>
+                                    <div
+                                        className="text-[10px] font-bold tracking-wider"
+                                        style={{
+                                            color:
+                                                type === "whatsapp"
+                                                    ? "#25D366"
+                                                    : "#0084FF",
+                                        }}
+                                    >
+                                        Online
+                                    </div>
+                                </div>
+                            </div>
+                            <button
+                                onClick={() => setIsOpen(false)}
+                                aria-label="Close chat"
+                                className="text-dashboard-muted-foreground hover:text-dashboard-foreground p-1 rounded-md hover:bg-dashboard-secondary transition-colors cursor-pointer"
+                            >
+                                <X size={16} />
+                            </button>
+                        </div>
+                        {/* 
+                        <div
+                            ref={scrollRef}
+                            className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide"
+                        >
+                            {messages.map((msg, i) => (
+                                <div
+                                    key={i}
+                                    className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+                                >
+                                    <div
+                                        className={`max-w-[85%] p-5 rounded-2xl text-sm leading-relaxed ${
+                                            msg.role === "user"
+                                                ? "bg-dashboard-primary text-white rounded-tr-none shadow-lg shadow-dashboard-primary/10"
+                                                : "bg-dashboard-card text-dashboard-foreground rounded-tl-none border border-dashboard-border"
+                                        }`}
+                                    >
+                                        <div className="markdown-body">
+                                            <Markdown>{msg.text}</Markdown>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                            {isLoading && (
+                                <div className="flex justify-start">
+                                    <div className="bg-dashboard-card p-5 rounded-2xl rounded-tl-none border border-dashboard-border">
+                                        <div className="flex gap-1.5">
+                                            <div className="w-2 h-2 bg-dashboard-primary/60 rounded-full animate-bounce" />
+                                            <div className="w-2 h-2 bg-dashboard-primary/60 rounded-full animate-bounce [animation-delay:0.2s]" />
+                                            <div className="w-2 h-2 bg-dashboard-primary/60 rounded-full animate-bounce [animation-delay:0.4s]" />
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div> */}
+
+                        <div className="p-4 bg-dashboard-card border-t border-dashboard-border space-y-3">
+                            <div className="flex flex-wrap gap-1.5">
+                                {suggestedQuestions.map((q, i) => (
+                                    <button
+                                        key={i}
+                                        onClick={() => handleSend(q)}
+                                        className="text-[11px] px-2.5 py-1 rounded-full bg-dashboard-secondary/60 border border-dashboard-border text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground transition-colors cursor-pointer"
+                                    >
+                                        {q}
+                                    </button>
+                                ))}
+                            </div>
+                            <div className="relative">
+                                <input
+                                    id="chatbot-input"
+                                    aria-label="Ask Gostack AI"
+                                    type="text"
+                                    value={input}
+                                    onChange={(e) => setInput(e.target.value)}
+                                    onKeyDown={(e) =>
+                                        e.key === "Enter" && handleSend()
+                                    }
+                                    placeholder="Ask Gostack AI..."
+                                    className="w-full bg-dashboard-background/70 border border-dashboard-border rounded-xl px-3.5 py-2.5 text-xs text-dashboard-foreground placeholder:text-dashboard-muted-foreground outline-none transition-colors pr-12 focus:border-dashboard-primary/70 focus:ring-1 focus:ring-dashboard-primary/30"
+                                />
+                                <button
+                                    onClick={() => handleSend()}
+                                    aria-label="Send message"
+                                    className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 transition-colors cursor-pointer"
+                                    style={{
+                                        color:
+                                            type === "whatsapp"
+                                                ? "#25D366"
+                                                : "#0084FF",
+                                    }}
+                                >
+                                    <ArrowRight size={16} />
+                                </button>
+                            </div>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => setIsOpen(!isOpen)}
+                aria-label="Toggle AI chat assistant"
+                className="w-14 h-14 rounded-full text-white flex items-center justify-center shadow-xl relative group overflow-hidden cursor-pointer"
+                style={{
+                    backgroundColor:
+                        type === "whatsapp" ? "#25D366" : "#0084FF",
+                }}
+            >
+                <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity" />
+                {isOpen ? (
+                    <X size={20} />
+                ) : type === "whatsapp" ? (
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="w-5 h-5"
+                    >
+                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.3A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+                    </svg>
+                ) : (
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="w-5 h-5"
+                    >
+                        <path d="M12 2.04C6.5 2.04 2 6.09 2 11.08c0 2.68 1.32 5.08 3.38 6.63v3.29c0 .32.38.5.63.3l2.77-2.06c.93.26 1.92.4 2.94.4h.04c5.5 0 10-4.05 10-9.04S17.5 2.04 12 2.04zm1.03 7.54l-2.4 2.55-3.26-2.55-3.63 3.47 3.26-1.74 2.4 1.74 3.63-3.47z" />
+                    </svg>
+                )}
+            </motion.button>
+        </div>
+    );
+};

package/src/components/CheckboxCustom.tsx

@@ -0,0 +1,106 @@
+import { cn } from "../support/utils";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import * as React from "react";
+
+export interface CheckboxCustomProps extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "onChange"
+> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+}
+
+const CheckboxCustom = React.forwardRef<HTMLButtonElement, CheckboxCustomProps>(
+    (
+        {
+            className,
+            checked: controlledChecked,
+            defaultChecked = false,
+            onCheckedChange,
+            indeterminate = false,
+            disabled = false,
+            id,
+            name,
+            value,
+            onClick,
+            onKeyDown,
+            ...props
+        },
+        ref,
+    ) => {
+        const isControlled = controlledChecked !== undefined;
+        const [internalChecked, setInternalChecked] =
+            React.useState(defaultChecked);
+        const checked = isControlled ? !!controlledChecked : internalChecked;
+
+        const toggle = () => {
+            if (disabled) return;
+            const nextChecked = !checked;
+            if (!isControlled) {
+                setInternalChecked(nextChecked);
+            }
+            onCheckedChange?.(nextChecked);
+        };
+
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            toggle();
+            onClick?.(e);
+        };
+
+        const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                toggle();
+            }
+            onKeyDown?.(e);
+        };
+
+        const isCheckedOrIndeterminate = checked || indeterminate;
+
+        return (
+            <button
+                ref={ref}
+                type="button"
+                role="checkbox"
+                id={id}
+                name={name}
+                value={value}
+                aria-checked={indeterminate ? "mixed" : checked}
+                disabled={disabled}
+                data-slot="checkbox"
+                data-state={
+                    indeterminate
+                        ? "indeterminate"
+                        : checked
+                          ? "checked"
+                          : "unchecked"
+                }
+                data-checked={checked ? "" : undefined}
+                className={cn(
+                    "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none focus-visible:ring-1 focus-visible:ring-dashboard-primary/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-dashboard-destructive aria-invalid:ring-1 aria-invalid:ring-dashboard-destructive/30 cursor-pointer",
+                    isCheckedOrIndeterminate
+                        ? "bg-dashboard-primary border-dashboard-primary text-white shadow-xs"
+                        : "border-dashboard-border bg-dashboard-background/50 hover:border-dashboard-primary/60",
+                    className,
+                )}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+                {...props}
+            >
+                {indeterminate ? (
+                    <MinusIcon className="size-3.5 stroke-[3] text-white pointer-events-none" />
+                ) : checked ? (
+                    <CheckIcon className="size-3.5 stroke-[3] text-white pointer-events-none" />
+                ) : null}
+            </button>
+        );
+    },
+);
+
+CheckboxCustom.displayName = "CheckboxCustom";
+
+export { CheckboxCustom };