ai-design-system 0.1.85 → 0.1.86

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 (8) hide show
  1. package/components/composites/AppHeader/AppHeader.tsx +27 -33
  2. package/components/composites/AppHeader/interfaces.ts +2 -0
  3. package/dist/index.cjs +20 -4
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.ts +13 -11
  6. package/dist/index.js +20 -4
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/components/composites/AppHeader/AppHeader.tsx CHANGED
@@ -11,6 +11,8 @@ export const AppHeader = React.memo<AppHeaderProps>(({
11
11
  actions,
12
12
  tabs,
13
13
  defaultTab,
14
+ activeTab,
15
+ value,
14
16
  onTabChange,
15
17
  className,
16
18
  tabsPosition = 'center',
@@ -19,6 +21,28 @@ export const AppHeader = React.memo<AppHeaderProps>(({
19
21
  buttonSwitcherProps,
20
22
  chatToggleProps
21
23
  }) => {
24
+ const currentTab = activeTab ?? value;
25
+
26
+ const renderTabs = (extraClass?: string) => {
27
+ if (!tabs || tabs.length === 0) return null;
28
+ return (
29
+ <Tabs
30
+ value={currentTab}
31
+ defaultValue={currentTab !== undefined ? undefined : (defaultTab || tabs[0]?.value)}
32
+ onValueChange={onTabChange}
33
+ className={extraClass}
34
+ >
35
+ <TabsList>
36
+ {tabs.map((tab) => (
37
+ <TabsTrigger key={tab.value} value={tab.value}>
38
+ {tab.label}
39
+ </TabsTrigger>
40
+ ))}
41
+ </TabsList>
42
+ </Tabs>
43
+ );
44
+ };
45
+
22
46
  return (
23
47
  <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
24
48
  <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
@@ -33,46 +57,16 @@ export const AppHeader = React.memo<AppHeaderProps>(({
33
57
  : title
34
58
  )}
35
59
  {chatToggleProps && <ChatToggleButton {...chatToggleProps} />}
36
- {tabsPosition === 'left' && tabs && tabs.length > 0 && (
37
- <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange} className="ml-2">
38
- <TabsList>
39
- {tabs.map((tab) => (
40
- <TabsTrigger key={tab.value} value={tab.value}>
41
- {tab.label}
42
- </TabsTrigger>
43
- ))}
44
- </TabsList>
45
- </Tabs>
46
- )}
60
+ {tabsPosition === 'left' && renderTabs("ml-2")}
47
61
  {buttonSwitcherProps && <ButtonSwitcher {...buttonSwitcherProps} />}
48
62
  </div>
49
63
 
50
64
  <div className="justify-self-center">
51
- {tabsPosition === 'center' && tabs && tabs.length > 0 && (
52
- <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
53
- <TabsList>
54
- {tabs.map((tab) => (
55
- <TabsTrigger key={tab.value} value={tab.value}>
56
- {tab.label}
57
- </TabsTrigger>
58
- ))}
59
- </TabsList>
60
- </Tabs>
61
- )}
65
+ {tabsPosition === 'center' && renderTabs()}
62
66
  </div>
63
67
 
64
68
  <div className="flex min-w-0 items-center justify-end gap-2">
65
- {tabsPosition === 'right' && tabs && tabs.length > 0 && (
66
- <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
67
- <TabsList>
68
- {tabs.map((tab) => (
69
- <TabsTrigger key={tab.value} value={tab.value}>
70
- {tab.label}
71
- </TabsTrigger>
72
- ))}
73
- </TabsList>
74
- </Tabs>
75
- )}
69
+ {tabsPosition === 'right' && renderTabs()}
76
70
  {actions}
77
71
  </div>
78
72
  </div>
package/components/composites/AppHeader/interfaces.ts CHANGED
@@ -12,6 +12,8 @@ export interface AppHeaderProps {
12
12
  actions?: React.ReactNode;
13
13
  tabs?: TabItem[];
14
14
  defaultTab?: string;
15
+ activeTab?: string;
16
+ value?: string;
15
17
  onTabChange?: (value: string) => void;
16
18
  tabsPosition?: 'left' | 'center' | 'right';
17
19
  className?: string;
package/dist/index.cjs CHANGED
@@ -2234,6 +2234,8 @@ var AppHeader = React3__namespace.memo(({
2234
2234
  actions,
2235
2235
  tabs,
2236
2236
  defaultTab,
2237
+ activeTab,
2238
+ value,
2237
2239
  onTabChange,
2238
2240
  className,
2239
2241
  tabsPosition = "center",
@@ -2242,19 +2244,33 @@ var AppHeader = React3__namespace.memo(({
2242
2244
  buttonSwitcherProps,
2243
2245
  chatToggleProps
2244
2246
  }) => {
2245
- var _a, _b, _c;
2247
+ const currentTab = activeTab != null ? activeTab : value;
2248
+ const renderTabs = (extraClass) => {
2249
+ var _a;
2250
+ if (!tabs || tabs.length === 0) return null;
2251
+ return /* @__PURE__ */ jsxRuntime.jsx(
2252
+ Tabs2,
2253
+ {
2254
+ value: currentTab,
2255
+ defaultValue: currentTab !== void 0 ? void 0 : defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value),
2256
+ onValueChange: onTabChange,
2257
+ className: extraClass,
2258
+ children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) })
2259
+ }
2260
+ );
2261
+ };
2246
2262
  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6", children: [
2247
2263
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex items-center gap-1 lg:gap-2", children: [
2248
2264
  showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
2249
2265
  showSidebarToggle && (showTitle && title || buttonSwitcherProps || chatToggleProps) && /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
2250
2266
  showTitle && title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-[28rem] truncate text-base font-medium", children: title }) : title),
2251
2267
  chatToggleProps && /* @__PURE__ */ jsxRuntime.jsx(ChatToggleButton, __spreadValues({}, chatToggleProps)),
2252
- tabsPosition === "left" && tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, className: "ml-2", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }),
2268
+ tabsPosition === "left" && renderTabs("ml-2"),
2253
2269
  buttonSwitcherProps && /* @__PURE__ */ jsxRuntime.jsx(ButtonSwitcher, __spreadValues({}, buttonSwitcherProps))
2254
2270
  ] }),
2255
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-center", children: tabsPosition === "center" && tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_b = tabs[0]) == null ? void 0 : _b.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
2271
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-center", children: tabsPosition === "center" && renderTabs() }),
2256
2272
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-end gap-2", children: [
2257
- tabsPosition === "right" && tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_c = tabs[0]) == null ? void 0 : _c.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }),
2273
+ tabsPosition === "right" && renderTabs(),
2258
2274
  actions
2259
2275
  ] })
2260
2276
  ] }) });