@the21og/yc 0.0.1 → 0.0.2

package/components/ui/carousel.tsx

@@ -0,0 +1,327 @@
+import React, { useState, useEffect, useCallback, createContext, useContext, forwardRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// Utility for class merging (simulated for standalone usage, usually imported from lib/utils)
+function cn(...classes: (string | undefined | null | false)[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+type CarouselApi = {
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: "horizontal" | "vertical";
+};
+
+const CarouselContext = createContext<CarouselApi | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  opts?: { align?: "start" | "center" | "end"; loop?: boolean };
+}
+
+const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+  ({ orientation = "horizontal", opts, className, children, ...props }, ref) => {
+    const [carouselRef, setCarouselRef] = useState<HTMLDivElement | null>(null);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+
+    const checkScrollability = useCallback(() => {
+      if (!carouselRef) return;
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef;
+      setCanScrollPrev(scrollLeft > 0);
+      // Allow a small buffer (1px) for floating point rendering differences
+      setCanScrollNext(scrollLeft < scrollWidth - clientWidth - 1);
+    }, [carouselRef]);
+
+    useEffect(() => {
+      if (!carouselRef) return;
+      checkScrollability();
+      const handleScroll = () => checkScrollability();
+      const handleResize = () => checkScrollability();
+
+      carouselRef.addEventListener("scroll", handleScroll);
+      window.addEventListener("resize", handleResize);
+      
+      return () => {
+        carouselRef.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [carouselRef, checkScrollability]);
+
+    const scrollPrev = useCallback(() => {
+      if (!carouselRef) return;
+      carouselRef.scrollBy({ left: -carouselRef.clientWidth, behavior: "smooth" });
+    }, [carouselRef]);
+
+    const scrollNext = useCallback(() => {
+      if (!carouselRef) return;
+      carouselRef.scrollBy({ left: carouselRef.clientWidth, behavior: "smooth" });
+    }, [carouselRef]);
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    return (
+      <CarouselContext.Provider
+        value={{ scrollPrev, scrollNext, canScrollPrev, canScrollNext, orientation }}
+      >
+        <div
+          ref={ref}
+          onKeyDown={handleKeyDown}
+          className={cn("relative group", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {/* We pass setCarouselRef to the content via context or direct prop drilling if structure allows.
+              Here we clone the Content child to pass the ref, or simpler: expects specific structure. 
+              To keep it clean in React, we'll actually put the ref on the Content component via a callback prop or context.
+              However, for composition flexibility, let's use a data attribute or simple context setter.
+          */}
+          <div className="hidden" data-carousel-store-ref={setCarouselRef} />
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    // We need to capture the ref for the scrolling container
+    const { orientation } = useCarousel();
+    const [localRef, setLocalRef] = useState<HTMLDivElement | null>(null);
+    
+    // HACK: To pass this ref up to the parent Context without complex Context Setters,
+    // we look for the parent <Carousel> mechanism or just assume this component IS the scroll container.
+    // In this implementation, CarouselContent IS the scroll view.
+    
+    // We need to connect this local ref to the parent's state.
+    // Since we are inside the context, we can't easily set the parent state during render.
+    // We use a useEffect to traverse up or a callback context if we had one.
+    // Simplified approach: The user must pass a ref, but to make it auto-wire:
+    
+    // Let's rely on standard composed refs pattern if possible, 
+    // but for this snippet, let's use a "RefSetter" pattern via a mounted effect.
+    // Actually, simpler: The Carousel component renders a Context. 
+    // We can't set state in Parent from Child render easily. 
+    // Instead, let's make CarouselContent THE place where logic lives? 
+    // No, buttons are siblings. 
+    
+    // Solution: Effect to register self.
+    const context = useContext(CarouselContext);
+    
+    // We access the setter we hid in the parent JSX (dirty but effective for zero-dep) 
+    // OR we just assume the user uses the library correctly. 
+    // Let's do the robust Context Setter pattern properly: 
+    // We can't change the Context interface now easily without re-declaring types above.
+    // Let's fix the Context to include `setApi` logic if we were using Embla.
+    
+    // Native Scroll Snap implementation fix:
+    // We need the `Carousel` wrapper to know about `CarouselContent` ref.
+    // We will use a callback ref approach that finds the parent context if we updated it.
+    // ALTERNATIVE: Just look for the context via a custom hook that allows registration.
+    
+    // TO KEEP IT SIMPLE AND WORKING:
+    // We will find the parent provider's setter via a slightly different Context pattern or 
+    // just render the scroll container in the Wrapper? No, that breaks composition.
+    
+    // Let's use a mutable ref in context.
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const { setCarouselRef } = useInternalRefSetter(); // See below helper
+
+    useEffect(() => {
+      if (contentRef.current && setCarouselRef) {
+        setCarouselRef(contentRef.current);
+      }
+    }, [setCarouselRef]);
+
+    return (
+      <div
+        ref={(node) => {
+          contentRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          "overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar", // Core Scroll Logic
+          className
+        )}
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        {...props}
+      />
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full snap-start",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        className={cn(
+          "absolute h-8 w-8 rounded-full flex items-center justify-center bg-white border border-slate-200 shadow-sm hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed z-10",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        {...props}
+      >
+        <ChevronLeft className="h-4 w-4 text-slate-900" />
+        <span className="sr-only">Previous slide</span>
+      </button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        className={cn(
+          "absolute h-8 w-8 rounded-full flex items-center justify-center bg-white border border-slate-200 shadow-sm hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed z-10",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        {...props}
+      >
+        <ChevronRight className="h-4 w-4 text-slate-900" />
+        <span className="sr-only">Next slide</span>
+      </button>
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+
+/* 
+   Internal Helper to connect Content ref to Main Wrapper 
+   This avoids cluttering the public API with complex callbacks.
+*/
+const RefContext = createContext<{ setCarouselRef: (el: HTMLDivElement) => void } | null>(null);
+
+// Overwriting the main export to include the RefProvider wrapper internally
+const CarouselMain = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {
+  const [carouselRef, setCarouselRef] = useState<HTMLDivElement | null>(null);
+  
+  // Re-implementing logic here for clean closure access
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const checkScrollability = useCallback(() => {
+      if (!carouselRef) return;
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef;
+      // Tolerance for high-DPI screens
+      setCanScrollPrev(scrollLeft > 1);
+      setCanScrollNext(scrollLeft < scrollWidth - clientWidth - 1);
+  }, [carouselRef]);
+
+  useEffect(() => {
+      if (!carouselRef) return;
+      checkScrollability();
+      const el = carouselRef;
+      const handle = () => checkScrollability();
+      el.addEventListener("scroll", handle, { passive: true });
+      window.addEventListener("resize", handle);
+      return () => {
+          el.removeEventListener("scroll", handle);
+          window.removeEventListener("resize", handle);
+      };
+  }, [carouselRef, checkScrollability]);
+
+  const scrollPrev = useCallback(() => {
+      carouselRef?.scrollBy({ left: -carouselRef.clientWidth, behavior: "smooth" });
+  }, [carouselRef]);
+
+  const scrollNext = useCallback(() => {
+      carouselRef?.scrollBy({ left: carouselRef.clientWidth, behavior: "smooth" });
+  }, [carouselRef]);
+
+  return (
+    <CarouselContext.Provider value={{ scrollPrev, scrollNext, canScrollPrev, canScrollNext, orientation: props.orientation || "horizontal" }}>
+      <RefContext.Provider value={{ setCarouselRef }}>
+        <div
+          ref={ref}
+          className={cn("relative", props.className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        />
+      </RefContext.Provider>
+    </CarouselContext.Provider>
+  );
+});
+CarouselMain.displayName = "Carousel";
+
+function useInternalRefSetter() {
+    const ctx = useContext(RefContext);
+    if (!ctx) return { setCarouselRef: () => {} };
+    return ctx;
+}
+
+export {
+  CarouselMain as Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

package/index.ts

@@ -2,4 +2,5 @@ import "./index.css";
 export * from "./components/ui/card";
 export * from "./components/ui/input";
 export * from "./components/ui/button";
+export * from "./components/ui/carousel";
 export * from "./lib/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the21og/yc",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Y Combinator (YC) is a startup accelerator and venture capital firm",
   "main": "index.js",
   "style": "index.css",