ai-design-system 0.1.27 → 0.1.28

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 +15 -9
  2. package/dist/index.cjs +8 -6
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +9 -0
  5. package/dist/index.d.ts +27 -27
  6. package/dist/index.js +8 -6
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/components/composites/AppHeader/AppHeader.tsx CHANGED
@@ -16,12 +16,17 @@ export const AppHeader = React.memo<AppHeaderProps>(({
16
16
  }) => {
17
17
  return (
18
18
  <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 || ""}`}>
19
- <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
20
- {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
21
- {showSidebarToggle && title && <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />}
22
- {showTitle && title && <h1 className="text-base font-medium">{title}</h1>}
23
- {tabs && tabs.length > 0 && (
24
- <div className="flex-1 flex justify-center">
19
+ <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
20
+ <div className="min-w-0 flex items-center gap-1 lg:gap-2">
21
+ {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
22
+ {showSidebarToggle && showTitle && title && (
23
+ <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
24
+ )}
25
+ {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
26
+ </div>
27
+
28
+ <div className="justify-self-center">
29
+ {tabs && tabs.length > 0 && (
25
30
  <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
26
31
  <TabsList>
27
32
  {tabs.map((tab) => (
@@ -31,9 +36,10 @@ export const AppHeader = React.memo<AppHeaderProps>(({
31
36
  ))}
32
37
  </TabsList>
33
38
  </Tabs>
34
- </div>
35
- )}
36
- <div className="ml-auto flex items-center gap-2">{actions}</div>
39
+ )}
40
+ </div>
41
+
42
+ <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
37
43
  </div>
38
44
  </header>
39
45
  )
package/dist/index.cjs CHANGED
@@ -6897,12 +6897,14 @@ var AppHeader = React33__namespace.memo(({
6897
6897
  showTitle = true
6898
6898
  }) => {
6899
6899
  var _a;
6900
- 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: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
6901
- showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
6902
- showSidebarToggle && title && /* @__PURE__ */ jsxRuntime.jsx(Separator4, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
6903
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-medium", children: title }),
6904
- tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
6905
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
6900
+ 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: [
6901
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex items-center gap-1 lg:gap-2", children: [
6902
+ showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
6903
+ showSidebarToggle && showTitle && title && /* @__PURE__ */ jsxRuntime.jsx(Separator4, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
6904
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-[28rem] truncate text-base font-medium", children: title })
6905
+ ] }),
6906
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-center", children: tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
6907
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-end gap-2", children: actions })
6906
6908
  ] }) });
6907
6909
  });
6908
6910
  AppHeader.displayName = "AppHeader";