@softize/opus 8.6.6

package/src/ui/components/primitives/card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../../lib/cn.ts'
+
+/**
+ * Card — a superfície da casa: SÓ a casca (borda + raio + bg). Divergência DECLARADA vs
+ * shadcn: `rounded-lg` (não `rounded-xl`), FLAT (sem `shadow-sm`) e SEM `flex/gap/py`
+ * forçados. O upstream embute `py-6 gap-6` + slots `px-6`, o que briga com card-box
+ * simples (o `gap-6` do Card + o `space-y` do consumidor = espaçamento dobrado) — por isso
+ * a casa hand-rollava. Aqui o padding mora no SLOT (Header/Content/Footer) ou no `className`
+ * do consumidor (box simples) — mesmo modelo do Dialog.
+ *
+ *   Box simples:   <Card className="p-4">…</Card>
+ *   Estruturado:   <Card><CardHeader>…</CardHeader><CardContent>…</CardContent><CardFooter>…</CardFooter></Card>
+ */
+export function Card({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  /** Renderiza como o filho (Radix Slot) — pra card CLICÁVEL manter a semântica do filho
+   *  (ex.: <button>) com a superfície do Card: `<Card asChild><button onClick>…</button></Card>`. */
+  asChild?: boolean
+}): React.ReactElement {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp data-slot="card" className={cn('rounded-card bg-card text-card-foreground ring-1 ring-edge shadow-card', className)} {...props} />
+  )
+}
+
+export function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div data-slot="card-header" className={cn('flex flex-col gap-1.5 px-5 pt-5 pb-3', className)} {...props} />
+  )
+}
+
+export function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return <div data-slot="card-title" className={cn('font-semibold leading-none', className)} {...props} />
+}
+
+export function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return <div data-slot="card-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
+}
+
+/** Slot de ação no header (botão/menu) — o consumidor posiciona (ex.: header em flex-row). */
+export function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return <div data-slot="card-action" className={cn('shrink-0', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return <div data-slot="card-content" className={cn('px-5 py-3', className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return <div data-slot="card-footer" className={cn('flex items-center px-5 pt-3 pb-5', className)} {...props} />
+}

package/src/ui/components/primitives/carousel.tsx

@@ -0,0 +1,239 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from '../../lib/cn.ts'
+import { Button } from './button.tsx'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}