@passui/react 0.1.47 → 0.2.0

package/src/components/button/button-styles.ts

@@ -1,49 +0,0 @@
-export type ButtonVariant =
-	| "default"
-	| "destructive"
-	| "outline"
-	| "secondary"
-	| "ghost"
-	| "link"
-	| "accent";
-
-/** Icon-only buttons use the same sizing contract as Button. */
-export const iconButtonSizes = {
-	icon: "size-11 p-0 rounded-full",
-	"icon-xs": "size-8 p-0 rounded-full",
-	"icon-sm": "size-9 p-0 rounded-full",
-	"icon-lg": "size-12 p-0 rounded-full",
-} as const;
-
-export type IconButtonSize = keyof typeof iconButtonSizes;
-
-export type ButtonSize =
-	| "default"
-	| "xs"
-	| "sm"
-	| "lg"
-	| "icon-full"
-	| IconButtonSize;
-
-export const buttonVariants: Record<ButtonVariant, string> = {
-	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: "border border-separator bg-transparent text-label 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: "bg-transparent text-label hover:bg-fill/80",
-	link: "bg-transparent 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]",
-};
-
-export const buttonSizes: Record<ButtonSize, string> = {
-	default: "h-11 px-5 text-subheadline rounded-full",
-	xs: "h-8 px-3 text-caption rounded-full",
-	sm: "h-9 px-4 text-subheadline rounded-full",
-	lg: "h-12 px-6 text-body rounded-full",
-	...iconButtonSizes,
-	"icon-full": "h-11 w-full px-5 text-subheadline rounded-full",
-};

package/src/components/button/button.tsx

@@ -1,107 +0,0 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "../../lib/class-names";
-import { PendingSpinner } from "./pending-spinner";
-import { usePendingIndicator } from "./use-pending-indicator";
-import {
-	buttonSizes,
-	buttonVariants,
-	type ButtonSize,
-	type ButtonVariant,
-} from "./button-styles";
-
-export type { ButtonSize, ButtonVariant };
-
-/**
- * Each variant has a little depth: a fine highlight along the top edge and
- * a soft, layered shadow, like a well-made physical key.
- */
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	/**
-	 * Visual emphasis: `default` (solid), `accent` (main action),
-	 * `secondary` (quiet fill), `outline`, `ghost`, `link`, or `destructive`.
-	 * @default "default"
-	 */
-	variant?: ButtonVariant;
-	/**
-	 * Label sizes: `xs`, `sm`, `default`, `lg`.
-	 * Icon sizes: `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-full`.
-	 * Prefer IconButton for an icon with a built-in accessible label.
-	 * @default "default"
-	 */
-	size?: ButtonSize;
-	/** Shows a delayed spinner, keeps the button's width, and prevents repeat presses.
-	 * @default false
-	 */
-	isPending?: boolean;
-	/** Layout classes for the content wrapper, such as a full-width disclosure row. */
-	contentClassName?: string;
-}
-
-/** Shares native button appearance with semantic links without nesting a button. */
-export function buttonStyle({
-	variant = "default",
-	size = "default",
-	className,
-}: Pick<ButtonProps, "variant" | "size" | "className"> = {}) {
-	return cn(
-		"group relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden font-semibold tracking-[-0.005em] whitespace-nowrap select-none",
-		"transition-[background-color,filter,transform,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.98]",
-		"disabled:pointer-events-none disabled:opacity-40 motion-reduce:transform-none motion-reduce:transition-none",
-		"focus-visible:ring-accent/70 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none",
-		buttonSizes[size],
-		buttonVariants[variant],
-		className,
-	);
-}
-
-/** A native button with Passui styling, pending feedback, and an HTMLButtonElement ref. */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-	function Button(
-		{
-			variant = "default",
-			size = "default",
-			isPending = false,
-			contentClassName,
-			disabled,
-			children,
-			className,
-			type = "button",
-			...props
-		},
-		ref,
-	) {
-		const showPendingIndicator = usePendingIndicator(isPending);
-
-		return (
-			<button
-				ref={ref}
-				type={type}
-				className={buttonStyle({
-					variant,
-					size,
-					// pending is busy, not unavailable: keep full colour
-					className: cn(
-						"data-pending:cursor-progress data-pending:disabled:opacity-100",
-						className,
-					),
-				})}
-				{...props}
-				data-pending={isPending || undefined}
-				disabled={disabled || isPending}
-				aria-busy={isPending || props["aria-busy"]}
-			>
-				{/* the label keeps its space, so the width never jumps */}
-				<span
-					className={cn(
-						"inline-flex min-w-0 items-center justify-center gap-2 truncate transition-opacity duration-200",
-						showPendingIndicator && "opacity-0",
-						contentClassName,
-					)}
-				>
-					{children}
-				</span>
-				{showPendingIndicator && <PendingSpinner />}
-			</button>
-		);
-	},
-);

package/src/components/button/icon-button.tsx

@@ -1,33 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../lib/class-names";
-import { Button, type ButtonProps } from "./button";
-import type { ButtonVariant, IconButtonSize } from "./button-styles";
-
-export type { ButtonVariant, IconButtonSize };
-
-export interface IconButtonProps extends Omit<ButtonProps, "size"> {
-	/** Icon-only actions must have an accessible name. */
-	label: string;
-	size?: IconButtonSize;
-}
-
-/** An accessible icon-only presentation of Button, sharing its interaction behavior. */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-	function IconButton(
-		{ label, size = "icon", className, children, ...props },
-		ref,
-	) {
-		return (
-			<Button
-				ref={ref}
-				size={size}
-				aria-label={label}
-				data-tooltip={label}
-				className={cn("active:scale-[0.92]", className)}
-				{...props}
-			>
-				{children}
-			</Button>
-		);
-	},
-);

package/src/components/button/pending-spinner.tsx

@@ -1,14 +0,0 @@
-/**
- * Centred over the button while it is pending: fades in, spins, and is
- * sized from the text so it suits every button size.
- */
-export function PendingSpinner() {
-	return (
-		<span
-			aria-hidden="true"
-			className="animate-in fade-in zoom-in-75 absolute inset-0 flex items-center justify-center duration-200 motion-reduce:animate-none"
-		>
-			<span className="size-[1.1em] animate-spin rounded-full border-2 border-current/25 border-t-current motion-reduce:animate-none" />
-		</span>
-	);
-}

package/src/components/button/use-pending-indicator.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from "react";
-
-const PENDING_INDICATOR_DELAY = 300;
-
-export function schedulePendingIndicator(onShow: () => void) {
-	const timeout = setTimeout(onShow, PENDING_INDICATOR_DELAY);
-	return () => clearTimeout(timeout);
-}
-
-export function usePendingIndicator(isPending: boolean) {
-	const [isVisible, setIsVisible] = useState(false);
-
-	useEffect(() => {
-		setIsVisible(false);
-
-		if (!isPending) return;
-
-		return schedulePendingIndicator(() => setIsVisible(true));
-	}, [isPending]);
-
-	return isPending && isVisible;
-}

package/src/components/chip/chip.tsx

@@ -1,45 +0,0 @@
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/class-names";
-
-export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends";
-export type ChipSize = "xs" | "sm" | "md";
-
-const tones: Record<ChipTone, string> = {
-	neutral: "bg-fill text-label-secondary",
-	accent: "bg-elevated text-accent-text",
-	public: "bg-[#e8efff] text-[#2c55b8] dark:bg-[#1c2740] dark:text-[#a9c1ff]",
-	family: "bg-[#e3f3eb] text-[#24704f] dark:bg-[#15302a] dark:text-[#8fd6b6]",
-	friends: "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
-};
-
-const sizes: Record<ChipSize, string> = {
-	xs: "px-1 py-0 text-caption2",
-	sm: "px-1.5 py-0.5 text-caption2",
-	md: "px-2 py-0.5 text-caption",
-};
-
-export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
-	/** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
-	tone?: ChipTone;
-	/** `xs`, `sm`, or `md`. @default "sm" */
-	size?: ChipSize;
-}
-
-export function Chip({
-	tone = "neutral",
-	size = "sm",
-	className,
-	...props
-}: ChipProps) {
-	return (
-		<span
-			className={cn(
-				"inline-flex items-center gap-1 rounded-full font-semibold",
-				tones[tone],
-				sizes[size],
-				className,
-			)}
-			{...props}
-		/>
-	);
-}

package/src/components/code-block/code-block.tsx

@@ -1,48 +0,0 @@
-import { Fragment, type ComponentProps, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type CodeBlockSize = "sm" | "md" | "lg";
-
-export interface CodeBlockProps
-	extends Omit<ComponentProps<"div">, "children" | "size"> {
-	code: string;
-	/** Supply a highlighter's rendered pre/code element; source remains the fallback. */
-	children?: ReactNode;
-	/** Show a nonselectable line gutter. @default true */
-	lineNumbers?: boolean;
-	/** Code font size, padding and line gutter scale. @default "md" */
-	size?: CodeBlockSize;
-}
-
-/** Code presentation without shipping a highlighter or formatter to consumers. */
-export function CodeBlock({
-	code,
-	children,
-	lineNumbers = true,
-	size = "md",
-	className,
-	...props
-}: CodeBlockProps) {
-	const lines = code.split("\n");
-	return (
-		<div
-			{...props}
-			className={cn("passui-code-block", className)}
-			data-line-numbers={lineNumbers || undefined}
-			data-size={size}
-		>
-			{children ?? (
-				<pre>
-					<code>
-						{lines.map((line, index) => (
-							<Fragment key={line || index}>
-								<span className="line">{line || " "}</span>
-								{index < lines.length - 1 ? "\n" : null}
-							</Fragment>
-						))}
-					</code>
-				</pre>
-			)}
-		</div>
-	);
-}

package/src/components/combo-box/combo-box.tsx

@@ -1,13 +0,0 @@
-import { Picker, type PickerOption, type PickerProps } from "../picker/picker";
-
-export interface ComboBoxOption<T extends string> extends PickerOption<T> {}
-export interface ComboBoxProps<T extends string>
-	extends Omit<PickerProps<T>, "searchable" | "options"> {
-	options: readonly ComboBoxOption<T>[];
-	emptyLabel: string;
-}
-
-/** A searchable Picker, with optional creation from the person's typed query. */
-export function ComboBox<T extends string>(props: ComboBoxProps<T>) {
-	return <Picker {...props} searchable />;
-}

package/src/components/command/command.tsx

@@ -1,149 +0,0 @@
-import { type ComponentProps, useEffect, useRef } from "react";
-import { SearchIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { KeyboardShortcut } from "../keyboard-shortcut/keyboard-shortcut";
-import {
-	SearchList,
-	SearchListField,
-	SearchListResults,
-	SearchListEmpty,
-	SearchListGroup,
-	SearchListItem,
-} from "../search-list/search-list";
-import { Sheet, type SheetProps } from "../sheet/sheet";
-
-export interface CommandProps extends ComponentProps<typeof SearchList> {}
-export interface CommandDialogProps extends Omit<SheetProps, "placement"> {}
-
-/** An inline command palette. SearchList owns filtering and keyboard selection. */
-export function Command({ className, ...props }: CommandProps) {
-	return (
-		<SearchList
-			{...props}
-			className={cn(
-				"not-typeset glass-menu flex min-h-0 w-full flex-col overflow-hidden rounded-3xl",
-				className,
-			)}
-		/>
-	);
-}
-
-/** A modal command palette with Sheet's focus isolation and restoration. */
-export function CommandDialog({
-	children,
-	className,
-	...props
-}: CommandDialogProps) {
-	return (
-		<Sheet
-			{...props}
-			placement="center"
-			className={cn("max-w-lg rounded-3xl outline-none", className)}
-		>
-			<SearchList className="not-typeset flex min-h-0 flex-col">
-				{children}
-			</SearchList>
-		</Sheet>
-	);
-}
-
-export function CommandInput({
-	className,
-	autoFocus,
-	ref: forwardedRef,
-	...props
-}: ComponentProps<typeof SearchListField>) {
-	const input = useRef<HTMLInputElement>(null);
-	useEffect(() => {
-		if (autoFocus) input.current?.focus({ preventScroll: true });
-	}, [autoFocus]);
-	return (
-		<div className="border-separator/50 flex shrink-0 items-center gap-2 border-b px-4">
-			<SearchIcon size={17} className="text-label-tertiary shrink-0" />
-			<SearchListField
-				{...props}
-				ref={(node) => {
-					input.current = node;
-					if (typeof forwardedRef === "function") forwardedRef(node);
-					else if (forwardedRef) forwardedRef.current = node;
-				}}
-				className={cn(
-					"min-h-12 rounded-none border-0 bg-transparent px-0 focus-visible:ring-0",
-					className,
-				)}
-			/>
-		</div>
-	);
-}
-
-export function CommandList({
-	className,
-	...props
-}: ComponentProps<typeof SearchListResults>) {
-	return (
-		<SearchListResults
-			{...props}
-			className={cn("max-h-[min(60svh,24rem)] p-1.5", className)}
-		/>
-	);
-}
-
-export function CommandEmpty({
-	className,
-	...props
-}: ComponentProps<typeof SearchListEmpty>) {
-	return (
-		<SearchListEmpty
-			{...props}
-			className={cn(
-				"text-footnote text-label-secondary px-3 py-8 text-center",
-				className,
-			)}
-		/>
-	);
-}
-
-export function CommandShortcut({
-	className,
-	...props
-}: ComponentProps<typeof KeyboardShortcut>) {
-	return (
-		<KeyboardShortcut
-			{...props}
-			className={cn(
-				"text-label-tertiary ms-auto border-0 bg-transparent",
-				className,
-			)}
-		/>
-	);
-}
-
-export function CommandGroup({
-	className,
-	...props
-}: ComponentProps<typeof SearchListGroup>) {
-	return (
-		<SearchListGroup
-			{...props}
-			className={cn(
-				"border-separator/50 not-first:mt-1 not-first:border-t not-first:pt-1",
-				className,
-			)}
-		/>
-	);
-}
-
-export function CommandItem({
-	className,
-	...props
-}: ComponentProps<typeof SearchListItem>) {
-	return (
-		<SearchListItem
-			{...props}
-			className={cn(
-				"[&>svg]:text-label-secondary [&>svg]:size-4 [&>svg]:shrink-0",
-				className,
-			)}
-		/>
-	);
-}

package/src/components/compact-date-picker/calendar-month.ts

@@ -1,109 +0,0 @@
-/** A calendar day, with `month` counted from 1. */
-export interface CalendarDay {
-	year: number;
-	month: number;
-	day: number;
-}
-
-/** Reads `YYYY-MM-DD`; null for anything else, or a date that doesn't exist. */
-export function parseDay(value: string): CalendarDay | null {
-	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
-	if (!match) return null;
-	const [year, month, day] = [
-		Number(match[1]),
-		Number(match[2]),
-		Number(match[3]),
-	];
-	const date = new Date(Date.UTC(year, month - 1, day));
-	const real =
-		date.getUTCFullYear() === year &&
-		date.getUTCMonth() === month - 1 &&
-		date.getUTCDate() === day;
-	return real ? { year, month, day } : null;
-}
-
-export function formatDay({ year, month, day }: CalendarDay): string {
-	const pad = (value: number, width: number) =>
-		String(value).padStart(width, "0");
-	return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`;
-}
-
-/** Moves by whole days, across months and years. */
-export function addDays(day: CalendarDay, count: number): CalendarDay {
-	const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count));
-	return {
-		year: date.getUTCFullYear(),
-		month: date.getUTCMonth() + 1,
-		day: date.getUTCDate(),
-	};
-}
-
-/** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
-export function addMonths(day: CalendarDay, count: number): CalendarDay {
-	const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1));
-	const year = first.getUTCFullYear();
-	const month = first.getUTCMonth() + 1;
-	const last = new Date(Date.UTC(year, month, 0)).getUTCDate();
-	return { year, month, day: Math.min(day.day, last) };
-}
-
-/**
- * The first day of the week where `locale` is used, 1 (Monday) to 7
- * (Sunday), from the browser where it knows, else Monday except in the
- * places that start on Sunday.
- */
-export function firstWeekday(locale: string): number {
-	try {
-		const info = new Intl.Locale(locale) as Intl.Locale & {
-			getWeekInfo?: () => { firstDay: number };
-			weekInfo?: { firstDay: number };
-		};
-		const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
-		if (first) return first;
-		const region = info.maximize().region ?? "";
-		return [
-			"US",
-			"CA",
-			"JP",
-			"KR",
-			"TW",
-			"BR",
-			"MX",
-			"IL",
-			"PH",
-			"IN",
-		].includes(region)
-			? 7
-			: 1;
-	} catch {
-		return 1;
-	}
-}
-
-/** Six weeks covering `year`/`month`, starting on `firstDay` (1 to 7). */
-export function monthGrid(
-	year: number,
-	month: number,
-	firstDay: number,
-): Array<CalendarDay & { inMonth: boolean }> {
-	// getUTCDay counts Sunday as 0; weeks here count it as 7.
-	const weekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7;
-	const lead = (weekday - firstDay + 7) % 7;
-	const start = addDays({ year, month, day: 1 }, -lead);
-	return Array.from({ length: 42 }, (_, index) => {
-		const day = addDays(start, index);
-		return {
-			...day,
-			inMonth: day.month === month && day.year === year,
-		};
-	});
-}
-
-/** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
-export function withinBounds(
-	value: string,
-	min?: string,
-	max?: string,
-): boolean {
-	return (!min || value >= min) && (!max || value <= max);
-}