prime-ui-kit 0.7.13 → 0.9.1

package/src/components/notification/examples/states.tsx

@@ -1,143 +0,0 @@
-import {
-  Button,
-  NotificationCard,
-  NotificationProvider,
-  type NotificationRecord,
-  useNotifications,
-} from "prime-ui-kit";
-
-const persistentItem: NotificationRecord = {
-  id: "demo-state-persistent",
-  type: "warning",
-  title: "Action required",
-  description: "No auto-dismiss: progress bar hidden; close manually.",
-  position: "top-right",
-  size: "m",
-  duration: 5000,
-  persistent: true,
-  closable: true,
-  createdAt: Date.now(),
-};
-
-const notClosableItem: NotificationRecord = {
-  id: "demo-state-noclose",
-  type: "info",
-  title: "Background sync",
-  description: "Close button hidden (closable: false); the timer still removes the toast.",
-  position: "top-right",
-  size: "m",
-  duration: 8000,
-  persistent: false,
-  closable: false,
-  createdAt: Date.now(),
-};
-
-function StatesDemo() {
-  const { notify } = useNotifications();
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-l)",
-        maxWidth: 440,
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-m)",
-        }}
-      >
-        <NotificationCard
-          item={persistentItem}
-          paused={false}
-          onDismiss={() => {}}
-          stackDepth={0}
-          stackExpanded
-        />
-        <NotificationCard
-          item={notClosableItem}
-          paused={false}
-          onDismiss={() => {}}
-          stackDepth={0}
-          stackExpanded
-        />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-s)",
-          alignItems: "center",
-        }}
-      >
-        <Button.Root
-          type="button"
-          size="s"
-          variant="neutral"
-          mode="stroke"
-          onClick={() =>
-            notify({
-              type: "success",
-              title: "Short toast",
-              description: "duration: 2500 ms — progress track visible.",
-              duration: 2500,
-              position: "top-right",
-              size: "m",
-            })
-          }
-        >
-          Timer 2.5s
-        </Button.Root>
-        <Button.Root
-          type="button"
-          size="s"
-          variant="neutral"
-          mode="stroke"
-          onClick={() =>
-            notify({
-              type: "info",
-              title: "Pause on hover",
-              description: "Hover the stack in the corner — the timer pauses.",
-              duration: 6000,
-              position: "bottom-right",
-              size: "m",
-            })
-          }
-        >
-          Pause demo
-        </Button.Root>
-        <Button.Root
-          type="button"
-          size="s"
-          variant="neutral"
-          mode="stroke"
-          onClick={() =>
-            notify({
-              type: "success",
-              title: "Saved",
-              description: "persistent — accent border and glow pulse (see Variants static cards).",
-              persistent: true,
-              closable: true,
-              position: "top-right",
-              size: "m",
-            })
-          }
-        >
-          notify + persistent
-        </Button.Root>
-      </div>
-    </div>
-  );
-}
-
-export default function StatesExample() {
-  return (
-    <NotificationProvider>
-      <StatesDemo />
-    </NotificationProvider>
-  );
-}

package/src/components/notification/examples/toast-queue.tsx

@@ -1,5 +0,0 @@
-import FeaturesExample from "./features";
-
-/** @deprecated Prefer [`features.tsx`](./features.tsx); kept for older doc links. */
-export default FeaturesExample;
-export { FeaturesExample as ToastQueueExample };

package/src/components/notification/examples/variants.tsx

@@ -1,68 +0,0 @@
-import {
-  NotificationCard,
-  NotificationProvider,
-  type NotificationRecord,
-  type NotificationType,
-} from "prime-ui-kit";
-
-const copy: Record<NotificationType, { title: string; description: string }> = {
-  success: { title: "Saved", description: "Changes were written to your profile." },
-  error: {
-    title: "Could not send",
-    description: "Check your connection and try again.",
-  },
-  warning: { title: "Subscription", description: "Your paid period ends in three days." },
-  info: {
-    title: "Night maintenance",
-    description: "The service will be down from 02:00 to 03:00.",
-  },
-};
-
-function VariantsDemo() {
-  const types = (["success", "error", "warning", "info"] as const).map((type) => {
-    const text = copy[type];
-    const item: NotificationRecord = {
-      id: `demo-variant-${type}`,
-      type,
-      title: text.title,
-      description: text.description,
-      position: "top-right",
-      size: "m",
-      duration: 60000,
-      persistent: true,
-      closable: false,
-      createdAt: Date.now(),
-    };
-    return item;
-  });
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        maxWidth: 440,
-      }}
-    >
-      {types.map((item) => (
-        <NotificationCard
-          key={item.id}
-          item={item}
-          paused={false}
-          onDismiss={() => {}}
-          stackDepth={0}
-          stackExpanded
-        />
-      ))}
-    </div>
-  );
-}
-
-export default function VariantsExample() {
-  return (
-    <NotificationProvider>
-      <VariantsDemo />
-    </NotificationProvider>
-  );
-}

package/src/components/pagination/examples/canonical-composition.tsx

@@ -1,20 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-
-/**
- * Canonical wiring: required props on Pagination.Root only. Long ranges use siblingCount to widen the numeric window.
- */
-export default function CanonicalCompositionExample() {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <Pagination.Root page={2} totalPages={5} onPageChange={() => {}} />
-      <Pagination.Root page={10} totalPages={40} onPageChange={() => {}} siblingCount={2} />
-    </div>
-  );
-}

package/src/components/pagination/examples/compact.tsx

@@ -1,32 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-/** Dense toolbar row: Pagination.Root with size="s". */
-export default function CompactExample() {
-  const [page, setPage] = React.useState(3);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        gap: "var(--prime-sys-spacing-x2)",
-        padding: "var(--prime-sys-spacing-x2) var(--prime-sys-spacing-x3)",
-        borderRadius: "var(--prime-sys-radius-m)",
-        background: "var(--prime-sys-color-surface-default)",
-        border: "1px solid var(--prime-sys-color-border-subtle)",
-      }}
-    >
-      <span
-        style={{
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-          color: "var(--prime-sys-color-content-secondary)",
-        }}
-      >
-        Compact
-      </span>
-      <Pagination.Root page={page} totalPages={12} onPageChange={setPage} size="s" />
-    </div>
-  );
-}

package/src/components/pagination/examples/controlled-page.tsx

@@ -1,57 +0,0 @@
-import { Button, Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-const TOTAL = 12;
-
-/** Page index lives in parent state; Pagination.Root and buttons share the same setter. Parity with `playground/snippets/pagination/controlled.tsx` (English copy). */
-export default function ControlledPageExample() {
-  const [page, setPage] = React.useState(4);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-x3)",
-        alignItems: "flex-start",
-      }}
-    >
-      <p
-        style={{
-          margin: 0,
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-          color: "var(--prime-sys-color-content-secondary)",
-        }}
-      >
-        Open page {page} of {TOTAL} — updates via <code>page</code> and <code>onPageChange</code>.
-      </p>
-      <Pagination.Root page={page} totalPages={TOTAL} onPageChange={setPage} />
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-x2)",
-        }}
-      >
-        <Button.Root
-          size="s"
-          variant="neutral"
-          mode="stroke"
-          onClick={() => setPage(1)}
-          disabled={page <= 1}
-        >
-          First
-        </Button.Root>
-        <Button.Root
-          size="s"
-          variant="neutral"
-          mode="stroke"
-          onClick={() => setPage(TOTAL)}
-          disabled={page >= TOTAL}
-        >
-          Last
-        </Button.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/features.tsx

@@ -1,107 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * `siblingCount` widens or narrows the numeric window; `totalPages < 1` renders nothing.
- * Parity with `playground/snippets/pagination/features.tsx`.
- */
-export default function PaginationFeaturesExample() {
-  const [pageNarrow, setPageNarrow] = React.useState(8);
-  const [pageWide, setPageWide] = React.useState(8);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-x4)",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          <code>siblingCount=0</code>
-        </p>
-        <Pagination.Root
-          page={pageNarrow}
-          totalPages={20}
-          onPageChange={setPageNarrow}
-          siblingCount={0}
-        />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          <code>siblingCount=2</code>
-        </p>
-        <Pagination.Root
-          page={pageWide}
-          totalPages={20}
-          onPageChange={setPageWide}
-          siblingCount={2}
-        />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          <code>totalPages=0</code>
-        </p>
-        <div
-          style={{
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            gap: "var(--prime-sys-spacing-x2)",
-            minHeight: "var(--prime-sys-size-control-m-height)",
-          }}
-        >
-          <Pagination.Root page={1} totalPages={0} onPageChange={() => {}} />
-          <span
-            style={{
-              fontSize: "var(--prime-sys-size-control-s-supportText)",
-              color: "var(--prime-sys-color-content-muted)",
-            }}
-          >
-            empty output
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/full-width-list.tsx

@@ -1,37 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-/** Full-width bar: meta on the left, Pagination.Root on the right (parent layout). Parity with `playground/snippets/pagination/full-width.tsx` (English copy). */
-export default function FullWidthListExample() {
-  const [page, setPage] = React.useState(2);
-  const totalPages = 21;
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        width: "100%",
-        maxWidth: "36rem",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "var(--prime-sys-spacing-x3)",
-        flexWrap: "wrap",
-        padding: "var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4)",
-        borderRadius: "var(--prime-sys-radius-m)",
-        background: "var(--prime-sys-color-surface-raised)",
-        border: "1px solid var(--prime-sys-color-border-subtle)",
-      }}
-    >
-      <span
-        style={{
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-          color: "var(--prime-sys-color-content-secondary)",
-          lineHeight: "var(--prime-sys-typography-body-lineHeight)",
-        }}
-      >
-        Showing 21–40 of 412
-      </span>
-      <Pagination.Root page={page} totalPages={totalPages} onPageChange={setPage} />
-    </div>
-  );
-}

package/src/components/pagination/examples/range-modes.tsx

@@ -1,60 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Up to seven pages: all indices shown; more pages: shortened row with ellipses (`totalPages` drives logic).
- * Parity with `playground/snippets/pagination/range-modes.tsx`.
- */
-export default function PaginationRangeModesExample() {
-  const [shortPage, setShortPage] = React.useState(3);
-  const [longPage, setLongPage] = React.useState(8);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-x4)",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          Five pages — all numbers
-        </p>
-        <Pagination.Root page={shortPage} totalPages={5} onPageChange={setShortPage} />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          Twenty pages — ellipsis
-        </p>
-        <Pagination.Root page={longPage} totalPages={20} onPageChange={setLongPage} />
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/states.tsx

@@ -1,80 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Previous disabled on first page, next on last; both disabled when `totalPages` is 1.
- * Parity with `playground/snippets/pagination/states.tsx`.
- */
-export default function PaginationStatesExample() {
-  const [first, setFirst] = React.useState(1);
-  const [last, setLast] = React.useState(10);
-  const [single, setSingle] = React.useState(1);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-x4)",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          First of ten
-        </p>
-        <Pagination.Root page={first} totalPages={10} onPageChange={setFirst} />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          Last of ten
-        </p>
-        <Pagination.Root page={last} totalPages={10} onPageChange={setLast} />
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--prime-sys-spacing-x2)",
-          alignItems: "flex-start",
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-          }}
-        >
-          Single page
-        </p>
-        <Pagination.Root page={single} totalPages={1} onPageChange={setSingle} />
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/table-footer.tsx

@@ -1,74 +0,0 @@
-import { Pagination } from "prime-ui-kit";
-import * as React from "react";
-
-const PAGE_SIZE = 10;
-const TOTAL_ROWS = 247;
-
-function rangeLabel(page: number, pageSize: number, total: number) {
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-  return `Showing ${start}–${end} of ${total}`;
-}
-
-/** Table-style footer: row summary plus Pagination.Root aligned on one row. */
-export default function TableFooterExample() {
-  const [page, setPage] = React.useState(1);
-  const totalPages = Math.max(1, Math.ceil(TOTAL_ROWS / PAGE_SIZE));
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        borderRadius: "var(--prime-sys-radius-m)",
-        border: "1px solid var(--prime-sys-color-border-subtle)",
-        background: "var(--prime-sys-color-surface-raised)",
-        overflow: "hidden",
-        maxWidth: "42rem",
-      }}
-    >
-      <div
-        style={{
-          padding: "var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4)",
-          borderBottom: "1px solid var(--prime-sys-color-border-subtle)",
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-          color: "var(--prime-sys-color-content-secondary)",
-        }}
-      >
-        Sample rows (page {page} of {totalPages})
-      </div>
-      <div
-        style={{
-          padding: "var(--prime-sys-spacing-x4)",
-          minHeight: "6rem",
-          color: "var(--prime-sys-color-content-muted)",
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-        }}
-      >
-        …
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "var(--prime-sys-spacing-x3)",
-          padding: "var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4)",
-          borderTop: "1px solid var(--prime-sys-color-border-subtle)",
-        }}
-      >
-        <span
-          style={{
-            fontSize: "var(--prime-sys-size-control-s-supportText)",
-            color: "var(--prime-sys-color-content-secondary)",
-            lineHeight: "var(--prime-sys-typography-body-lineHeight)",
-          }}
-        >
-          {rangeLabel(page, PAGE_SIZE, TOTAL_ROWS)}
-        </span>
-        <Pagination.Root page={page} totalPages={totalPages} onPageChange={setPage} />
-      </div>
-    </div>
-  );
-}