prime-ui-kit 0.7.11 → 0.9.0

package/src/components/modal/examples/pattern-portal-and-scroll.tsx

@@ -1,84 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Icon } from "@/icons";
-
-/** Custom `container` portal target and scrollable body via `bodyStyle`; mirrors `playground/snippets/modal/features.tsx`. */
-export default function ModalPatternPortalAndScrollExample() {
-  const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);
-
-  const longLines = [
-    "Line 1: scrollable body inside the dialog while the page stays locked.",
-    "Line 2: scrollable body inside the dialog while the page stays locked.",
-    "Line 3: scrollable body inside the dialog while the page stays locked.",
-    "Line 4: scrollable body inside the dialog while the page stays locked.",
-    "Line 5: scrollable body inside the dialog while the page stays locked.",
-    "Line 6: scrollable body inside the dialog while the page stays locked.",
-    "Line 7: scrollable body inside the dialog while the page stays locked.",
-    "Line 8: scrollable body inside the dialog while the page stays locked.",
-  ];
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "var(--prime-sys-spacing-x3)" }}>
-      <div
-        ref={setPortalHost}
-        style={{
-          padding: "var(--prime-sys-spacing-x3)",
-          border: "1px dashed var(--prime-sys-color-border-default)",
-          borderRadius: "var(--prime-sys-shape-radius-s)",
-        }}
-      >
-        <p>
-          <code>Modal.Panel</code> <code>container</code> mounts the portal inside this box (useful
-          for tests or custom stacking).
-        </p>
-        {portalHost ? (
-          <Modal.Root>
-            <Modal.Trigger>
-              <Button.Root variant="neutral" mode="stroke">
-                Portal into host
-              </Button.Root>
-            </Modal.Trigger>
-            <Modal.Panel
-              closeAriaLabel="Close"
-              container={portalHost}
-              icon={<Icon name="nav.layoutGrid" />}
-              title="Custom container"
-            >
-              <p>Portal content is attached under the host element above.</p>
-            </Modal.Panel>
-          </Modal.Root>
-        ) : null}
-      </div>
-
-      <Modal.Root>
-        <Modal.Trigger>
-          <Button.Root variant="neutral" mode="stroke">
-            Long body (scroll)
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Panel
-          bodyStyle={{ maxHeight: "10rem", overflowY: "auto" }}
-          closeAriaLabel="Close"
-          description="Cap the body height with `bodyStyle` (or `bodyClassName`) so only the panel scrolls."
-          footer={
-            <Modal.Footer
-              primary={
-                <Modal.Close>
-                  <Button.Root variant="primary">Close</Button.Root>
-                </Modal.Close>
-              }
-            />
-          }
-          icon={<Icon name="nav.itemDot" />}
-          title="Scroll inside panel"
-        >
-          {longLines.map((line) => (
-            <p key={line}>{line}</p>
-          ))}
-        </Modal.Panel>
-      </Modal.Root>
-    </div>
-  );
-}

package/src/components/modal/examples/scenario-confirm-delete.tsx

@@ -1,42 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Typography } from "@/components/typography/Typography";
-import { Icon } from "@/icons";
-
-/** Blocking confirmation before destructive action; dismiss via header, overlay, Escape, or Cancel. */
-export default function ModalConfirmDeleteExample() {
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root variant="error" mode="stroke">
-          Delete project
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="This removes the project, its boards, and history. Connected integrations will stop receiving events."
-        footer={
-          <Modal.Footer
-            primary={
-              <Button.Root variant="error" type="button">
-                Delete permanently
-              </Button.Root>
-            }
-            secondary={
-              <Modal.Close>
-                <Button.Root variant="neutral" mode="stroke">
-                  Cancel
-                </Button.Root>
-              </Modal.Close>
-            }
-          />
-        }
-        icon={<Icon name="action.close" tone="subtle" />}
-        title="Delete “Northwind rollout”?"
-      >
-        <Typography.Root as="p" variant="body-default">
-          You can export an archive first from Project settings. This action cannot be undone.
-        </Typography.Root>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}

package/src/components/modal/examples/scenario-edit-entity.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/Input";
-import { Modal } from "@/components/modal/Modal";
-import { Icon } from "@/icons";
-
-/** Short edit flow: pre-filled field, save keeps the dialog open only if you handle state (here: close on save click). */
-export default function ModalEditEntityExample() {
-  const [name, setName] = React.useState("Acme Corp");
-
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root variant="neutral" mode="stroke">
-          Rename account
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="The new name appears on invoices and in the member directory."
-        footer={
-          <Modal.Footer
-            primary={
-              <Modal.Close>
-                <Button.Root variant="primary" type="button">
-                  Save changes
-                </Button.Root>
-              </Modal.Close>
-            }
-            secondary={
-              <Modal.Close>
-                <Button.Root variant="neutral" mode="stroke">
-                  Cancel
-                </Button.Root>
-              </Modal.Close>
-            }
-          />
-        }
-        icon={<Icon name="nav.layoutGrid" tone="subtle" />}
-        title="Edit account name"
-      >
-        <Input.Root label="Account name">
-          <Input.Wrapper>
-            <Input.Field
-              onChange={(e) => setName(e.target.value)}
-              value={name}
-              autoComplete="organization"
-            />
-          </Input.Wrapper>
-        </Input.Root>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}

package/src/components/modal/examples/scenario-legal-consent.tsx

@@ -1,40 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Typography } from "@/components/typography/Typography";
-import { Icon } from "@/icons";
-
-/** Disclosure + explicit accept; primary action is wrapped in `Modal.Close` so accepting dismisses the dialog. */
-export default function ModalLegalConsentExample() {
-  return (
-    <Modal.Root closeOnOverlayClick={false}>
-      <Modal.Trigger>
-        <Button.Root variant="neutral" mode="stroke">
-          Review terms
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="Please read the following before continuing to use the service."
-        footer={
-          <Modal.Footer
-            primary={
-              <Modal.Close>
-                <Button.Root variant="primary" type="button">
-                  I agree
-                </Button.Root>
-              </Modal.Close>
-            }
-          />
-        }
-        icon={<Icon name="status.locked" tone="subtle" />}
-        title="Terms and data processing"
-      >
-        <Typography.Root as="p" variant="body-default">
-          By continuing, you agree to our Terms of Service and acknowledge our Privacy Policy. We
-          process account data to provide the product, send essential notices, and improve
-          reliability. You may withdraw consent where applicable by contacting support or adjusting
-          settings.
-        </Typography.Root>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}

package/src/components/modal/examples/scenario-multi-field-form.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/Input";
-import { Label } from "@/components/label/Label";
-import { Modal } from "@/components/modal/Modal";
-import { Select } from "@/components/select/Select";
-import { Textarea } from "@/components/textarea/Textarea";
-import { Icon } from "@/icons";
-
-import styles from "./examples.module.css";
-
-/** Several fields in the modal body; footer mirrors the canonical pattern (cancel + submit). */
-export default function ModalMultiFieldFormExample() {
-  const messageId = React.useId();
-
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root variant="neutral" mode="stroke">
-          New support ticket
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="Include enough detail for our team to reproduce or route the issue."
-        footer={
-          <Modal.Footer
-            primary={
-              <Button.Root variant="primary" type="submit" form="modal-ticket-form">
-                Submit ticket
-              </Button.Root>
-            }
-            secondary={
-              <Modal.Close>
-                <Button.Root variant="neutral" mode="stroke">
-                  Cancel
-                </Button.Root>
-              </Modal.Close>
-            }
-          />
-        }
-        icon={<Icon name="nav.itemDot" tone="subtle" />}
-        title="Contact support"
-      >
-        <form
-          className={styles.fieldStack}
-          id="modal-ticket-form"
-          onSubmit={(e) => e.preventDefault()}
-        >
-          <Input.Root label="Subject">
-            <Input.Wrapper>
-              <Input.Field name="subject" placeholder="Short summary" />
-            </Input.Wrapper>
-          </Input.Root>
-          <Select.Root placeholder="Area">
-            <Select.Trigger>
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="billing">Billing</Select.Item>
-              <Select.Item value="product">Product bug</Select.Item>
-              <Select.Item value="account">Account access</Select.Item>
-            </Select.Content>
-          </Select.Root>
-          <div className={styles.labeledControl}>
-            <Label.Root htmlFor={messageId}>Message</Label.Root>
-            <Textarea.Root id={messageId} placeholder="Steps, expected result, actual result" />
-          </div>
-        </form>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}

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

@@ -1,82 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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/notification-store.tsx

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