@passui/react 0.1.17 → 0.1.20

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

@@ -1,59 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function ToggleShowcase() {
-    const [airplane, setAirplane] = useState(false)
-    const [wifi, setWifi] = useState(true)
-    const [bluetooth, setBluetooth] = useState(true)
-    const [focus, setFocus] = useState(false)
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-6">
-            <Section title="Connections">
-                <LabeledContent label="Airplane mode">
-                    <Toggle
-                        label="Airplane mode"
-                        labelHidden
-                        checked={airplane}
-                        onChange={setAirplane}
-                    />
-                </LabeledContent>
-                <LabeledContent
-                    label="Wi-Fi"
-                    description={wifi ? "Home" : "Off"}
-                >
-                    <Toggle
-                        label="Wi-Fi"
-                        labelHidden
-                        checked={wifi}
-                        disabled={airplane}
-                        onChange={setWifi}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Bluetooth">
-                    <Toggle
-                        label="Bluetooth"
-                        labelHidden
-                        checked={bluetooth}
-                        disabled={airplane}
-                        onChange={setBluetooth}
-                    />
-                </LabeledContent>
-            </Section>
-            <Section
-                title="Focus"
-                footer="Silences calls and alerts until you turn it off."
-            >
-                <LabeledContent label="Do not disturb">
-                    <Toggle
-                        label="Do not disturb"
-                        labelHidden
-                        checked={focus}
-                        onChange={setFocus}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

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

@@ -1,13 +0,0 @@
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function ToggleUsage() {
-    const [enabled, setEnabled] = useState(true)
-    return (
-        <Toggle
-            label="Wi-Fi"
-            checked={enabled}
-            onChange={setEnabled}
-        />
-    )
-}

package/src/components/toggle/toggle.docs.tsx

@@ -1,69 +0,0 @@
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { ToggleCheckboxes } from "./examples/toggle-checkboxes"
-import { ToggleSettings } from "./examples/toggle-settings"
-import { ToggleShowcase } from "./examples/toggle-showcase"
-import { ToggleUsage } from "./examples/toggle-usage"
-import { Toggle } from "./toggle"
-
-type ToggleProps = ComponentProps<typeof Toggle>
-type DemoProps = Omit<ToggleProps, "checked" | "onChange">
-
-/** Holds its own state so the playground can flip it. */
-function ToggleDemo(props: DemoProps) {
-    const [checked, setChecked] = useState(true)
-    return (
-        <Toggle
-            {...props}
-            checked={checked}
-            onChange={setChecked}
-        />
-    )
-}
-
-export const toggleDocs = defineDocs<ToggleProps>()({
-    slug: "toggle",
-    name: "Toggle",
-    importPath: "@passui/react/toggle",
-    controls: {
-        style: {
-            kind: "select",
-            options: { switch: true, checkbox: true },
-            default: "switch",
-        },
-        disabled: { kind: "boolean", default: false },
-        mixed: { kind: "boolean", default: false },
-        labelHidden: { kind: "boolean", default: false },
-        label: {
-            kind: "text",
-            default: "Wi-Fi",
-            required: true,
-        },
-    },
-    render: (values) => <ToggleDemo {...values} />,
-    childrenSnippet: () => ({
-        imports: ['import { useState } from "react"'],
-        setup: [
-            "const [checked, setChecked] = useState(true)",
-        ],
-        children: "",
-        expressionProps: {
-            checked: "checked",
-            onChange: "setChecked",
-        },
-    }),
-    usage: ToggleUsage,
-    showcase: ToggleShowcase,
-    examples: [
-        { id: "settings", component: ToggleSettings },
-        {
-            id: "checkboxes",
-            component: ToggleCheckboxes,
-            playground: {
-                style: "checkbox",
-                label: "Remember me",
-            },
-        },
-    ],
-})

package/src/components/tooltip/examples/tooltip-icon-buttons.tsx

@@ -1,27 +0,0 @@
-import {
-    Copy01Icon,
-    Delete02Icon,
-    Share08Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { IconButton } from "@passui/react/icon-button"
-
-export function TooltipIconButtons() {
-    // IconButton shows its label as a tooltip by itself
-    return (
-        <div className="flex gap-2">
-            <IconButton label="Copy" variant="secondary">
-                <HugeiconsIcon icon={Copy01Icon} size={20} />
-            </IconButton>
-            <IconButton label="Share" variant="secondary">
-                <HugeiconsIcon icon={Share08Icon} size={20} />
-            </IconButton>
-            <IconButton label="Delete" variant="secondary">
-                <HugeiconsIcon
-                    icon={Delete02Icon}
-                    size={20}
-                />
-            </IconButton>
-        </div>
-    )
-}

package/src/components/tooltip/examples/tooltip-shortcuts.tsx

@@ -1,38 +0,0 @@
-import {
-    TextBoldIcon,
-    TextItalicIcon,
-    TextUnderlineIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-
-const tools = [
-    { label: "Bold", keys: "⌘B", icon: TextBoldIcon },
-    { label: "Italic", keys: "⌘I", icon: TextItalicIcon },
-    {
-        label: "Underline",
-        keys: "⌘U",
-        icon: TextUnderlineIcon,
-    },
-]
-
-export function TooltipShortcuts() {
-    return (
-        <div className="flex gap-1 rounded-full bg-elevated p-1 shadow-sm ring-1 ring-separator/60">
-            {tools.map((tool) => (
-                <Button
-                    key={tool.label}
-                    variant="ghost"
-                    size="icon-sm"
-                    aria-label={tool.label}
-                    data-tooltip={`${tool.label}  ${tool.keys}`}
-                >
-                    <HugeiconsIcon
-                        icon={tool.icon}
-                        size={18}
-                    />
-                </Button>
-            ))}
-        </div>
-    )
-}

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

@@ -1,44 +0,0 @@
-import {
-    Archive01Icon,
-    Delete02Icon,
-    MailReply01Icon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { IconButton } from "@passui/react/icon-button"
-
-const actions = [
-    { label: "Reply", icon: MailReply01Icon },
-    { label: "Star", icon: StarIcon },
-    { label: "Archive", icon: Archive01Icon },
-    { label: "Delete", icon: Delete02Icon },
-]
-
-export function TooltipShowcase() {
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <div className="flex items-center justify-between">
-                <span className="text-headline font-semibold text-label">
-                    Inbox
-                </span>
-                <div className="flex gap-1">
-                    {actions.map((action) => (
-                        <IconButton
-                            key={action.label}
-                            label={action.label}
-                            variant="ghost"
-                        >
-                            <HugeiconsIcon
-                                icon={action.icon}
-                                size={20}
-                            />
-                        </IconButton>
-                    ))}
-                </div>
-            </div>
-            <p className="m-0 text-callout text-label-secondary">
-                Hover an icon to see what it does.
-            </p>
-        </div>
-    )
-}

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

@@ -1,13 +0,0 @@
-import { Button } from "@passui/react/button"
-
-export function TooltipUsage() {
-    // render one <TooltipHost /> near the root of your app
-    return (
-        <Button
-            variant="secondary"
-            data-tooltip="Saves a copy to your downloads"
-        >
-            Download
-        </Button>
-    )
-}

package/src/components/tooltip/tooltip.docs.tsx

@@ -1,56 +0,0 @@
-import { TooltipShortcuts } from "./examples/tooltip-shortcuts"
-import { Copy01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "../button/button"
-import { jsxAttribute, jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { TooltipIconButtons } from "./examples/tooltip-icon-buttons"
-import { TooltipShowcase } from "./examples/tooltip-showcase"
-import { TooltipUsage } from "./examples/tooltip-usage"
-
-// The host shows a tip for any element with data-tooltip; the playground
-// sets that attribute on a button.
-type DemoProps = {
-    tooltip: string
-}
-
-export const tooltipDocs = defineDocs<DemoProps>()({
-    slug: "tooltip",
-    name: "TooltipHost",
-    importPath: "@passui/react",
-    controls: {
-        tooltip: {
-            kind: "text",
-            default: "Copy to clipboard",
-        },
-    },
-    render: ({ tooltip }) => (
-        <Button variant="secondary" data-tooltip={tooltip}>
-            <HugeiconsIcon icon={Copy01Icon} size={18} />
-            Hover me
-        </Button>
-    ),
-    childrenSnippet: ({ tooltip }) => ({
-        imports: [
-            'import { Button } from "@passui/react/button"',
-        ],
-        element: "div",
-        omit: ["tooltip"],
-        children: [
-            "",
-            "    {/* once, near the root of your app */}",
-            "    <TooltipHost />",
-            `    <Button ${jsxAttribute("data-tooltip", tooltip)}>`,
-            `        ${jsxText("Copy")}`,
-            "    </Button>",
-            "",
-        ].join("\n"),
-    }),
-    usage: TooltipUsage,
-    showcase: TooltipShowcase,
-    examples: [
-        { id: "icon-buttons", component: TooltipIconButtons },
-        { id: "shortcuts", component: TooltipShortcuts },
-    ],
-    previewHeight: 200,
-})

package/src/components/view-controller/examples/view-controller-action.tsx

@@ -1,27 +0,0 @@
-import { Button } from "@passui/react/button"
-import { ViewController } from "@passui/react/view-controller"
-
-export function ViewControllerAction() {
-    return (
-        <ViewController
-            className="py-6"
-            heading={
-                <ViewController.Heading
-                    title="Applications"
-                    description="Apps that sign people in with Pass."
-                    action={
-                        <Button
-                            variant="accent"
-                            size="sm"
-                            className="ms-auto"
-                        >
-                            New application
-                        </Button>
-                    }
-                />
-            }
-        >
-            <div className="h-24 rounded-3xl bg-fill/60" />
-        </ViewController>
-    )
-}

package/src/components/view-controller/examples/view-controller-settings.tsx

@@ -1,31 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { ViewController } from "@passui/react/view-controller"
-
-export function ViewControllerSettings() {
-    return (
-        <div className="w-full max-w-lg rounded-4xl bg-background px-6 shadow-sm ring-1 ring-separator/60">
-            <ViewController
-                className="py-8"
-                heading={
-                    <ViewController.Heading
-                        title="Personal info"
-                        description="Your name and how to reach you."
-                    />
-                }
-            >
-                <Section title="Basics">
-                    <LabeledContent label="Name">
-                        <span className="text-subheadline text-label-secondary">
-                            Aiko Kamado
-                        </span>
-                    </LabeledContent>
-                    <LabeledContent label="Birthday">
-                        <span className="text-subheadline text-label-secondary">
-                            21 July
-                        </span>
-                    </LabeledContent>
-                </Section>
-            </ViewController>
-        </div>
-    )
-}

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

@@ -1,45 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextField } from "@passui/react/text-field"
-import { ViewController } from "@passui/react/view-controller"
-import { useState } from "react"
-
-export function ViewControllerShowcase() {
-    const [email, setEmail] = useState("")
-
-    return (
-        <div className="w-full max-w-sm rounded-4xl bg-elevated px-6 shadow-sm ring-1 ring-separator/60">
-            <ViewController
-                className="gap-6 py-8"
-                heading={
-                    <ViewController.Heading
-                        size="compact"
-                        title="Sign in"
-                        description="Use your Pass account."
-                    />
-                }
-            >
-                <form
-                    className="flex flex-col gap-4"
-                    onSubmit={(event) => {
-                        event.preventDefault()
-                        toast.success("Check your email")
-                    }}
-                >
-                    <TextField
-                        label="Email"
-                        type="email"
-                        placeholder="you@example.com"
-                        value={email}
-                        onChange={(event) =>
-                            setEmail(event.target.value)
-                        }
-                    />
-                    <Button type="submit" variant="accent">
-                        Continue
-                    </Button>
-                </form>
-            </ViewController>
-        </div>
-    )
-}

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

@@ -1,19 +0,0 @@
-import { ViewController } from "@passui/react/view-controller"
-
-export function ViewControllerUsage() {
-    return (
-        <ViewController
-            className="py-6"
-            heading={
-                <ViewController.Heading
-                    title="Devices"
-                    description="Where you're signed in right now."
-                />
-            }
-        >
-            <p className="text-callout text-label-secondary">
-                The screen's content goes here.
-            </p>
-        </ViewController>
-    )
-}

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

@@ -1,71 +0,0 @@
-import { ViewControllerSettings } from "./examples/view-controller-settings"
-import { Button } from "../button/button"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { ViewControllerAction } from "./examples/view-controller-action"
-import { ViewControllerShowcase } from "./examples/view-controller-showcase"
-import { ViewControllerUsage } from "./examples/view-controller-usage"
-import { ViewController } from "./view-controller"
-
-// The controls belong to ViewController.Heading, passed as `heading`;
-// the snippet writes that element itself.
-type DemoProps = {
-    title: string
-    description: string
-    size: "default" | "compact"
-}
-
-export const viewControllerDocs = defineDocs<DemoProps>()({
-    slug: "view-controller",
-    name: "ViewController",
-    importPath: "@passui/react/view-controller",
-    controls: {
-        title: { kind: "text", default: "Security" },
-        description: {
-            kind: "text",
-            default:
-                "Choose how you sign in and which devices stay signed in.",
-        },
-        size: {
-            kind: "select",
-            options: { default: true, compact: true },
-            default: "default",
-        },
-    },
-    render: ({ title, description, size }) => (
-        <ViewController
-            className="py-6"
-            heading={
-                <ViewController.Heading
-                    title={title}
-                    description={description || undefined}
-                    size={size}
-                />
-            }
-        >
-            <Button
-                variant="secondary"
-                className="self-start"
-            >
-                Change password
-            </Button>
-        </ViewController>
-    ),
-    childrenSnippet: ({ title, description, size }) => ({
-        imports: [],
-        omit: ["title", "description", "size"],
-        expressionProps: {
-            heading: `<ViewController.Heading ${jsxAttribute("title", title)}${description ? ` ${jsxAttribute("description", description)}` : ""}${size === "compact" ? ' size="compact"' : ""} />`,
-        },
-        children: "\n    {/* the screen's content */}\n",
-    }),
-    usage: ViewControllerUsage,
-    showcase: ViewControllerShowcase,
-    examples: [
-        {
-            id: "action",
-            component: ViewControllerAction,
-        },
-        { id: "settings", component: ViewControllerSettings },
-    ],
-})

package/src/docs/index.ts

@@ -1,3 +0,0 @@
-export * from "./registry"
-export * from "./types"
-export * from "./snippet"

package/src/docs/registry.ts

@@ -1,113 +0,0 @@
-import { buttonDocs } from "../components/button/button.docs"
-import { iconButtonDocs } from "../components/button/icon-button.docs"
-import { chipDocs } from "../components/chip/chip.docs"
-import { labeledContentDocs } from "../components/labeled-content/labeled-content.docs"
-import { pickerDocs } from "../components/picker/picker.docs"
-import { searchFieldDocs } from "../components/search-field/search-field.docs"
-import { secureFieldDocs } from "../components/secure-field/secure-field.docs"
-import { sectionDocs } from "../components/section/section.docs"
-import { segmentedControlDocs } from "../components/segmented-control/segmented-control.docs"
-import { statTileDocs } from "../components/stat-tile/stat-tile.docs"
-import { statusIndicatorDocs } from "../components/status-indicator/status-indicator.docs"
-import { swatchPickerDocs } from "../components/swatch-picker/swatch-picker.docs"
-import { textFieldDocs } from "../components/text-field/text-field.docs"
-import { toggleDocs } from "../components/toggle/toggle.docs"
-import { compactDatePickerDocs } from "../components/compact-date-picker/compact-date-picker.docs"
-import { compactTimePickerDocs } from "../components/compact-time-picker/compact-time-picker.docs"
-import { datePickerDocs } from "../components/date-picker/date-picker.docs"
-import { textEditorDocs } from "../components/text-editor/text-editor.docs"
-import { searchListDocs } from "../components/search-list/search-list.docs"
-import { profileImageDocs } from "../components/profile-image/profile-image.docs"
-import { tabViewDocs } from "../components/tab-view/tab-view.docs"
-import { tabBarDocs } from "../components/tab-bar/tab-bar.docs"
-import { sidebarDocs } from "../components/sidebar/sidebar.docs"
-import { viewControllerDocs } from "../components/view-controller/view-controller.docs"
-import { tableDocs } from "../components/table/table.docs"
-import { contentViewDocs } from "../components/content-view/content-view.docs"
-import { conversationDocs } from "../components/conversation/conversation.docs"
-import { ambientDocs } from "../components/ambient/ambient.docs"
-import { dialogDocs } from "../components/dialog/dialog.docs"
-import { sheetDocs } from "../components/sheet/sheet.docs"
-import { popoverDocs } from "../components/popover/popover.docs"
-import { toastDocs } from "../components/toast/toast.docs"
-import { contextMenuDocs } from "../components/context-menu/context-menu.docs"
-import { tooltipDocs } from "../components/tooltip/tooltip.docs"
-import { localeSwitcherDocs } from "../components/locale-switcher/locale-switcher.docs"
-import type { RegisteredDocs } from "./types"
-
-/** Every documented component. Add one line per docs file. */
-export const registry: readonly RegisteredDocs[] = [
-    buttonDocs,
-    iconButtonDocs,
-    chipDocs,
-    textFieldDocs,
-    secureFieldDocs,
-    searchFieldDocs,
-    toggleDocs,
-    segmentedControlDocs,
-    pickerDocs,
-    swatchPickerDocs,
-    sectionDocs,
-    labeledContentDocs,
-    statusIndicatorDocs,
-    statTileDocs,
-    datePickerDocs,
-    compactDatePickerDocs,
-    compactTimePickerDocs,
-    textEditorDocs,
-    searchListDocs,
-    profileImageDocs,
-    tabViewDocs,
-    tabBarDocs,
-    sidebarDocs,
-    viewControllerDocs,
-    tableDocs,
-    contentViewDocs,
-    conversationDocs,
-    ambientDocs,
-    dialogDocs,
-    sheetDocs,
-    popoverDocs,
-    toastDocs,
-    contextMenuDocs,
-    tooltipDocs,
-    localeSwitcherDocs,
-]
-
-export {
-    dialogDocs,
-    sheetDocs,
-    popoverDocs,
-    toastDocs,
-    contextMenuDocs,
-    tooltipDocs,
-    localeSwitcherDocs,
-    tableDocs,
-    contentViewDocs,
-    conversationDocs,
-    ambientDocs,
-    tabViewDocs,
-    tabBarDocs,
-    sidebarDocs,
-    viewControllerDocs,
-    datePickerDocs,
-    compactDatePickerDocs,
-    compactTimePickerDocs,
-    textEditorDocs,
-    searchListDocs,
-    profileImageDocs,
-    buttonDocs,
-    chipDocs,
-    iconButtonDocs,
-    labeledContentDocs,
-    pickerDocs,
-    searchFieldDocs,
-    secureFieldDocs,
-    sectionDocs,
-    segmentedControlDocs,
-    statTileDocs,
-    statusIndicatorDocs,
-    swatchPickerDocs,
-    textFieldDocs,
-    toggleDocs,
-}

package/src/docs/snippet.ts

@@ -1,17 +0,0 @@
-/**
- * A JSX attribute for a string, quoted so the code always parses: a
- * plain `name="value"`, or `name={"value"}` when the value holds a quote,
- * a brace, a backslash or a line break.
- */
-export function jsxAttribute(name: string, value: string) {
-    return /["\\{}\n]/.test(value)
-        ? `${name}={${JSON.stringify(value)}}`
-        : `${name}="${value}"`
-}
-
-/** Text as JSX children, wrapped in braces when JSX would misread it. */
-export function jsxText(text: string) {
-    return /[{}<>]/.test(text)
-        ? `{${JSON.stringify(text)}}`
-        : text
-}