banhaten 0.1.2 → 0.2.0

package/registry/components/card.tsx

@@ -121,15 +121,15 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
   moreButtonLabel = "Open card menu",
   onMoreClick,
   orientation = "vertical",
-  primaryActionLabel = "Button",
+  primaryActionLabel,
   primaryActionProps,
-  secondaryActionLabel = "Button",
+  secondaryActionLabel,
   secondaryActionProps,
-  showDescription = true,
-  showFooter = true,
-  showImage = true,
-  showMoreButton = true,
-  showSubtitle = true,
+  showDescription,
+  showFooter,
+  showImage,
+  showMoreButton,
+  showSubtitle,
   subtitle,
   title,
   type = "leading-image",
@@ -142,13 +142,15 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
       ? "leading-image"
       : type ?? "leading-image"
   const fullImage = cardOrientation === "vertical" && cardType === "full-image"
-  const renderedTitle = title ?? "Card Title"
-  const renderedSubtitle = subtitle ?? "Card Subtitle"
-  const renderedDescription =
-    description ??
-    "Journey through time as we explore the mysteries of the Great Pyramids and the Sphinx."
+  const shouldShowDescription = showDescription ?? description !== undefined
+  const shouldShowFooter =
+    showFooter ??
+    Boolean(footer || actions || primaryActionLabel || secondaryActionLabel)
+  const shouldShowImage = showImage ?? Boolean(imageSrc)
+  const shouldShowMoreButton = showMoreButton ?? Boolean(onMoreClick)
+  const shouldShowSubtitle = showSubtitle ?? subtitle !== undefined
 
-  const media = showImage ? (
+  const media = shouldShowImage ? (
     <CardMedia
       imageAlt={imageAlt}
       imageSrc={imageSrc}
@@ -160,7 +162,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
     <CardBody
       actions={actions}
       breakpoint={cardBreakpoint}
-      description={renderedDescription}
+      description={description}
       footer={footer}
       moreButtonLabel={moreButtonLabel}
       onMoreClick={onMoreClick}
@@ -169,12 +171,12 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
       primaryActionProps={primaryActionProps}
       secondaryActionLabel={secondaryActionLabel}
       secondaryActionProps={secondaryActionProps}
-      showDescription={showDescription}
-      showFooter={showFooter && !fullImage}
-      showMoreButton={showMoreButton}
-      showSubtitle={showSubtitle}
-      subtitle={renderedSubtitle}
-      title={renderedTitle}
+      showDescription={shouldShowDescription}
+      showFooter={shouldShowFooter && !fullImage}
+      showMoreButton={shouldShowMoreButton}
+      showSubtitle={shouldShowSubtitle}
+      subtitle={subtitle}
+      title={title}
     />
   )
 
@@ -206,10 +208,10 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
             breakpoint={cardBreakpoint}
             moreButtonLabel={moreButtonLabel}
             onMoreClick={onMoreClick}
-            showMoreButton={showMoreButton}
-            showSubtitle={showSubtitle}
-            subtitle={renderedSubtitle}
-            title={renderedTitle}
+            showMoreButton={shouldShowMoreButton}
+            showSubtitle={shouldShowSubtitle}
+            subtitle={subtitle}
+            title={title}
           />
         </>
       ) : cardOrientation === "horizontal" &&
@@ -275,9 +277,9 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
   function CardActions({
     children,
     className,
-    primaryLabel = "Button",
+    primaryLabel,
     primaryProps,
-    secondaryLabel = "Button",
+    secondaryLabel,
     secondaryProps,
     ...props
   }, ref) {
@@ -286,23 +288,28 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
         data-slot="card-actions"
         ref={ref}
         className={cn(
-          "grid w-full max-w-[var(--bh-card-actions-max-width)] grid-cols-2 gap-[var(--bh-space-xl-12)]",
+          "grid w-full max-w-[var(--bh-card-actions-max-width)] gap-[var(--bh-space-xl-12)]",
+          primaryLabel && secondaryLabel ? "grid-cols-2" : "grid-cols-1",
           className
         )}
         {...props}
       >
         {children ?? (
           <>
-            <Button {...primaryProps} className={cn("min-w-0", primaryProps?.className)}>
-              {primaryLabel}
-            </Button>
-            <Button
-              variant="soft"
-              {...secondaryProps}
-              className={cn("min-w-0", secondaryProps?.className)}
-            >
-              {secondaryLabel}
-            </Button>
+            {primaryLabel ? (
+              <Button {...primaryProps} className={cn("min-w-0", primaryProps?.className)}>
+                {primaryLabel}
+              </Button>
+            ) : null}
+            {secondaryLabel ? (
+              <Button
+                variant="soft"
+                {...secondaryProps}
+                className={cn("min-w-0", secondaryProps?.className)}
+              >
+                {secondaryLabel}
+              </Button>
+            ) : null}
           </>
         )}
       </div>
@@ -331,21 +338,21 @@ function CardBody({
 }: {
   actions?: React.ReactNode
   breakpoint: CardBreakpoint
-  description: React.ReactNode
+  description?: React.ReactNode
   footer?: React.ReactNode
   moreButtonLabel: string
   onMoreClick?: React.MouseEventHandler<HTMLButtonElement>
   orientation: CardOrientation
-  primaryActionLabel: React.ReactNode
+  primaryActionLabel?: React.ReactNode
   primaryActionProps?: ButtonProps
-  secondaryActionLabel: React.ReactNode
+  secondaryActionLabel?: React.ReactNode
   secondaryActionProps?: ButtonProps
   showDescription: boolean
   showFooter: boolean
   showMoreButton: boolean
   showSubtitle: boolean
-  subtitle: React.ReactNode
-  title: React.ReactNode
+  subtitle?: React.ReactNode
+  title?: React.ReactNode
 }) {
   const horizontal = orientation === "horizontal"
 
@@ -378,7 +385,7 @@ function CardBody({
           title={title}
           subtitleClassName={getSubtitleClassName(breakpoint)}
         />
-        {showDescription ? (
+        {showDescription && description !== undefined ? (
           <p
             data-slot="card-description"
             dir="auto"
@@ -423,8 +430,8 @@ function CardFullImageContent({
   onMoreClick?: React.MouseEventHandler<HTMLButtonElement>
   showMoreButton: boolean
   showSubtitle: boolean
-  subtitle: React.ReactNode
-  title: React.ReactNode
+  subtitle?: React.ReactNode
+  title?: React.ReactNode
 }) {
   return (
     <div
@@ -475,20 +482,22 @@ function CardHeader({
       className="flex min-w-0 items-start gap-[var(--bh-space-3xl-16)]"
     >
       <div className="flex min-w-0 flex-1 flex-col gap-[var(--bh-space-xxs-2)]">
-        <h3
-          data-slot="card-title"
-          dir="auto"
-          className={cn(
-            "min-w-0 break-words text-[length:var(--bh-text-heading-sm-semibold-font-size)]",
-            "font-[var(--bh-text-heading-sm-semibold-font-weight)]",
-            "leading-[var(--bh-text-heading-sm-semibold-line-height)]",
-            "tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)]",
-            onImage ? "text-[var(--bh-content-on-color)]" : "text-[var(--bh-content-default)]"
-          )}
-        >
-          {title}
-        </h3>
-        {showSubtitle ? (
+        {title !== undefined ? (
+          <h3
+            data-slot="card-title"
+            dir="auto"
+            className={cn(
+              "min-w-0 break-words text-[length:var(--bh-text-heading-sm-semibold-font-size)]",
+              "font-[var(--bh-text-heading-sm-semibold-font-weight)]",
+              "leading-[var(--bh-text-heading-sm-semibold-line-height)]",
+              "tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)]",
+              onImage ? "text-[var(--bh-content-on-color)]" : "text-[var(--bh-content-default)]"
+            )}
+          >
+            {title}
+          </h3>
+        ) : null}
+        {showSubtitle && subtitle !== undefined ? (
           <p
             data-slot="card-subtitle"
             dir="auto"

package/registry/components/carousel.tsx

@@ -0,0 +1,282 @@
+"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 = {
+  nextSlide: string
+  previousSlide: string
+}
+
+const defaultCarouselMessages: CarouselMessages = {
+  nextSlide: "Next slide",
+  previousSlide: "Previous slide",
+}
+
+const arabicCarouselMessages: CarouselMessages = {
+  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(
+    {
+      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"
+          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,
+}