@passui/react 0.1.17 → 0.1.19

package/src/components/sheet/examples/sheet-share.tsx

@@ -1,51 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { Sheet } from "@passui/react/sheet"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function SheetShare() {
-    const [open, setOpen] = useState(false)
-    const [canEdit, setCanEdit] = useState(false)
-
-    return (
-        <>
-            <Button onClick={() => setOpen(true)}>
-                Share
-            </Button>
-            <Sheet
-                open={open}
-                onClose={() => setOpen(false)}
-                label="Share note"
-            >
-                <div className="flex flex-col gap-5 p-6">
-                    <h2 className="text-title3 font-semibold text-label">
-                        Share note
-                    </h2>
-                    <Toggle
-                        label="People with the link can edit"
-                        checked={canEdit}
-                        onChange={setCanEdit}
-                    />
-                    <div className="flex justify-end gap-2">
-                        <Button
-                            variant="secondary"
-                            onClick={() => setOpen(false)}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            variant="accent"
-                            onClick={() => {
-                                setOpen(false)
-                                toast.success("Link copied")
-                            }}
-                        >
-                            Copy link
-                        </Button>
-                    </div>
-                </div>
-            </Sheet>
-        </>
-    )
-}

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

@@ -1,74 +0,0 @@
-import {
-    LabeledContent,
-    Section,
-    SwatchPicker,
-} from "@passui/react"
-import { Button } from "@passui/react/button"
-import { Sheet } from "@passui/react/sheet"
-import { useState } from "react"
-
-const accents = [
-    {
-        value: "blush",
-        label: "Blush",
-        color: "#f2d4d7",
-        ink: "#9e3b4f",
-    },
-    {
-        value: "sage",
-        label: "Sage",
-        color: "#d6e6d3",
-        ink: "#3f6b45",
-    },
-    {
-        value: "ocean",
-        label: "Ocean",
-        color: "#d3e3f2",
-        ink: "#2f5f8f",
-    },
-]
-
-export function SheetShowcase() {
-    const [open, setOpen] = useState(false)
-    const [accent, setAccent] = useState("blush")
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section title="Appearance">
-                <LabeledContent label="Accent color">
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setOpen(true)}
-                    >
-                        {
-                            accents.find(
-                                (a) => a.value === accent
-                            )?.label
-                        }
-                    </Button>
-                </LabeledContent>
-            </Section>
-            <Sheet
-                open={open}
-                onClose={() => setOpen(false)}
-                label="Accent color"
-            >
-                <div className="flex flex-col gap-5 p-6">
-                    <h2 className="text-title3 font-semibold text-label">
-                        Accent color
-                    </h2>
-                    <SwatchPicker
-                        label="Accent color"
-                        options={accents}
-                        value={accent}
-                        onChange={setAccent}
-                    />
-                    <Button onClick={() => setOpen(false)}>
-                        Done
-                    </Button>
-                </div>
-            </Sheet>
-        </div>
-    )
-}

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

@@ -1,32 +0,0 @@
-import { Button } from "@passui/react/button"
-import { Sheet } from "@passui/react/sheet"
-import { useState } from "react"
-
-export function SheetUsage() {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                About this app
-            </Button>
-            <Sheet
-                open={open}
-                onClose={() => setOpen(false)}
-                label="About this app"
-            >
-                <div className="flex flex-col gap-2 p-6">
-                    <h2 className="text-title3 font-semibold text-label">
-                        Pass
-                    </h2>
-                    <p className="text-callout text-label-secondary">
-                        Version 2.4. Made in Lisbon.
-                    </p>
-                </div>
-            </Sheet>
-        </>
-    )
-}

package/src/components/sheet/sheet.docs.tsx

@@ -1,75 +0,0 @@
-import { SheetChoices } from "./examples/sheet-choices"
-import { useState } from "react"
-import { Button } from "../button/button"
-import { defineDocs } from "../../docs/types"
-import { SheetShare } from "./examples/sheet-share"
-import { SheetShowcase } from "./examples/sheet-showcase"
-import { SheetUsage } from "./examples/sheet-usage"
-import { Sheet } from "./sheet"
-
-type DemoProps = {
-    label: string
-}
-
-function SheetDemo({ label }: DemoProps) {
-    const [open, setOpen] = useState(false)
-    return (
-        <>
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                Open sheet
-            </Button>
-            <Sheet
-                open={open}
-                onClose={() => setOpen(false)}
-                label={label}
-            >
-                <div className="flex flex-col gap-3 p-6">
-                    <h2 className="text-title3 font-semibold text-label">
-                        {label}
-                    </h2>
-                    <p className="text-callout text-label-secondary">
-                        Escape, a tap outside, or the button
-                        closes it.
-                    </p>
-                    <Button onClick={() => setOpen(false)}>
-                        Done
-                    </Button>
-                </div>
-            </Sheet>
-        </>
-    )
-}
-
-export const sheetDocs = defineDocs<DemoProps>()({
-    slug: "sheet",
-    name: "Sheet",
-    importPath: "@passui/react/sheet",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Details",
-            required: true,
-        },
-    },
-    render: (values) => <SheetDemo {...values} />,
-    childrenSnippet: () => ({
-        imports: ['import { useState } from "react"'],
-        setup: ["const [open, setOpen] = useState(false)"],
-        expressionProps: {
-            open: "open",
-            onClose: "() => setOpen(false)",
-        },
-        children:
-            '\n    <div className="p-6">The sheet\'s content</div>\n',
-    }),
-    usage: SheetUsage,
-    showcase: SheetShowcase,
-    examples: [
-        { id: "share", component: SheetShare },
-        { id: "choices", component: SheetChoices },
-    ],
-    previewHeight: 420,
-})

package/src/components/sidebar/examples/sidebar-groups.tsx

@@ -1,133 +0,0 @@
-import {
-    Archive01Icon,
-    Calendar03Icon,
-    Delete02Icon,
-    Folder01Icon,
-    InboxIcon,
-    Note01Icon,
-} from "@hugeicons/core-free-icons"
-import {
-    HugeiconsIcon,
-    type IconSvgElement,
-} from "@hugeicons/react"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "@passui/react/sidebar"
-import { useState } from "react"
-
-type Row = {
-    id: string
-    label: string
-    icon: IconSvgElement
-    count?: number
-}
-
-const sections: { title: string; items: Row[] }[] = [
-    {
-        title: "Library",
-        items: [
-            {
-                id: "notes",
-                label: "All notes",
-                icon: Note01Icon,
-                count: 248,
-            },
-            {
-                id: "today",
-                label: "Today",
-                icon: Calendar03Icon,
-                count: 4,
-            },
-            {
-                id: "inbox",
-                label: "Inbox",
-                icon: InboxIcon,
-                count: 9,
-            },
-        ],
-    },
-    {
-        title: "Folders",
-        items: [
-            {
-                id: "work",
-                label: "Work",
-                icon: Folder01Icon,
-                count: 61,
-            },
-            {
-                id: "travel",
-                label: "Travel",
-                icon: Folder01Icon,
-                count: 17,
-            },
-        ],
-    },
-    {
-        title: "More",
-        items: [
-            {
-                id: "archive",
-                label: "Archive",
-                icon: Archive01Icon,
-            },
-            {
-                id: "trash",
-                label: "Recently deleted",
-                icon: Delete02Icon,
-            },
-        ],
-    },
-]
-
-export function SidebarGroups() {
-    const [active, setActive] = useState("today")
-
-    return (
-        <nav
-            aria-label="Notes"
-            className="flex w-60 flex-col gap-5 rounded-4xl bg-sidebar p-3"
-        >
-            {sections.map((section) => (
-                <SidebarSection
-                    key={section.title}
-                    title={section.title}
-                >
-                    {section.items.map((item) => (
-                        <a
-                            key={item.id}
-                            href={`#${item.id}`}
-                            aria-current={
-                                item.id === active
-                                    ? "page"
-                                    : undefined
-                            }
-                            className={sidebarItemClass(
-                                item.id === active
-                            )}
-                            onClick={(event) => {
-                                event.preventDefault()
-                                setActive(item.id)
-                            }}
-                        >
-                            <SidebarItemContent
-                                active={item.id === active}
-                                count={item.count}
-                                icon={
-                                    <HugeiconsIcon
-                                        icon={item.icon}
-                                        size={18}
-                                    />
-                                }
-                            >
-                                {item.label}
-                            </SidebarItemContent>
-                        </a>
-                    ))}
-                </SidebarSection>
-            ))}
-        </nav>
-    )
-}

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

@@ -1,123 +0,0 @@
-import {
-    Analytics01Icon,
-    Folder01Icon,
-    Home01Icon,
-    Settings01Icon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "@passui/react/sidebar"
-import { useState } from "react"
-
-const sections = [
-    {
-        title: "Console",
-        items: [
-            {
-                id: "overview",
-                label: "Overview",
-                icon: Home01Icon,
-            },
-            {
-                id: "apps",
-                label: "Applications",
-                icon: Folder01Icon,
-                count: 6,
-            },
-            {
-                id: "users",
-                label: "Users",
-                icon: UserIcon,
-                count: 1284,
-            },
-            {
-                id: "activity",
-                label: "Activity",
-                icon: Analytics01Icon,
-            },
-        ],
-    },
-    {
-        title: "Project",
-        items: [
-            {
-                id: "settings",
-                label: "Settings",
-                icon: Settings01Icon,
-            },
-        ],
-    },
-]
-
-const titles: Record<string, string> = {
-    overview: "Overview",
-    apps: "Applications",
-    users: "Users",
-    activity: "Activity",
-    settings: "Settings",
-}
-
-export function SidebarShowcase() {
-    const [active, setActive] = useState("users")
-
-    return (
-        <div className="flex h-80 w-full max-w-2xl overflow-hidden rounded-5xl bg-background shadow-sm ring-1 ring-separator/60">
-            <nav
-                aria-label="Console"
-                className="glass-pane flex w-56 shrink-0 flex-col gap-5 p-3 max-sm:hidden"
-            >
-                {sections.map((section) => (
-                    <SidebarSection
-                        key={section.title}
-                        title={section.title}
-                    >
-                        {section.items.map((item) => (
-                            <a
-                                key={item.id}
-                                href={`#${item.id}`}
-                                aria-current={
-                                    item.id === active
-                                        ? "page"
-                                        : undefined
-                                }
-                                className={sidebarItemClass(
-                                    item.id === active
-                                )}
-                                onClick={(event) => {
-                                    event.preventDefault()
-                                    setActive(item.id)
-                                }}
-                            >
-                                <SidebarItemContent
-                                    active={
-                                        item.id === active
-                                    }
-                                    count={item.count}
-                                    icon={
-                                        <HugeiconsIcon
-                                            icon={item.icon}
-                                            size={18}
-                                        />
-                                    }
-                                >
-                                    {item.label}
-                                </SidebarItemContent>
-                            </a>
-                        ))}
-                    </SidebarSection>
-                ))}
-            </nav>
-            <div className="flex flex-1 flex-col gap-3 p-6">
-                <h2 className="text-title3 font-bold text-label">
-                    {titles[active]}
-                </h2>
-                <div className="h-16 rounded-3xl bg-fill/60" />
-                <div className="h-16 rounded-3xl bg-fill/60" />
-            </div>
-        </div>
-    )
-}

package/src/components/sidebar/examples/sidebar-unread.tsx

@@ -1,66 +0,0 @@
-import {
-    InboxIcon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "@passui/react/sidebar"
-import { useState } from "react"
-
-export function SidebarUnread() {
-    const [unread, setUnread] = useState(5)
-
-    return (
-        <div className="flex w-60 flex-col gap-4 rounded-4xl bg-sidebar p-3">
-            <nav aria-label="Mail">
-                <SidebarSection title="Mailboxes">
-                    <a
-                        href="#inbox"
-                        aria-current="page"
-                        className={sidebarItemClass(true)}
-                    >
-                        <SidebarItemContent
-                            active
-                            count={unread || undefined}
-                            icon={
-                                <HugeiconsIcon
-                                    icon={InboxIcon}
-                                    size={18}
-                                />
-                            }
-                        >
-                            Inbox
-                        </SidebarItemContent>
-                    </a>
-                    <a
-                        href="#starred"
-                        className={sidebarItemClass()}
-                    >
-                        <SidebarItemContent
-                            icon={
-                                <HugeiconsIcon
-                                    icon={StarIcon}
-                                    size={18}
-                                />
-                            }
-                        >
-                            Starred
-                        </SidebarItemContent>
-                    </a>
-                </SidebarSection>
-            </nav>
-            <Button
-                variant="secondary"
-                size="sm"
-                disabled={unread === 0}
-                onClick={() => setUnread(0)}
-            >
-                Mark all as read
-            </Button>
-        </div>
-    )
-}

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

@@ -1,52 +0,0 @@
-import {
-    Home01Icon,
-    Settings01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "@passui/react/sidebar"
-
-export function SidebarUsage() {
-    // Use your router's link in place of <a>, passing it the class.
-    return (
-        <nav aria-label="Main" className="w-56">
-            <SidebarSection title="Workspace">
-                <a
-                    href="#home"
-                    aria-current="page"
-                    className={sidebarItemClass(true)}
-                >
-                    <SidebarItemContent
-                        active
-                        icon={
-                            <HugeiconsIcon
-                                icon={Home01Icon}
-                                size={18}
-                            />
-                        }
-                    >
-                        Home
-                    </SidebarItemContent>
-                </a>
-                <a
-                    href="#settings"
-                    className={sidebarItemClass()}
-                >
-                    <SidebarItemContent
-                        icon={
-                            <HugeiconsIcon
-                                icon={Settings01Icon}
-                                size={18}
-                            />
-                        }
-                    >
-                        Settings
-                    </SidebarItemContent>
-                </a>
-            </SidebarSection>
-        </nav>
-    )
-}