@passui/react 0.1.17 → 0.1.20

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>
-    )
-}

package/src/components/sidebar/sidebar.docs.tsx

@@ -1,135 +0,0 @@
-import { SidebarUnread } from "./examples/sidebar-unread"
-import {
-    InboxIcon,
-    SentIcon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { SidebarGroups } from "./examples/sidebar-groups"
-import { SidebarShowcase } from "./examples/sidebar-showcase"
-import { SidebarUsage } from "./examples/sidebar-usage"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "./sidebar"
-
-// Rows are the app's own links dressed by sidebarItemClass and
-// SidebarItemContent, so the playground switches counts on and the
-// snippet writes the rows.
-type DemoProps = {
-    title: string
-    counts: boolean
-}
-
-const items = [
-    {
-        id: "inbox",
-        label: "Inbox",
-        icon: InboxIcon,
-        count: 12,
-    },
-    {
-        id: "starred",
-        label: "Starred",
-        icon: StarIcon,
-        count: 3,
-    },
-    { id: "sent", label: "Sent", icon: SentIcon, count: 0 },
-]
-
-function SidebarDemo({ title, counts }: DemoProps) {
-    const [active, setActive] = useState("inbox")
-    return (
-        <nav aria-label="Mail" className="w-56">
-            <SidebarSection title={title}>
-                {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={
-                                counts
-                                    ? item.count
-                                    : undefined
-                            }
-                            icon={
-                                <HugeiconsIcon
-                                    icon={item.icon}
-                                    size={18}
-                                />
-                            }
-                        >
-                            {item.label}
-                        </SidebarItemContent>
-                    </a>
-                ))}
-            </SidebarSection>
-        </nav>
-    )
-}
-
-export const sidebarDocs = defineDocs<DemoProps>()({
-    slug: "sidebar",
-    name: "SidebarSection",
-    importPath: "@passui/react/sidebar",
-    controls: {
-        title: {
-            kind: "text",
-            default: "Mailboxes",
-            required: true,
-        },
-        counts: { kind: "boolean", default: true },
-    },
-    render: (values) => <SidebarDemo {...values} />,
-    childrenSnippet: ({ counts }) => ({
-        imports: [
-            'import { InboxIcon } from "@hugeicons/core-free-icons"',
-            'import { HugeiconsIcon } from "@hugeicons/react"',
-            'import { SidebarItemContent, sidebarItemClass } from "@passui/react/sidebar"',
-            'import { Link } from "@tanstack/react-router"',
-        ],
-        omit: ["counts"],
-        children: [
-            "",
-            '    <Link to="/inbox">',
-            "        {({ isActive }) => (",
-            "            <span className={sidebarItemClass(isActive)}>",
-            "                <SidebarItemContent",
-            "                    active={isActive}",
-            ...(counts
-                ? ["                    count={12}"]
-                : []),
-            "                    icon={<HugeiconsIcon icon={InboxIcon} size={18} />}",
-            "                >",
-            "                    Inbox",
-            "                </SidebarItemContent>",
-            "            </span>",
-            "        )}",
-            "    </Link>",
-            "",
-        ].join("\n"),
-    }),
-    usage: SidebarUsage,
-    showcase: SidebarShowcase,
-    examples: [
-        { id: "groups", component: SidebarGroups },
-        { id: "unread", component: SidebarUnread },
-    ],
-})

package/src/components/stat-tile/examples/stat-tile-filters.tsx

@@ -1,32 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-import { useState } from "react"
-
-const filters = [
-    { id: "all", label: "All requests", value: 42 },
-    { id: "open", label: "Open", value: 7 },
-    { id: "waiting", label: "Waiting on you", value: 2 },
-]
-
-export function StatTileFilters() {
-    const [active, setActive] = useState("open")
-
-    return (
-        <div className="flex w-full max-w-xl flex-col gap-3">
-            <div className="grid grid-cols-3 gap-3">
-                {filters.map((filter) => (
-                    <StatTile
-                        key={filter.id}
-                        label={filter.label}
-                        value={filter.value}
-                        active={active === filter.id}
-                        onClick={() => setActive(filter.id)}
-                    />
-                ))}
-            </div>
-            <p className="text-center text-footnote text-label-secondary">
-                Showing:{" "}
-                {filters.find((f) => f.id === active)?.label}
-            </p>
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-grid.tsx

@@ -1,21 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-
-export function StatTileGrid() {
-    return (
-        <div className="grid w-full max-w-xl grid-cols-2 gap-3 sm:grid-cols-4">
-            <StatTile label="People" value={1284} />
-            <StatTile
-                label="Signed in now"
-                value={86}
-                caption="Across 3 apps"
-            />
-            <StatTile label="New today" value={12} />
-            <StatTile
-                label="Failed sign-ins"
-                value={3}
-                caption="In the last hour"
-                tone="critical"
-            />
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-showcase.tsx

@@ -1,52 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-import { useState } from "react"
-
-const tiles = [
-    {
-        id: "people",
-        label: "People",
-        value: 1284,
-        caption: "32 joined this week",
-    },
-    {
-        id: "sessions",
-        label: "Signed in now",
-        value: 86,
-        caption: "Across 41 devices",
-    },
-    {
-        id: "apps",
-        label: "Apps",
-        value: 12,
-        caption: "3 updated today",
-    },
-    {
-        id: "failures",
-        label: "Failed sign ins",
-        value: 3,
-        caption: "In the last hour",
-        critical: true,
-    },
-]
-
-export function StatTileShowcase() {
-    const [active, setActive] = useState("people")
-
-    return (
-        <div className="grid w-full max-w-lg grid-cols-2 gap-3">
-            {tiles.map((tile) => (
-                <StatTile
-                    key={tile.id}
-                    label={tile.label}
-                    value={tile.value}
-                    caption={tile.caption}
-                    tone={
-                        tile.critical ? "critical" : undefined
-                    }
-                    active={active === tile.id}
-                    onClick={() => setActive(tile.id)}
-                />
-            ))}
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-usage.tsx

@@ -1,13 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-
-export function StatTileUsage() {
-    return (
-        <div className="w-56">
-            <StatTile
-                label="Active people"
-                value={1284}
-                caption="This week"
-            />
-        </div>
-    )
-}

package/src/components/stat-tile/stat-tile.docs.tsx

@@ -1,60 +0,0 @@
-import { StatTileFilters } from "./examples/stat-tile-filters"
-import { StatTileGrid } from "./examples/stat-tile-grid"
-import { defineDocs } from "../../docs/types"
-import { StatTileShowcase } from "./examples/stat-tile-showcase"
-import { StatTileUsage } from "./examples/stat-tile-usage"
-import { StatTile } from "./stat-tile"
-
-type DemoProps = {
-    label: string
-    caption?: string
-    critical?: boolean
-    active?: boolean
-}
-
-export const statTileDocs = defineDocs<DemoProps>()({
-    slug: "stat-tile",
-    name: "StatTile",
-    importPath: "@passui/react/stat-tile",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Failed sign ins",
-            required: true,
-        },
-        caption: {
-            kind: "text",
-            default: "In the last hour",
-        },
-        critical: { kind: "boolean", default: true },
-        active: { kind: "boolean", default: false },
-    },
-    render: ({ critical, ...values }) => (
-        <div className="w-56">
-            <StatTile
-                {...values}
-                value={3}
-                tone={critical ? "critical" : undefined}
-            />
-        </div>
-    ),
-    childrenSnippet: ({ critical }) => ({
-        imports: [],
-        children: "",
-        omit: ["critical"],
-        expressionProps: {
-            value: "3",
-            ...(critical ? { tone: '"critical"' } : {}),
-        },
-    }),
-    usage: StatTileUsage,
-    showcase: StatTileShowcase,
-    examples: [
-        { id: "grid", component: StatTileGrid },
-        {
-            id: "filters",
-            component: StatTileFilters,
-            playground: { active: true },
-        },
-    ],
-})