@passui/react 0.1.46 → 0.2.0

package/dist/appearance/theme.d.ts

@@ -0,0 +1,71 @@
+import { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from "react";
+type ValueObject = {
+  [themeName: string]: string;
+};
+/**
+ * Props for the useTheme hook
+ * @author la niina
+ */
+export type UseThemeProps = {
+  /** List of all available theme names */
+  themes: Array<string>;
+  /** Forced theme name for the current page */
+  forcedTheme?: string | undefined;
+  /** Update the theme */
+  setTheme: Dispatch<SetStateAction<string>>;
+  /** Active theme name */
+  theme?: string | undefined;
+  /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+  systemTheme?: SystemTheme | undefined;
+};
+export type SystemTheme = "dark" | "light";
+export type Attribute = `data-${string}` | "class";
+export interface ThemeProviderProps extends PropsWithChildren {
+  /** List of all available theme names */
+  themes?: Array<string> | undefined;
+  /** Forced theme name for the current page */
+  forcedTheme?: string | undefined;
+  /** Whether to switch between dark and light themes based on prefers-color-scheme */
+  enableSystem?: boolean | undefined;
+  /** Disable all CSS transitions when switching themes */
+  disableTransitionOnChange?: boolean | undefined;
+  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+  enableColorScheme?: boolean | undefined;
+  /** Key used to store theme setting in localStorage */
+  storageKey?: string | undefined;
+  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+  defaultTheme?: string | undefined;
+  /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+  attribute?: Attribute | Array<Attribute> | undefined;
+  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+  value?: ValueObject | undefined;
+  /** Nonce string to pass to the inline script for CSP headers */
+  nonce?: string | undefined;
+}
+/**
+ * Hook to access the theme context
+ * @returns {UseThemeProps} theme context
+ * @example
+ * const { theme, setTheme } = useTheme()
+ */
+export declare const useTheme: () => UseThemeProps;
+/**
+ * Theme provider component is used to wrap your app &
+ * provide theme context to all components. It can be used to switch
+ * between themes.
+ * @author la niina
+ * @param {ThemeProviderProps} props
+ * @returns {ReactNode} children
+ * @example
+ * <ThemeProvider attribute="class" disableTransitionOnChange>
+ *     <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider themes={["light", "queer", "dark", "system"]} defaultTheme="light">
+ *     <App />
+ * </ThemeProvider>
+ */
+export declare const ThemeProvider: (props: ThemeProviderProps) => ReactNode;
+export declare const script: (attribute: Attribute | Array<Attribute>, storageKey: string, defaultTheme: string, forcedTheme: string | undefined, themes: Array<string>, value: ValueObject | undefined, enableSystem: boolean, enableColorScheme: boolean) => void;
+export {};

package/dist/appearance/theme.js

@@ -0,0 +1,236 @@
+import * as React from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/appearance/theme.tsx
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+const ThemeContext = createContext(void 0);
+const defaultContext = {
+	setTheme: () => {},
+	themes: []
+};
+/**
+* Hook to access the theme context
+* @returns {UseThemeProps} theme context
+* @example
+* const { theme, setTheme } = useTheme()
+*/
+const useTheme = () => useContext(ThemeContext) ?? defaultContext;
+/**
+* Theme provider component is used to wrap your app &
+* provide theme context to all components. It can be used to switch
+* between themes.
+* @author la niina
+* @param {ThemeProviderProps} props
+* @returns {ReactNode} children
+* @example
+* <ThemeProvider attribute="class" disableTransitionOnChange>
+*     <App />
+* </ThemeProvider>
+*
+* @example
+* <ThemeProvider themes={["light", "queer", "dark", "system"]} defaultTheme="light">
+*     <App />
+* </ThemeProvider>
+*/
+const ThemeProvider = (props) => {
+	if (useContext(ThemeContext)) return props.children;
+	return /* @__PURE__ */ jsx(Theme, { ...props });
+};
+const defaultThemes = ["light", "dark"];
+const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce }) => {
+	const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
+	const applyClassAttribute = useCallback((name, attrValues) => {
+		const d = document.documentElement;
+		d.classList.remove(...attrValues);
+		if (name) d.classList.add(name);
+	}, []);
+	const applyDataAttribute = useCallback((attr, name) => {
+		const d = document.documentElement;
+		if (name) d.setAttribute(attr, name);
+		else d.removeAttribute(attr);
+	}, []);
+	const applyAttributesToDOM = useCallback((resolved) => {
+		const attributeList = Array.isArray(attribute) ? attribute : [attribute];
+		const attrValues = value ? Object.values(value) : themes;
+		const name = value ? value[resolved] : resolved;
+		for (const attr of attributeList) if (attr === "class") applyClassAttribute(name, attrValues);
+		else if (attr.startsWith("data-")) applyDataAttribute(attr, name);
+	}, [
+		attribute,
+		themes,
+		value,
+		applyClassAttribute,
+		applyDataAttribute
+	]);
+	const applyColorScheme = useCallback((resolved) => {
+		if (!enableColorScheme) return;
+		const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null;
+		const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
+		document.documentElement.style.colorScheme = colorScheme || "";
+	}, [enableColorScheme, defaultTheme]);
+	const applyTheme = useCallback((nextTheme) => {
+		if (!nextTheme) return;
+		const resolved = nextTheme === "system" && enableSystem ? getSystemTheme() : nextTheme;
+		const enable = disableTransitionOnChange ? disableAnimation() : null;
+		applyAttributesToDOM(resolved);
+		applyColorScheme(resolved);
+		enable?.();
+	}, [
+		enableSystem,
+		disableTransitionOnChange,
+		applyAttributesToDOM,
+		applyColorScheme
+	]);
+	const setTheme = useCallback((newValue) => {
+		const newTheme = typeof newValue === "function" ? newValue(theme ?? "") : newValue;
+		setThemeState(newTheme);
+		try {
+			localStorage.setItem(storageKey, newTheme);
+		} catch {
+			console.error("Failed to save theme to localStorage");
+		}
+	}, [theme, storageKey]);
+	const handleMediaQuery = useCallback((_event) => {
+		if (theme === "system" && enableSystem && !forcedTheme) applyTheme("system");
+	}, [
+		applyTheme,
+		enableSystem,
+		forcedTheme,
+		theme
+	]);
+	React.useEffect(() => {
+		if (isServer) return;
+		const media = window.matchMedia(MEDIA);
+		media.addEventListener("change", handleMediaQuery);
+		handleMediaQuery(media);
+		return () => media.removeEventListener("change", handleMediaQuery);
+	}, [handleMediaQuery]);
+	React.useEffect(() => {
+		if (isServer) return;
+		const handleStorage = (e) => {
+			if (e.key !== storageKey) return;
+			const newTheme = e.newValue || defaultTheme;
+			setTheme(newTheme);
+		};
+		window.addEventListener("storage", handleStorage);
+		return () => window.removeEventListener("storage", handleStorage);
+	}, [
+		defaultTheme,
+		setTheme,
+		storageKey
+	]);
+	useEffect(() => {
+		applyTheme(forcedTheme ?? theme);
+	}, [
+		applyTheme,
+		forcedTheme,
+		theme
+	]);
+	const providerValue = useMemo(() => ({
+		theme,
+		setTheme,
+		forcedTheme,
+		themes: enableSystem ? [...themes, "system"] : themes,
+		systemTheme: enableSystem ? getSystemTheme() : void 0
+	}), [
+		theme,
+		forcedTheme,
+		enableSystem,
+		themes,
+		setTheme
+	]);
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value: providerValue,
+		children: [/* @__PURE__ */ jsx(ThemeScript, {
+			forcedTheme,
+			storageKey,
+			attribute,
+			enableSystem,
+			enableColorScheme,
+			defaultTheme,
+			value,
+			themes,
+			nonce
+		}), children]
+	});
+};
+const ThemeScript = memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, themes, nonce }) => {
+	const scriptArgs = JSON.stringify([
+		attribute,
+		storageKey,
+		defaultTheme,
+		forcedTheme,
+		themes,
+		value,
+		enableSystem,
+		enableColorScheme
+	]).slice(1, -1);
+	return /* @__PURE__ */ jsx("script", {
+		dangerouslySetInnerHTML: { __html: `(${script.toString()})(${scriptArgs})` },
+		nonce,
+		suppressHydrationWarning: true
+	});
+});
+ThemeScript.displayName = "ThemeScript";
+const getTheme = (key, fallback) => {
+	if (isServer) return fallback;
+	let theme;
+	try {
+		theme = localStorage.getItem(key) || void 0;
+	} catch {}
+	return theme || fallback;
+};
+const disableAnimation = () => {
+	const css = document.createElement("style");
+	css.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+	document.head.appendChild(css);
+	return () => {
+		window.getComputedStyle(document.body);
+		setTimeout(() => {
+			document.head.removeChild(css);
+		}, 1);
+	};
+};
+const getSystemTheme = (e) => {
+	if (isServer) return "light";
+	return (e ?? window.matchMedia(MEDIA)).matches ? "dark" : "light";
+};
+const script = (attribute, storageKey, defaultTheme, forcedTheme, themes, value, enableSystem, enableColorScheme) => {
+	const el = document.documentElement;
+	const systemThemes = ["light", "dark"];
+	const attributes = Array.isArray(attribute) ? attribute : [attribute];
+	const attrValues = value ? Object.values(value) : themes;
+	function applyClassAttr(name) {
+		el.classList.remove(...attrValues);
+		if (name) el.classList.add(name);
+	}
+	function applyDataAttr(attr, name) {
+		if (name) el.setAttribute(attr, name);
+		else el.removeAttribute(attr);
+	}
+	function updateDOM(theme) {
+		const name = value ? value[theme] : theme;
+		for (const attr of attributes) if (attr === "class") applyClassAttr(name);
+		else if (attr.startsWith("data-")) applyDataAttr(attr, name);
+		setColorScheme(theme);
+	}
+	function setColorScheme(theme) {
+		if (!enableColorScheme) return;
+		const fallback = systemThemes.includes(defaultTheme) ? defaultTheme : null;
+		const colorScheme = systemThemes.includes(theme) ? theme : fallback;
+		el.style.colorScheme = colorScheme || "";
+	}
+	function resolveSystemTheme() {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+	if (forcedTheme) updateDOM(forcedTheme === "system" && enableSystem ? resolveSystemTheme() : forcedTheme);
+	else try {
+		const themeName = localStorage.getItem(storageKey) || defaultTheme;
+		updateDOM(enableSystem && themeName === "system" ? resolveSystemTheme() : themeName);
+	} catch {
+		updateDOM(defaultTheme);
+	}
+};
+export { ThemeProvider, script, useTheme };

package/dist/appearance.d.ts

@@ -0,0 +1,3 @@
+import { PlatformOS, PlatformProvider, PlatformScript, detectPlatform, resolvePlatform, usePlatform } from "./appearance/platform.js";
+import { Attribute, SystemTheme, ThemeProvider, ThemeProviderProps, UseThemeProps, script, useTheme } from "./appearance/theme.js";
+export { Attribute, PlatformOS, PlatformProvider, PlatformScript, SystemTheme, ThemeProvider, ThemeProviderProps, UseThemeProps, detectPlatform, resolvePlatform, script, usePlatform, useTheme };

package/dist/appearance.js

@@ -0,0 +1,3 @@
+import { PlatformProvider, PlatformScript, detectPlatform, resolvePlatform, usePlatform } from "./appearance/platform.js";
+import { ThemeProvider, script, useTheme } from "./appearance/theme.js";
+export { PlatformProvider, PlatformScript, ThemeProvider, detectPlatform, resolvePlatform, script, usePlatform, useTheme };

package/dist/{types/src/components/aspect-ratio/aspect-ratio.d.ts → aspect-ratio.d.ts}

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
-    /** Width divided by height. @default 1.3333333333333333 */
-    ratio?: number;
+  /** Width divided by height. @default 1.3333333333333333 */
+  ratio?: number;
 }
 /** A crop frame: size its geometry, while images cover without distortion. */
-export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
+export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;

package/dist/aspect-ratio.js

@@ -0,0 +1,17 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/aspect-ratio.tsx
+/** A crop frame: size its geometry, while images cover without distortion. */
+function AspectRatio({ ratio = 4 / 3, className, style, ...props }) {
+	const aspect = Number.isFinite(ratio) && ratio > 0 ? ratio : 4 / 3;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio",
+		...props,
+		className: cx("relative w-full overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
+		style: {
+			aspectRatio: aspect,
+			...style
+		}
+	});
+}
+export { AspectRatio };

package/dist/avatar.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+export declare function Avatar({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** The photo. It stays invisible until loaded, and the fallback shows if it fails. */
+export declare function AvatarImage({ className, alt, ...props }: ComponentProps<"img">): import("react").JSX.Element | null;
+export declare function AvatarFallback({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element | null;

package/dist/avatar.js

@@ -0,0 +1,43 @@
+import { cx } from "./lib/cx.js";
+import { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/avatar.tsx
+const Context = createContext(() => {});
+const StatusContext = createContext("loading");
+function Avatar({ className, ...props }) {
+	const [status, setStatus] = useState("loading");
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: setStatus,
+		children: /* @__PURE__ */ jsx(StatusContext.Provider, {
+			value: status,
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "avatar",
+				className: cx("relative flex size-10 shrink-0 overflow-hidden rounded-full bg-fill", className),
+				...props
+			})
+		})
+	});
+}
+/** The photo. It stays invisible until loaded, and the fallback shows if it fails. */
+function AvatarImage({ className, alt = "", ...props }) {
+	const report = useContext(Context);
+	const status = useContext(StatusContext);
+	if (!props.src || status === "error") return null;
+	return /* @__PURE__ */ jsx("img", {
+		alt,
+		"data-slot": "avatar-image",
+		onLoad: () => report("loaded"),
+		onError: () => report("error"),
+		className: cx("absolute inset-0 size-full object-cover transition-opacity duration-(--duration-fast)", status !== "loaded" && "opacity-0", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	if (useContext(StatusContext) === "loaded") return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-fallback",
+		className: cx("absolute inset-0 flex items-center justify-center text-footnote font-medium text-label-secondary", className),
+		...props
+	});
+}
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/badge.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
+export type BadgeProps = ComponentProps<"span"> & {
+  /** Colour role. @default "default" */
+  variant?: BadgeVariant;
+};
+/** A small status label. */
+export declare function Badge({ variant, className, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/badge.js

@@ -0,0 +1,21 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/badge.tsx
+const variants = {
+	default: "bg-accent text-on-accent",
+	secondary: "bg-fill text-label",
+	destructive: "bg-danger/15 text-danger",
+	outline: "text-label shadow-[inset_0_0_0_0.5px_var(--color-separator)]",
+	success: "bg-success/15 text-success",
+	warning: "bg-warning/15 text-warning"
+};
+/** A small status label. */
+function Badge({ variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "badge",
+		"data-variant": variant,
+		className: cx("inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full px-2.5 py-0.5 text-caption font-semibold [&_svg]:size-3 [&_svg]:pointer-events-none", variants[variant], className),
+		...props
+	});
+}
+export { Badge };

package/dist/breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps } from "react";
+export declare function Breadcrumb(props: ComponentProps<"nav">): import("react").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: ComponentProps<"ol">): import("react").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
+/** A link. Pass `render` to use your router's link element. */
+export declare function BreadcrumbLink({ className, render, ...props }: ComponentProps<"a"> & {
+  render?: RenderProp;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function BreadcrumbPage({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
+/** Stands in for the crumbs that were folded away. Wrap it in a menu trigger to reveal them. */
+export declare function BreadcrumbEllipsis({ children, className, ...props }: ComponentProps<"span">): import("react").JSX.Element;

package/dist/breadcrumb.js

@@ -0,0 +1,63 @@
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/breadcrumb.tsx
+function Breadcrumb(props) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cx("m-0 flex list-none flex-wrap items-center gap-1.5 p-0 text-footnote text-label-secondary", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cx("inline-flex items-center gap-1.5", className),
+		...props
+	});
+}
+/** A link. Pass `render` to use your router's link element. */
+function BreadcrumbLink({ className, render, ...props }) {
+	return renderPart("a", mergeProps({
+		"data-slot": "breadcrumb-link",
+		className: "transition-colors hover:text-label"
+	}, {
+		className,
+		...props
+	}), render);
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-current": "page",
+		"data-slot": "breadcrumb-page",
+		className: cx("font-medium text-label", className),
+		...props
+	});
+}
+function BreadcrumbSeparator({ children = "/", className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		role: "presentation",
+		"aria-hidden": "true",
+		"data-slot": "breadcrumb-separator",
+		className: cx("text-label-tertiary", className),
+		...props,
+		children
+	});
+}
+/** Stands in for the crumbs that were folded away. Wrap it in a menu trigger to reveal them. */
+function BreadcrumbEllipsis({ children = "…", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		className: cx("text-label-secondary flex h-6 items-center", className),
+		...props,
+		children
+	});
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/button-group.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+/** Fuses neighbouring buttons into one segmented control, squaring the inner corners. */
+export declare function ButtonGroup({ orientation, className, ...props }: ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;

package/dist/button-group.js

@@ -0,0 +1,14 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/button-group.tsx
+/** Fuses neighbouring buttons into one segmented control, squaring the inner corners. */
+function ButtonGroup({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cx("flex w-fit items-stretch *:focus-visible:z-10 data-[orientation=horizontal]:*:not-first:rounded-l-none data-[orientation=horizontal]:*:not-last:rounded-r-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:*:not-first:rounded-t-none data-[orientation=vertical]:*:not-last:rounded-b-none", className),
+		...props
+	});
+}
+export { ButtonGroup };

package/dist/button.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "accent";
+export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+export interface ButtonStyleProps {
+  /** Visual emphasis. @default "default" */
+  variant?: ButtonVariant;
+  /** Label sizes `xs`, `sm`, `default`, `lg`, and square icon sizes. @default "default" */
+  size?: ButtonSize;
+  className?: string;
+}
+/** Button classes for other elements, such as a link that looks like a button. */
+export declare function buttonVariants({ variant, size, className }?: ButtonStyleProps): string;
+export type ButtonProps = ComponentProps<"button"> & ButtonStyleProps & {
+  /** Disables the button, marks it busy and shows a spinner while work runs. */
+  isPending?: boolean;
+};
+/**
+ * A native button. State is plain CSS (`:hover`, `:active`, `:focus-visible`,
+ * `:disabled`); `data-variant` and `data-size` are there for your own styling.
+ */
+export declare function Button({ variant, size, className, type, isPending, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -0,0 +1,58 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/button.tsx
+const base = "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-full font-semibold tracking-[-0.005em] outline-none transition spring-snappy [-webkit-tap-highlight-color:transparent] active:scale-[0.96] disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+const variants = {
+	default: "bg-inverse text-on-inverse shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.12]",
+	destructive: "bg-danger text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.08]",
+	outline: "text-label shadow-[inset_0_0_0_1px_var(--color-separator)] hover:bg-fill/60",
+	secondary: "bg-elevated text-label shadow-[inset_0_0_0_0.5px_color-mix(in_srgb,var(--color-separator)_55%,transparent),0_1px_2px_rgb(40_30_0/0.06)] hover:bg-fill/60",
+	ghost: "text-label hover:bg-fill/80",
+	link: "text-accent-text underline-offset-4 hover:underline",
+	accent: "bg-accent text-on-accent ring-1 ring-accent-text/25 shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(60_40_0/0.16),0_6px_16px_-6px_color-mix(in_srgb,var(--color-accent)_70%,transparent)] hover:brightness-[1.04]"
+};
+const sizes = {
+	default: "h-8.5 px-4 text-footnote",
+	xs: "h-6.5 px-2.5 text-caption",
+	sm: "h-7.5 px-3 text-footnote",
+	lg: "h-9.5 px-5 text-subheadline",
+	icon: "size-8.5",
+	"icon-xs": "size-6.5",
+	"icon-sm": "size-7.5",
+	"icon-lg": "size-9.5"
+};
+/** Button classes for other elements, such as a link that looks like a button. */
+function buttonVariants({ variant = "default", size = "default", className } = {}) {
+	return cx(base, variants[variant], sizes[size], className);
+}
+/**
+* A native button. State is plain CSS (`:hover`, `:active`, `:focus-visible`,
+* `:disabled`); `data-variant` and `data-size` are there for your own styling.
+*/
+function Button({ variant = "default", size = "default", className, type = "button", isPending, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		type,
+		className: buttonVariants({
+			variant,
+			size,
+			className
+		}),
+		disabled: disabled || isPending,
+		"aria-busy": isPending || void 0,
+		...props,
+		children: [isPending ? /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			className: "size-4 animate-spin",
+			children: /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 1 0 9 9" })
+		}) : null, children]
+	});
+}
+export { Button, buttonVariants };

package/dist/calendar.d.ts

@@ -0,0 +1,35 @@
+/** A chosen span of days, as `YYYY-MM-DD`. `to` is empty while the span is open. */
+export interface DateRange {
+  from: string;
+  to: string;
+}
+interface CalendarBase {
+  /** Names the grid for assistive technology. */
+  label: string;
+  locale: string;
+  /** Earliest and latest selectable day, as `YYYY-MM-DD`. */
+  min?: string;
+  max?: string;
+  labels: {
+    previousMonth: string;
+    nextMonth: string;
+  };
+  className?: string;
+}
+export type CalendarProps = CalendarBase & ({
+  mode?: "single";
+  /** `YYYY-MM-DD`, or "" when nothing is chosen. */
+  value: string;
+  onValueChange: (value: string) => void;
+} | {
+  mode: "range";
+  value: DateRange;
+  onValueChange: (value: DateRange) => void;
+});
+/**
+ * An inline month calendar for one day or a range, on the locale's own week.
+ * Arrow keys move by day and week, Page Up and Page Down by month, Home and
+ * End to the week's edges.
+ */
+export declare function Calendar(props: CalendarProps): import("react").JSX.Element;
+export {};