beez-ui 2.5.0 → 2.6.1

package/dist/components/card.d.ts

@@ -1,11 +1,27 @@
+/**
+ * Arc's Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a contained group of related content on
+ * Arc's surface, panel radius and spacing. A card holding a link or button floats a little on fine-pointer hover,
+ * and `CardMedia` drifts its photo in slowly while the card is pointed at. The compound shadcn structure is kept;
+ * Arc's quick look is not part of it.
+ */
 import * as React from "react";
+/**
+ * Card surface. The outline is a 1px ring in the border token, so the hover shadow can stack on it, and isolation
+ * keeps the rounded clip on media while the card lifts (Safari drops it otherwise).
+ */
 declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
     size?: "default" | "sm";
 }): React.JSX.Element;
+/**
+ * Arc's card media: a muted frame for a photo or illustration that zooms in slowly while the card is pointed at
+ * and eases back a little faster. Place it first to sit flush with the top edge.
+ */
+declare function CardMedia({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Arc's footer row: a byline or meta on the start side and actions on the end, without a tinted band. */
 declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia, };

package/dist/components/card.js

@@ -1,58 +1,84 @@
+/**
+* Arc's Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a contained group of related content on
+* Arc's surface, panel radius and spacing. A card holding a link or button floats a little on fine-pointer hover,
+* and `CardMedia` drifts its photo in slowly while the card is pointed at. The compound shadcn structure is kept;
+* Arc's quick look is not part of it.
+*/
 import * as React from "react";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Card surface. The outline is a 1px ring in the border token, so the hover shadow can stack on it, and isolation
+* keeps the rounded clip on media while the card lifts (Safari drops it otherwise).
+*/
 function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ _jsx(MotionSlot, {
 		kind: "card",
 		children: /* @__PURE__ */ _jsx("div", {
 			"data-slot": "card",
 			"data-size": size,
-			className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+			className: cn("group/card isolate flex min-w-0 flex-col gap-(--space-4) overflow-hidden rounded-(--radius-panel) bg-surface py-(--space-5) text-sm text-foreground ring-1 ring-border has-[>img:first-child]:pt-0 has-[>[data-slot=card-media]:first-child]:pt-0 data-[size=sm]:gap-(--space-3) data-[size=sm]:py-(--space-4) motion-safe:transition-[translate] motion-safe:duration-(--duration-spring) motion-safe:ease-(--ease-spring) hover-fine:has-[a,button]:motion-safe:-translate-y-0.5", className),
 			...props
 		})
 	});
 }
+/**
+* Arc's card media: a muted frame for a photo or illustration that zooms in slowly while the card is pointed at
+* and eases back a little faster. Place it first to sit flush with the top edge.
+*/
+function CardMedia({ className, children, ...props }) {
+	return /* @__PURE__ */ _jsx("div", {
+		"data-slot": "card-media",
+		className: cn("relative overflow-hidden bg-surface-muted", className),
+		...props,
+		children: /* @__PURE__ */ _jsx("div", {
+			className: "grid min-h-28 place-items-center transition-transform duration-(--duration-considered) ease-(--ease-standard) motion-reduce:transition-none pointer-fine:group-hover/card:scale-[1.04] pointer-fine:group-hover/card:duration-[calc(var(--duration-considered)*2)] motion-reduce:scale-100! [&>img]:size-full [&>img]:object-cover",
+			children
+		})
+	});
+}
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-header",
-		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-(--space-2) px-(--space-5) group-data-[size=sm]/card:px-(--space-4) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--space-5) group-data-[size=sm]/card:[.border-b]:pb-(--space-4)", className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-title",
-		className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
+		className: cn("font-sans text-lg leading-[1.3] font-medium tracking-(--tracking-body) text-balance group-data-[size=sm]/card:text-base", className),
 		...props
 	});
 }
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: cn("text-sm leading-(--leading-body) text-pretty text-text-secondary", className),
 		...props
 	});
 }
 function CardAction({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-action",
-		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		className: cn("relative z-1 col-start-2 row-span-2 row-start-1 flex flex-wrap gap-(--space-3) self-start justify-self-end", className),
 		...props
 	});
 }
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+		className: cn("px-(--space-5) group-data-[size=sm]/card:px-(--space-4)", className),
 		...props
 	});
 }
+/** Arc's footer row: a byline or meta on the start side and actions on the end, without a tinted band. */
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ _jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className),
+		className: cn("flex items-center justify-between gap-(--space-3) px-(--space-5) group-data-[size=sm]/card:px-(--space-4)", className),
 		...props
 	});
 }
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia };

package/dist/components/carousel.d.ts

@@ -1,5 +1,12 @@
+/**
+ * Carousel on Embla with Arc's carousel design (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): round
+ * outlined controls on the surface that answer hover on fine pointers and press in, a grab cursor while the track can
+ * be dragged, Home and End to reach the edges, and optional Arc indicators whose pill stretches and travels with the
+ * slides frame by frame. Embla keeps dragging, snapping, looping and plugins.
+ */
 import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { type CarouselOrientation } from "../constants/carousel.js";
 import { ControlButton } from "./control-button.js";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -8,7 +15,7 @@ type CarouselPlugin = UseCarouselParameters[1];
 type CarouselProps = {
     opts?: CarouselOptions;
     plugins?: CarouselPlugin;
-    orientation?: "horizontal" | "vertical";
+    orientation?: CarouselOrientation;
     setApi?: (api: CarouselApi) => void;
 };
 type CarouselContextProps = {
@@ -21,8 +28,28 @@ type CarouselContextProps = {
 } & CarouselProps;
 declare function useCarousel(): CarouselContextProps;
 declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
+/**
+ * The clipped viewport and the slide track. While the track can be dragged it shows Arc's grab cursor on fine
+ * pointers, and a grabbing cursor while a drag is held.
+ */
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof ControlButton>): React.JSX.Element;
 declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof ControlButton>): React.JSX.Element;
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };
+type CarouselIndicatorsProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** Accessible name of the indicator list. Defaults to "Elegir una diapositiva". */
+    label?: string;
+    /** Names each indicator. Defaults to "Diapositiva 2 de 5". */
+    slideLabel?: (index: number, count: number) => string;
+};
+/**
+ * Arc's page indicator for a carousel: one dot per snap point, where the current one stretches into a pill that
+ * follows the track frame by frame while it is dragged or scrolled. The dots are buttons in a named group and the
+ * current one carries `aria-current`; activating a dot scrolls to its slide, and when a dot has focus the carousel's
+ * arrow, Home and End keys move the focus to the dot of the new slide. It renders
+ * once Embla has measured the slides. Place it inside `Carousel`.
+ * @param props - Optional accessible copy plus native attributes of the list.
+ * @returns The indicator list, or nothing until there is more than one snap point.
+ */
+declare function CarouselIndicators({ className, label, slideLabel, ...props }: CarouselIndicatorsProps): React.JSX.Element | null;
+export { type CarouselApi, type CarouselIndicatorsProps, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselIndicators, useCarousel, };