prime-ui-kit 0.0.1

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

@@ -0,0 +1,82 @@
+import {
+  Button,
+  LinkButton,
+  NotificationProvider,
+  Typography,
+  useNotifications,
+} from "prime-ui-kit";
+
+/**
+ * action uses kit Button.Root inside the card; page triggers may use Button or LinkButton.
+ */
+function ActionToastDemo() {
+  const { notify } = useNotifications();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Root variant="body-small" tone="muted">
+        Secondary action in the toast is always neutral stroke Button.Root from the kit.
+      </Typography.Root>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "var(--prime-sys-spacing-s)",
+          alignItems: "center",
+        }}
+      >
+        <Button.Root
+          type="button"
+          variant="primary"
+          mode="filled"
+          onClick={() =>
+            notify({
+              type: "info",
+              title: "Export ready",
+              description: "Your CSV is prepared.",
+              action: {
+                label: "Download",
+                onClick: () =>
+                  notify({
+                    type: "success",
+                    title: "Started",
+                    description: "In a real app, the file would download.",
+                  }),
+              },
+            })
+          }
+        >
+          Toast with action
+        </Button.Root>
+        <LinkButton.Root
+          href="#"
+          onClick={(event) => {
+            event.preventDefault();
+            notify({
+              type: "info",
+              title: "From LinkButton",
+              description: "Any control can call notify under the provider.",
+            });
+          }}
+        >
+          Fire via LinkButton
+        </LinkButton.Root>
+      </div>
+    </div>
+  );
+}
+
+export default function ActionToastExample() {
+  return (
+    <NotificationProvider>
+      <ActionToastDemo />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { Bell } from "lucide-react";
+
+import {
+  Button,
+  NotificationCard,
+  NotificationProvider,
+  type NotificationRecord,
+  useNotifications,
+} from "prime-ui-kit";
+
+const richStatic: NotificationRecord = {
+  id: "demo-composition-static",
+  type: "info",
+  title: "New replies in the thread",
+  description: "Leading icon, badge, and action slot.",
+  position: "top-right",
+  size: "m",
+  duration: 60000,
+  persistent: true,
+  closable: true,
+  createdAt: Date.now(),
+  icon: <Bell size={16} strokeWidth={2} />,
+  badge: 3,
+  action: {
+    label: "Open",
+    onClick: () => {},
+  },
+};
+
+function CompositionDemo() {
+  const { notify } = useNotifications();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        maxWidth: 440,
+      }}
+    >
+      <NotificationCard
+        item={richStatic}
+        paused={false}
+        onDismiss={() => {}}
+        stackDepth={0}
+        stackExpanded
+      />
+      <Button.Root
+        type="button"
+        size="s"
+        variant="neutral"
+        mode="stroke"
+        onClick={() =>
+          notify({
+            type: "success",
+            title: "Export ready",
+            description: "Download the file from Reports.",
+            position: "top-right",
+            size: "l",
+            duration: 5000,
+            icon: <Bell size={16} strokeWidth={2} />,
+            badge: "PDF",
+            action: {
+              label: "Download",
+              onClick: () =>
+                notify({
+                  type: "info",
+                  title: "Link copied",
+                  description: "In a real app this would start the download.",
+                  position: "top-right",
+                  size: "s",
+                }),
+            },
+          })
+        }
+      >
+        Live toast with composition
+      </Button.Root>
+    </div>
+  );
+}
+
+export default function CompositionExample() {
+  return (
+    <NotificationProvider>
+      <CompositionDemo />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,87 @@
+import { Button, NotificationProvider, Typography, useNotificationStore } from "prime-ui-kit";
+import * as React from "react";
+
+function ControlledDemo() {
+  const { items, notify, dismiss } = useNotificationStore();
+  const [added, setAdded] = React.useState(0);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        maxWidth: 480,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "var(--prime-sys-spacing-s)",
+          alignItems: "center",
+        }}
+      >
+        <Button.Root
+          type="button"
+          size="s"
+          variant="primary"
+          mode="filled"
+          onClick={() => {
+            const n = added + 1;
+            setAdded(n);
+            notify({
+              type: "info",
+              title: `Task queue (${n})`,
+              description: "The list below reads items from useNotificationStore.",
+              position: "top-right",
+              size: "s",
+              duration: 12000,
+              badge: n,
+            });
+          }}
+        >
+          Add to queue
+        </Button.Root>
+      </div>
+      <Typography.Root variant="body-small" tone="muted">
+        Active records: {items.length}
+      </Typography.Root>
+      {items.length > 0 ? (
+        <ul
+          style={{
+            margin: 0,
+            paddingLeft: "var(--prime-sys-spacing-m)",
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--prime-sys-spacing-xs)",
+          }}
+        >
+          {items.map((item) => (
+            <li key={item.id}>
+              <code>{item.id}</code>
+              {" — "}
+              <Button.Root
+                type="button"
+                size="s"
+                variant="neutral"
+                mode="ghost"
+                onClick={() => dismiss(item.id)}
+              >
+                dismiss(id)
+              </Button.Root>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+export default function ControlledExample() {
+  return (
+    <NotificationProvider>
+      <ControlledDemo />
+    </NotificationProvider>
+  );
+}

package/src/components/notification/examples/error-success.tsx

@@ -0,0 +1,68 @@
+import { Button, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
+
+/**
+ * error / warning → assertive alert; success / info → polite status.
+ */
+function ErrorSuccessDemo() {
+  const { notify } = useNotifications();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Root variant="body-small" tone="muted">
+        Types change icons, stack grouping, and live-region politeness — not just color.
+      </Typography.Root>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "var(--prime-sys-spacing-s)",
+          alignItems: "center",
+        }}
+      >
+        <Button.Root
+          type="button"
+          variant="error"
+          mode="lighter"
+          onClick={() =>
+            notify({
+              type: "error",
+              title: "Payment failed",
+              description: "The card was declined. Try another method.",
+            })
+          }
+        >
+          Error toast
+        </Button.Root>
+        <Button.Root
+          type="button"
+          variant="primary"
+          mode="filled"
+          onClick={() =>
+            notify({
+              type: "success",
+              title: "Saved",
+              description: "Your changes are stored.",
+            })
+          }
+        >
+          Success toast
+        </Button.Root>
+      </div>
+    </div>
+  );
+}
+
+export default function ErrorSuccessExample() {
+  return (
+    <NotificationProvider>
+      <ErrorSuccessDemo />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { Button, NotificationProvider, useNotifications } from "prime-ui-kit";
+
+function FeaturesDemo() {
+  const { notify, dismissAll } = useNotifications();
+
+  const runStackDemo = () => {
+    const types = ["info", "success"] as const;
+    for (let index = 0; index < 6; index += 1) {
+      window.setTimeout(() => {
+        notify({
+          type: types[index % 2],
+          title: `Stack ${index + 1} of 6`,
+          description:
+            "Same type and position share one column; hover expands the stack and pauses timers.",
+          position: "bottom-right",
+          duration: 6000 + index * 500,
+          badge: index + 1,
+        });
+      }, index * 140);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "flex-start",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "var(--prime-sys-spacing-s)",
+          alignItems: "center",
+        }}
+      >
+        <Button.Root type="button" variant="neutral" mode="stroke" onClick={runStackDemo}>
+          Enqueue six toasts
+        </Button.Root>
+        <Button.Root type="button" size="s" variant="neutral" mode="ghost" onClick={dismissAll}>
+          dismissAll()
+        </Button.Root>
+      </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: "info",
+              title: "Quick dismiss",
+              description: "duration: 2000",
+              duration: 2000,
+              position: "top-center",
+              size: "m",
+            })
+          }
+        >
+          duration 2s
+        </Button.Root>
+        <Button.Root
+          type="button"
+          size="s"
+          variant="neutral"
+          mode="stroke"
+          onClick={() =>
+            notify({
+              type: "success",
+              title: "Longer on screen",
+              description: "duration: 14000",
+              duration: 14000,
+              position: "top-center",
+              size: "m",
+            })
+          }
+        >
+          duration 14s
+        </Button.Root>
+      </div>
+    </div>
+  );
+}
+
+export default function FeaturesExample() {
+  return (
+    <NotificationProvider max={5} position="top-right">
+      <FeaturesDemo />
+    </NotificationProvider>
+  );
+}

package/src/components/notification/examples/notification-store.tsx

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

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

@@ -0,0 +1,73 @@
+import {
+  Button,
+  type NotificationPosition,
+  NotificationProvider,
+  Typography,
+  useNotifications,
+} from "prime-ui-kit";
+
+const POSITIONS: NotificationPosition[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+function PositionsDemo() {
+  const { notify } = useNotifications();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Root variant="body-small" tone="muted">
+        Each button sends a toast anchored to that corner or edge; override per notify or set a
+        provider default.
+      </Typography.Root>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(3, minmax(0, auto))",
+          gap: "var(--prime-sys-spacing-s)",
+        }}
+      >
+        {POSITIONS.map((position) => (
+          <Button.Root
+            key={position}
+            type="button"
+            size="s"
+            variant="neutral"
+            mode="stroke"
+            onClick={() =>
+              notify({
+                type: "info",
+                title: `Zone: ${position}`,
+                description: "Position comes from notify options or NotificationProvider.",
+                position,
+                size: "m",
+                duration: 4000,
+              })
+            }
+          >
+            {position}
+          </Button.Root>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function PositionsExample() {
+  return (
+    <NotificationProvider position="top-right">
+      <PositionsDemo />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { NotificationCard, NotificationProvider, type NotificationRecord } from "prime-ui-kit";
+
+function demoItem(
+  overrides: Partial<NotificationRecord> & Pick<NotificationRecord, "id" | "size">,
+): NotificationRecord {
+  return {
+    type: "info",
+    title: `Size ${overrides.size}`,
+    description: "Same type and copy; only the card scale changes.",
+    position: "top-right",
+    duration: 60000,
+    persistent: true,
+    closable: false,
+    createdAt: Date.now(),
+    ...overrides,
+  };
+}
+
+function SizesDemo() {
+  const sizes = (["s", "m", "l"] as const).map((size) =>
+    demoItem({ id: `demo-size-${size}`, size, title: `Size ${size}` }),
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        maxWidth: 420,
+      }}
+    >
+      {sizes.map((item) => (
+        <NotificationCard
+          key={item.id}
+          item={item}
+          paused={false}
+          onDismiss={() => {}}
+          stackDepth={0}
+          stackExpanded
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function SizesExample() {
+  return (
+    <NotificationProvider>
+      <SizesDemo />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,143 @@
+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>
+  );
+}