@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/button.js

@@ -0,0 +1,145 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cva } from "class-variance-authority";
+import { useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { useArcPress } from "../motion/arc-press.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { ButtonLabel } from "./button-label.js";
+import { LEAVING_ATTRIBUTES, LOADING_INERT_HANDLERS } from "./button-interaction.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+* uses the foundation's shared outline; pointer focus draws no ring.
+*/
+const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
+			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
+			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
+			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
+		},
+		size: {
+			sm: "min-h-(--control-height-sm) px-3",
+			md: "min-h-(--control-height-md)",
+			lg: "min-h-(--control-height-lg) px-5"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+/**
+* A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
+* @param props - Variant, size, loading state and native button attributes, including `ref`.
+* @returns The native button.
+*/
+function Button(t0) {
+	const $ = _c(29);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, variant: t1, size: t2, loading: t3, type: t4, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	const variant = t1 === undefined ? "primary" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const loading = t3 === undefined ? false : t3;
+	const type = t4 === undefined ? "button" : t4;
+	const reduceMotion = usePrefersReducedMotion();
+	const isPresent = useIsPresent();
+	const [element, attach] = useAttachedElement(ref);
+	useArcPress(element, !reduceMotion);
+	let t5;
+	if ($[9] !== className || $[10] !== size || $[11] !== variant) {
+		t5 = cn(buttonVariants({
+			variant,
+			size,
+			className
+		}));
+		$[9] = className;
+		$[10] = size;
+		$[11] = variant;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	const t6 = loading || undefined;
+	const t7 = loading || props["aria-disabled"] || undefined;
+	const t8 = loading ? LOADING_INERT_HANDLERS : undefined;
+	const t9 = isPresent ? undefined : LEAVING_ATTRIBUTES;
+	let t10;
+	if ($[13] !== children || $[14] !== loading || $[15] !== reduceMotion) {
+		t10 = /* @__PURE__ */ _jsx(ButtonLabel, {
+			loading,
+			reduceMotion,
+			children
+		});
+		$[13] = children;
+		$[14] = loading;
+		$[15] = reduceMotion;
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== attach || $[18] !== props || $[19] !== size || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 || $[26] !== type || $[27] !== variant) {
+		t11 = /* @__PURE__ */ _jsx("button", {
+			ref: attach,
+			type,
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t5,
+			"aria-busy": t6,
+			...props,
+			"aria-disabled": t7,
+			...t8,
+			...t9,
+			children: t10
+		});
+		$[17] = attach;
+		$[18] = props;
+		$[19] = size;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = type;
+		$[27] = variant;
+		$[28] = t11;
+	} else {
+		t11 = $[28];
+	}
+	return t11;
+}
+export { Button };

package/dist/components/calendar.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one month for
+ * picking one date, with a sliding month change, a gliding selected disc and an optional Today button. It renders on
+ * the internal react-day-picker composition, which keeps keyboard navigation and accessible day labels.
+ */
+import * as React from "react";
+import { useToday } from "../hooks/use-today.js";
+export { useToday };
+/** Returns `true` for a day that cannot be picked, such as a weekend. */
+type CalendarDateMatcher = (date: Date) => boolean;
+/** Props of {@link Calendar}: Arc's calendar API plus the @astra-kit/ui extensions marked below. */
+type CalendarProps = {
+    /** Selected date. Controlled only: the calendar shows what it receives. */
+    value?: Date | null;
+    /** Called with the day the viewer picks, including from the Today button. */
+    onChange?: (date: Date) => void;
+    /** Controlled visible month. Without it the calendar opens on the month of `value`, or on today's. */
+    month?: Date;
+    /** Called with the first day of the month the viewer navigates to. */
+    onMonthChange?: (month: Date) => void;
+    /** Earliest selectable day; navigation stops at its month. */
+    minDate?: Date;
+    /** Latest selectable day; navigation stops at its month. */
+    maxDate?: Date;
+    /** Return `true` to block a day, such as weekends. */
+    disabledDates?: CalendarDateMatcher;
+    /**
+     * BCP 47 locale for month, weekday and day names. Defaults to `"es-AR"`, with weeks starting on Monday. Spanish and
+     * English locales are fully translated; any other keeps English accessible labels with `Intl` month and weekday names.
+     */
+    locale?: string;
+    /** Class of the calendar root. */
+    className?: string;
+    /** Adds a Today button that returns to the current month and selects today when it is allowed. */
+    showToday?: boolean;
+    /** @astra-kit/ui: copy of the Today button. Defaults to "Hoy". */
+    todayLabel?: string;
+};
+/**
+ * A month grid for picking one date. Days before `minDate`, after `maxDate` or matched by `disabledDates` are blocked,
+ * and navigation stops at the months of `minDate` and `maxDate`.
+ * @param props - Arc's calendar props plus `todayLabel`.
+ * @returns The calendar, in Spanish by default.
+ */
+declare function Calendar({ value, onChange, month, onMonthChange, minDate, maxDate, disabledDates, locale, className, showToday, todayLabel, }: CalendarProps): React.JSX.Element;
+export { Calendar };
+export type { CalendarDateMatcher, CalendarProps };

package/dist/components/calendar.js

@@ -0,0 +1,155 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one month for
+* picking one date, with a sliding month change, a gliding selected disc and an optional Today button. It renders on
+* the internal react-day-picker composition, which keeps keyboard navigation and accessible day labels.
+*/
+import * as React from "react";
+import { enUS, es } from "react-day-picker/locale";
+import { CALENDAR_COPY, CALENDAR_DEFAULT_LOCALE, CALENDAR_LOCALE_SEPARATOR, CALENDAR_TRANSLATED_LANGUAGE } from "../constants/calendar.js";
+import { useToday } from "../hooks/use-today.js";
+import { Calendar as CalendarPrimitive } from "./primitives/calendar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export { useToday };
+/**
+* Maps a BCP 47 locale to react-day-picker's localization. Only Spanish and English locale data ship with @astra-kit/ui,
+* so other languages take their month and weekday names from `Intl` and keep English accessible labels.
+* @param locale - BCP 47 locale such as `es-AR`.
+* @returns The react-day-picker locale and, for untranslated languages, `Intl` formatters.
+*/
+function resolveCalendarLocale(locale) {
+	const language = locale.split(CALENDAR_LOCALE_SEPARATOR)[0]?.toLowerCase();
+	if (language === CALENDAR_TRANSLATED_LANGUAGE.spanish) return { dayPickerLocale: es };
+	if (language === CALENDAR_TRANSLATED_LANGUAGE.english) return { dayPickerLocale: enUS };
+	const captionFormat = new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric"
+	});
+	const weekdayFormat = new Intl.DateTimeFormat(locale, { weekday: "short" });
+	return {
+		dayPickerLocale: enUS,
+		formatters: {
+			formatCaption: (month) => captionFormat.format(month),
+			formatWeekdayName: (weekday) => weekdayFormat.format(weekday)
+		}
+	};
+}
+/**
+* A month grid for picking one date. Days before `minDate`, after `maxDate` or matched by `disabledDates` are blocked,
+* and navigation stops at the months of `minDate` and `maxDate`.
+* @param props - Arc's calendar props plus `todayLabel`.
+* @returns The calendar, in Spanish by default.
+*/
+function Calendar(t0) {
+	const $ = _c(30);
+	const { value, onChange, month, onMonthChange, minDate, maxDate, disabledDates, locale: t1, className, showToday: t2, todayLabel: t3 } = t0;
+	const locale = t1 === undefined ? CALENDAR_DEFAULT_LOCALE : t1;
+	const showToday = t2 === undefined ? false : t2;
+	const todayLabel = t3 === undefined ? CALENDAR_COPY.today : t3;
+	const today = useToday();
+	let t4;
+	if ($[0] !== locale) {
+		t4 = resolveCalendarLocale(locale);
+		$[0] = locale;
+		$[1] = t4;
+	} else {
+		t4 = $[1];
+	}
+	const { dayPickerLocale, formatters } = t4;
+	let t5;
+	if ($[2] !== value) {
+		t5 = () => value ?? undefined;
+		$[2] = value;
+		$[3] = t5;
+	} else {
+		t5 = $[3];
+	}
+	const [initialMonth] = React.useState(t5);
+	let matchers;
+	if ($[4] !== disabledDates || $[5] !== maxDate || $[6] !== minDate) {
+		matchers = [];
+		if (minDate) {
+			let t6;
+			if ($[8] !== minDate) {
+				t6 = { before: minDate };
+				$[8] = minDate;
+				$[9] = t6;
+			} else {
+				t6 = $[9];
+			}
+			matchers.push(t6);
+		}
+		if (maxDate) {
+			let t6;
+			if ($[10] !== maxDate) {
+				t6 = { after: maxDate };
+				$[10] = maxDate;
+				$[11] = t6;
+			} else {
+				t6 = $[11];
+			}
+			matchers.push(t6);
+		}
+		if (disabledDates) {
+			matchers.push(disabledDates);
+		}
+		$[4] = disabledDates;
+		$[5] = maxDate;
+		$[6] = minDate;
+		$[7] = matchers;
+	} else {
+		matchers = $[7];
+	}
+	const disabled = matchers;
+	const t6 = value ?? undefined;
+	let t7;
+	if ($[12] !== onChange) {
+		t7 = (_selected, triggerDate) => onChange?.(triggerDate);
+		$[12] = onChange;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	let t8;
+	if ($[14] !== className || $[15] !== dayPickerLocale || $[16] !== disabled || $[17] !== formatters || $[18] !== initialMonth || $[19] !== locale || $[20] !== maxDate || $[21] !== minDate || $[22] !== month || $[23] !== onMonthChange || $[24] !== showToday || $[25] !== t6 || $[26] !== t7 || $[27] !== today || $[28] !== todayLabel) {
+		t8 = /* @__PURE__ */ _jsx(CalendarPrimitive, {
+			mode: "single",
+			selected: t6,
+			onSelect: t7,
+			today,
+			month,
+			defaultMonth: initialMonth,
+			onMonthChange,
+			startMonth: minDate,
+			endMonth: maxDate,
+			disabled,
+			locale: dayPickerLocale,
+			lang: locale,
+			formatters,
+			className,
+			showToday,
+			todayLabel
+		});
+		$[14] = className;
+		$[15] = dayPickerLocale;
+		$[16] = disabled;
+		$[17] = formatters;
+		$[18] = initialMonth;
+		$[19] = locale;
+		$[20] = maxDate;
+		$[21] = minDate;
+		$[22] = month;
+		$[23] = onMonthChange;
+		$[24] = showToday;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = today;
+		$[28] = todayLabel;
+		$[29] = t8;
+	} else {
+		t8 = $[29];
+	}
+	return t8;
+}
+export { Calendar };

package/dist/components/card.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { CardHeadingLevel } from "../constants/card.js";
+export type { CardHeadingLevel };
+export type CardProps = Omit<ComponentProps<"article">, "title"> & {
+    /** Card heading. Without it the card renders only its surface and children. With `details` it opens the quick look. */
+    title?: ReactNode;
+    /** Supporting line under the title. */
+    description?: ReactNode;
+    /** Image or visual at the top. Zooms slightly on hover. */
+    media?: ReactNode;
+    /** Trailing control of the byline row, such as a button. */
+    action?: ReactNode;
+    /** Small leading visual of the byline, such as the owner's avatar. */
+    avatar?: ReactNode;
+    /** Who the card belongs to, shown in the byline. */
+    meta?: ReactNode;
+    /** Short status under the meta, such as "Actualizada hace 2 horas". Changes roll in word by word and are announced politely. */
+    status?: string;
+    /** Quick look content. With a `title`, the card opens into a larger dialog that grows out of it. */
+    details?: ReactNode;
+    /** Controlled quick look state. */
+    open?: boolean;
+    /** Initial quick look state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the quick look opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Content rendered after the body and byline, such as a row of actions. */
+    footer?: ReactNode;
+    /** Heading level of the title. */
+    headingLevel?: CardHeadingLevel;
+};
+/**
+ * A content card with optional media, byline, action and footer that can grow into a quick look dialog.
+ * @param props - Arc's card content and quick look state, the heading level, a footer and native article attributes.
+ * @returns The card article, wrapped in its quick look dialog when `details` is set.
+ */
+declare function Card({ title, description, media, action, avatar, meta, status, details, open: openProp, defaultOpen, onOpenChange, footer, headingLevel, children, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
+export { Card };