impact-nova 2.0.9 → 2.1.0-alpha.1

package/dist/components/flows/notification-panel/notification-item.js

@@ -0,0 +1,88 @@
+import { jsxs as p, jsx as i, Fragment as m } from "react/jsx-runtime";
+import f from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { Checkbox as u } from "../../forms/checkbox/checkbox.js";
+const y = ({
+  children: n,
+  className: t,
+  read: o,
+  selected: e,
+  onSelect: s,
+  selectable: r,
+  ...c
+}) => /* @__PURE__ */ p(
+  "div",
+  {
+    "data-component": "notification-item",
+    "data-read": o ? "true" : "false",
+    className: a(
+      "group relative flex w-full gap-2 p-3 items-start rounded-xl transition-all border-s-[3px] border-transparent",
+      "bg-secondary",
+      !o && "border-brand",
+      e && "bg-brand-tint",
+      t
+    ),
+    ...c,
+    children: [
+      r && /* @__PURE__ */ i("div", { className: a(
+        "absolute start-3 top-3 z-10 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200",
+        e ? "opacity-100 scale-100" : "opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100"
+      ), children: /* @__PURE__ */ i(
+        u,
+        {
+          checked: e,
+          onCheckedChange: s,
+          className: "translate-y-0"
+        }
+      ) }),
+      /* @__PURE__ */ i("div", { className: a(
+        "flex flex-1 min-w-0 gap-3",
+        r && "[&_[data-role=notification-icon]]:transition-opacity [&_[data-role=notification-icon]]:duration-200",
+        r && "group-hover:[&_[data-role=notification-icon]]:opacity-0",
+        r && e && "[&_[data-role=notification-icon]]:opacity-0"
+      ), children: n })
+    ]
+  }
+), b = ({ className: n, children: t, ...o }) => /* @__PURE__ */ i("div", { "data-role": "notification-icon", className: a("flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full transition-opacity duration-200", n), ...o, children: t }), v = ({ className: n, children: t, ...o }) => /* @__PURE__ */ i("div", { className: a("flex flex-col flex-1 min-w-0", n), ...o, children: t }), k = ({ className: n, children: t, ml: o, ...e }) => /* @__PURE__ */ i("p", { className: a("text-sm font-bold text-content leading-snug break-words", o && "ms-2", n), ...e, children: t }), w = ({ className: n, children: t, isTime: o, ...e }) => {
+  const [s, r] = f.useState(!1), c = typeof t == "string" ? t : "", l = !o && c.length > 150;
+  return o ? /* @__PURE__ */ i("p", { className: a("text-xs text-content-badge mt-1", n), ...e, children: t }) : /* @__PURE__ */ i("div", { className: a("text-sm font-medium text-content break-words leading-5 mt-3", n), children: /* @__PURE__ */ p("p", { ...e, children: [
+    l && !s ? `${c.slice(0, 150)}` : t,
+    l && !s && /* @__PURE__ */ p(m, { children: [
+      "... ",
+      /* @__PURE__ */ i(
+        "span",
+        {
+          role: "button",
+          onClick: (d) => {
+            d.stopPropagation(), r(!0);
+          },
+          className: "text-brand hover:underline cursor-pointer ms-1",
+          children: "Read More"
+        }
+      )
+    ] }),
+    l && s && /* @__PURE__ */ i(
+      "span",
+      {
+        role: "button",
+        onClick: (d) => {
+          d.stopPropagation(), r(!1);
+        },
+        className: "text-brand hover:underline cursor-pointer ms-1",
+        children: "Show Less"
+      }
+    )
+  ] }) });
+}, I = ({ className: n, children: t, alwaysVisible: o = !0, ...e }) => /* @__PURE__ */ i("div", { className: a(
+  "flex items-center gap-1 shrink-0 ms-2 self-start transition-opacity focus-within:opacity-100",
+  !o && "opacity-0 group-hover:opacity-100",
+  n
+), ...e, children: t });
+export {
+  y as NotificationItem,
+  I as NotificationItemActions,
+  v as NotificationItemContent,
+  w as NotificationItemDescription,
+  b as NotificationItemIcon,
+  k as NotificationItemTitle
+};

package/dist/components/flows/notification-panel/notification-list.d.ts

@@ -0,0 +1,4 @@
+import { NotificationListProps, NotificationGroupProps, NotificationEmptyProps } from './notification-panel.types';
+export declare const NotificationEmpty: ({ title, description, className, ...props }: NotificationEmptyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationList: ({ children, className, onLoadMore, isLoading, hasMore, loader, }: NotificationListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationGroup: ({ label, children, className, }: NotificationGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flows/notification-panel/notification-list.js

@@ -0,0 +1,84 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useRef as d, useEffect as u } from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { LoadingSpinner as x } from "impact-nova-icons";
+import { MulticolorBell as v } from "../../ui/local-raster-icons/rasterIcons.js";
+import { useImpactNovaI18n as h } from "../../../i18n/use-impact-nova-i18n.js";
+const j = ({
+  title: i,
+  description: r,
+  className: t,
+  ...o
+}) => {
+  const { t: c } = h(), s = i ?? c("notificationPanel.everythingQuiet"), n = r ?? c("notificationPanel.everythingQuietSub");
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-component": "notification-empty",
+      className: a(
+        "flex min-h-0 w-full flex-1 flex-col items-center justify-center gap-4 text-center",
+        t
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ e(v, { size: 72, className: "shrink-0", alt: "", "aria-hidden": !0 }),
+        /* @__PURE__ */ l("div", { className: "flex w-full flex-col items-center justify-center gap-1 px-8 text-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-xl font-extrabold leading-7 text-content", children: s }),
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium leading-normal text-content-icon", children: n })
+        ] })
+      ]
+    }
+  );
+}, I = ({
+  children: i,
+  className: r,
+  onLoadMore: t,
+  isLoading: o,
+  hasMore: c,
+  loader: s
+}) => {
+  const n = d(null);
+  return u(() => {
+    const f = new IntersectionObserver(
+      (p) => {
+        p[0].isIntersecting && c && !o && t && t();
+      },
+      { threshold: 0.1 }
+    );
+    n.current && f.observe(n.current);
+    const m = n.current;
+    return () => {
+      m && f.unobserve(m);
+    };
+  }, [c, o, t]), /* @__PURE__ */ l("div", { className: a("flex flex-1 flex-col overflow-y-auto min-h-0", r), tabIndex: 0, children: [
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2", children: i }),
+    /* @__PURE__ */ e("div", { ref: n, className: "h-4 w-full flex-shrink-0" }),
+    o && /* @__PURE__ */ e("div", { className: "flex justify-center p-4", children: s || /* @__PURE__ */ e(x, { className: "h-6 w-6 animate-spin text-content-muted" }) })
+  ] });
+}, z = ({
+  label: i,
+  children: r,
+  className: t
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    "data-component": "notification-group",
+    className: a("flex flex-col", t),
+    children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          "data-component": "notification-group-label",
+          className: "sticky top-0 z-10 bg-canvas/95 backdrop-blur supports-[backdrop-filter]:bg-canvas/60 px-4 py-2 text-sm font-medium text-content-muted border-b border-stroke/50",
+          children: i
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2", children: r })
+    ]
+  }
+);
+export {
+  j as NotificationEmpty,
+  z as NotificationGroup,
+  I as NotificationList
+};

package/dist/components/flows/notification-panel/notification-panel-context.d.ts

@@ -0,0 +1,6 @@
+export declare const NotificationContext: import('react').Context<{
+    setPreventClose: (prevent: boolean) => void;
+} | null>;
+export declare function useNotificationContext(): {
+    setPreventClose: (prevent: boolean) => void;
+};

package/dist/components/flows/notification-panel/notification-panel-context.js

@@ -0,0 +1,14 @@
+import { useContext as o, createContext as n } from "react";
+const e = n(null);
+function r() {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "useNotificationContext must be used within a NotificationPanel"
+    );
+  return t;
+}
+export {
+  e as NotificationContext,
+  r as useNotificationContext
+};

package/dist/components/flows/notification-panel/notification-panel.d.ts

@@ -0,0 +1,6 @@
+import { NotificationPanelProps, NotificationPanelBodyProps, NotificationPanelContentProps, NotificationPanelFooterProps, NotificationPanelHeaderProps } from './notification-panel.types';
+export declare const NotificationPanel: ({ open, onOpenChange, children, className, preventClose, }: NotificationPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationPanelContent: ({ children, className, }: NotificationPanelContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationPanelHeader: ({ title, children, className, }: NotificationPanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationPanelBody: ({ children, className, }: NotificationPanelBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationPanelFooter: ({ children, className, leftAction, }: NotificationPanelFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/flows/notification-panel/notification-panel.js

@@ -0,0 +1,120 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Sheet as m, SheetContent as f, SheetDescription as p, SheetTitle as h, SheetClose as v } from "../../feedback/sheet/sheet.js";
+import { Button as x } from "../../primitives/button/button.js";
+import { Bell as u, Cross as N } from "impact-nova-icons";
+import { cn as l } from "../../../lib/utils.js";
+import { useImpactNovaI18n as s } from "../../../i18n/use-impact-nova-i18n.js";
+import { NotificationContext as b } from "./notification-panel-context.js";
+const D = ({
+  open: t,
+  onOpenChange: n,
+  children: o,
+  className: c,
+  preventClose: a = !1
+}) => {
+  const { t: d } = s();
+  return /* @__PURE__ */ e(b.Provider, { value: { setPreventClose: () => {
+  } }, children: /* @__PURE__ */ e(m, { open: t, onOpenChange: n, children: /* @__PURE__ */ i(
+    f,
+    {
+      "data-component": "notification-panel",
+      side: "right",
+      className: l(
+        "w-full !max-w-[640px] p-0 sm:!max-w-[640px] gap-0 border-l shadow-xl transition-all duration-300 ease-in-out bg-canvas-elevated motion-reduce:transition-none",
+        c
+      ),
+      onInteractOutside: (r) => {
+        a && r.preventDefault();
+      },
+      onEscapeKeyDown: (r) => {
+        a && r.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ e(p, { className: "sr-only", children: d("notificationPanel.description") }),
+        o
+      ]
+    }
+  ) }) });
+}, B = ({
+  children: t,
+  className: n
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-component": "notification-panel-content",
+    className: l("flex h-full flex-col bg-canvas-elevated", n),
+    children: t
+  }
+), I = ({
+  title: t,
+  children: n,
+  className: o
+}) => {
+  const { t: c } = s(), a = t ?? c("notificationPanel.title");
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-component": "notification-panel-header",
+      className: l(
+        "flex shrink-0 items-center justify-between border-b px-4 py-[9px] bg-canvas-elevated",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(u, { className: "h-5 w-5 text-content-muted" }) }),
+          typeof a == "string" ? /* @__PURE__ */ e(h, { className: "text-lg font-bold text-content", children: a }) : a
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          n,
+          /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+            x,
+            {
+              variant: "secondary",
+              size: "icon",
+              "aria-label": c("aria.close"),
+              "data-component": "notification-panel-close",
+              children: /* @__PURE__ */ e(N, { className: "!h-3 !w-3" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, k = ({
+  children: t,
+  className: n
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-component": "notification-panel-body",
+    className: l(
+      "flex flex-1 flex-col overflow-hidden bg-canvas",
+      n
+    ),
+    children: t
+  }
+), T = ({
+  children: t,
+  className: n,
+  leftAction: o
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    "data-component": "notification-panel-footer",
+    className: l(
+      "flex items-center justify-between border-t p-4 bg-canvas-elevated shrink-0 mt-auto shadow-md",
+      n
+    ),
+    children: [
+      /* @__PURE__ */ e("div", { children: o }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
+    ]
+  }
+);
+export {
+  D as NotificationPanel,
+  k as NotificationPanelBody,
+  B as NotificationPanelContent,
+  T as NotificationPanelFooter,
+  I as NotificationPanelHeader
+};

package/dist/components/flows/notification-panel/notification-panel.types.d.ts

@@ -0,0 +1,51 @@
+import type * as React from "react";
+export interface NotificationPanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    preventClose?: boolean;
+}
+export interface NotificationPanelHeaderProps {
+    className?: string;
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+}
+export interface NotificationPanelContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface NotificationPanelBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface NotificationPanelFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+    leftAction?: React.ReactNode;
+}
+export interface NotificationListProps {
+    children?: React.ReactNode;
+    className?: string;
+    onLoadMore?: () => void;
+    isLoading?: boolean;
+    hasMore?: boolean;
+    loader?: React.ReactNode;
+}
+export interface NotificationEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+}
+export interface NotificationGroupProps {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface NotificationItemProps {
+    children: React.ReactNode;
+    className?: string;
+    read?: boolean;
+    selected?: boolean;
+    onSelect?: (selected: boolean) => void;
+    selectable?: boolean;
+}

package/dist/components/flows/wizard/index.d.ts

@@ -0,0 +1,3 @@
+export { WizardRoot, WizardLayout, WizardSidebar, WizardTitle, WizardDescription, WizardMedia, WizardBody, WizardProgress, WizardHeader, WizardStepDescription, WizardContent, WizardStep, WizardFooter, } from './wizard';
+export { useWizard } from './wizard-context';
+export type { WizardRootProps, WizardMediaProps, WizardStepDefinition, WizardProgressProps, WizardStepProps, } from './wizard.types';

package/dist/components/flows/wizard/index.js

@@ -0,0 +1,18 @@
+import { WizardBody as a, WizardContent as d, WizardDescription as e, WizardFooter as o, WizardHeader as z, WizardLayout as W, WizardMedia as t, WizardProgress as p, WizardRoot as s, WizardSidebar as n, WizardStep as S, WizardStepDescription as c, WizardTitle as f } from "./wizard.js";
+import { useWizard as u } from "./wizard-context.js";
+export {
+  a as WizardBody,
+  d as WizardContent,
+  e as WizardDescription,
+  o as WizardFooter,
+  z as WizardHeader,
+  W as WizardLayout,
+  t as WizardMedia,
+  p as WizardProgress,
+  s as WizardRoot,
+  n as WizardSidebar,
+  S as WizardStep,
+  c as WizardStepDescription,
+  f as WizardTitle,
+  u as useWizard
+};

package/dist/components/flows/wizard/wizard-context.d.ts

@@ -0,0 +1,31 @@
+import { WizardStepDefinition } from './wizard.types';
+import * as React from "react";
+export type WizardContextValue = {
+    value: number;
+    totalSteps: number;
+    steps: WizardStepDefinition[];
+    setValue: (step: number) => void;
+    registerStep: (stepValue: number) => void;
+    unregisterStep: (stepValue: number) => void;
+};
+export type ScrollEdgeState = {
+    top: boolean;
+    bottom: boolean;
+};
+export type WizardScrollContextValue = {
+    edges: ScrollEdgeState;
+    setEdges: React.Dispatch<React.SetStateAction<ScrollEdgeState>>;
+};
+export declare const WizardContext: React.Context<WizardContextValue | null>;
+export declare const WizardScrollContext: React.Context<WizardScrollContextValue | null>;
+export declare function useWizardContext(): WizardContextValue;
+export declare function useWizardScrollContext(): WizardScrollContextValue;
+export declare function useWizard(): {
+    value: number;
+    totalSteps: number;
+    setValue: (step: number) => void;
+    goNext: () => void;
+    goBack: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+};

package/dist/components/flows/wizard/wizard-context.js

@@ -0,0 +1,36 @@
+import * as e from "react";
+const r = e.createContext(null), i = e.createContext(null);
+function s() {
+  const t = e.useContext(r);
+  if (!t)
+    throw new Error("Wizard.* components must be used within WizardRoot");
+  return t;
+}
+function a() {
+  const t = e.useContext(i);
+  if (!t)
+    throw new Error("Wizard content and footer must be used within WizardBody");
+  return t;
+}
+function u() {
+  const { value: t, totalSteps: o, setValue: n } = s();
+  return e.useMemo(
+    () => ({
+      value: t,
+      totalSteps: o,
+      setValue: n,
+      goNext: () => n(Math.min(t + 1, o)),
+      goBack: () => n(Math.max(t - 1, 1)),
+      isFirstStep: t <= 1,
+      isLastStep: t >= o
+    }),
+    [t, o, n]
+  );
+}
+export {
+  r as WizardContext,
+  i as WizardScrollContext,
+  u as useWizard,
+  s as useWizardContext,
+  a as useWizardScrollContext
+};

package/dist/components/flows/wizard/wizard.d.ts

@@ -0,0 +1,16 @@
+import { WizardMediaProps, WizardProgressProps, WizardRootProps, WizardStepProps } from './wizard.types';
+import * as React from "react";
+declare const WizardRoot: React.FC<WizardRootProps>;
+declare const WizardLayout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardSidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const WizardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WizardMedia: React.ForwardRefExoticComponent<WizardMediaProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardProgress: React.ForwardRefExoticComponent<WizardProgressProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const WizardStepDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WizardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;
+declare const WizardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WizardRoot, WizardLayout, WizardSidebar, WizardTitle, WizardDescription, WizardMedia, WizardBody, WizardProgress, WizardHeader, WizardStepDescription, WizardContent, WizardStep, WizardFooter, };