@passui/react 0.1.17 → 0.1.20

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

@@ -1,68 +0,0 @@
-import { Settings02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { defineDocs } from "../../docs/types"
-import { IconButtonPlayer } from "./examples/icon-button-player"
-import { IconButtonShowcase } from "./examples/icon-button-showcase"
-import { IconButtonUsage } from "./examples/icon-button-usage"
-import { IconButtonVariants } from "./examples/icon-button-variants"
-import {
-    IconButton,
-    type IconButtonProps,
-} from "./icon-button"
-
-export const iconButtonDocs = defineDocs<IconButtonProps>()({
-    slug: "icon-button",
-    name: "IconButton",
-    importPath: "@passui/react/icon-button",
-    controls: {
-        variant: {
-            kind: "select",
-            options: {
-                default: true,
-                secondary: true,
-                outline: true,
-                ghost: true,
-                link: true,
-                accent: true,
-                destructive: true,
-            },
-            default: "ghost",
-        },
-        size: {
-            kind: "select",
-            options: {
-                icon: true,
-                "icon-xs": true,
-                "icon-sm": true,
-                "icon-lg": true,
-            },
-            default: "icon",
-        },
-        isPending: { kind: "boolean", default: false },
-        disabled: { kind: "boolean", default: false },
-        label: {
-            kind: "text",
-            default: "Settings",
-            required: true,
-        },
-    },
-    render: (values) => (
-        <IconButton {...values}>
-            <HugeiconsIcon icon={Settings02Icon} size={20} />
-        </IconButton>
-    ),
-    childrenSnippet: () => ({
-        imports: [
-            'import { Settings02Icon } from "@hugeicons/core-free-icons"',
-            'import { HugeiconsIcon } from "@hugeicons/react"',
-        ],
-        children:
-            "<HugeiconsIcon icon={Settings02Icon} size={20} />",
-    }),
-    usage: IconButtonUsage,
-    showcase: IconButtonShowcase,
-    examples: [
-        { id: "variants", component: IconButtonVariants },
-        { id: "player", component: IconButtonPlayer },
-    ],
-})

package/src/components/chip/chip.docs.tsx

@@ -1,37 +0,0 @@
-import { ChipInRows } from "./examples/chip-in-rows"
-import { defineDocs } from "../../docs/types"
-import { Chip, type ChipTone } from "./chip"
-import { ChipShowcase } from "./examples/chip-showcase"
-import { ChipTones } from "./examples/chip-tones"
-import { ChipUsage } from "./examples/chip-usage"
-
-type ChipProps = { tone?: ChipTone; children?: string }
-
-export const chipDocs = defineDocs<ChipProps>()({
-    slug: "chip",
-    name: "Chip",
-    importPath: "@passui/react",
-    controls: {
-        tone: {
-            kind: "select",
-            options: {
-                neutral: true,
-                accent: true,
-                public: true,
-                family: true,
-                friends: true,
-            },
-            default: "neutral",
-        },
-        children: { kind: "text", default: "Draft" },
-    },
-    render: ({ children, ...values }) => (
-        <Chip {...values}>{children}</Chip>
-    ),
-    usage: ChipUsage,
-    showcase: ChipShowcase,
-    examples: [
-        { id: "tones", component: ChipTones },
-        { id: "in-rows", component: ChipInRows },
-    ],
-})

package/src/components/chip/examples/chip-in-rows.tsx

@@ -1,19 +0,0 @@
-import { Chip, LabeledContent, Section } from "@passui/react"
-
-export function ChipInRows() {
-    return (
-        <div className="w-full max-w-sm">
-            <Section title="Shared with">
-                <LabeledContent label="Aiko Kamado">
-                    <Chip tone="accent">Owner</Chip>
-                </LabeledContent>
-                <LabeledContent label="Kenji Mori">
-                    <Chip tone="family">Family</Chip>
-                </LabeledContent>
-                <LabeledContent label="Anyone with the link">
-                    <Chip tone="public">Public</Chip>
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/chip/examples/chip-showcase.tsx

@@ -1,51 +0,0 @@
-import { Chip } from "@passui/react"
-
-const notes = [
-    {
-        title: "Trip to Kyoto",
-        detail: "Edited today",
-        tone: "friends",
-        tag: "Friends",
-    },
-    {
-        title: "Grandma's recipes",
-        detail: "Edited yesterday",
-        tone: "family",
-        tag: "Family",
-    },
-    {
-        title: "Reading list",
-        detail: "Edited Monday",
-        tone: "public",
-        tag: "Public",
-    },
-    {
-        title: "Q4 plan",
-        detail: "Edited last week",
-        tone: "neutral",
-        tag: "Draft",
-    },
-] as const
-
-export function ChipShowcase() {
-    return (
-        <ul className="m-0 flex w-full max-w-sm list-none flex-col divide-y divide-separator/60 overflow-hidden rounded-4xl bg-elevated p-0 shadow-sm ring-1 ring-separator/60">
-            {notes.map((note) => (
-                <li
-                    key={note.title}
-                    className="flex items-center justify-between gap-3 px-5 py-3.5"
-                >
-                    <div className="flex flex-col">
-                        <span className="text-subheadline font-semibold text-label">
-                            {note.title}
-                        </span>
-                        <span className="text-footnote text-label-secondary">
-                            {note.detail}
-                        </span>
-                    </div>
-                    <Chip tone={note.tone}>{note.tag}</Chip>
-                </li>
-            ))}
-        </ul>
-    )
-}

package/src/components/chip/examples/chip-tones.tsx

@@ -1,13 +0,0 @@
-import { Chip } from "@passui/react"
-
-export function ChipTones() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-2">
-            <Chip tone="neutral">Draft</Chip>
-            <Chip tone="accent">Featured</Chip>
-            <Chip tone="public">Public</Chip>
-            <Chip tone="family">Family</Chip>
-            <Chip tone="friends">Friends</Chip>
-        </div>
-    )
-}

package/src/components/chip/examples/chip-usage.tsx

@@ -1,5 +0,0 @@
-import { Chip } from "@passui/react"
-
-export function ChipUsage() {
-    return <Chip tone="accent">New</Chip>
-}

package/src/components/compact-date-picker/compact-date-picker.docs.tsx

@@ -1,81 +0,0 @@
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { CompactDatePicker } from "./compact-date-picker"
-import { CompactDatePickerShowcase } from "./examples/compact-date-picker-showcase"
-import { CompactDatePickerUsage } from "./examples/compact-date-picker-usage"
-
-type CompactDatePickerProps = ComponentProps<
-    typeof CompactDatePicker
->
-
-// Locales whose weeks start on different days, so the playground shows it.
-type DemoProps = Pick<CompactDatePickerProps, "label"> & {
-    locale: "en-US" | "en-GB" | "fr-FR" | "ar-EG" | "zh-CN"
-}
-
-const labels = {
-    previousMonth: "Previous month",
-    nextMonth: "Next month",
-    clear: "Remove date",
-}
-
-function CompactDatePickerDemo({ locale, label }: DemoProps) {
-    const [date, setDate] = useState("")
-    return (
-        <div
-            className="w-full max-w-xs"
-            dir={locale === "ar-EG" ? "rtl" : undefined}
-        >
-            <CompactDatePicker
-                key={locale}
-                label={label}
-                labels={labels}
-                locale={locale}
-                placeholder="None"
-                value={date}
-                onChange={setDate}
-            />
-        </div>
-    )
-}
-
-export const compactDatePickerDocs = defineDocs<DemoProps>()({
-    slug: "compact-date-picker",
-    name: "CompactDatePicker",
-    importPath: "@passui/react/compact-date-picker",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Starts",
-            required: true,
-        },
-        locale: {
-            kind: "select",
-            options: {
-                "en-US": true,
-                "en-GB": true,
-                "fr-FR": true,
-                "ar-EG": true,
-                "zh-CN": true,
-            },
-            default: "en-US",
-        },
-    },
-    render: (values) => <CompactDatePickerDemo {...values} />,
-    childrenSnippet: ({ locale }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: ['const [date, setDate] = useState("")'],
-        children: "",
-        omit: ["locale"],
-        extraProps: { locale },
-        expressionProps: {
-            labels: '{ previousMonth: "Previous month", nextMonth: "Next month", clear: "Remove date" }',
-            value: "date",
-            onChange: "setDate",
-        },
-    }),
-    usage: CompactDatePickerUsage,
-    showcase: CompactDatePickerShowcase,
-    examples: [],
-})

package/src/components/compact-date-picker/examples/compact-date-picker-showcase.tsx

@@ -1,35 +0,0 @@
-import { CompactDatePicker } from "@passui/react/compact-date-picker"
-import { useState } from "react"
-
-const labels = {
-    previousMonth: "Previous month",
-    nextMonth: "Next month",
-    clear: "Remove date",
-}
-
-export function CompactDatePickerShowcase() {
-    const [starts, setStarts] = useState("2026-10-15")
-    const [ends, setEnds] = useState("")
-    return (
-        <div className="grid w-full max-w-sm grid-cols-2 gap-3">
-            <CompactDatePicker
-                label="Starts"
-                labels={labels}
-                locale="en-GB"
-                value={starts}
-                onChange={(value) =>
-                    value && setStarts(value)
-                }
-            />
-            <CompactDatePicker
-                label="Ends"
-                placeholder="None"
-                labels={labels}
-                locale="en-GB"
-                min={starts}
-                value={ends}
-                onChange={setEnds}
-            />
-        </div>
-    )
-}

package/src/components/compact-date-picker/examples/compact-date-picker-usage.tsx

@@ -1,22 +0,0 @@
-import { CompactDatePicker } from "@passui/react/compact-date-picker"
-import { useState } from "react"
-
-export function CompactDatePickerUsage() {
-    const [due, setDue] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <CompactDatePicker
-                label="Due"
-                placeholder="None"
-                labels={{
-                    previousMonth: "Previous month",
-                    nextMonth: "Next month",
-                    clear: "Remove date",
-                }}
-                locale="en-US"
-                value={due}
-                onChange={setDue}
-            />
-        </div>
-    )
-}

package/src/components/compact-time-picker/compact-time-picker.docs.tsx

@@ -1,80 +0,0 @@
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { CompactTimePicker } from "./compact-time-picker"
-import { CompactTimePickerShowcase } from "./examples/compact-time-picker-showcase"
-import { CompactTimePickerUsage } from "./examples/compact-time-picker-usage"
-
-type CompactTimePickerProps = ComponentProps<
-    typeof CompactTimePicker
->
-
-// Locales on 12 and 24 hour clocks, so the playground shows both.
-type DemoProps = Pick<CompactTimePickerProps, "label"> & {
-    locale: "en-US" | "en-GB" | "fr-FR" | "ar-EG" | "zh-CN"
-}
-
-const labels = {
-    hour: "Hour",
-    minute: "Minute",
-    period: "AM or PM",
-}
-
-function CompactTimePickerDemo({ locale, label }: DemoProps) {
-    const [time, setTime] = useState("18:30")
-    return (
-        <div
-            className="w-full max-w-xs"
-            dir={locale === "ar-EG" ? "rtl" : undefined}
-        >
-            <CompactTimePicker
-                key={locale}
-                label={label}
-                labels={labels}
-                locale={locale}
-                value={time}
-                onChange={setTime}
-            />
-        </div>
-    )
-}
-
-export const compactTimePickerDocs = defineDocs<DemoProps>()({
-    slug: "compact-time-picker",
-    name: "CompactTimePicker",
-    importPath: "@passui/react/compact-time-picker",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Time",
-            required: true,
-        },
-        locale: {
-            kind: "select",
-            options: {
-                "en-US": true,
-                "en-GB": true,
-                "fr-FR": true,
-                "ar-EG": true,
-                "zh-CN": true,
-            },
-            default: "en-US",
-        },
-    },
-    render: (values) => <CompactTimePickerDemo {...values} />,
-    childrenSnippet: ({ locale }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: ['const [time, setTime] = useState("18:30")'],
-        children: "",
-        omit: ["locale"],
-        extraProps: { locale },
-        expressionProps: {
-            labels: '{ hour: "Hour", minute: "Minute", period: "AM or PM" }',
-            value: "time",
-            onChange: "setTime",
-        },
-    }),
-    usage: CompactTimePickerUsage,
-    showcase: CompactTimePickerShowcase,
-    examples: [],
-})

package/src/components/compact-time-picker/examples/compact-time-picker-showcase.tsx

@@ -1,31 +0,0 @@
-import { CompactTimePicker } from "@passui/react/compact-time-picker"
-import { useState } from "react"
-
-const labels = {
-    hour: "Hour",
-    minute: "Minute",
-    period: "AM or PM",
-}
-
-export function CompactTimePickerShowcase() {
-    const [starts, setStarts] = useState("09:00")
-    const [ends, setEnds] = useState("10:30")
-    return (
-        <div className="grid w-full max-w-sm grid-cols-2 gap-3">
-            <CompactTimePicker
-                label="Starts"
-                labels={labels}
-                locale="en-US"
-                value={starts}
-                onChange={setStarts}
-            />
-            <CompactTimePicker
-                label="Ends"
-                labels={labels}
-                locale="en-GB"
-                value={ends}
-                onChange={setEnds}
-            />
-        </div>
-    )
-}

package/src/components/compact-time-picker/examples/compact-time-picker-usage.tsx

@@ -1,21 +0,0 @@
-import { CompactTimePicker } from "@passui/react/compact-time-picker"
-import { useState } from "react"
-
-export function CompactTimePickerUsage() {
-    const [time, setTime] = useState("18:30")
-    return (
-        <div className="w-full max-w-xs">
-            <CompactTimePicker
-                label="Time"
-                labels={{
-                    hour: "Hour",
-                    minute: "Minute",
-                    period: "AM or PM",
-                }}
-                locale="en-US"
-                value={time}
-                onChange={setTime}
-            />
-        </div>
-    )
-}

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

@@ -1,61 +0,0 @@
-import { ContentViewHeaderAction } from "./examples/content-view-header-action"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import {
-    ContentView,
-    type ContentViewVariant,
-} from "./content-view"
-import { ContentViewShowcase } from "./examples/content-view-showcase"
-import { ContentViewStats } from "./examples/content-view-stats"
-import { ContentViewUsage } from "./examples/content-view-usage"
-
-// heading and description belong to ContentView.Header, inside the card;
-// the snippet writes that header itself.
-type DemoProps = {
-    variant?: ContentViewVariant
-    heading: string
-    description: string
-}
-
-export const contentViewDocs = defineDocs<DemoProps>()({
-    slug: "content-view",
-    name: "ContentView",
-    importPath: "@passui/react/content-view",
-    controls: {
-        variant: {
-            kind: "select",
-            options: { elevated: true },
-            default: "elevated",
-        },
-        heading: { kind: "text", default: "Recovery" },
-        description: {
-            kind: "text",
-            default: "Ways back in if you lose your phone.",
-        },
-    },
-    render: ({ variant, heading, description }) => (
-        <ContentView variant={variant} className="w-72 p-5">
-            <ContentView.Header
-                heading={heading}
-                p={description || undefined}
-                className="flex flex-col gap-1"
-                pClassName="text-footnote text-label-secondary"
-            />
-        </ContentView>
-    ),
-    childrenSnippet: ({ heading, description }) => ({
-        imports: [],
-        omit: ["heading", "description"],
-        extraProps: { className: "p-5" },
-        children: `\n    <ContentView.Header ${jsxAttribute("heading", heading)}${description ? ` ${jsxAttribute("p", description)}` : ""} />\n`,
-    }),
-    usage: ContentViewUsage,
-    showcase: ContentViewShowcase,
-    examples: [
-        { id: "stats", component: ContentViewStats },
-        {
-            id: "header-action",
-            component: ContentViewHeaderAction,
-        },
-    ],
-})

package/src/components/content-view/examples/content-view-header-action.tsx

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

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

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