prime-ui-kit 0.3.2 → 0.4.1

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/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

@@ -1,58 +1,5 @@
-import { Button, NotificationProvider, Typography, useNotificationStore } from "prime-ui-kit";
+import ControlledExample from "./controlled";
 
-/**
- * useNotificationStore exposes items (active only) for labels, badges, or bulk actions.
- */
-function StoreDemo() {
-  const { items, notify, dismissAll } = useNotificationStore();
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <Typography.Root variant="body-default">
-        Active toasts: {items.length} (excludes cards in the exit animation)
-      </Typography.Root>
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-s)",
-          alignItems: "center",
-        }}
-      >
-        <Button.Root
-          type="button"
-          variant="neutral"
-          mode="stroke"
-          size="m"
-          onClick={() =>
-            notify({
-              type: "info",
-              title: "Queued",
-              description: "The counter above updates while this toast is visible.",
-            })
-          }
-        >
-          Push info
-        </Button.Root>
-        <Button.Root type="button" variant="neutral" mode="ghost" size="s" onClick={dismissAll}>
-          dismissAll()
-        </Button.Root>
-      </div>
-    </div>
-  );
-}
-
-export default function NotificationStoreExample() {
-  return (
-    <NotificationProvider>
-      <StoreDemo />
-    </NotificationProvider>
-  );
-}
+/** @deprecated Prefer [`controlled.tsx`](./controlled.tsx); kept for older doc links. */
+export default ControlledExample;
+export { ControlledExample as NotificationStoreExample };

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

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

@@ -1,63 +1,5 @@
-import { Button, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
+import FeaturesExample from "./features";
 
-/**
- * Same position + type share one stack; provider max caps depth and drops oldest items.
- */
-function ToastQueueDemo() {
-  const { notify, dismissAll } = useNotifications();
-
-  const enqueueBurst = () => {
-    const types = ["info", "success"] as const;
-    for (let index = 0; index < 6; index += 1) {
-      window.setTimeout(() => {
-        notify({
-          type: types[index % 2],
-          title: `Toast ${index + 1} of 6`,
-          description:
-            "Hover the stack to expand it and pause timers until you move the pointer away.",
-          position: "bottom-right",
-          duration: 6000 + index * 400,
-          badge: index + 1,
-        });
-      }, index * 120);
-    }
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <Typography.Root variant="body-small" tone="muted">
-        Provider uses max=5: the sixth notification in the same stack replaces the oldest.
-      </Typography.Root>
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          gap: "var(--prime-sys-spacing-s)",
-          alignItems: "center",
-        }}
-      >
-        <Button.Root type="button" variant="neutral" mode="stroke" size="m" onClick={enqueueBurst}>
-          Enqueue six toasts
-        </Button.Root>
-        <Button.Root type="button" variant="neutral" mode="ghost" size="s" onClick={dismissAll}>
-          dismissAll()
-        </Button.Root>
-      </div>
-    </div>
-  );
-}
-
-export default function ToastQueueExample() {
-  return (
-    <NotificationProvider max={5} position="top-right">
-      <ToastQueueDemo />
-    </NotificationProvider>
-  );
-}
+/** @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

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