prime-ui-kit 0.7.13 → 0.9.1

package/src/components/accordion/examples/04-api-docs-sections.tsx

@@ -1,88 +0,0 @@
-import { BookOpen, Code2, Webhook } from "lucide-react";
-import * as React from "react";
-import { Accordion } from "@/components/accordion/Accordion";
-import { Typography } from "@/components/typography/Typography";
-
-import styles from "./examples.module.css";
-
-/**
- * Long-form API reference: controlled `value` / `onValueChange` so another part of the page (or
- * deep link) can sync which section is open.
- */
-export default function AccordionExampleApiDocsSections() {
-  const [open, setOpen] = React.useState<string>("auth");
-
-  return (
-    <Accordion.Root
-      type="single"
-      layout="grouped"
-      value={open}
-      onValueChange={(next) => {
-        if (typeof next === "string") setOpen(next);
-      }}
-    >
-      <Accordion.Item value="auth">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={BookOpen} />
-            <span>Authentication</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <div className={styles.bodyStack}>
-            <Typography.Root as="p" variant="body-default" className={styles.lead}>
-              Send a bearer token in the{" "}
-              <Typography.Root as="span" variant="caption" weight="medium">
-                Authorization
-              </Typography.Root>{" "}
-              header. Tokens expire after twelve hours; refresh using the endpoint described in the
-              session guide.
-            </Typography.Root>
-          </div>
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="webhooks">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={Webhook} />
-            <span>Webhooks</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Typography.Root as="p" variant="body-default" className={styles.lead}>
-            Register HTTPS endpoints to receive signed event payloads. Retry policy uses exponential
-            backoff for non-2xx responses up to three days.
-          </Typography.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="errors">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={Code2} />
-            <span>Error format</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Typography.Root as="p" variant="body-default" className={styles.lead}>
-            Errors return JSON with{" "}
-            <Typography.Root as="span" variant="caption" weight="medium">
-              code
-            </Typography.Root>
-            ,{" "}
-            <Typography.Root as="span" variant="caption" weight="medium">
-              message
-            </Typography.Root>
-            , and optional{" "}
-            <Typography.Root as="span" variant="caption" weight="medium">
-              details
-            </Typography.Root>{" "}
-            for validation issues.
-          </Typography.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-}

package/src/components/accordion/examples/05-knowledge-base-categories.tsx

@@ -1,60 +0,0 @@
-import { FileQuestion, LifeBuoy, ShieldCheck } from "lucide-react";
-import { Accordion } from "@/components/accordion/Accordion";
-import { Typography } from "@/components/typography/Typography";
-
-import styles from "./examples.module.css";
-
-/**
- * Support hub: `collapsible={false}` keeps one section pinned open once chosen, and a disabled item
- * marks content that is not yet available for the user’s plan.
- */
-export default function AccordionExampleKnowledgeBaseCategories() {
-  return (
-    <Accordion.Root type="single" layout="separate" defaultValue="basics" collapsible={false}>
-      <Accordion.Item value="basics">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={LifeBuoy} />
-            <span>Getting started</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Typography.Root as="p" variant="body-default" className={styles.lead}>
-            New here? Complete the workspace checklist, invite teammates, and connect your first
-            data source from the integrations directory.
-          </Typography.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="billing" disabled>
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={ShieldCheck} />
-            <span>Billing &amp; contracts (Enterprise)</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Typography.Root as="p" variant="body-default" className={styles.lead}>
-            Contract terms and invoice history appear here when your organization upgrades.
-          </Typography.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="troubleshoot">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <Accordion.Icon as={FileQuestion} />
-            <span>Troubleshooting</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>
-          <Typography.Root as="p" variant="body-default" className={styles.lead}>
-            Common fixes: clear the local cache, verify outbound firewall rules for our API hosts,
-            and confirm your SDK is on a supported major version.
-          </Typography.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-}

package/src/components/avatar/examples/app-header-nav.tsx

@@ -1,33 +0,0 @@
-import { Avatar, LinkButton, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const portrait =
-  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
-
-/**
- * App chrome: product title, nav links, and a signed-in identity cluster (avatar + account link).
- */
-export default function AvatarAppHeaderNavExample() {
-  return (
-    <header className={styles.navBar}>
-      <div className={styles.navCluster}>
-        <Typography.Root as="span" variant="heading-subsection" weight="semibold">
-          Prime Console
-        </Typography.Root>
-        <nav className={styles.row} aria-label="Primary">
-          <LinkButton.Root href="#overview">Overview</LinkButton.Root>
-          <LinkButton.Root href="#projects">Projects</LinkButton.Root>
-          <LinkButton.Root href="#settings">Settings</LinkButton.Root>
-        </nav>
-      </div>
-      <div className={styles.navUser}>
-        <Avatar.Root aria-label="Signed in as Jamie Chen">
-          <Avatar.Image src={portrait} alt="" />
-          <Avatar.Fallback>JC</Avatar.Fallback>
-        </Avatar.Root>
-        <LinkButton.Root href="#account">Account</LinkButton.Root>
-      </div>
-    </header>
-  );
-}

package/src/components/avatar/examples/comment-thread.tsx

@@ -1,57 +0,0 @@
-import { Avatar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const portrait =
-  "https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=128&h=128&fit=crop";
-
-type Comment = { id: string; author: string; initials: string; body: string; src?: string };
-
-const comments: Comment[] = [
-  {
-    id: "c1",
-    author: "Casey Ng",
-    initials: "CN",
-    body: "Shipped the first cut of filters. Can you sanity-check the empty state?",
-    src: portrait,
-  },
-  {
-    id: "c2",
-    author: "Riley Park",
-    initials: "RP",
-    body: "Looks good. Let’s add a single-line skeleton for slow networks.",
-  },
-  {
-    id: "c3",
-    author: "Morgan Blake",
-    initials: "MB",
-    body: "+1 on skeleton. I’ll wire it in the list cell tomorrow.",
-    src: portrait,
-  },
-];
-
-/**
- * Comment thread: avatar + stacked author line and body copy.
- */
-export default function AvatarCommentThreadExample() {
-  return (
-    <ul className={styles.list} aria-label="Discussion">
-      {comments.map((c) => (
-        <li key={c.id} className={styles.rowStretch}>
-          <Avatar.Root aria-label={c.author}>
-            {c.src ? <Avatar.Image src={c.src} alt="" /> : null}
-            <Avatar.Fallback>{c.initials}</Avatar.Fallback>
-          </Avatar.Root>
-          <div className={styles.stack}>
-            <Typography.Root as="span" variant="body-small" weight="semibold">
-              {c.author}
-            </Typography.Root>
-            <Typography.Root as="p" variant="body-default" tone="muted">
-              {c.body}
-            </Typography.Root>
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-}

package/src/components/avatar/examples/fallback-variants.tsx

@@ -1,33 +0,0 @@
-import { Avatar, Icon, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const portrait =
-  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
-
-/**
- * Side-by-side: loaded image, initials-only fallback, and icon-only fallback.
- */
-export default function AvatarFallbackVariantsExample() {
-  return (
-    <div className={styles.stack}>
-      <Typography.Root as="p" variant="caption" tone="muted">
-        Same size tier; different fallback strategies
-      </Typography.Root>
-      <div className={styles.row}>
-        <Avatar.Root size="xl" aria-label="User with photo">
-          <Avatar.Image src={portrait} alt="" />
-          <Avatar.Fallback>PH</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Root size="xl" aria-label="User with initials only">
-          <Avatar.Fallback>IN</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Root size="xl" aria-label="Placeholder account">
-          <Avatar.Fallback>
-            <Icon name="field.email" size="xl" tone="subtle" />
-          </Avatar.Fallback>
-        </Avatar.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/avatar/examples/group-overflow.tsx

@@ -1,32 +0,0 @@
-import { Avatar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const portrait =
-  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
-
-/**
- * Overlapping group with an overflow cell for hidden participants.
- */
-export default function AvatarGroupOverflowExample() {
-  return (
-    <div className={styles.stack}>
-      <Typography.Root as="p" variant="body-small" tone="muted">
-        Design review — 5 invited, 2 faces shown
-      </Typography.Root>
-      <Avatar.Group.Root
-        size="l"
-        aria-label="Participants: two avatars visible, three more not shown"
-      >
-        <Avatar.Root>
-          <Avatar.Image src={portrait} alt="" />
-          <Avatar.Fallback>A</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Root>
-          <Avatar.Fallback>B</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Group.Overflow aria-label="Three additional participants">+3</Avatar.Group.Overflow>
-      </Avatar.Group.Root>
-    </div>
-  );
-}

package/src/components/avatar/examples/group-three.tsx

@@ -1,28 +0,0 @@
-import { Avatar } from "@/components/avatar/Avatar";
-
-import styles from "./examples.module.css";
-
-const sampleSrc =
-  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
-
-/**
- * Overlapping row of three avatars, group `size` cloned to children — mirrors `playground/snippets/avatar/group-three.tsx`.
- */
-export default function AvatarGroupThreeExample() {
-  return (
-    <div className={styles.stack}>
-      <Avatar.Group.Root size="xl">
-        <Avatar.Root>
-          <Avatar.Image src={sampleSrc} alt="" />
-          <Avatar.Fallback>A</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Root>
-          <Avatar.Fallback>B</Avatar.Fallback>
-        </Avatar.Root>
-        <Avatar.Root>
-          <Avatar.Fallback>C</Avatar.Fallback>
-        </Avatar.Root>
-      </Avatar.Group.Root>
-    </div>
-  );
-}

package/src/components/avatar/examples/team-list.tsx

@@ -1,45 +0,0 @@
-import { Avatar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const portrait =
-  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
-
-type Member = { id: string; name: string; role: string; src?: string };
-
-const members: Member[] = [
-  { id: "1", name: "Alex Morgan", role: "Design lead", src: portrait },
-  { id: "2", name: "Jordan Lee", role: "Engineer" },
-  { id: "3", name: "Sam Rivera", role: "PM", src: portrait },
-];
-
-/**
- * Team roster: each row pairs Avatar with Typography; missing photo falls back to initials.
- */
-export default function AvatarTeamListExample() {
-  return (
-    <ul className={styles.list} aria-label="Team members">
-      {members.map((m) => (
-        <li key={m.id} className={styles.listItem}>
-          <Avatar.Root size="l" aria-label={m.name}>
-            {m.src ? <Avatar.Image src={m.src} alt="" /> : null}
-            <Avatar.Fallback>
-              {m.name
-                .split(" ")
-                .map((p) => p[0])
-                .join("")}
-            </Avatar.Fallback>
-          </Avatar.Root>
-          <div className={styles.listItemBody}>
-            <Typography.Root as="span" variant="body-default" weight="medium">
-              {m.name}
-            </Typography.Root>
-            <Typography.Root as="span" variant="caption" tone="muted">
-              {m.role}
-            </Typography.Root>
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-}

package/src/components/badge/examples/admin-tags.tsx

@@ -1,35 +0,0 @@
-import { Badge } from "prime-ui-kit";
-import type { CSSProperties } from "react";
-
-const row: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--prime-sys-spacing-s)",
-  alignItems: "center",
-};
-
-/** Environment and access hints on admin surfaces (non-removable labels; use Tag for removable chips). */
-export default function BadgeAdminTagsExample() {
-  return (
-    <div style={row}>
-      <Badge.Root color="orange" variant="filled">
-        Staging
-      </Badge.Root>
-      <Badge.Root color="green" variant="light">
-        Production
-      </Badge.Root>
-      <Badge.Root color="gray" variant="stroke">
-        Internal
-      </Badge.Root>
-      <Badge.Root color="blue" variant="lighter">
-        Beta
-      </Badge.Root>
-      <Badge.Root color="purple" variant="filled">
-        Owner
-      </Badge.Root>
-      <Badge.Root color="yellow" variant="light">
-        Feature flag: new billing
-      </Badge.Root>
-    </div>
-  );
-}

package/src/components/badge/examples/canonical.tsx

@@ -1,6 +0,0 @@
-import { Badge } from "prime-ui-kit";
-
-/** Smallest valid usage: default `size` `m`, `variant` `light`, `color` `gray`. */
-export default function BadgeCanonicalExample() {
-  return <Badge.Root>New</Badge.Root>;
-}

package/src/components/badge/examples/ecommerce-inventory.tsx

@@ -1,35 +0,0 @@
-import { Badge, Icon } from "prime-ui-kit";
-import type { CSSProperties } from "react";
-
-const row: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--prime-sys-spacing-s)",
-  alignItems: "center",
-};
-
-/** Product shelf: stock emphasis with `filled` / `light` / `lighter` / `stroke`. */
-export default function BadgeEcommerceInventoryExample() {
-  return (
-    <div style={row}>
-      <Badge.Root color="green" variant="filled">
-        In stock
-      </Badge.Root>
-      <Badge.Root color="orange" variant="light">
-        Low stock · 3 left
-      </Badge.Root>
-      <Badge.Root color="red" variant="lighter">
-        Out of stock
-      </Badge.Root>
-      <Badge.Root color="purple" variant="stroke">
-        Sale · 20% off
-      </Badge.Root>
-      <Badge.Root color="teal" variant="filled">
-        <Badge.Icon>
-          <Icon name="status.locked" />
-        </Badge.Icon>
-        Secure checkout
-      </Badge.Root>
-    </div>
-  );
-}

package/src/components/badge/examples/inbox-labels.tsx

@@ -1,36 +0,0 @@
-import { Badge, Icon } from "prime-ui-kit";
-import type { CSSProperties } from "react";
-
-const row: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--prime-sys-spacing-s)",
-  alignItems: "center",
-};
-
-/** Thread metadata: priority, unread-style emphasis, and channel type with `Badge.Icon`. */
-export default function BadgeInboxLabelsExample() {
-  return (
-    <div style={row}>
-      <Badge.Root color="red" variant="filled">
-        Urgent
-      </Badge.Root>
-      <Badge.Root color="blue" variant="light">
-        Unread
-      </Badge.Root>
-      <Badge.Root color="gray" variant="stroke">
-        Archived
-      </Badge.Root>
-      <Badge.Root color="sky" variant="lighter">
-        <Badge.Icon>
-          <Icon name="field.email" />
-        </Badge.Icon>
-        Newsletter
-      </Badge.Root>
-      <Badge.Root color="purple" variant="light">
-        <Badge.Dot />
-        VIP list
-      </Badge.Root>
-    </div>
-  );
-}

package/src/components/badge/examples/status-presence.tsx

@@ -1,32 +0,0 @@
-import { Badge } from "prime-ui-kit";
-import type { CSSProperties } from "react";
-
-const row: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--prime-sys-spacing-s)",
-  alignItems: "center",
-};
-
-/**
- * Presence row: `variant="status"` sets `role="status"` and a built-in dot.
- * Use `label` when visible text is not enough for screen readers.
- */
-export default function BadgeStatusPresenceExample() {
-  return (
-    <div style={row}>
-      <Badge.Root variant="status" status="online" label="Alex Morgan is online">
-        Online
-      </Badge.Root>
-      <Badge.Root variant="status" status="offline" label="Alex Morgan is offline">
-        Offline
-      </Badge.Root>
-      <Badge.Root variant="status" status="away" label="Alex Morgan is away">
-        Away
-      </Badge.Root>
-      <Badge.Root variant="status" status="busy" label="Alex Morgan is busy">
-        Busy
-      </Badge.Root>
-    </div>
-  );
-}

package/src/components/banner/examples/billing-alert.tsx

@@ -1,35 +0,0 @@
-import { AlertCircle } from "lucide-react";
-
-import { Banner, Button, LinkButton } from "prime-ui-kit";
-
-/** Past-due or failed payment: high emphasis, primary remediation + secondary help. */
-export default function BillingAlertExample() {
-  return (
-    <Banner.Root
-      aria-labelledby="billing-banner-title"
-      role="region"
-      status="error"
-      variant="filled"
-      onDismiss={() => {
-        /* product: hide after acknowledge */
-      }}
-    >
-      <Banner.Content>
-        <Banner.Icon as={AlertCircle} aria-hidden />
-        <Banner.Title id="billing-banner-title">Payment failed</Banner.Title>
-        <Banner.Description>
-          We could not charge your card ending in 4242. Update your payment method to avoid service
-          interruption.
-        </Banner.Description>
-        <Banner.Actions>
-          <Button.Root size="s" type="button" variant="primary">
-            Update payment method
-          </Button.Root>
-          <LinkButton.Root href="/billing/support" size="s">
-            Contact billing
-          </LinkButton.Root>
-        </Banner.Actions>
-      </Banner.Content>
-    </Banner.Root>
-  );
-}

package/src/components/banner/examples/controlled-visibility.tsx

@@ -1,42 +0,0 @@
-import { Info } from "lucide-react";
-import { Banner, Button } from "prime-ui-kit";
-import { useState } from "react";
-
-/** Show and hide by mounting the root; external control restores the strip (no `open` prop). */
-export default function BannerControlledVisibilityExample() {
-  const [visible, setVisible] = useState(true);
-
-  return (
-    <>
-      {!visible ? (
-        <Button.Root size="s" type="button" variant="neutral" onClick={() => setVisible(true)}>
-          Show announcement
-        </Button.Root>
-      ) : null}
-      {visible ? (
-        <Banner.Root status="feature" variant="lighter">
-          <Banner.Content>
-            <Banner.Icon as={Info} aria-hidden />
-            <Banner.Title>Controlled visibility</Banner.Title>
-            <Banner.Description>
-              Removing the node from the tree hides the banner; use parent state to show it again.
-            </Banner.Description>
-            <Banner.Actions>
-              <Button.Root mode="ghost" size="s" type="button" variant="neutral">
-                Learn more
-              </Button.Root>
-              <Button.Root
-                size="s"
-                type="button"
-                variant="primary"
-                onClick={() => setVisible(false)}
-              >
-                Hide
-              </Button.Root>
-            </Banner.Actions>
-          </Banner.Content>
-        </Banner.Root>
-      ) : null}
-    </>
-  );
-}

package/src/components/banner/examples/cookie-consent-row.tsx

@@ -1,35 +0,0 @@
-import { Cookie } from "lucide-react";
-
-import { Banner, Button, LinkButton } from "prime-ui-kit";
-
-/** Inline consent row: actions for accept / preferences; optional dismiss defers to product policy. */
-export default function CookieConsentRowExample() {
-  return (
-    <Banner.Root
-      aria-labelledby="cookie-banner-title"
-      role="region"
-      status="information"
-      variant="lighter"
-      onDismiss={() => {
-        /* product: defer / snooze — follow local privacy rules */
-      }}
-    >
-      <Banner.Content>
-        <Banner.Icon as={Cookie} aria-hidden />
-        <Banner.Title id="cookie-banner-title">Cookies and similar technologies</Banner.Title>
-        <Banner.Description>
-          We use cookies to run the site, remember preferences, and measure usage. See our policy
-          for details.
-        </Banner.Description>
-        <Banner.Actions>
-          <Button.Root size="s" type="button" variant="primary">
-            Accept essential
-          </Button.Root>
-          <LinkButton.Root href="/settings/cookies" size="s">
-            Manage preferences
-          </LinkButton.Root>
-        </Banner.Actions>
-      </Banner.Content>
-    </Banner.Root>
-  );
-}