banhaten 0.3.0 → 0.5.0

package/registry/components/carousel.tsx

@@ -1,296 +1,296 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-type CarouselOrientation = "horizontal" | "vertical"
-
-type CarouselMessages = {
-  carouselLabel: string
-  carouselRoleDescription: string
-  nextSlide: string
-  previousSlide: string
-}
-
-const defaultCarouselMessages: CarouselMessages = {
-  carouselLabel: "Carousel",
-  carouselRoleDescription: "carousel",
-  nextSlide: "Next slide",
-  previousSlide: "Previous slide",
-}
-
-const arabicCarouselMessages: CarouselMessages = {
-  carouselLabel: "\u0639\u0627\u0631\u0636 \u0627\u0644\u0634\u0631\u0627\u0626\u062d",
-  carouselRoleDescription: "\u0639\u0627\u0631\u0636 \u0634\u0631\u0627\u0626\u062d",
-  nextSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
-  previousSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
-}
-
-type CarouselProps = React.ComponentProps<"div"> & {
-  messages?: Partial<CarouselMessages>
-  opts?: CarouselOptions
-  orientation?: CarouselOrientation
-  plugins?: CarouselPlugin
-  setApi?: (api: CarouselApi) => void
-}
-type CarouselContentProps = React.ComponentProps<"div">
-type CarouselItemProps = React.ComponentProps<"div">
-type CarouselButtonProps = React.ComponentProps<typeof Button>
-
-type CarouselContextValue = {
-  api: CarouselApi
-  canScrollNext: boolean
-  canScrollPrev: boolean
-  direction: Direction
-  messages: CarouselMessages
-  orientation: CarouselOrientation
-  scrollNext: () => void
-  scrollPrev: () => void
-}
-
-const CarouselContext = React.createContext<CarouselContextValue | null>(null)
-
-const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
-  function Carousel(
-    {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-roledescription": ariaRoleDescription,
-      children,
-      className,
-      dir,
-      messages: messageOverrides,
-      opts,
-      orientation = "horizontal",
-      plugins,
-      setApi,
-      ...props
-    },
-    ref
-  ) {
-    const rootRef = React.useRef<HTMLDivElement | null>(null)
-    const direction = useResolvedDirection(
-      dir === "ltr" || dir === "rtl" ? dir : undefined,
-      rootRef
-    )
-    const setRootRef = React.useCallback(
-      (node: HTMLDivElement | null) => {
-        rootRef.current = node
-        if (typeof ref === "function") ref(node)
-        else if (ref) ref.current = node
-      },
-      [ref]
-    )
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-        direction,
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-    const messages = React.useMemo(
-      () => ({ ...defaultCarouselMessages, ...messageOverrides }),
-      [messageOverrides]
-    )
-
-    const onSelect = React.useCallback((nextApi: CarouselApi) => {
-      if (!nextApi) return
-      setCanScrollPrev(nextApi.canScrollPrev())
-      setCanScrollNext(nextApi.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])
-    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])
-
-    React.useEffect(() => {
-      if (!api) return
-      setApi?.(api)
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api.off("select", onSelect)
-      }
-    }, [api, onSelect, setApi])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          api,
-          canScrollNext,
-          canScrollPrev,
-          direction,
-          messages,
-          orientation,
-          scrollNext,
-          scrollPrev,
-        }}
-      >
-        <div
-          data-orientation={orientation}
-          data-slot="carousel"
-          dir={direction}
-          ref={setRootRef}
-          role="region"
-          aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? messages.carouselLabel)}
-          aria-labelledby={ariaLabelledBy}
-          aria-roledescription={
-            ariaRoleDescription ?? messages.carouselRoleDescription
-          }
-          className={cn("relative", className)}
-          {...props}
-        >
-          <div ref={carouselRef} className="overflow-hidden">
-            {children}
-          </div>
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-
-const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
-  function CarouselContent({ className, ...props }, ref) {
-    const { orientation } = useCarousel()
-
-    return (
-      <div
-        data-slot="carousel-content"
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal"
-            ? "-ms-[var(--bh-space-3xl-16)]"
-            : "-mt-[var(--bh-space-3xl-16)] flex-col",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
-  function CarouselItem({ className, ...props }, ref) {
-    const { orientation } = useCarousel()
-
-    return (
-      <div
-        data-slot="carousel-item"
-        ref={ref}
-        role="group"
-        className={cn(
-          "min-w-0 shrink-0 grow-0 basis-full",
-          orientation === "horizontal"
-            ? "ps-[var(--bh-space-3xl-16)]"
-            : "pt-[var(--bh-space-3xl-16)]",
-          className
-        )}
-        {...props}
-      />
-    )
-  }
-)
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
-  function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }, ref) {
-    const { canScrollPrev, messages, orientation, scrollPrev } = useCarousel()
-
-    return (
-      <Button
-        aria-label={
-          props["aria-label"] ?? messages.previousSlide
-        }
-        className={cn(
-          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
-          orientation === "horizontal"
-            ? "start-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
-            : "start-1/2 top-[calc(var(--bh-space-8xl-48)*-1)] -translate-x-1/2 rotate-90",
-          className
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        ref={ref}
-        size={size}
-        type="button"
-        variant={variant}
-        {...props}
-      >
-        <ArrowLeftIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
-      </Button>
-    )
-  }
-)
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
-  function CarouselNext({ className, variant = "outline", size = "icon", ...props }, ref) {
-    const { canScrollNext, messages, orientation, scrollNext } = useCarousel()
-
-    return (
-      <Button
-        aria-label={
-          props["aria-label"] ?? messages.nextSlide
-        }
-        className={cn(
-          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
-          orientation === "horizontal"
-            ? "end-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
-            : "bottom-[calc(var(--bh-space-8xl-48)*-1)] start-1/2 -translate-x-1/2 rotate-90",
-          className
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        ref={ref}
-        size={size}
-        type="button"
-        variant={variant}
-        {...props}
-      >
-        <ArrowRightIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
-      </Button>
-    )
-  }
-)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-  if (!context) {
-    throw new Error("Carousel parts must be used within Carousel")
-  }
-  return context
-}
-
-export {
-  arabicCarouselMessages,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-}
-export type {
-  CarouselApi,
-  CarouselButtonProps,
-  CarouselContentProps,
-  CarouselItemProps,
-  CarouselMessages,
-  CarouselOptions,
-  CarouselOrientation,
-  CarouselPlugin,
-  CarouselProps,
-}
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+type CarouselOrientation = "horizontal" | "vertical"
+
+type CarouselMessages = {
+  carouselLabel: string
+  carouselRoleDescription: string
+  nextSlide: string
+  previousSlide: string
+}
+
+const defaultCarouselMessages: CarouselMessages = {
+  carouselLabel: "Carousel",
+  carouselRoleDescription: "carousel",
+  nextSlide: "Next slide",
+  previousSlide: "Previous slide",
+}
+
+const arabicCarouselMessages: CarouselMessages = {
+  carouselLabel: "\u0639\u0627\u0631\u0636 \u0627\u0644\u0634\u0631\u0627\u0626\u062d",
+  carouselRoleDescription: "\u0639\u0627\u0631\u0636 \u0634\u0631\u0627\u0626\u062d",
+  nextSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
+  previousSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
+}
+
+type CarouselProps = React.ComponentProps<"div"> & {
+  messages?: Partial<CarouselMessages>
+  opts?: CarouselOptions
+  orientation?: CarouselOrientation
+  plugins?: CarouselPlugin
+  setApi?: (api: CarouselApi) => void
+}
+type CarouselContentProps = React.ComponentProps<"div">
+type CarouselItemProps = React.ComponentProps<"div">
+type CarouselButtonProps = React.ComponentProps<typeof Button>
+
+type CarouselContextValue = {
+  api: CarouselApi
+  canScrollNext: boolean
+  canScrollPrev: boolean
+  direction: Direction
+  messages: CarouselMessages
+  orientation: CarouselOrientation
+  scrollNext: () => void
+  scrollPrev: () => void
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null)
+
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  function Carousel(
+    {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-roledescription": ariaRoleDescription,
+      children,
+      className,
+      dir,
+      messages: messageOverrides,
+      opts,
+      orientation = "horizontal",
+      plugins,
+      setApi,
+      ...props
+    },
+    ref
+  ) {
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const direction = useResolvedDirection(
+      dir === "ltr" || dir === "rtl" ? dir : undefined,
+      rootRef
+    )
+    const setRootRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        rootRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+        direction,
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    const messages = React.useMemo(
+      () => ({ ...defaultCarouselMessages, ...messageOverrides }),
+      [messageOverrides]
+    )
+
+    const onSelect = React.useCallback((nextApi: CarouselApi) => {
+      if (!nextApi) return
+      setCanScrollPrev(nextApi.canScrollPrev())
+      setCanScrollNext(nextApi.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])
+    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])
+
+    React.useEffect(() => {
+      if (!api) return
+      setApi?.(api)
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api.off("select", onSelect)
+      }
+    }, [api, onSelect, setApi])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          api,
+          canScrollNext,
+          canScrollPrev,
+          direction,
+          messages,
+          orientation,
+          scrollNext,
+          scrollPrev,
+        }}
+      >
+        <div
+          data-orientation={orientation}
+          data-slot="carousel"
+          dir={direction}
+          ref={setRootRef}
+          role="region"
+          aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? messages.carouselLabel)}
+          aria-labelledby={ariaLabelledBy}
+          aria-roledescription={
+            ariaRoleDescription ?? messages.carouselRoleDescription
+          }
+          className={cn("relative", className)}
+          {...props}
+        >
+          <div ref={carouselRef} className="overflow-hidden">
+            {children}
+          </div>
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  function CarouselContent({ className, ...props }, ref) {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        data-slot="carousel-content"
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal"
+            ? "-ms-[var(--bh-space-3xl-16)]"
+            : "-mt-[var(--bh-space-3xl-16)] flex-col",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  function CarouselItem({ className, ...props }, ref) {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        data-slot="carousel-item"
+        ref={ref}
+        role="group"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal"
+            ? "ps-[var(--bh-space-3xl-16)]"
+            : "pt-[var(--bh-space-3xl-16)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
+  function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }, ref) {
+    const { canScrollPrev, messages, orientation, scrollPrev } = useCarousel()
+
+    return (
+      <Button
+        aria-label={
+          props["aria-label"] ?? messages.previousSlide
+        }
+        className={cn(
+          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
+          orientation === "horizontal"
+            ? "start-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
+            : "start-1/2 top-[calc(var(--bh-space-8xl-48)*-1)] -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        ref={ref}
+        size={size}
+        type="button"
+        variant={variant}
+        {...props}
+      >
+        <ArrowLeftIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+      </Button>
+    )
+  }
+)
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselButtonProps>(
+  function CarouselNext({ className, variant = "outline", size = "icon", ...props }, ref) {
+    const { canScrollNext, messages, orientation, scrollNext } = useCarousel()
+
+    return (
+      <Button
+        aria-label={
+          props["aria-label"] ?? messages.nextSlide
+        }
+        className={cn(
+          "absolute size-[var(--bh-space-7xl-40)] rounded-[var(--bh-radius-full)]",
+          orientation === "horizontal"
+            ? "end-[calc(var(--bh-space-8xl-48)*-1)] top-1/2 -translate-y-1/2"
+            : "bottom-[calc(var(--bh-space-8xl-48)*-1)] start-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        ref={ref}
+        size={size}
+        type="button"
+        variant={variant}
+        {...props}
+      >
+        <ArrowRightIcon className="size-[var(--bh-space-3xl-16)] rtl:-scale-x-100" />
+      </Button>
+    )
+  }
+)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error("Carousel parts must be used within Carousel")
+  }
+  return context
+}
+
+export {
+  arabicCarouselMessages,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+}
+export type {
+  CarouselApi,
+  CarouselButtonProps,
+  CarouselContentProps,
+  CarouselItemProps,
+  CarouselMessages,
+  CarouselOptions,
+  CarouselOrientation,
+  CarouselPlugin,
+  CarouselProps,
+}