@passui/react 0.0.0-stage → 0.1.14

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

@@ -0,0 +1,197 @@
+import type {
+    ComponentPropsWithoutRef,
+    PropsWithChildren,
+    ReactNode,
+} from "react"
+import { cn } from "../../lib/class-names"
+
+export type ContentViewVariant = keyof typeof variants
+export type ContentViewHeadingLevel = "h1" | "h2" | "h3"
+
+type ContentViewProps =
+    ComponentPropsWithoutRef<"section"> & {
+        variant?: ContentViewVariant
+    }
+
+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(
+        "rounded-2xl bg-elevated border border-separator/35",
+        "shadow hover:shadow-md cursor-pointer group"
+    ),
+} as const
+
+export function ContentView({
+    variant = "elevated",
+    className,
+    children,
+    ...props
+}: ContentViewProps) {
+    return (
+        <section
+            className={cn(variants[variant], className)}
+            {...props}
+        >
+            {children}
+        </section>
+    )
+}
+
+function Row({ className, children, ...props }: RowProps) {
+    return (
+        <div
+            className={cn("flex items-center", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}
+
+function Section({
+    className,
+    children,
+    ...props
+}: SectionProps) {
+    return (
+        <section
+            className={cn("flex flex-col gap-3", 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>
+    )
+
+    return (
+        <div className={className}>
+            {action ? (
+                <div
+                    className={cn(
+                        "flex items-center gap-3",
+                        actionClassName
+                    )}
+                >
+                    {title}
+                    {action}
+                </div>
+            ) : (
+                title
+            )}
+            {p && <p className={pClassName}>{p}</p>}
+            {children}
+        </div>
+    )
+}
+
+function Divider() {
+    return <span className="h-16 w-px bg-separator" />
+}
+
+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) {
+    return (
+        <span
+            className={cn(
+                "text-callout tracking-tighter font-light",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </span>
+    )
+}
+
+function Sub({ className, children, ...props }: SubProps) {
+    return (
+        <sub
+            className={cn(
+                "text-subheadline text-label",
+                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/examples/content-view-header-action.tsx

@@ -0,0 +1,33 @@
+import { Key01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Button } from "@passui/react/button"
+import { ContentView } from "@passui/react/content-view"
+
+export function ContentViewHeaderAction() {
+    return (
+        <ContentView className="w-full max-w-sm cursor-default p-5">
+            <ContentView.Header
+                heading="Passkeys"
+                p="2 passkeys on your devices. Sign in with your face or fingerprint."
+                icon={
+                    <HugeiconsIcon
+                        icon={Key01Icon}
+                        size={20}
+                        className="text-accent-text"
+                    />
+                }
+                action={
+                    <Button
+                        variant="secondary"
+                        size="xs"
+                        className="ms-auto"
+                    >
+                        Add
+                    </Button>
+                }
+                className="flex flex-col gap-2"
+                pClassName="text-footnote text-label-secondary"
+            />
+        </ContentView>
+    )
+}

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

@@ -0,0 +1,65 @@
+import {
+    Key01Icon,
+    LockPasswordIcon,
+    SmartPhone01Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { ContentView } from "@passui/react/content-view"
+
+const cards = [
+    {
+        id: "password",
+        heading: "Password",
+        description: "Changed 3 months ago",
+        icon: LockPasswordIcon,
+    },
+    {
+        id: "passkeys",
+        heading: "Passkeys",
+        description: "2 saved on your devices",
+        icon: Key01Icon,
+    },
+    {
+        id: "devices",
+        heading: "Devices",
+        description: "Signed in on 3 devices",
+        icon: SmartPhone01Icon,
+    },
+]
+
+export function ContentViewShowcase() {
+    return (
+        <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-3">
+            {cards.map((card) => (
+                <ContentView
+                    key={card.id}
+                    className="relative p-5"
+                >
+                    <ContentView.Header
+                        heading={card.heading}
+                        p={card.description}
+                        icon={
+                            <HugeiconsIcon
+                                icon={card.icon}
+                                size={20}
+                                className="text-accent-text"
+                            />
+                        }
+                        className="flex flex-col gap-2"
+                        pClassName="text-footnote text-label-secondary"
+                    >
+                        {/* the whole card is the link */}
+                        <a
+                            href={`#${card.id}`}
+                            className="absolute inset-0 rounded-2xl"
+                        >
+                            <span className="sr-only">
+                                Open {card.heading}
+                            </span>
+                        </a>
+                    </ContentView.Header>
+                </ContentView>
+            ))}
+        </div>
+    )
+}

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

@@ -0,0 +1,35 @@
+import { ContentView } from "@passui/react/content-view"
+
+export function ContentViewStats() {
+    return (
+        <ContentView className="w-full max-w-sm p-5">
+            <ContentView.Section>
+                <ContentView.P className="text-footnote text-label-secondary">
+                    This month
+                </ContentView.P>
+                <ContentView.Row className="justify-between gap-4">
+                    <div className="flex flex-col">
+                        <ContentView.H1 className="text-title font-bold tabular-nums">
+                            1,284
+                        </ContentView.H1>
+                        <ContentView.Span>
+                            sign ins
+                        </ContentView.Span>
+                    </div>
+                    <ContentView.Divider />
+                    <div className="flex flex-col">
+                        <ContentView.H2 className="text-title font-bold tabular-nums">
+                            12
+                            <ContentView.Sub>
+                                %
+                            </ContentView.Sub>
+                        </ContentView.H2>
+                        <ContentView.Span>
+                            with passkeys
+                        </ContentView.Span>
+                    </div>
+                </ContentView.Row>
+            </ContentView.Section>
+        </ContentView>
+    )
+}

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

@@ -0,0 +1,14 @@
+import { ContentView } from "@passui/react/content-view"
+
+export function ContentViewUsage() {
+    return (
+        <ContentView className="w-72 p-5">
+            <ContentView.Header
+                heading="Passkeys"
+                p="Sign in with your face or fingerprint."
+                className="flex flex-col gap-1"
+                pClassName="text-footnote text-label-secondary"
+            />
+        </ContentView>
+    )
+}

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

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

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

@@ -0,0 +1,33 @@
+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
+    }
+}