@passui/react 0.1.47 → 0.2.0

package/src/components/content-unavailable-view/content-unavailable-view.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode, ComponentProps } from "react";
-import { cn } from "../../lib/class-names";
-
-export type ContentUnavailableViewSize = "sm" | "md" | "lg";
-
-const titleSizes: Record<ContentUnavailableViewSize, string> = {
-	sm: "text-subheadline",
-	md: "text-headline",
-	lg: "text-title3",
-};
-
-const descriptionSizes: Record<ContentUnavailableViewSize, string> = {
-	sm: "text-caption",
-	md: "text-footnote",
-	lg: "text-subheadline",
-};
-
-const spacings: Record<ContentUnavailableViewSize, string> = {
-	sm: "gap-2 px-6 py-6",
-	md: "gap-3 px-6 py-10",
-	lg: "gap-4 px-6 py-14",
-};
-
-export interface ContentUnavailableViewProps
-	extends Omit<ComponentProps<"div">, "title"> {
-	title: string;
-	description?: string;
-	icon?: ReactNode;
-	actions?: ReactNode;
-	/** Title, description and vertical rhythm. @default "md" */
-	size?: ContentUnavailableViewSize;
-}
-
-/** A focused empty or unavailable state with an optional next action. */
-export function ContentUnavailableView({
-	title,
-	description,
-	icon,
-	actions,
-	size = "md",
-	className,
-	...props
-}: ContentUnavailableViewProps) {
-	return (
-		<div
-			{...props}
-			className={cn(
-				"flex flex-col items-center text-center",
-				spacings[size],
-				className,
-			)}
-		>
-			{icon && (
-				<span aria-hidden="true" className="text-label-tertiary">
-					{icon}
-				</span>
-			)}
-			<p className={cn(titleSizes[size], "text-label font-semibold")}>
-				{title}
-			</p>
-			{description && (
-				<p
-					className={cn(
-						descriptionSizes[size],
-						"text-label-secondary max-w-sm",
-					)}
-				>
-					{description}
-				</p>
-			)}
-			{actions && (
-				<div className="mt-1 flex flex-wrap justify-center gap-2">
-					{actions}
-				</div>
-			)}
-		</div>
-	);
-}

package/src/components/content-view/content-view.tsx

@@ -1,215 +0,0 @@
-import {
-	createContext,
-	useContext,
-	type ComponentPropsWithoutRef,
-	type PropsWithChildren,
-	type ReactNode,
-} from "react";
-import { cn } from "../../lib/class-names";
-
-export type ContentViewVariant = keyof typeof variants;
-export type ContentViewHeadingLevel = "h1" | "h2" | "h3";
-export type ContentViewSize = "sm" | "md" | "lg";
-
-const containerRadius: Record<ContentViewSize, string> = {
-	sm: "rounded-xl",
-	md: "rounded-2xl",
-	lg: "rounded-3xl",
-};
-const sectionGaps: Record<ContentViewSize, string> = {
-	sm: "gap-2",
-	md: "gap-3",
-	lg: "gap-4",
-};
-const spanText: Record<ContentViewSize, string> = {
-	sm: "text-footnote tracking-tighter font-light",
-	md: "text-callout tracking-tighter font-light",
-	lg: "text-subheadline tracking-tighter font-light",
-};
-const subText: Record<ContentViewSize, string> = {
-	sm: "text-footnote text-label",
-	md: "text-subheadline text-label",
-	lg: "text-body text-label",
-};
-const headerActionGaps: Record<ContentViewSize, string> = {
-	sm: "gap-2",
-	md: "gap-3",
-	lg: "gap-4",
-};
-
-const ContentViewSizeContext = createContext<ContentViewSize>("md");
-const useContentViewSize = () => useContext(ContentViewSizeContext);
-
-type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
-	variant?: ContentViewVariant;
-	/** Container radius, section gap and text scale. @default "md" */
-	size?: ContentViewSize;
-};
-
-type RowProps = ComponentPropsWithoutRef<"div">;
-
-type SectionProps = ComponentPropsWithoutRef<"section">;
-
-type HeaderProps = PropsWithChildren<{
-	heading: string;
-	p?: string;
-	pClassName?: string;
-	icon?: ReactNode;
-	action?: ReactNode;
-	actionClassName?: string;
-	as?: ContentViewHeadingLevel;
-	className?: string;
-}>;
-
-type H1Props = ComponentPropsWithoutRef<"h1">;
-type H2Props = ComponentPropsWithoutRef<"h2">;
-type PProps = ComponentPropsWithoutRef<"p">;
-type SpanProps = ComponentPropsWithoutRef<"span">;
-type SubProps = ComponentPropsWithoutRef<"sub">;
-
-const variants = {
-	elevated: cn(
-		"bg-elevated border-separator/35 rounded-2xl border",
-		"group cursor-pointer shadow hover:shadow-md",
-	),
-} as const;
-
-export function ContentView({
-	variant = "elevated",
-	size = "md",
-	className,
-	children,
-	...props
-}: ContentViewProps) {
-	return (
-		<ContentViewSizeContext value={size}>
-			<section
-				className={cn(
-					variants[variant],
-					variant === "elevated" && containerRadius[size],
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</section>
-		</ContentViewSizeContext>
-	);
-}
-
-function Row({ className, children, ...props }: RowProps) {
-	return (
-		<div className={cn("flex items-center", className)} {...props}>
-			{children}
-		</div>
-	);
-}
-
-function Section({ className, children, ...props }: SectionProps) {
-	const size = useContentViewSize();
-	return (
-		<section
-			className={cn("flex flex-col", sectionGaps[size], className)}
-			{...props}
-		>
-			{children}
-		</section>
-	);
-}
-
-function Header({
-	heading,
-	p,
-	pClassName,
-	icon,
-	action,
-	actionClassName,
-	as: Tag = "h3",
-	className,
-	children,
-}: HeaderProps) {
-	const title = (
-		<Tag className={cn(icon && "flex items-center gap-2")}>
-			{icon}
-			{heading}
-		</Tag>
-	);
-
-	const size = useContentViewSize();
-	return (
-		<div className={className}>
-			{action ? (
-				<div
-					className={cn(
-						"flex items-center",
-						headerActionGaps[size],
-						actionClassName,
-					)}
-				>
-					{title}
-					{action}
-				</div>
-			) : (
-				title
-			)}
-			{p && <p className={pClassName}>{p}</p>}
-			{children}
-		</div>
-	);
-}
-
-function Divider() {
-	return <span className="bg-separator h-16 w-px" />;
-}
-
-function H1({ className, children, ...props }: H1Props) {
-	return (
-		<h1 className={className} {...props}>
-			{children}
-		</h1>
-	);
-}
-
-function H2({ className, children, ...props }: H2Props) {
-	return (
-		<h2 className={className} {...props}>
-			{children}
-		</h2>
-	);
-}
-
-function P({ className, children, ...props }: PProps) {
-	return (
-		<p className={cn("leading-tight font-medium", className)} {...props}>
-			{children}
-		</p>
-	);
-}
-
-function Span({ className, children, ...props }: SpanProps) {
-	const size = useContentViewSize();
-	return (
-		<span className={cn(spanText[size], className)} {...props}>
-			{children}
-		</span>
-	);
-}
-
-function Sub({ className, children, ...props }: SubProps) {
-	const size = useContentViewSize();
-	return (
-		<sub className={cn(subText[size], className)} {...props}>
-			{children}
-		</sub>
-	);
-}
-
-ContentView.Row = Row;
-ContentView.Section = Section;
-ContentView.Header = Header;
-ContentView.Divider = Divider;
-ContentView.H1 = H1;
-ContentView.H2 = H2;
-ContentView.P = P;
-ContentView.Span = Span;
-ContentView.Sub = Sub;

package/src/components/content-view/index.ts

@@ -1 +0,0 @@
-export * from "./content-view";

package/src/components/context-menu/conceal-menu-source.ts

@@ -1,30 +0,0 @@
-type ConcealedSource = {
-	count: number;
-	opacity: string;
-	inert: boolean;
-};
-const sources = new WeakMap<HTMLElement, ConcealedSource>();
-
-/** Follow-up menus share ownership until the last surface finishes closing. */
-export function concealMenuSource(element: HTMLElement, inert: boolean) {
-	const state = sources.get(element) ?? {
-		count: 0,
-		opacity: element.style.opacity,
-		inert: element.inert,
-	};
-	state.count += 1;
-	sources.set(element, state);
-	element.style.opacity = "0";
-	if (inert) element.inert = true;
-	let active = true;
-	return () => {
-		if (!active) return false;
-		active = false;
-		state.count -= 1;
-		if (state.count) return false;
-		element.style.opacity = state.opacity;
-		element.inert = state.inert;
-		sources.delete(element);
-		return true;
-	};
-}