@particle-academy/react-fancy 6.0.0 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/CHANGELOG.md +75 -0
  2. package/dist/badge.cjs +3 -2
  3. package/dist/badge.js +2 -1
  4. package/dist/breadcrumbs.cjs +2 -2
  5. package/dist/breadcrumbs.js +1 -1
  6. package/dist/button.cjs +3 -3
  7. package/dist/button.js +1 -1
  8. package/dist/callout.cjs +2 -2
  9. package/dist/callout.js +1 -1
  10. package/dist/chat-thread.cjs +7 -6
  11. package/dist/chat-thread.js +5 -4
  12. package/dist/{chunk-PACFMPSX.js → chunk-23KQF47X.js} +5 -5
  13. package/dist/{chunk-PACFMPSX.js.map → chunk-23KQF47X.js.map} +1 -1
  14. package/dist/{chunk-GBR4Q6CP.js → chunk-3AA2KGZG.js} +3 -3
  15. package/dist/{chunk-GBR4Q6CP.js.map → chunk-3AA2KGZG.js.map} +1 -1
  16. package/dist/{chunk-YUNOVQQJ.js → chunk-3S5ED522.js} +12 -2
  17. package/dist/chunk-3S5ED522.js.map +1 -0
  18. package/dist/{chunk-WLDDGIGC.js → chunk-4GPH7HOR.js} +11 -3
  19. package/dist/chunk-4GPH7HOR.js.map +1 -0
  20. package/dist/{chunk-LWOA2ET6.js → chunk-B6WTCAGY.js} +3 -3
  21. package/dist/{chunk-LWOA2ET6.js.map → chunk-B6WTCAGY.js.map} +1 -1
  22. package/dist/{chunk-JKH5ODNG.cjs → chunk-CKO2KCUN.cjs} +9 -9
  23. package/dist/{chunk-JKH5ODNG.cjs.map → chunk-CKO2KCUN.cjs.map} +1 -1
  24. package/dist/{chunk-BQFPC5FL.js → chunk-ESCIXKFT.js} +3 -3
  25. package/dist/{chunk-BQFPC5FL.js.map → chunk-ESCIXKFT.js.map} +1 -1
  26. package/dist/{chunk-35S5BTZH.cjs → chunk-EWE776WI.cjs} +35 -4
  27. package/dist/chunk-EWE776WI.cjs.map +1 -0
  28. package/dist/{chunk-VZ7IDHUY.js → chunk-F4OYQ2XZ.js} +4 -4
  29. package/dist/{chunk-VZ7IDHUY.js.map → chunk-F4OYQ2XZ.js.map} +1 -1
  30. package/dist/{chunk-ND5SBHGH.cjs → chunk-FKZB27OM.cjs} +6 -6
  31. package/dist/{chunk-ND5SBHGH.cjs.map → chunk-FKZB27OM.cjs.map} +1 -1
  32. package/dist/{chunk-IU5WQUUC.js → chunk-FR4RHVPR.js} +34 -6
  33. package/dist/chunk-FR4RHVPR.js.map +1 -0
  34. package/dist/{chunk-EZA6GWZL.cjs → chunk-GK7IGL7N.cjs} +195 -8
  35. package/dist/chunk-GK7IGL7N.cjs.map +1 -0
  36. package/dist/{chunk-KOECVLC4.js → chunk-GSMD5NK5.js} +3 -3
  37. package/dist/{chunk-KOECVLC4.js.map → chunk-GSMD5NK5.js.map} +1 -1
  38. package/dist/{chunk-ZXGX5RI5.cjs → chunk-I2VAGZXY.cjs} +4 -4
  39. package/dist/{chunk-ZXGX5RI5.cjs.map → chunk-I2VAGZXY.cjs.map} +1 -1
  40. package/dist/{chunk-IA6JKI4P.cjs → chunk-K7JOZQRK.cjs} +15 -15
  41. package/dist/{chunk-IA6JKI4P.cjs.map → chunk-K7JOZQRK.cjs.map} +1 -1
  42. package/dist/{chunk-H2YRZYKK.cjs → chunk-KFA7B6WP.cjs} +4 -4
  43. package/dist/{chunk-H2YRZYKK.cjs.map → chunk-KFA7B6WP.cjs.map} +1 -1
  44. package/dist/{chunk-IB673TEG.cjs → chunk-KOAMRCSC.cjs} +12 -2
  45. package/dist/chunk-KOAMRCSC.cjs.map +1 -0
  46. package/dist/{chunk-ZXZJYVWP.js → chunk-KPRSRWNM.js} +3 -3
  47. package/dist/{chunk-ZXZJYVWP.js.map → chunk-KPRSRWNM.js.map} +1 -1
  48. package/dist/{chunk-VNOUXFZ2.cjs → chunk-KSSTFLV2.cjs} +20 -20
  49. package/dist/{chunk-VNOUXFZ2.cjs.map → chunk-KSSTFLV2.cjs.map} +1 -1
  50. package/dist/{chunk-YJHP5FVA.js → chunk-MTDOFZIB.js} +196 -9
  51. package/dist/chunk-MTDOFZIB.js.map +1 -0
  52. package/dist/{chunk-BX6ZVWTO.cjs → chunk-NZHVDWOM.cjs} +11 -3
  53. package/dist/chunk-NZHVDWOM.cjs.map +1 -0
  54. package/dist/chunk-OCHUZ7J3.cjs +60 -0
  55. package/dist/chunk-OCHUZ7J3.cjs.map +1 -0
  56. package/dist/{chunk-BGRVHPGP.cjs → chunk-OUNGGQIS.cjs} +6 -6
  57. package/dist/{chunk-BGRVHPGP.cjs.map → chunk-OUNGGQIS.cjs.map} +1 -1
  58. package/dist/chunk-OZ4QFJ7N.js +58 -0
  59. package/dist/chunk-OZ4QFJ7N.js.map +1 -0
  60. package/dist/{chunk-CQ54H7DZ.cjs → chunk-RZUYCZ5D.cjs} +33 -5
  61. package/dist/chunk-RZUYCZ5D.cjs.map +1 -0
  62. package/dist/{chunk-MOU6O324.cjs → chunk-S53A6JIE.js} +3 -58
  63. package/dist/chunk-S53A6JIE.js.map +1 -0
  64. package/dist/{chunk-X354OVSC.cjs → chunk-SRICSNL4.cjs} +12 -12
  65. package/dist/{chunk-X354OVSC.cjs.map → chunk-SRICSNL4.cjs.map} +1 -1
  66. package/dist/{chunk-3RIBZZLT.js → chunk-TH4JZAMK.js} +5 -5
  67. package/dist/{chunk-3RIBZZLT.js.map → chunk-TH4JZAMK.js.map} +1 -1
  68. package/dist/{chunk-CWWMT57K.js → chunk-WF6AYHOS.js} +4 -4
  69. package/dist/{chunk-CWWMT57K.js.map → chunk-WF6AYHOS.js.map} +1 -1
  70. package/dist/{chunk-A67EDGC7.js → chunk-WJHPZS3U.js} +35 -4
  71. package/dist/chunk-WJHPZS3U.js.map +1 -0
  72. package/dist/{chunk-LCNHEYIM.cjs → chunk-WNWEC5OU.cjs} +3 -3
  73. package/dist/{chunk-LCNHEYIM.cjs.map → chunk-WNWEC5OU.cjs.map} +1 -1
  74. package/dist/{chunk-6FCQD2KQ.js → chunk-X6LGRB4H.cjs} +7 -55
  75. package/dist/chunk-X6LGRB4H.cjs.map +1 -0
  76. package/dist/content-renderer.cjs +5 -5
  77. package/dist/content-renderer.js +2 -2
  78. package/dist/editor.cjs +5 -5
  79. package/dist/editor.js +3 -3
  80. package/dist/index.cjs +58 -57
  81. package/dist/index.cjs.map +1 -1
  82. package/dist/index.d.cts +1 -1
  83. package/dist/index.d.ts +1 -1
  84. package/dist/index.js +16 -15
  85. package/dist/index.js.map +1 -1
  86. package/dist/inputs.cjs +2 -2
  87. package/dist/inputs.js +1 -1
  88. package/dist/json-editor.cjs +16 -15
  89. package/dist/json-editor.js +5 -4
  90. package/dist/magic-wand.cjs +5 -4
  91. package/dist/magic-wand.js +4 -3
  92. package/dist/multi-switch.cjs +2 -2
  93. package/dist/multi-switch.js +1 -1
  94. package/dist/prompt-input.cjs +5 -5
  95. package/dist/prompt-input.js +2 -2
  96. package/dist/reason-tag.cjs +3 -3
  97. package/dist/reason-tag.js +2 -2
  98. package/dist/sidebar.cjs +4 -3
  99. package/dist/sidebar.d.cts +49 -4
  100. package/dist/sidebar.d.ts +49 -4
  101. package/dist/sidebar.js +2 -1
  102. package/dist/tabs.cjs +4 -3
  103. package/dist/tabs.js +2 -1
  104. package/dist/toast.cjs +5 -4
  105. package/dist/toast.js +3 -2
  106. package/docs/Button.md +8 -0
  107. package/docs/Sidebar.md +75 -1
  108. package/package.json +1 -1
  109. package/dist/chunk-35S5BTZH.cjs.map +0 -1
  110. package/dist/chunk-6FCQD2KQ.js.map +0 -1
  111. package/dist/chunk-A67EDGC7.js.map +0 -1
  112. package/dist/chunk-BX6ZVWTO.cjs.map +0 -1
  113. package/dist/chunk-CQ54H7DZ.cjs.map +0 -1
  114. package/dist/chunk-EZA6GWZL.cjs.map +0 -1
  115. package/dist/chunk-IB673TEG.cjs.map +0 -1
  116. package/dist/chunk-IU5WQUUC.js.map +0 -1
  117. package/dist/chunk-MOU6O324.cjs.map +0 -1
  118. package/dist/chunk-WLDDGIGC.js.map +0 -1
  119. package/dist/chunk-YJHP5FVA.js.map +0 -1
  120. package/dist/chunk-YUNOVQQJ.js.map +0 -1
@@ -1,9 +1,11 @@
1
+ import { composeRefs } from './chunk-SV5BW3IA.js';
1
2
  import { useControllableState } from './chunk-EDYAXGUM.js';
2
3
  import { cn } from './chunk-MMW2JGKZ.js';
3
- import { createContext, useMemo, useRef, useCallback, useContext } from 'react';
4
+ import { createContext, useMemo, useContext, useState, useLayoutEffect, useRef, useCallback } from 'react';
4
5
  import { jsx } from 'react/jsx-runtime';
5
6
 
6
7
  var TabsContext = createContext(null);
8
+ var TabsListContext = createContext(null);
7
9
  function useTabs() {
8
10
  const ctx = useContext(TabsContext);
9
11
  if (!ctx) {
@@ -12,8 +14,23 @@ function useTabs() {
12
14
  return ctx;
13
15
  }
14
16
  function TabsList({ children, className }) {
15
- const { variant } = useTabs();
17
+ const { variant, activeTab } = useTabs();
16
18
  const listRef = useRef(null);
19
+ const [fallback, setFallback] = useState(null);
20
+ const refresh = useCallback(() => {
21
+ const list = listRef.current;
22
+ if (!list) return;
23
+ const own = Array.from(list.querySelectorAll('[role="tab"]')).filter(
24
+ (el) => el.closest('[role="tablist"]') === list
25
+ );
26
+ const anyActive = own.some((el) => el.getAttribute("aria-selected") === "true");
27
+ const next = anyActive ? null : own.find((el) => !el.disabled) ?? null;
28
+ setFallback((prev) => prev === next ? prev : next);
29
+ }, []);
30
+ useLayoutEffect(() => {
31
+ refresh();
32
+ }, [refresh, activeTab, children]);
33
+ const listCtx = useMemo(() => ({ fallback, refresh }), [fallback, refresh]);
17
34
  const handleKeyDown = useCallback((e) => {
18
35
  const buttons = listRef.current?.querySelectorAll(
19
36
  '[role="tab"]:not([disabled])'
@@ -47,7 +64,7 @@ function TabsList({ children, className }) {
47
64
  variant === "boxed" && "gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
48
65
  className
49
66
  ),
50
- children
67
+ children: /* @__PURE__ */ jsx(TabsListContext.Provider, { value: listCtx, children })
51
68
  }
52
69
  );
53
70
  }
@@ -61,7 +78,17 @@ function TabsTab({
61
78
  ...rest
62
79
  }) {
63
80
  const { activeTab, setActiveTab, variant } = useTabs();
81
+ const list = useContext(TabsListContext);
64
82
  const isActive = activeTab === value;
83
+ const [node, setNode] = useState(null);
84
+ const externalRef = rest.ref;
85
+ const setRef = useMemo(() => composeRefs(externalRef, setNode), [externalRef]);
86
+ const refresh = list?.refresh;
87
+ useLayoutEffect(() => {
88
+ refresh?.();
89
+ return () => refresh?.();
90
+ }, [refresh, disabled, value]);
91
+ const isStop = isActive || node !== null && list?.fallback === node;
65
92
  return /* @__PURE__ */ jsx(
66
93
  "button",
67
94
  {
@@ -70,12 +97,13 @@ function TabsTab({
70
97
  role: "tab",
71
98
  disabled,
72
99
  "aria-selected": isActive,
73
- tabIndex: isActive ? 0 : -1,
100
+ tabIndex: isStop ? 0 : -1,
74
101
  onClick: (e) => {
75
102
  if (!disabled) setActiveTab(value);
76
103
  onClick?.(e);
77
104
  },
78
105
  ...rest,
106
+ ref: setRef,
79
107
  className: cn(
80
108
  "text-sm font-medium transition-colors",
81
109
  disabled && "cursor-not-allowed opacity-50",
@@ -135,5 +163,5 @@ var Tabs = Object.assign(TabsRoot, {
135
163
  });
136
164
 
137
165
  export { Tabs, useTabs };
138
- //# sourceMappingURL=chunk-IU5WQUUC.js.map
139
- //# sourceMappingURL=chunk-IU5WQUUC.js.map
166
+ //# sourceMappingURL=chunk-FR4RHVPR.js.map
167
+ //# sourceMappingURL=chunk-FR4RHVPR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["useContext","useState","useMemo","useLayoutEffect","jsx"],"mappings":"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","file":"chunk-FR4RHVPR.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\n/**\n * What a `Tabs.List` tells its tabs about the roving tab stop.\n *\n * `fallback` is the tab that takes `tabIndex=0` when NO tab is active (the\n * controlled value matches none), so the tablist stays reachable by keyboard.\n * `refresh` lets a tab ask the list to re-derive it when the tab changes in a\n * way the list did not render for (disabled toggled, mounted, unmounted).\n */\nexport interface TabsListContextValue {\n fallback: HTMLElement | null;\n refresh: () => void;\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n const ctx = useContext(TabsContext);\n if (!ctx) {\n throw new Error(\"Tabs compound components must be used within <Tabs>\");\n }\n return ctx;\n}\n","import { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n const { variant, activeTab } = useTabs();\n const listRef = useRef<HTMLDivElement>(null);\n const [fallback, setFallback] = useState<HTMLElement | null>(null);\n\n // Which tab holds the stop when none is active. Read from the rendered\n // tablist, the same source the arrow keys use, so \"first\" means first in\n // the DOM whatever wraps the tabs. Tabs of a nested tablist are skipped.\n const refresh = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const own = Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n (el) => el.closest('[role=\"tablist\"]') === list,\n );\n const anyActive = own.some((el) => el.getAttribute(\"aria-selected\") === \"true\");\n const next = anyActive\n ? null\n : (own.find((el) => !(el as HTMLButtonElement).disabled) ?? null);\n setFallback((prev) => (prev === next ? prev : next));\n }, []);\n\n useLayoutEffect(() => {\n refresh();\n }, [refresh, activeTab, children]);\n\n const listCtx = useMemo(() => ({ fallback, refresh }), [fallback, refresh]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n '[role=\"tab\"]:not([disabled])',\n );\n if (!buttons?.length) return;\n\n const items = Array.from(buttons);\n const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next].focus();\n items[next].click();\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev].focus();\n items[prev].click();\n }\n }, []);\n\n return (\n <div\n data-react-fancy-tabs-list=\"\"\n ref={listRef}\n role=\"tablist\"\n onKeyDown={handleKeyDown}\n className={cn(\n \"flex\",\n variant === \"underline\" && \"gap-0 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n variant === \"pills\" && \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n variant === \"boxed\" &&\n \"gap-0 rounded-lg bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] p-1 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n <TabsListContext.Provider value={listCtx}>{children}</TabsListContext.Provider>\n </div>\n );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { useContext, useLayoutEffect, useMemo, useState, type Ref } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport { TabsListContext, useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n children,\n value,\n disabled = false,\n className,\n onClick,\n ...rest\n}: TabsTabProps) {\n const { activeTab, setActiveTab, variant } = useTabs();\n const list = useContext(TabsListContext);\n const isActive = activeTab === value;\n\n // The node lives in state, not a ref, so comparing it to the list's\n // fallback during render is a pure read.\n const [node, setNode] = useState<HTMLButtonElement | null>(null);\n const externalRef = (rest as { ref?: Ref<HTMLButtonElement> }).ref;\n const setRef = useMemo(() => composeRefs(externalRef, setNode), [externalRef]);\n\n // Re-derive the fallback when this tab changes in a way the list may not\n // have rendered for, and when it leaves.\n const refresh = list?.refresh;\n useLayoutEffect(() => {\n refresh?.();\n return () => refresh?.();\n }, [refresh, disabled, value]);\n\n // Roving tabindex: the active tab holds the stop. When no tab is active the\n // list names the first enabled one, so the tablist is never unreachable.\n const isStop = isActive || (node !== null && list?.fallback === node);\n\n return (\n <button\n data-react-fancy-tabs-tab=\"\"\n type=\"button\"\n role=\"tab\"\n disabled={disabled}\n aria-selected={isActive}\n tabIndex={isStop ? 0 : -1}\n onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n {...rest}\n ref={setRef}\n className={cn(\n \"text-sm font-medium transition-colors\",\n disabled && \"cursor-not-allowed opacity-50\",\n variant === \"underline\" && [\n \"border-b-2 px-4 py-2.5\",\n isActive\n ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n : \"border-transparent text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:border-zinc-300 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n ],\n variant === \"pills\" && [\n \"rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n variant === \"boxed\" && [\n \"flex-1 rounded-md px-4 py-1.5\",\n isActive\n ? \"bg-[color:var(--fancy-surface,var(--color-white))] text-zinc-900 shadow-sm dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-white\"\n : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\",\n ],\n className,\n )}\n >\n {children}\n </button>\n );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n const { activeTab } = useTabs();\n\n if (activeTab !== value) return null;\n\n return (\n <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n {children}\n </div>\n );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n children,\n defaultTab = \"\",\n activeTab: controlledTab,\n onTabChange,\n variant = \"underline\",\n className,\n}: TabsProps) {\n const [activeTab, setActiveTab] = useControllableState(\n controlledTab,\n defaultTab,\n onTabChange,\n );\n\n const ctx = useMemo(\n () => ({ activeTab, setActiveTab, variant }),\n [activeTab, setActiveTab, variant],\n );\n\n return (\n <TabsContext.Provider value={ctx}>\n <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n </TabsContext.Provider>\n );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Tab: TabsTab,\n Panels: TabsPanels,\n Panel: TabsPanel,\n});\n"]}
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var chunkX6LGRB4H_cjs = require('./chunk-X6LGRB4H.cjs');
3
4
  var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
4
5
  var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
5
6
  var react = require('react');
@@ -14,6 +15,99 @@ function useSidebar() {
14
15
  }
15
16
  return ctx;
16
17
  }
18
+ var ITEM_SELECTOR = "[data-react-fancy-sidebar-item], [data-react-fancy-sidebar-submenu] > button";
19
+ var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
20
+ function inClosedSubmenu(el, root) {
21
+ let sub = el.parentElement?.closest("[data-react-fancy-sidebar-submenu]");
22
+ while (sub && root.contains(sub)) {
23
+ const trigger = sub.querySelector(":scope > button");
24
+ if (trigger && trigger !== el && trigger.getAttribute("aria-expanded") === "false") {
25
+ return true;
26
+ }
27
+ sub = sub.parentElement?.closest("[data-react-fancy-sidebar-submenu]");
28
+ }
29
+ return false;
30
+ }
31
+ function isNavigable(el, root) {
32
+ if (el.getAttribute("aria-disabled") === "true") return false;
33
+ if (el.disabled) return false;
34
+ return !inClosedSubmenu(el, root);
35
+ }
36
+ function allItems(root) {
37
+ return Array.from(root.querySelectorAll(ITEM_SELECTOR));
38
+ }
39
+ function useSidebarKeyboardNav(rootRef, enabled) {
40
+ react.useEffect(() => {
41
+ const root = rootRef.current;
42
+ if (!enabled || !root) return;
43
+ const touched = /* @__PURE__ */ new Set();
44
+ let current = null;
45
+ const apply = () => {
46
+ const items = allItems(root);
47
+ const navigable = items.filter((el) => isNavigable(el, root));
48
+ if (!current || !navigable.includes(current)) {
49
+ current = navigable.find((el) => el.getAttribute("aria-current") === "page") ?? navigable[0] ?? null;
50
+ }
51
+ for (const el of items) {
52
+ const want = el === current ? "0" : "-1";
53
+ if (el.getAttribute("tabindex") !== want) el.setAttribute("tabindex", want);
54
+ touched.add(el);
55
+ }
56
+ };
57
+ const onFocusIn = (event) => {
58
+ const target = event.target;
59
+ if (!target || !target.matches(ITEM_SELECTOR) || !root.contains(target)) return;
60
+ if (!isNavigable(target, root)) return;
61
+ current = target;
62
+ apply();
63
+ };
64
+ apply();
65
+ root.addEventListener("focusin", onFocusIn);
66
+ const observer = new MutationObserver(apply);
67
+ observer.observe(root, {
68
+ childList: true,
69
+ subtree: true,
70
+ attributes: true,
71
+ // NOT tabindex: that is what `apply` writes.
72
+ attributeFilter: ["aria-disabled", "aria-expanded", "aria-current", "disabled"]
73
+ });
74
+ return () => {
75
+ observer.disconnect();
76
+ root.removeEventListener("focusin", onFocusIn);
77
+ for (const el of touched) el.removeAttribute("tabindex");
78
+ };
79
+ }, [rootRef, enabled]);
80
+ const onKeyDown = react.useCallback(
81
+ (event) => {
82
+ const root = rootRef.current;
83
+ if (!root || !NAV_KEYS.has(event.key)) return;
84
+ if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
85
+ const target = event.target;
86
+ if (!target.matches(ITEM_SELECTOR)) return;
87
+ const items = allItems(root);
88
+ const navigable = items.filter((el) => isNavigable(el, root));
89
+ if (navigable.length === 0) return;
90
+ let next;
91
+ if (event.key === "Home") next = navigable[0];
92
+ else if (event.key === "End") next = navigable[navigable.length - 1];
93
+ else {
94
+ const from = items.indexOf(target);
95
+ const step = event.key === "ArrowDown" ? 1 : -1;
96
+ for (let i = from + step; i >= 0 && i < items.length; i += step) {
97
+ if (navigable.includes(items[i])) {
98
+ next = items[i];
99
+ break;
100
+ }
101
+ }
102
+ }
103
+ event.preventDefault();
104
+ next?.focus();
105
+ },
106
+ [rootRef]
107
+ );
108
+ return enabled ? onKeyDown : void 0;
109
+ }
110
+ var DOT_BASE = "pointer-events-none absolute h-2 w-2 rounded-full ring-2 ring-[color:var(--fancy-surface,var(--color-white))] dark:ring-[color:var(--fancy-surface-dark,var(--color-zinc-900))]";
17
111
  function getLetters(children) {
18
112
  if (typeof children === "string") return children.slice(0, 3);
19
113
  return "...";
@@ -26,6 +120,9 @@ function SidebarItem({
26
120
  active = false,
27
121
  disabled = false,
28
122
  badge,
123
+ collapsedBadge = false,
124
+ dot,
125
+ dotLabel,
29
126
  onClick,
30
127
  className,
31
128
  ...rest
@@ -37,6 +134,47 @@ function SidebarItem({
37
134
  const showIconOnly = collapsed && collapseMode === "icons" && icon;
38
135
  const showLetters = collapsed && (collapseMode === "letters" || collapseMode === "icons" && !icon);
39
136
  const title = typeof children === "string" ? children : void 0;
137
+ const dotColor = dot === true ? "red" : dot || null;
138
+ const showCollapsedBadge = collapsed && collapsedBadge && Boolean(badge);
139
+ const hasMarks = dotColor !== null || showCollapsedBadge;
140
+ const dotLabelEl = dotColor && dotLabel ? (
141
+ // The spaces are load-bearing: adjacent inline elements concatenate in
142
+ // the accessible name, so without them it reads "Inbox3 unread".
143
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", "data-react-fancy-sidebar-dot-label": "", children: [
144
+ " ",
145
+ dotLabel,
146
+ " "
147
+ ] })
148
+ ) : null;
149
+ const needsHiddenLabel = collapsed && (dotLabelEl !== null || showCollapsedBadge);
150
+ const renderMarks = (anchoredToItem) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
151
+ showCollapsedBadge && /* @__PURE__ */ jsxRuntime.jsx(
152
+ "span",
153
+ {
154
+ "data-react-fancy-sidebar-badge": "",
155
+ className: "pointer-events-none absolute -right-3 -top-2.5 whitespace-nowrap",
156
+ children: badge
157
+ }
158
+ ),
159
+ dotColor && /* @__PURE__ */ jsxRuntime.jsx(
160
+ "span",
161
+ {
162
+ "aria-hidden": "true",
163
+ "data-react-fancy-sidebar-dot": "",
164
+ "data-color": dotColor,
165
+ "data-position": showCollapsedBadge ? "bottom" : "top",
166
+ className: chunkZU5Q77OT_cjs.cn(
167
+ DOT_BASE,
168
+ chunkX6LGRB4H_cjs.badgeDot[dotColor],
169
+ anchoredToItem ? "right-1.5 top-1.5" : showCollapsedBadge ? "-bottom-0.5 -right-0.5" : "-right-0.5 -top-0.5"
170
+ )
171
+ }
172
+ )
173
+ ] });
174
+ const iconClass = chunkZU5Q77OT_cjs.cn(
175
+ "flex h-5 w-5 shrink-0 items-center justify-center",
176
+ hasMarks && "relative"
177
+ );
40
178
  return /* @__PURE__ */ jsxRuntime.jsxs(
41
179
  Tag,
42
180
  {
@@ -59,14 +197,40 @@ function SidebarItem({
59
197
  collapsed ? "justify-center px-2 py-2" : "gap-2 px-3 py-2",
60
198
  active ? "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]" : "text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]",
61
199
  disabled && "pointer-events-none opacity-50",
200
+ // Containing block for the visually hidden labels, and for a dot that
201
+ // has no icon to sit on.
202
+ hasMarks && "relative",
62
203
  className
63
204
  ),
64
205
  children: [
65
- showIconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
66
- showLetters && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase", children: getLetters(children) }),
206
+ needsHiddenLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", "data-react-fancy-sidebar-label": "", children: [
207
+ children,
208
+ " "
209
+ ] }),
210
+ collapsed && dotLabelEl,
211
+ showIconOnly && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: iconClass, children: [
212
+ icon,
213
+ renderMarks(false)
214
+ ] }),
215
+ showLetters && /* @__PURE__ */ jsxRuntime.jsxs(
216
+ "span",
217
+ {
218
+ className: chunkZU5Q77OT_cjs.cn("text-xs font-semibold uppercase", hasMarks && "relative"),
219
+ "aria-hidden": needsHiddenLabel || void 0,
220
+ children: [
221
+ getLetters(children),
222
+ renderMarks(false)
223
+ ]
224
+ }
225
+ ),
67
226
  !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
68
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
227
+ icon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: iconClass, children: [
228
+ icon,
229
+ renderMarks(false)
230
+ ] }),
231
+ !icon && renderMarks(true),
69
232
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
233
+ dotLabelEl,
70
234
  badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
71
235
  ] })
72
236
  ]
@@ -94,7 +258,7 @@ function SidebarSubmenu({
94
258
  className
95
259
  }) {
96
260
  const [open, setOpen] = react.useState(defaultOpen);
97
- const { collapsed, collapseMode } = useSidebar();
261
+ const { collapsed, collapseMode, keyboardNav } = useSidebar();
98
262
  const showIconOnly = collapsed && collapseMode === "icons" && icon;
99
263
  const showLetters = collapsed && (collapseMode === "letters" || collapseMode === "icons" && !icon);
100
264
  if (collapsed) {
@@ -121,6 +285,7 @@ function SidebarSubmenu({
121
285
  "button",
122
286
  {
123
287
  type: "button",
288
+ "aria-expanded": keyboardNav ? open : void 0,
124
289
  onClick: () => setOpen((v) => !v),
125
290
  className: chunkZU5Q77OT_cjs.cn(
126
291
  "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
@@ -181,6 +346,8 @@ function SidebarRoot({
181
346
  onCollapsedChange,
182
347
  collapseMode = "icons",
183
348
  embedded = false,
349
+ navLabel,
350
+ keyboardNav = false,
184
351
  className
185
352
  }) {
186
353
  const [collapsed, setCollapsed] = chunkSNHU2AI4_cjs.useControllableState(
@@ -188,9 +355,13 @@ function SidebarRoot({
188
355
  defaultCollapsed,
189
356
  onCollapsedChange
190
357
  );
191
- return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { collapsed, collapseMode, setCollapsed }, children: /* @__PURE__ */ jsxRuntime.jsx(
358
+ const rootRef = react.useRef(null);
359
+ const onKeyDown = useSidebarKeyboardNav(rootRef, keyboardNav);
360
+ return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { collapsed, collapseMode, setCollapsed, keyboardNav }, children: /* @__PURE__ */ jsxRuntime.jsx(
192
361
  "aside",
193
362
  {
363
+ ref: rootRef,
364
+ onKeyDown,
194
365
  "data-react-fancy-sidebar": "",
195
366
  "data-collapsed": collapsed || void 0,
196
367
  "data-embedded": embedded || void 0,
@@ -206,7 +377,23 @@ function SidebarRoot({
206
377
  collapsed ? "w-16" : embedded ? "w-full" : "w-60",
207
378
  className
208
379
  ),
209
- children
380
+ children: navLabel ? (
381
+ // The <aside> is a complementary landmark, not a navigation one, so
382
+ // without this a screen reader's landmark list shows no navigation.
383
+ // Opt-in: an element between the <aside> and its children is a DOM
384
+ // change a consumer's CSS (`aside > a`) or tests may depend on. The
385
+ // <nav> takes over the column layout and fills the rail, so a footer
386
+ // pushed down with `mt-auto` still reaches the bottom.
387
+ /* @__PURE__ */ jsxRuntime.jsx(
388
+ "nav",
389
+ {
390
+ "data-react-fancy-sidebar-nav": "",
391
+ "aria-label": navLabel,
392
+ className: "flex min-h-0 flex-1 flex-col gap-0.5",
393
+ children
394
+ }
395
+ )
396
+ ) : children
210
397
  }
211
398
  ) });
212
399
  }
@@ -219,5 +406,5 @@ var Sidebar = Object.assign(SidebarRoot, {
219
406
 
220
407
  exports.Sidebar = Sidebar;
221
408
  exports.useSidebar = useSidebar;
222
- //# sourceMappingURL=chunk-EZA6GWZL.cjs.map
223
- //# sourceMappingURL=chunk-EZA6GWZL.cjs.map
409
+ //# sourceMappingURL=chunk-GK7IGL7N.cjs.map
410
+ //# sourceMappingURL=chunk-GK7IGL7N.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Sidebar/Sidebar.context.ts","../src/components/Sidebar/Sidebar.keyboard.ts","../src/components/Sidebar/SidebarItem.tsx","../src/components/Sidebar/SidebarGroup.tsx","../src/components/Sidebar/SidebarSubmenu.tsx","../src/components/Sidebar/SidebarToggle.tsx","../src/components/Sidebar/Sidebar.tsx"],"names":["createContext","useContext","useEffect","useCallback","jsxs","Fragment","jsx","cn","badgeDot","getLetters","useState","ChevronDown","PanelLeftOpen","PanelLeftClose","useControllableState","useRef"],"mappings":"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","file":"chunk-GK7IGL7N.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SidebarContextValue } from \"./Sidebar.types\";\n\nexport const SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar(): SidebarContextValue {\n const ctx = useContext(SidebarContext);\n if (!ctx) {\n throw new Error(\"useSidebar must be used within a <Sidebar> component\");\n }\n return ctx;\n}\n","import { useCallback, useEffect, type KeyboardEvent, type RefObject } from \"react\";\n\n/**\n * What arrow keys move between: every `Sidebar.Item`, plus an EXPANDED\n * `Sidebar.Submenu`'s trigger button. (A collapsed submenu renders a plain\n * `<div>`, which is not focusable, so there is nothing to move to.)\n *\n * Selected by the handles the components already render, so `keyboardNav`\n * adds no markup to a Sidebar that does not use it.\n */\nconst ITEM_SELECTOR =\n \"[data-react-fancy-sidebar-item], [data-react-fancy-sidebar-submenu] > button\";\n\nconst NAV_KEYS = new Set([\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"]);\n\n/**\n * Inside a closed submenu — the panel is collapsed to zero height but its\n * items are still mounted, so without this they would be focusable while\n * invisible. `SidebarSubmenu` sets `aria-expanded` on its trigger only when\n * `keyboardNav` is on; a submenu's OWN trigger is not inside its panel.\n */\nfunction inClosedSubmenu(el: HTMLElement, root: HTMLElement): boolean {\n let sub = el.parentElement?.closest<HTMLElement>(\"[data-react-fancy-sidebar-submenu]\");\n while (sub && root.contains(sub)) {\n const trigger = sub.querySelector<HTMLElement>(\":scope > button\");\n if (trigger && trigger !== el && trigger.getAttribute(\"aria-expanded\") === \"false\") {\n return true;\n }\n sub = sub.parentElement?.closest<HTMLElement>(\"[data-react-fancy-sidebar-submenu]\");\n }\n return false;\n}\n\nfunction isNavigable(el: HTMLElement, root: HTMLElement): boolean {\n if (el.getAttribute(\"aria-disabled\") === \"true\") return false;\n if ((el as HTMLButtonElement).disabled) return false;\n return !inClosedSubmenu(el, root);\n}\n\nfunction allItems(root: HTMLElement): HTMLElement[] {\n return Array.from(root.querySelectorAll<HTMLElement>(ITEM_SELECTOR));\n}\n\n/**\n * Roving tabindex + ArrowUp / ArrowDown / Home / End for `Sidebar keyboardNav`.\n *\n * The tab stop is kept on the DOM rather than in React state because items\n * can mount from anywhere below the root (a consumer's own component, a\n * submenu opening) without the root re-rendering. A MutationObserver re-applies\n * it when the set of items, or their disabled / expanded / current state,\n * changes; focus moving onto an item (by click, Tab or arrow) makes that item\n * the stop. Turning `keyboardNav` off removes every tabindex it set.\n *\n * React never renders a `tabIndex` on these items itself, so writing the\n * attribute does not fight reconciliation. (A consumer who passes `tabIndex`\n * to an item while `keyboardNav` is on is overriding the roving stop, and\n * React will reassert theirs on its next render of that item.)\n */\nexport function useSidebarKeyboardNav(\n rootRef: RefObject<HTMLElement | null>,\n enabled: boolean,\n): ((event: KeyboardEvent<HTMLElement>) => void) | undefined {\n useEffect(() => {\n const root = rootRef.current;\n if (!enabled || !root) return;\n\n const touched = new Set<HTMLElement>();\n let current: HTMLElement | null = null;\n\n const apply = () => {\n const items = allItems(root);\n const navigable = items.filter((el) => isNavigable(el, root));\n if (!current || !navigable.includes(current)) {\n current =\n navigable.find((el) => el.getAttribute(\"aria-current\") === \"page\") ??\n navigable[0] ??\n null;\n }\n for (const el of items) {\n const want = el === current ? \"0\" : \"-1\";\n if (el.getAttribute(\"tabindex\") !== want) el.setAttribute(\"tabindex\", want);\n touched.add(el);\n }\n };\n\n const onFocusIn = (event: FocusEvent) => {\n const target = event.target as HTMLElement | null;\n if (!target || !target.matches(ITEM_SELECTOR) || !root.contains(target)) return;\n if (!isNavigable(target, root)) return;\n current = target;\n apply();\n };\n\n apply();\n root.addEventListener(\"focusin\", onFocusIn);\n const observer = new MutationObserver(apply);\n observer.observe(root, {\n childList: true,\n subtree: true,\n attributes: true,\n // NOT tabindex: that is what `apply` writes.\n attributeFilter: [\"aria-disabled\", \"aria-expanded\", \"aria-current\", \"disabled\"],\n });\n\n return () => {\n observer.disconnect();\n root.removeEventListener(\"focusin\", onFocusIn);\n for (const el of touched) el.removeAttribute(\"tabindex\");\n };\n }, [rootRef, enabled]);\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n const root = rootRef.current;\n if (!root || !NAV_KEYS.has(event.key)) return;\n if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n // Only when an ITEM has focus. An input, textarea, select or\n // contenteditable inside the sidebar (a filter box, say) keeps its keys:\n // it does not match the item selector, so it never gets here.\n const target = event.target as HTMLElement;\n if (!target.matches(ITEM_SELECTOR)) return;\n\n const items = allItems(root);\n const navigable = items.filter((el) => isNavigable(el, root));\n if (navigable.length === 0) return;\n\n let next: HTMLElement | undefined;\n if (event.key === \"Home\") next = navigable[0];\n else if (event.key === \"End\") next = navigable[navigable.length - 1];\n else {\n // Walk from the target's position among ALL items, so a focused item\n // that is itself not navigable (disabled while focused) still moves.\n const from = items.indexOf(target);\n const step = event.key === \"ArrowDown\" ? 1 : -1;\n for (let i = from + step; i >= 0 && i < items.length; i += step) {\n if (navigable.includes(items[i])) {\n next = items[i];\n break;\n }\n }\n }\n\n // Handled either way: an arrow at the end of the list must not scroll\n // the page instead. No wrap, matching a list rather than a menu.\n event.preventDefault();\n next?.focus();\n },\n [rootRef],\n );\n\n return enabled ? onKeyDown : undefined;\n}\n","import type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { badgeDot } from \"../Badge/Badge.colors\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarDotColor, SidebarItemProps } from \"./Sidebar.types\";\n\n/**\n * The surface-coloured ring separates the dot from whatever it sits on (an\n * icon, the active-row fill) in both modes.\n */\nconst DOT_BASE =\n \"pointer-events-none absolute h-2 w-2 rounded-full ring-2 ring-[color:var(--fancy-surface,var(--color-white))] dark:ring-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\";\n\n/** Extract first 3 characters from a ReactNode if it's a string. */\nfunction getLetters(children: React.ReactNode): string {\n if (typeof children === \"string\") return children.slice(0, 3);\n return \"...\";\n}\n\nexport function SidebarItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n collapsedBadge = false,\n dot,\n dotLabel,\n onClick,\n className,\n ...rest\n}: SidebarItemProps) {\n const { collapsed, collapseMode } = useSidebar();\n\n // Link mode engages on `href` OR `as` — a `to`-based router (TanStack Router,\n // React Router) passes no href, and would otherwise render a <button> that\n // navigates nowhere. `onClick` now rides along in link mode instead of being\n // dropped: an item that both navigates and closes a drawer is the common case.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n const title = typeof children === \"string\" ? children : undefined;\n\n // --- Attention marks (6.1.0). All of this is inert unless `dot` or\n // `collapsedBadge` is passed, so an item without them renders exactly the\n // markup it always did.\n const dotColor: SidebarDotColor | null = dot === true ? \"red\" : dot || null;\n const showCollapsedBadge = collapsed && collapsedBadge && Boolean(badge);\n const hasMarks = dotColor !== null || showCollapsedBadge;\n const dotLabelEl =\n dotColor && dotLabel ? (\n // The spaces are load-bearing: adjacent inline elements concatenate in\n // the accessible name, so without them it reads \"Inbox3 unread\".\n <span className=\"sr-only\" data-react-fancy-sidebar-dot-label=\"\">\n {\" \"}\n {dotLabel}{\" \"}\n </span>\n ) : null;\n // Collapsed, the item's visible content is only an icon (or an\n // abbreviation), and its name came from `title`. But accname takes CONTENT\n // over `title`, so a dot label or a badge count would become the item's\n // whole name (\"3 unread\" instead of \"Inbox\"). A visually hidden copy of the\n // label keeps the name first.\n const needsHiddenLabel = collapsed && (dotLabelEl !== null || showCollapsedBadge);\n\n const renderMarks = (anchoredToItem: boolean): ReactNode => (\n <>\n {showCollapsedBadge && (\n <span\n data-react-fancy-sidebar-badge=\"\"\n className=\"pointer-events-none absolute -right-3 -top-2.5 whitespace-nowrap\"\n >\n {badge}\n </span>\n )}\n {dotColor && (\n <span\n aria-hidden=\"true\"\n data-react-fancy-sidebar-dot=\"\"\n data-color={dotColor}\n // A collapsed badge takes the top corner; the dot moves to the\n // bottom one rather than hiding under it.\n data-position={showCollapsedBadge ? \"bottom\" : \"top\"}\n className={cn(\n DOT_BASE,\n badgeDot[dotColor],\n anchoredToItem\n ? \"right-1.5 top-1.5\"\n : showCollapsedBadge\n ? \"-bottom-0.5 -right-0.5\"\n : \"-right-0.5 -top-0.5\",\n )}\n />\n )}\n </>\n );\n // Marks sit at the icon's corner when there is an icon, at the letters'\n // corner on a lettered rail, and at the item's own corner otherwise.\n const iconClass = cn(\n \"flex h-5 w-5 shrink-0 items-center justify-center\",\n hasMarks && \"relative\",\n );\n\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-sidebar-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n title={collapsed ? title : undefined}\n className={cn(\n // `w-full` matters when the Tag is a <button>: form controls size to\n // FIT-CONTENT, not to their parent, so a long label made the item wider\n // than the sidebar and an ancestor clipped the overflow — which reads as\n // a label cut off mid-word rather than an ellipsis. Without this,\n // `min-w-0` on the label below can never engage, because the item is\n // never under width pressure in the first place.\n \"flex w-full items-center rounded-md text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n collapsed ? \"justify-center px-2 py-2\" : \"gap-2 px-3 py-2\",\n active\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n disabled && \"pointer-events-none opacity-50\",\n // Containing block for the visually hidden labels, and for a dot that\n // has no icon to sit on.\n hasMarks && \"relative\",\n className,\n )}\n >\n {needsHiddenLabel && (\n <span className=\"sr-only\" data-react-fancy-sidebar-label=\"\">\n {children}{\" \"}\n </span>\n )}\n {collapsed && dotLabelEl}\n {showIconOnly && (\n <span className={iconClass}>\n {icon}\n {renderMarks(false)}\n </span>\n )}\n {showLetters && (\n <span\n className={cn(\"text-xs font-semibold uppercase\", hasMarks && \"relative\")}\n // The abbreviation would otherwise read as part of the name (\"Inb\").\n aria-hidden={needsHiddenLabel || undefined}\n >\n {getLetters(children)}\n {renderMarks(false)}\n </span>\n )}\n {!collapsed && (\n <>\n {icon && (\n <span className={iconClass}>\n {icon}\n {renderMarks(false)}\n </span>\n )}\n {!icon && renderMarks(true)}\n {/*\n `min-w-0` is load-bearing, not tidiness. A flex item defaults to\n `min-width: auto`, which resolves to its MIN-CONTENT width — so with\n `truncate` alone the span refuses to shrink below the full label,\n and the item grows wider than the sidebar instead of ellipsing.\n The overflow then gets clipped by an ancestor, which looks like a\n mid-word cut rather than a truncation.\n\n Only shows up with labels longer than the sidebar is wide, which is\n why it survived: short nav labels never trigger it.\n */}\n <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n {dotLabelEl}\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </>\n )}\n </Tag>\n );\n}\n\nSidebarItem.displayName = \"SidebarItem\";\n","import { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarGroupProps } from \"./Sidebar.types\";\n\nexport function SidebarGroup({ children, label, className }: SidebarGroupProps) {\n const { collapsed } = useSidebar();\n\n return (\n <div data-react-fancy-sidebar-group=\"\" className={cn(\"py-1\", className)}>\n {label && !collapsed && (\n <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n {label}\n </p>\n )}\n {label && collapsed && (\n <div className=\"mx-auto mb-1 h-px w-6 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\" />\n )}\n {children}\n </div>\n );\n}\n\nSidebarGroup.displayName = \"SidebarGroup\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarSubmenuProps } from \"./Sidebar.types\";\n\n/** Extract first 3 characters from a string. */\nfunction getLetters(label: string): string {\n return label.slice(0, 3);\n}\n\nexport function SidebarSubmenu({\n children,\n label,\n icon,\n defaultOpen = false,\n className,\n}: SidebarSubmenuProps) {\n const [open, setOpen] = useState(defaultOpen);\n const { collapsed, collapseMode, keyboardNav } = useSidebar();\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n // When collapsed, just show the icon/letters as a simple item (no expand)\n if (collapsed) {\n return (\n <div\n data-react-fancy-sidebar-submenu=\"\"\n title={label}\n className={cn(\n \"flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium transition-colors\",\n \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))]\",\n \"dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n className,\n )}\n >\n {showIconOnly && (\n <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>\n )}\n {showLetters && (\n <span className=\"text-xs font-semibold uppercase\">{getLetters(label)}</span>\n )}\n </div>\n );\n }\n\n return (\n <div data-react-fancy-sidebar-submenu=\"\" className={className}>\n <button\n type=\"button\"\n // Only with `keyboardNav`, which reads it to skip a closed panel's\n // still-mounted items; without it the markup is unchanged from 6.0.\n aria-expanded={keyboardNav ? open : undefined}\n onClick={() => setOpen((v) => !v)}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))]\",\n \"dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 text-left\">{label}</span>\n <ChevronDown\n className={cn(\n \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n open && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows] duration-200\",\n open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nSidebarSubmenu.displayName = \"SidebarSubmenu\";\n","import { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarToggleProps } from \"./Sidebar.types\";\n\nexport function SidebarToggle({ className }: SidebarToggleProps) {\n const { collapsed, setCollapsed } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-react-fancy-sidebar-toggle=\"\"\n onClick={() => setCollapsed(!collapsed)}\n title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n className={cn(\n \"flex items-center justify-center rounded-md p-1.5 text-zinc-400 transition-colors\",\n \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\",\n className,\n )}\n >\n {collapsed ? (\n <PanelLeftOpen className=\"h-4 w-4\" />\n ) : (\n <PanelLeftClose className=\"h-4 w-4\" />\n )}\n </button>\n );\n}\n\nSidebarToggle.displayName = \"SidebarToggle\";\n","import { useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks\";\nimport { SidebarContext } from \"./Sidebar.context\";\nimport { useSidebarKeyboardNav } from \"./Sidebar.keyboard\";\nimport { SidebarItem } from \"./SidebarItem\";\nimport { SidebarGroup } from \"./SidebarGroup\";\nimport { SidebarSubmenu } from \"./SidebarSubmenu\";\nimport { SidebarToggle } from \"./SidebarToggle\";\nimport type { SidebarProps } from \"./Sidebar.types\";\n\nfunction SidebarRoot({\n children,\n collapsed: controlledCollapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapseMode = \"icons\",\n embedded = false,\n navLabel,\n keyboardNav = false,\n className,\n}: SidebarProps) {\n const [collapsed, setCollapsed] = useControllableState(\n controlledCollapsed,\n defaultCollapsed,\n onCollapsedChange,\n );\n const rootRef = useRef<HTMLElement>(null);\n const onKeyDown = useSidebarKeyboardNav(rootRef, keyboardNav);\n\n return (\n <SidebarContext.Provider value={{ collapsed, collapseMode, setCollapsed, keyboardNav }}>\n <aside\n ref={rootRef}\n onKeyDown={onKeyDown}\n data-react-fancy-sidebar=\"\"\n data-collapsed={collapsed || undefined}\n data-embedded={embedded || undefined}\n className={cn(\n \"flex flex-col gap-0.5 transition-[width] duration-200\",\n // The app-shell chrome. Correct for the rail this is usually used as,\n // and actively wrong inside a container that already draws its own —\n // a 240px rail in a 300px card puts its right border 240px in, which\n // reads as a stray line slicing the panel rather than an edge.\n !embedded && \"border-r border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n // Collapsed is a fixed icon rail either way; only the expanded width\n // defers to the container.\n collapsed ? \"w-16\" : embedded ? \"w-full\" : \"w-60\",\n className,\n )}\n >\n {navLabel ? (\n // The <aside> is a complementary landmark, not a navigation one, so\n // without this a screen reader's landmark list shows no navigation.\n // Opt-in: an element between the <aside> and its children is a DOM\n // change a consumer's CSS (`aside > a`) or tests may depend on. The\n // <nav> takes over the column layout and fills the rail, so a footer\n // pushed down with `mt-auto` still reaches the bottom.\n <nav\n data-react-fancy-sidebar-nav=\"\"\n aria-label={navLabel}\n className=\"flex min-h-0 flex-1 flex-col gap-0.5\"\n >\n {children}\n </nav>\n ) : (\n children\n )}\n </aside>\n </SidebarContext.Provider>\n );\n}\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Item: SidebarItem,\n Group: SidebarGroup,\n Submenu: SidebarSubmenu,\n Toggle: SidebarToggle,\n});\n"]}
@@ -1,5 +1,5 @@
1
1
  import { Popover } from './chunk-QTS4Q2NK.js';
2
- import { Button } from './chunk-WLDDGIGC.js';
2
+ import { Button } from './chunk-4GPH7HOR.js';
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
 
5
5
  var CONFIDENCE_TIERS = [
@@ -113,5 +113,5 @@ function ReasonTag({
113
113
  }
114
114
 
115
115
  export { ReasonTag };
116
- //# sourceMappingURL=chunk-KOECVLC4.js.map
117
- //# sourceMappingURL=chunk-KOECVLC4.js.map
116
+ //# sourceMappingURL=chunk-GSMD5NK5.js.map
117
+ //# sourceMappingURL=chunk-GSMD5NK5.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":[],"mappings":"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","file":"chunk-KOECVLC4.js","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n * <ReasonTag\n * value=\"$1.4M\"\n * reason=\"Projected Q3 ARR after stacking renewals.\"\n * confidence={0.91}\n * sources={[{ label: \"Q2 actuals · CRM export\" }]}\n * by=\"Forecaster\"\n * />\n *\n * Three visual styles:\n * • \"dot\" — value with a tiny coloured dot (default, subtle)\n * • \"underline\" — dotted underline + trailing \"?\"\n * • \"chip\" — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n /** The value the tag wraps — usually a number, label, or short phrase. */\n value: React.ReactNode;\n /** Free-text rationale shown in the popover / inline annotation. */\n reason: string;\n /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n confidence?: number;\n /** Optional list of sources (label + optional href). */\n sources?: ReasonTagSource[];\n /** Optional author / agent name shown in the popover header. */\n by?: string;\n /** Visual treatment for the trigger. */\n theme?: ReasonTagTheme;\n /**\n * When true, the popover is replaced with an always-visible inline\n * annotation below the value.\n */\n pinned?: boolean;\n /** Called when the user hits the \"ask follow-up\" action. */\n onFollowUp?: () => void;\n /** Optional className applied to the trigger element. */\n className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n { min: 0.85, color: \"#10b981\", label: \"high\" },\n { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n value,\n reason,\n confidence = 1,\n sources = [],\n by,\n theme = \"dot\",\n pinned = false,\n onFollowUp,\n className,\n}: ReasonTagProps) {\n const t = tier(confidence);\n\n const trigger =\n theme === \"chip\" ? (\n <span\n className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n style={{ backgroundColor: t.color + \"22\", color: t.color }}\n >\n <span\n className=\"h-1.5 w-1.5 rounded-full\"\n style={{ backgroundColor: t.color }}\n />\n {value}\n <span className=\"text-[10px] opacity-70\">?</span>\n </span>\n ) : theme === \"underline\" ? (\n <span\n className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n style={{ textDecorationColor: t.color }}\n >\n {value}\n <span\n className=\"ml-0.5 font-mono text-[10px]\"\n style={{ color: t.color }}\n >\n ?\n </span>\n </span>\n ) : (\n <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n <span className=\"font-medium\">{value}</span>\n <span\n className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n style={{ backgroundColor: t.color }}\n title=\"reason available\"\n />\n </span>\n );\n\n if (pinned) {\n return (\n <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n {trigger}\n <span\n className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n style={{ borderColor: t.color }}\n >\n {reason}\n </span>\n </span>\n );\n }\n\n return (\n <Popover hover>\n <Popover.Trigger>{trigger}</Popover.Trigger>\n <Popover.Content>\n <div className=\"w-72 space-y-2 text-sm\">\n <div className=\"flex items-baseline gap-2\">\n <span\n className=\"text-[10px] font-semibold uppercase tracking-wider\"\n style={{ color: t.color }}\n >\n {t.label} confidence · {(confidence * 100).toFixed(0)}%\n </span>\n {by && (\n <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n @{by}\n </span>\n )}\n </div>\n <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n {reason}\n </p>\n {sources.length > 0 && (\n <div>\n <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n sources\n </div>\n <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n {sources.map((s, i) => (\n <li key={i}>\n {s.href ? (\n <a className=\"text-violet-600 hover:underline\" href={s.href}>\n {s.label}\n </a>\n ) : (\n <span className=\"text-zinc-600 dark:text-zinc-300\">\n {s.label}\n </span>\n )}\n </li>\n ))}\n </ul>\n </div>\n )}\n {onFollowUp && (\n <div className=\"flex justify-end pt-1\">\n <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n ask follow-up\n </Button>\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":[],"mappings":"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","file":"chunk-GSMD5NK5.js","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n * <ReasonTag\n * value=\"$1.4M\"\n * reason=\"Projected Q3 ARR after stacking renewals.\"\n * confidence={0.91}\n * sources={[{ label: \"Q2 actuals · CRM export\" }]}\n * by=\"Forecaster\"\n * />\n *\n * Three visual styles:\n * • \"dot\" — value with a tiny coloured dot (default, subtle)\n * • \"underline\" — dotted underline + trailing \"?\"\n * • \"chip\" — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n /** The value the tag wraps — usually a number, label, or short phrase. */\n value: React.ReactNode;\n /** Free-text rationale shown in the popover / inline annotation. */\n reason: string;\n /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n confidence?: number;\n /** Optional list of sources (label + optional href). */\n sources?: ReasonTagSource[];\n /** Optional author / agent name shown in the popover header. */\n by?: string;\n /** Visual treatment for the trigger. */\n theme?: ReasonTagTheme;\n /**\n * When true, the popover is replaced with an always-visible inline\n * annotation below the value.\n */\n pinned?: boolean;\n /** Called when the user hits the \"ask follow-up\" action. */\n onFollowUp?: () => void;\n /** Optional className applied to the trigger element. */\n className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n { min: 0.85, color: \"#10b981\", label: \"high\" },\n { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n value,\n reason,\n confidence = 1,\n sources = [],\n by,\n theme = \"dot\",\n pinned = false,\n onFollowUp,\n className,\n}: ReasonTagProps) {\n const t = tier(confidence);\n\n const trigger =\n theme === \"chip\" ? (\n <span\n className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n style={{ backgroundColor: t.color + \"22\", color: t.color }}\n >\n <span\n className=\"h-1.5 w-1.5 rounded-full\"\n style={{ backgroundColor: t.color }}\n />\n {value}\n <span className=\"text-[10px] opacity-70\">?</span>\n </span>\n ) : theme === \"underline\" ? (\n <span\n className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n style={{ textDecorationColor: t.color }}\n >\n {value}\n <span\n className=\"ml-0.5 font-mono text-[10px]\"\n style={{ color: t.color }}\n >\n ?\n </span>\n </span>\n ) : (\n <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n <span className=\"font-medium\">{value}</span>\n <span\n className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n style={{ backgroundColor: t.color }}\n title=\"reason available\"\n />\n </span>\n );\n\n if (pinned) {\n return (\n <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n {trigger}\n <span\n className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n style={{ borderColor: t.color }}\n >\n {reason}\n </span>\n </span>\n );\n }\n\n return (\n <Popover hover>\n <Popover.Trigger>{trigger}</Popover.Trigger>\n <Popover.Content>\n <div className=\"w-72 space-y-2 text-sm\">\n <div className=\"flex items-baseline gap-2\">\n <span\n className=\"text-[10px] font-semibold uppercase tracking-wider\"\n style={{ color: t.color }}\n >\n {t.label} confidence · {(confidence * 100).toFixed(0)}%\n </span>\n {by && (\n <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n @{by}\n </span>\n )}\n </div>\n <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n {reason}\n </p>\n {sources.length > 0 && (\n <div>\n <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n sources\n </div>\n <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n {sources.map((s, i) => (\n <li key={i}>\n {s.href ? (\n <a className=\"text-violet-600 hover:underline\" href={s.href}>\n {s.label}\n </a>\n ) : (\n <span className=\"text-zinc-600 dark:text-zinc-300\">\n {s.label}\n </span>\n )}\n </li>\n ))}\n </ul>\n </div>\n )}\n {onFollowUp && (\n <div className=\"flex justify-end pt-1\">\n <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n ask follow-up\n </Button>\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover>\n );\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var chunkMKGWHSNV_cjs = require('./chunk-MKGWHSNV.cjs');
4
- var chunkBX6ZVWTO_cjs = require('./chunk-BX6ZVWTO.cjs');
4
+ var chunkNZHVDWOM_cjs = require('./chunk-NZHVDWOM.cjs');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
 
7
7
  var CONFIDENCE_TIERS = [
@@ -109,11 +109,11 @@ function ReasonTag({
109
109
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
110
110
  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: s.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
111
111
  ] }),
112
- onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkBX6ZVWTO_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
112
+ onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkNZHVDWOM_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
113
113
  ] }) })
114
114
  ] });
115
115
  }
116
116
 
117
117
  exports.ReasonTag = ReasonTag;
118
- //# sourceMappingURL=chunk-ZXGX5RI5.cjs.map
119
- //# sourceMappingURL=chunk-ZXGX5RI5.cjs.map
118
+ //# sourceMappingURL=chunk-I2VAGZXY.cjs.map
119
+ //# sourceMappingURL=chunk-I2VAGZXY.cjs.map