impact-nova 1.7.5 → 1.7.6

package/dist/components/ui/filter-panel/filter-panel.js

@@ -1,29 +1,36 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import u from "react";
+import v from "react";
 import { Sheet as b, SheetContent as g, SheetDescription as N, SheetTitle as y, SheetClose as w } from "../sheet.js";
 import { cn as i } from "../../../lib/utils.js";
-import { MultiColorFilter as k, Cross as C, Info as m } from "../../../icons/index.js";
+import { MultiColorFilter as k, Cross as C, InfoBadge as m } from "../../../icons/index.js";
 import { Button as F } from "../button.js";
 import { Tooltip as d, TooltipTrigger as h, TooltipContent as f } from "../tooltip.js";
 import { Kbd as P } from "../command-palette/kbd.js";
-import { useImpactNovaI18n as v } from "../../../i18n/ImpactNovaI18nContext.js";
+import { useImpactNovaI18n as u } from "../../../i18n/ImpactNovaI18nContext.js";
 const j = ({
   title: n,
   children: r,
   className: l
 }) => {
-  const { t: c } = v();
+  const { t: c } = u();
   return /* @__PURE__ */ t(
     "div",
     {
       "data-component": "filter-panel-header",
       className: i(
-        "flex  shrink-0 flex-row items-center justify-between border-b px-4 py-3 bg-canvas-elevated",
+        "flex  shrink-0 flex-row items-center justify-between border-b px-4 py-[9px] bg-canvas-elevated",
         l
       ),
       children: [
         /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(k, { className: "h-5 w-5" }) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-brand-tint bg-white",
+              "aria-hidden": !0,
+              children: /* @__PURE__ */ e(k, { className: "size-5 shrink-0" })
+            }
+          ),
           /* @__PURE__ */ e(y, { className: "text-lg font-bold text-content", children: n })
         ] }),
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
@@ -82,7 +89,7 @@ const j = ({
   onTabChange: l,
   className: c
 }) => {
-  const { t: s } = v();
+  const { t: s } = u();
   return /* @__PURE__ */ e(
     "div",
     {
@@ -93,7 +100,7 @@ const j = ({
       ),
       children: /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col py-2 gap-1 overflow-y-auto", children: n.map((a) => {
         const o = r === a.id;
-        return /* @__PURE__ */ t(u.Fragment, { children: [
+        return /* @__PURE__ */ t(v.Fragment, { children: [
           a.separator && /* @__PURE__ */ e("div", { className: "my-2 h-px bg-stroke-hairline" }),
           /* @__PURE__ */ t(
             "button",

package/dist/components/ui/filter-strip/filter-strip.js

@@ -13,11 +13,11 @@ const E = ({
   savedFilters: o,
   recentFilters: p,
   onApplySavedFilter: c,
-  onSavedFilterSearch: h,
-  onSavedFiltersScroll: f,
+  onSavedFilterSearch: f,
+  onSavedFiltersScroll: h,
   onViewAll: d,
-  onOverflowClick: x,
-  selectedFilter: w,
+  onOverflowClick: w,
+  selectedFilter: x,
   onSelectedFilterChange: N,
   onDropdownOpenChange: v,
   isLoadingFilterPreferencesList: g,
@@ -73,13 +73,13 @@ const E = ({
         /* @__PURE__ */ e(
           I,
           {
-            selectedFilter: w,
+            selectedFilter: x,
             onSelectedFilterChange: N,
             savedFilters: o,
             recentFilters: p,
             onApplySavedFilter: c,
-            onSavedFilterSearch: h,
-            onSavedFiltersScroll: f,
+            onSavedFilterSearch: f,
+            onSavedFiltersScroll: h,
             onDropdownOpenChange: v,
             isLoadingFilterPreferencesList: g,
             onEditSavedFilter: b,
@@ -93,11 +93,10 @@ const E = ({
           {
             filters: s,
             onFilterRemove: n,
-            onOverflowClick: x,
+            onOverflowClick: w,
             onViewAll: d
           }
         ),
-        /* @__PURE__ */ e("div", { className: "h-4 w-[1px] bg-stroke-hairline mx-1 shrink-0" }),
         /* @__PURE__ */ i(
           j,
           {

package/dist/components/ui/input.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { HelperTextPosition } from './types/helper-text.types';
 import * as React from "react";
 declare const inputVariants: (props?: {
     isError?: boolean;
@@ -8,6 +9,8 @@ declare const inputVariants: (props?: {
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "disabled">, VariantProps<typeof inputVariants> {
     label?: string;
     helperText?: React.ReactNode;
+    /** @default "absolute" */
+    helperTextPosition?: HelperTextPosition;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     prefixClick?: React.MouseEventHandler<HTMLDivElement>;

package/dist/components/ui/input.js

@@ -1,9 +1,9 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import * as b from "react";
-import { Info as h } from "../../icons/index.js";
-import { cva as v } from "class-variance-authority";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import * as h from "react";
+import { Info as f } from "../../icons/index.js";
+import { cva as g } from "class-variance-authority";
 import { cn as e } from "../../lib/utils.js";
-const g = v(
+const N = g(
   "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-content-muted focus-within:outline-none focus-within:border-brand hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
   {
     variants: {
@@ -27,76 +27,131 @@ const g = v(
       isError: !1
     }
   }
-), N = b.forwardRef(
-  ({ className: m, type: f, label: d, helperText: o, isError: t, size: p, disabled: r, prefix: s, suffix: i, prefixClick: l, suffixClick: c, ...u }, x) => /* @__PURE__ */ n(
+), w = h.forwardRef(
+  ({
+    className: x,
+    type: p,
+    label: r,
+    helperText: s,
+    helperTextPosition: i = "absolute",
+    isError: t,
+    size: b,
+    disabled: n,
+    prefix: o,
+    suffix: l,
+    prefixClick: c,
+    suffixClick: m,
+    ...u
+  }, v) => /* @__PURE__ */ d(
     "div",
     {
       className: "flex w-full flex-col gap-[6px]",
       "data-component": "input",
-      "data-disabled": r || void 0,
+      "data-disabled": n || void 0,
       "data-invalid": t || void 0,
       children: [
-        /* @__PURE__ */ n("div", { className: "flex flex-col gap-[6px]", children: [
-          d && /* @__PURE__ */ n(
+        /* @__PURE__ */ d("div", { className: "flex flex-col gap-[6px]", children: [
+          r && /* @__PURE__ */ d(
             "label",
             {
               className: e(
                 "text-xs font-medium leading-[18px] text-content-tertiary",
-                r && "opacity-70",
+                n && "opacity-70",
                 t && "text-destructive"
               ),
               children: [
-                d,
+                r,
                 " ",
                 u.required && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ d(
             "div",
             {
-              "data-component": "input-border",
               className: e(
-                g({ size: p, isError: t, disabled: r, className: m }),
-                "bg-canvas",
-                r && "bg-disabled-surface"
+                s && i === "absolute" && "relative"
               ),
               children: [
-                s && /* @__PURE__ */ a(
+                /* @__PURE__ */ d(
                   "div",
                   {
-                    onClick: l,
-                    className: e("flex shrink-0 items-center justify-center text-content-muted pointer-events-auto", l && "cursor-pointer"),
-                    children: s
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  "input",
-                  {
-                    type: f,
+                    "data-component": "input-border",
                     className: e(
-                      "flex h-full w-full bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
-                      r && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground"
+                      N({ size: b, isError: t, disabled: n, className: x }),
+                      "bg-canvas",
+                      n && "bg-disabled-surface"
                     ),
-                    ref: x,
-                    disabled: !!r,
-                    "data-form-control": "input",
-                    ...u
+                    children: [
+                      o && /* @__PURE__ */ a(
+                        "div",
+                        {
+                          onClick: c,
+                          className: e("flex shrink-0 items-center justify-center text-content-muted pointer-events-auto", c && "cursor-pointer"),
+                          children: o
+                        }
+                      ),
+                      /* @__PURE__ */ a(
+                        "input",
+                        {
+                          type: p,
+                          className: e(
+                            "flex h-full w-full bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                            n && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground"
+                          ),
+                          ref: v,
+                          disabled: !!n,
+                          "data-form-control": "input",
+                          ...u
+                        }
+                      ),
+                      l && /* @__PURE__ */ a(
+                        "div",
+                        {
+                          onClick: m,
+                          className: e("flex shrink-0 items-center justify-center text-content-muted pointer-events-auto", m && "cursor-pointer"),
+                          children: l
+                        }
+                      )
+                    ]
                   }
                 ),
-                i && /* @__PURE__ */ a(
+                s && i === "absolute" && /* @__PURE__ */ d(
                   "div",
                   {
-                    onClick: c,
-                    className: e("flex shrink-0 items-center justify-center text-content-muted pointer-events-auto", c && "cursor-pointer"),
-                    children: i
+                    className: e(
+                      "absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]",
+                      t && "text-destructive"
+                    ),
+                    children: [
+                      /* @__PURE__ */ a(
+                        f,
+                        {
+                          size: "xs",
+                          className: e(
+                            "shrink-0",
+                            t ? "text-destructive" : "text-content-muted"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ a(
+                        "p",
+                        {
+                          className: e(
+                            "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
+                            t && "text-destructive"
+                          ),
+                          children: s
+                        }
+                      )
+                    ]
                   }
                 )
               ]
             }
           )
         ] }),
-        o && /* @__PURE__ */ n(
+        s && i === "flow" && /* @__PURE__ */ d(
           "div",
           {
             className: e(
@@ -104,15 +159,24 @@ const g = v(
               t && "text-destructive"
             ),
             children: [
-              !t && /* @__PURE__ */ a(h, { size: "xs", className: "shrink-0 text-content-muted" }),
+              /* @__PURE__ */ a(
+                f,
+                {
+                  size: "xs",
+                  className: e(
+                    "shrink-0",
+                    t ? "text-destructive" : "text-content-muted"
+                  )
+                }
+              ),
               /* @__PURE__ */ a(
                 "p",
                 {
                   className: e(
-                    "text-[10px] leading-4 text-navigation-muted",
+                    "text-[12px] font-medium leading-[18px] text-navigation-muted",
                     t && "text-destructive"
                   ),
-                  children: o
+                  children: s
                 }
               )
             ]
@@ -122,7 +186,7 @@ const g = v(
     }
   )
 );
-N.displayName = "Input";
+w.displayName = "Input";
 export {
-  N as Input
+  w as Input
 };

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

@@ -3,7 +3,7 @@ export declare const useNotificationContext: () => {
     setPreventClose: (prevent: boolean) => void;
 };
 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;
+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/ui/notification-panel/notification-panel.js

@@ -8,7 +8,9 @@ import { useImpactNovaI18n as s } from "../../../i18n/ImpactNovaI18nContext.js";
 const d = p(null), I = () => {
   const t = m(d);
   if (!t)
-    throw new Error("useNotificationContext must be used within a NotificationPanel");
+    throw new Error(
+      "useNotificationContext must be used within a NotificationPanel"
+    );
   return t;
 }, k = ({
   open: t,
@@ -39,22 +41,82 @@ const d = p(null), I = () => {
       ]
     }
   ) }) });
-}, E = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-content", className: c("flex h-full flex-col bg-canvas-elevated", n), children: t }), T = ({ title: t, children: n, className: i }) => {
+}, E = ({
+  children: t,
+  className: n
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-component": "notification-panel-content",
+    className: c("flex h-full flex-col bg-canvas-elevated", n),
+    children: t
+  }
+), T = ({
+  title: t,
+  children: n,
+  className: i
+}) => {
   const { t: l } = s(), o = t ?? l("notificationPanel.title");
-  return /* @__PURE__ */ a("div", { "data-component": "notification-panel-header", className: c("flex shrink-0 items-center justify-between border-b px-4 py-3 bg-canvas-elevated", i), children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(w, { className: "h-5 w-5 text-content-muted" }) }),
-      typeof o == "string" ? /* @__PURE__ */ e(v, { className: "text-lg font-bold text-content", children: o }) : o
-    ] }),
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-      n,
-      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(b, { variant: "secondary", size: "icon", "aria-label": l("aria.close"), "data-component": "notification-panel-close", children: /* @__PURE__ */ e(g, { className: "h-4 w-4" }) }) })
-    ] })
-  ] });
-}, z = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-body", className: c("flex flex-1 flex-col overflow-hidden bg-canvas", n), children: t }), F = ({ children: t, className: n, leftAction: i }) => /* @__PURE__ */ a("div", { "data-component": "notification-panel-footer", className: c("flex items-center justify-between border-t p-4 bg-canvas-elevated shrink-0 mt-auto shadow-md", n), children: [
-  /* @__PURE__ */ e("div", { children: i }),
-  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
-] });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-component": "notification-panel-header",
+      className: c(
+        "flex shrink-0 items-center justify-between border-b px-4 py-[9px] bg-canvas-elevated",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(w, { className: "h-5 w-5 text-content-muted" }) }),
+          typeof o == "string" ? /* @__PURE__ */ e(v, { className: "text-lg font-bold text-content", children: o }) : o
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+          n,
+          /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
+            b,
+            {
+              variant: "secondary",
+              size: "icon",
+              "aria-label": l("aria.close"),
+              "data-component": "notification-panel-close",
+              children: /* @__PURE__ */ e(g, { className: "h-4 w-4" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, z = ({
+  children: t,
+  className: n
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-component": "notification-panel-body",
+    className: c(
+      "flex flex-1 flex-col overflow-hidden bg-canvas",
+      n
+    ),
+    children: t
+  }
+), F = ({
+  children: t,
+  className: n,
+  leftAction: i
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    "data-component": "notification-panel-footer",
+    className: c(
+      "flex items-center justify-between border-t p-4 bg-canvas-elevated shrink-0 mt-auto shadow-md",
+      n
+    ),
+    children: [
+      /* @__PURE__ */ e("div", { children: i }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
+    ]
+  }
+);
 export {
   k as NotificationPanel,
   z as NotificationPanelBody,

package/dist/components/ui/radio-group.d.ts

@@ -1,8 +1,11 @@
+import { HelperTextPosition } from './types/helper-text.types';
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
     label?: string;
     helperText?: React.ReactNode;
+    /** @default "absolute" */
+    helperTextPosition?: HelperTextPosition;
     isError?: boolean;
     orientation?: "horizontal" | "vertical";
 }