impact-nova 2.6.3 → 3.0.0-alpha.0

package/dist/components/forms/choice-card/choice-card.types.d.ts

@@ -20,12 +20,52 @@ export type ChoiceCardGroupMultipleProps = ChoiceCardGroupBaseProps & {
     onValueChange?: (value: string[]) => void;
 };
 export type ChoiceCardGroupProps = ChoiceCardGroupSingleProps | ChoiceCardGroupMultipleProps;
+export type ChoiceCardVariant = "default" | "featured" | "compare";
 export interface ChoiceCardProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     disabled?: boolean;
+    size?: "sm" | "md";
+    variant?: ChoiceCardVariant;
 }
+export type ChoiceCardRibbonProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+};
+export type ChoiceCardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type ChoiceCardBackgroundProps = React.HTMLAttributes<HTMLDivElement>;
 export type ChoiceCardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export interface ChoiceCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
+export type ChoiceCardStatusPlacement = "start" | "center";
+export type ChoiceCardStatusProps = React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+    placement?: ChoiceCardStatusPlacement;
+    icon?: React.ReactNode;
+};
+export type ChoiceCardIndexProps = React.HTMLAttributes<HTMLSpanElement>;
+export type ChoiceCardStatsProps = React.HTMLAttributes<HTMLDivElement>;
+export type ChoiceCardStatProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: React.ReactNode;
+    label: React.ReactNode;
+};
+export type ChoiceCardPercentProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    disabled?: boolean;
+};
+export type ChoiceCardCompareFit = "scroll" | "auto";
+export type ChoiceCardCompareProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** `scroll` keeps Figma 411px tiles. `auto` caps tiles at 420px and shrinks them to the row. */
+    fit?: ChoiceCardCompareFit;
+};
+export type ChoiceCardCompareLabelsProps = React.HTMLAttributes<HTMLDivElement>;
+export type ChoiceCardCompareLabelProps = React.HTMLAttributes<HTMLDivElement>;
+export type ChoiceCardCompareLeadProps = React.HTMLAttributes<HTMLDivElement>;
+export type ChoiceCardCompareRowProps = React.HTMLAttributes<HTMLDivElement>;
 export {};

package/dist/components/forms/choice-card/choice-card.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const choiceCardVariants: (props?: ({
+    variant?: "default" | "compare" | "featured" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    selected?: boolean | null | undefined;
+    mode?: "single" | "multiple" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/forms/choice-card/choice-card.variants.js

@@ -0,0 +1,100 @@
+import { cva as e } from "class-variance-authority";
+const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand border-l-[3px] border-l-brand bg-brand-tint py-3 pr-3 pl-2.5 shadow-elevation-header", s = e(
+  [
+    "group relative cursor-pointer select-none transition-[border-color,background-color,box-shadow] duration-150",
+    "has-[[data-slot=choice-card-control]:focus-visible]:outline-none has-[[data-slot=choice-card-control]:focus-visible]:ring-1 has-[[data-slot=choice-card-control]:focus-visible]:ring-focus-ring"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "flex flex-row items-start justify-between gap-2 overflow-hidden rounded-xl border border-solid bg-canvas-elevated",
+        featured: "flex h-[116px] w-[215px] shrink-0 flex-col overflow-hidden rounded-2xl border border-solid bg-canvas-elevated p-0",
+        compare: "flex flex-col items-stretch gap-4 overflow-visible rounded-xl border border-solid p-3"
+      },
+      size: {
+        md: "",
+        sm: ""
+      },
+      selected: {
+        true: "",
+        false: ""
+      },
+      mode: {
+        single: "",
+        multiple: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: "sm",
+        class: "rounded-lg"
+      },
+      {
+        variant: "default",
+        selected: !1,
+        disabled: !1,
+        class: r
+      },
+      {
+        variant: "default",
+        selected: !0,
+        disabled: !1,
+        class: a
+      },
+      {
+        variant: "default",
+        disabled: !0,
+        class: "border-stroke-subtle bg-canvas-muted p-3"
+      },
+      {
+        variant: "featured",
+        selected: !1,
+        disabled: !1,
+        class: "border border-black/5 border-b-[3px] border-b-black/5 hover:border-brand hover:border-b-[1px] hover:border-b-brand"
+      },
+      {
+        variant: "featured",
+        selected: !0,
+        disabled: !1,
+        class: "border border-brand border-b-[3px] border-b-brand"
+      },
+      {
+        variant: "featured",
+        disabled: !0,
+        class: "border border-stroke-subtle border-b-[3px] border-b-stroke-subtle bg-canvas-muted"
+      },
+      {
+        variant: "compare",
+        selected: !1,
+        disabled: !1,
+        class: "border-stroke-subtle bg-gradient-to-b from-canvas-elevated to-canvas-muted"
+      },
+      {
+        variant: "compare",
+        selected: !0,
+        disabled: !1,
+        class: "border-success bg-gradient-to-b from-canvas-elevated to-feedback-success-surface shadow-elevation-floating"
+      },
+      {
+        variant: "compare",
+        disabled: !0,
+        class: "border-stroke-subtle bg-canvas-muted"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      selected: !1,
+      mode: "single",
+      disabled: !1
+    }
+  }
+);
+export {
+  s as choiceCardVariants
+};

package/dist/components/forms/choice-card/index.d.ts

@@ -1 +1,2 @@
-export { ChoiceCardGroup, ChoiceCard, ChoiceCardIndicator, ChoiceCardContent, ChoiceCardMedia, ChoiceCardTitle, ChoiceCardHeader, ChoiceCardDescription, useChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardGroupSingleProps, type ChoiceCardGroupMultipleProps, type ChoiceCardProps, type ChoiceCardContentProps, type ChoiceCardHeaderProps, } from './choice-card';
+export { ChoiceCardFeaturedBackdrop } from './choice-card-featured-backdrop';
+export { ChoiceCardGroup, ChoiceCard, ChoiceCardIndicator, ChoiceCardBackground, ChoiceCardRibbon, ChoiceCardFooter, ChoiceCardContent, ChoiceCardMedia, ChoiceCardTitle, ChoiceCardHeader, ChoiceCardDescription, ChoiceCardStatus, ChoiceCardIndex, ChoiceCardStats, ChoiceCardStat, ChoiceCardCompare, ChoiceCardCompareLabels, ChoiceCardCompareLabel, ChoiceCardCompareLead, ChoiceCardCompareRow, ChoiceCardPercent, useChoiceCardGroup, useChoiceCardItem, type ChoiceCardGroupProps, type ChoiceCardGroupSingleProps, type ChoiceCardGroupMultipleProps, type ChoiceCardProps, type ChoiceCardContentProps, type ChoiceCardHeaderProps, type ChoiceCardRibbonProps, type ChoiceCardFooterProps, type ChoiceCardBackgroundProps, type ChoiceCardStatusProps, type ChoiceCardIndexProps, type ChoiceCardStatsProps, type ChoiceCardStatProps, type ChoiceCardCompareProps, type ChoiceCardCompareFit, type ChoiceCardCompareLabelsProps, type ChoiceCardCompareLabelProps, type ChoiceCardCompareLeadProps, type ChoiceCardCompareRowProps, type ChoiceCardPercentProps, type ChoiceCardVariant, } from './choice-card';

package/dist/components/forms/choice-card/index.js

@@ -1,12 +1,29 @@
-import { ChoiceCard as o, ChoiceCardContent as r, ChoiceCardDescription as i, ChoiceCardGroup as a, ChoiceCardHeader as d, ChoiceCardIndicator as c, ChoiceCardMedia as h, ChoiceCardTitle as t, useChoiceCardGroup as n } from "./choice-card.js";
+import { ChoiceCardFeaturedBackdrop as o } from "./choice-card-featured-backdrop.js";
+import { ChoiceCard as a, ChoiceCardBackground as d, ChoiceCardCompare as i, ChoiceCardCompareLabel as c, ChoiceCardCompareLabels as h, ChoiceCardCompareLead as t, ChoiceCardCompareRow as p, ChoiceCardContent as m, ChoiceCardDescription as n, ChoiceCardFooter as u, ChoiceCardGroup as s, ChoiceCardHeader as b, ChoiceCardIndex as x, ChoiceCardIndicator as f, ChoiceCardMedia as l, ChoiceCardRibbon as I, ChoiceCardStat as L, ChoiceCardStats as S, ChoiceCardStatus as k, ChoiceCardTitle as B, useChoiceCardGroup as F, useChoiceCardItem as G } from "./choice-card.js";
+import { ChoiceCardPercent as g } from "./choice-card-percent.js";
 export {
-  o as ChoiceCard,
-  r as ChoiceCardContent,
-  i as ChoiceCardDescription,
-  a as ChoiceCardGroup,
-  d as ChoiceCardHeader,
-  c as ChoiceCardIndicator,
-  h as ChoiceCardMedia,
-  t as ChoiceCardTitle,
-  n as useChoiceCardGroup
+  a as ChoiceCard,
+  d as ChoiceCardBackground,
+  i as ChoiceCardCompare,
+  c as ChoiceCardCompareLabel,
+  h as ChoiceCardCompareLabels,
+  t as ChoiceCardCompareLead,
+  p as ChoiceCardCompareRow,
+  m as ChoiceCardContent,
+  n as ChoiceCardDescription,
+  o as ChoiceCardFeaturedBackdrop,
+  u as ChoiceCardFooter,
+  s as ChoiceCardGroup,
+  b as ChoiceCardHeader,
+  x as ChoiceCardIndex,
+  f as ChoiceCardIndicator,
+  l as ChoiceCardMedia,
+  g as ChoiceCardPercent,
+  I as ChoiceCardRibbon,
+  L as ChoiceCardStat,
+  S as ChoiceCardStats,
+  k as ChoiceCardStatus,
+  B as ChoiceCardTitle,
+  F as useChoiceCardGroup,
+  G as useChoiceCardItem
 };

package/dist/components/forms/select/components/SelectTriggerValue.js

@@ -1,9 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { cn as x } from "../../../../lib/utils.js";
-import "react";
 import { OverflowTooltip as m } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { isInvertedSelection as h, isOptionArray as d } from "../utils/select.js";
-function C({
+function w({
   isMulti: u,
   isDisabled: p,
   internalValue: o,
@@ -53,5 +52,5 @@ function C({
   );
 }
 export {
-  C as SelectTriggerValue
+  w as SelectTriggerValue
 };

package/dist/components/forms/select/components/Submenu.js

@@ -1,14 +1,13 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
 import { Checkbox as P } from "../../checkbox/checkbox.js";
-import "react";
 import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
 import { cn as v } from "../../../../lib/utils.js";
 import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
 import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
 import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
-const R = ({
+const G = ({
   parentOption: n,
   isMulti: u,
   isReadOnly: l,
@@ -106,5 +105,5 @@ const R = ({
   ] });
 };
 export {
-  R as Submenu
+  G as Submenu
 };

package/dist/components/layout/header/header.d.ts

@@ -1,4 +1,4 @@
-import { HeaderProps, HeaderLogoProps, HeaderTitleProps, HeaderBadgeProps, HeaderBotButtonProps, NotificationIconButtonProps } from './header.types';
+import { HeaderProps, HeaderLogoProps, HeaderTitleProps, HeaderBadgeProps, HeaderBotButtonProps, HeaderIrisButtonProps, NotificationIconButtonProps } from './header.types';
 import * as React from "react";
 declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 declare const HeaderLeft: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -9,5 +9,6 @@ declare const HeaderSeparator: React.ForwardRefExoticComponent<Omit<Omit<import(
 declare const HeaderTitle: React.ForwardRefExoticComponent<HeaderTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 declare const HeaderBadge: React.ForwardRefExoticComponent<HeaderBadgeProps & React.RefAttributes<HTMLDivElement>>;
 declare const HeaderBotButton: React.ForwardRefExoticComponent<HeaderBotButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const HeaderIrisButton: React.ForwardRefExoticComponent<HeaderIrisButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const NotificationIconButton: React.ForwardRefExoticComponent<NotificationIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Header, HeaderLeft, HeaderRight, HeaderLogo, HeaderSeparator, HeaderTitle, HeaderBadge, HeaderBotButton, NotificationIconButton, };
+export { Header, HeaderLeft, HeaderRight, HeaderLogo, HeaderSeparator, HeaderTitle, HeaderBadge, HeaderBotButton, HeaderIrisButton, NotificationIconButton, };

package/dist/components/layout/header/header.js

@@ -1,84 +1,84 @@
-import { jsx as r, jsxs as c, Fragment as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as d, Fragment as p } from "react/jsx-runtime";
 import "react";
 import { cn as n } from "../../../lib/utils.js";
 import { createComponent as i } from "../../../lib/primitives/create-component.js";
-import { createCompoundPart as p } from "../../../lib/primitives/create-compound.js";
-import { Button as x } from "../../primitives/button/button.js";
-import { ButtonIconTooltip as v } from "../../feedback/tooltip/button-icon-tooltip.js";
-import { Badge as N } from "../../data-display/badge/badge.js";
-import { Separator as H } from "../../data-display/separator/separator.js";
-import { Alan as y, Bell as B } from "impact-nova-icons";
-import { useImpactNovaI18n as f } from "../../../i18n/use-impact-nova-i18n.js";
+import { createCompoundPart as u } from "../../../lib/primitives/create-compound.js";
+import { Button as v } from "../../primitives/button/button.js";
+import { ButtonIconTooltip as N } from "../../feedback/tooltip/button-icon-tooltip.js";
+import { Badge as H } from "../../data-display/badge/badge.js";
+import { Separator as y } from "../../data-display/separator/separator.js";
+import { Alan as f, Bell as B } from "impact-nova-icons";
+import { useImpactNovaI18n as g } from "../../../i18n/use-impact-nova-i18n.js";
 const P = i(
   "Header",
-  ({ className: a, children: e, ...t }, o) => /* @__PURE__ */ r(
+  ({ className: r, children: e, ...t }, o) => /* @__PURE__ */ a(
     "header",
     {
       ref: o,
       "data-component": "header",
       className: n(
         "sticky top-0 z-40 flex h-14 w-full items-center justify-between bg-canvas-elevated px-6 shadow-elevation-header",
-        a
+        r
       ),
       ...t,
       children: e
     }
   )
-), R = p("header", {
+), R = u("header", {
   part: "left",
   displayName: "HeaderLeft",
   className: "flex flex-row items-center justify-start"
-}), F = p("header", {
+}), F = u("header", {
   part: "right",
   displayName: "HeaderRight",
   className: "flex flex-row items-center justify-start gap-5"
 }), q = i(
   "HeaderLogo",
-  ({ className: a, children: e, href: t = "/", "aria-label": o, ...s }, d) => {
-    const { t: l } = f();
-    return /* @__PURE__ */ r(
+  ({ className: r, children: e, href: t = "/", "aria-label": o, ...s }, l) => {
+    const { t: c } = g();
+    return /* @__PURE__ */ a(
       "a",
       {
         href: t,
-        ref: d,
-        "aria-label": o ?? l("aria.home"),
+        ref: l,
+        "aria-label": o ?? c("aria.home"),
         className: n(
           "h-9 flex items-center justify-center cursor-pointer [&_img]:dark:brightness-0 [&_img]:dark:invert",
-          a
+          r
         ),
         ...s,
         children: e
       }
     );
   }
-), D = i("HeaderSeparator", ({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  H,
+), D = i("HeaderSeparator", ({ className: r, ...e }, t) => /* @__PURE__ */ a(
+  y,
   {
     ref: t,
     orientation: "vertical",
-    className: n("h-6 mx-3", a),
+    className: n("h-6 mx-3", r),
     ...e
   }
 )), E = i(
   "HeaderTitle",
-  ({ className: a, children: e, ...t }, o) => /* @__PURE__ */ r(
+  ({ className: r, children: e, ...t }, o) => /* @__PURE__ */ a(
     "h1",
     {
       ref: o,
-      className: n("text-base font-extrabold leading-6 text-content", a),
+      className: n("text-base font-extrabold leading-6 text-content", r),
       ...t,
       children: e
     }
   )
 ), G = i(
   "HeaderBadge",
-  ({ className: a, children: e, style: t, ...o }, s) => /* @__PURE__ */ r(
-    N,
+  ({ className: r, children: e, style: t, ...o }, s) => /* @__PURE__ */ a(
+    H,
     {
       ref: s,
       size: "sm",
       shape: "circle",
-      className: n("border-none header-badge-gradient text-brand-foreground", a),
+      className: n("border-none header-badge-gradient text-brand-foreground", r),
       style: t,
       ...o,
       children: e
@@ -86,7 +86,7 @@ const P = i(
   )
 ), J = i(
   "HeaderBotButton",
-  ({ className: a, children: e, ...t }, o) => /* @__PURE__ */ r(
+  ({ className: r, children: e, ...t }, o) => /* @__PURE__ */ a(
     "button",
     {
       ref: o,
@@ -95,55 +95,74 @@ const P = i(
         "relative flex items-center justify-center w-[106px] h-[34px] gap-[7px] px-[11px] py-0 rounded-lg cursor-pointer border-0 outline-none",
         "header-bot-button-gradient",
         "animate-header-bot-gradient hover:animate-header-bot-gradient-fast motion-reduce:animate-none",
-        a
+        r
       ),
       ...t,
-      children: e || /* @__PURE__ */ c(h, { children: [
-        /* @__PURE__ */ r(y, { size: 20, className: "text-brand-foreground" }),
-        /* @__PURE__ */ r("span", { className: "text-sm font-semibold leading-[20px] text-brand-foreground whitespace-nowrap", children: "Ask Alan" })
+      children: e || /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ a(f, { size: 20, className: "text-brand-foreground" }),
+        /* @__PURE__ */ a("span", { className: "text-sm font-semibold leading-[20px] text-brand-foreground whitespace-nowrap", children: "Ask Alan" })
       ] })
     }
   )
 ), K = i(
+  "HeaderIrisButton",
+  ({ className: r, children: e, ...t }, o) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: n(
+        "relative flex items-center justify-center h-8 gap-1 px-3 py-1.5 rounded-md cursor-pointer outline-none",
+        "header-iris-button-gradient",
+        r
+      ),
+      ...t,
+      children: e || /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ a(f, { size: 20, className: "text-brand-foreground" }),
+        /* @__PURE__ */ a("span", { className: "text-sm font-medium leading-5 text-brand-foreground whitespace-nowrap", children: "Ask Iris" })
+      ] })
+    }
+  )
+), M = i(
   "NotificationIconButton",
   ({
-    className: a,
+    className: r,
     showIndicator: e,
     indicatorVariant: t = "unread",
     tooltipSide: o = "top",
     tooltipKeybinding: s,
-    ...d
-  }, l) => {
-    const { t: u } = f(), g = t === "stale", m = u("notificationPanel.title"), b = /* @__PURE__ */ c(
-      x,
+    ...l
+  }, c) => {
+    const { t: h } = g(), b = t === "stale", m = h("notificationPanel.title"), x = /* @__PURE__ */ d(
+      v,
       {
         variant: "ghost",
         size: "icon",
-        ref: l,
+        ref: c,
         "aria-label": m,
         "data-indicator": e ? "" : void 0,
         "data-indicator-variant": e ? t : void 0,
         className: n(
           "relative text-content-header-notification [&_svg]:size-6 hover:text-content",
-          a
+          r
         ),
-        ...d,
+        ...l,
         children: [
-          /* @__PURE__ */ r(B, { size: 24 }),
-          e && (g ? /* @__PURE__ */ r("div", { className: "absolute top-1.5 right-1.5 size-2 pointer-events-none z-10 rounded-full bg-content-tertiary" }) : /* @__PURE__ */ c("div", { className: "absolute top-1.5 right-1.5 size-2.5 pointer-events-none z-10", children: [
-            /* @__PURE__ */ r("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2.5 rounded-full bg-feedback-error-surface animate-notification-waves motion-reduce:animate-none" }),
-            /* @__PURE__ */ r("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2 rounded-full bg-destructive" })
+          /* @__PURE__ */ a(B, { size: 24 }),
+          e && (b ? /* @__PURE__ */ a("div", { className: "absolute top-1.5 right-1.5 size-2 pointer-events-none z-10 rounded-full bg-content-tertiary" }) : /* @__PURE__ */ d("div", { className: "absolute top-1.5 right-1.5 size-2.5 pointer-events-none z-10", children: [
+            /* @__PURE__ */ a("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2.5 rounded-full bg-feedback-error-surface animate-notification-waves motion-reduce:animate-none" }),
+            /* @__PURE__ */ a("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2 rounded-full bg-destructive" })
           ] }))
         ]
       }
     );
-    return /* @__PURE__ */ r(
-      v,
+    return /* @__PURE__ */ a(
+      N,
       {
         label: m,
         side: o,
         keybinding: s,
-        children: b
+        children: x
       }
     );
   }
@@ -152,10 +171,11 @@ export {
   P as Header,
   G as HeaderBadge,
   J as HeaderBotButton,
+  K as HeaderIrisButton,
   R as HeaderLeft,
   q as HeaderLogo,
   F as HeaderRight,
   D as HeaderSeparator,
   E as HeaderTitle,
-  K as NotificationIconButton
+  M as NotificationIconButton
 };

package/dist/components/layout/header/header.types.d.ts

@@ -11,6 +11,7 @@ export type HeaderSeparatorProps = React.ComponentPropsWithoutRef<typeof Separat
 export type HeaderTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export type HeaderBadgeProps = Omit<BadgeProps, "size" | "shape">;
 export type HeaderBotButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type HeaderIrisButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 export type NotificationIndicatorVariant = "unread" | "stale";
 export interface NotificationIconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     showIndicator?: boolean;

package/dist/components/primitives/iris/iris-agent-cursor.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+/** Figma 7717 — system cursor hidden; vector pointer + primary comment bubble follow the pointer. */
+export declare function IrisAgentCursor(): React.ReactPortal | null;

package/dist/components/primitives/iris/iris-agent-cursor.js

@@ -0,0 +1,89 @@
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { createPortal as h } from "react-dom";
+import { useOverlayPortalContainer as g } from "../../../lib/overlay/overlay-portal-context.js";
+import { useIrisControl as w } from "./iris-control-context.js";
+function x() {
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      width: "17",
+      height: "21",
+      viewBox: "0 0 17 21",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "iris-agent-cursor__pointer block shrink-0",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ s(
+        "path",
+        {
+          d: "M1 1V16.8L4.8 13.2L7.8 19.2L9.6 18L6.6 11.8H14.2L1 1Z",
+          fill: "var(--color-foreground-title)",
+          stroke: "var(--color-canvas)",
+          strokeWidth: "1.25",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function R() {
+  const { showCursor: i, cursorLabel: c } = w(), a = g(), u = o.useRef(null), l = o.useRef({ x: 0, y: 0 }), e = o.useRef(0);
+  if (o.useEffect(() => {
+    if (!i)
+      return;
+    const p = () => {
+      const r = u.current;
+      if (!r)
+        return;
+      const { x: f, y: m } = l.current;
+      r.style.transform = `translate3d(${f}px, ${m}px, 0)`;
+    }, t = (r) => {
+      r.pointerType !== "touch" && (l.current = { x: r.clientX, y: r.clientY }, !e.current && (e.current = requestAnimationFrame(() => {
+        e.current = 0, p();
+      })));
+    }, n = a?.ownerDocument ?? document;
+    return n.addEventListener("pointermove", t, {
+      capture: !0,
+      passive: !0
+    }), n.addEventListener("pointerdown", t, {
+      capture: !0,
+      passive: !0
+    }), () => {
+      n.removeEventListener("pointermove", t, {
+        capture: !0
+      }), n.removeEventListener("pointerdown", t, {
+        capture: !0
+      }), e.current && cancelAnimationFrame(e.current);
+    };
+  }, [a, i]), !i || !c)
+    return null;
+  const d = a ?? document.body;
+  return h(
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: u,
+        className: "iris-agent-cursor pointer-events-none fixed left-0 top-0 z-[60]",
+        "data-component": "iris-agent-cursor",
+        style: { transform: "translate3d(0, 0, 0)" },
+        "aria-hidden": !0,
+        children: [
+          /* @__PURE__ */ s(x, {}),
+          /* @__PURE__ */ s(
+            "p",
+            {
+              className: "iris-agent-cursor__bubble",
+              "data-component": "iris-agent-cursor-label",
+              children: c
+            }
+          )
+        ]
+      }
+    ),
+    d
+  );
+}
+export {
+  R as IrisAgentCursor
+};

package/dist/components/primitives/iris/iris-alan-gradient-icon.d.ts

@@ -0,0 +1,5 @@
+/** Figma 16×16 AI sparkle — gradient fill + stroke. */
+export declare const IrisAlanGradientIcon: ({ size, className, }: {
+    size: number;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;