@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/tabbed-container-9yvqEQON.js

@@ -0,0 +1,125 @@
+import { t as Combobox } from "./combobox-lbSxWRMl.js";
+import { t as DataList } from "./data-list-GzbzPmYR.js";
+import { t as ListSearch } from "./list-search-DUcIMJTk.js";
+import { t as TabContent } from "./tabs-content-BGkPZ5EQ.js";
+import { i as TabsContext, n as Tabs, r as TabList, t as Tab } from "./tabs-tab-CJVS0WED.js";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "./tooltip-DJcze2VZ.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { Children, isValidElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListFilterIcon } from "lucide-react";
+import './tabbed-container.css';// src/ds/layout/tabbed-container/tabbed-container-root.tsx
+var TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ jsx(TabContent, {
+	value,
+	keepMounted: true,
+	className: cn("min-h-0 flex-1", className),
+	children
+});
+var TabbedContainerDataList = ({ value, columns, fit, children, className }) => /* @__PURE__ */ jsx(TabContent, {
+	value,
+	keepMounted: true,
+	className: cn("tabbed-container-data-list min-h-0 flex-1", className),
+	children: /* @__PURE__ */ jsx(DataList, {
+		columns,
+		fit,
+		variant: "light",
+		className: "min-h-0 px-0 pb-0",
+		children
+	})
+});
+var DataListControls = ({ dataLists }) => {
+	const tabs = useContext(TabsContext);
+	return dataLists.map((dataList) => {
+		const { filter, search, value } = dataList.props;
+		if (!search && !filter) return null;
+		const active = value === tabs?.value;
+		const filterCount = filter ? Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0 : 0;
+		return /* @__PURE__ */ jsx("div", {
+			"data-slot": "tabbed-container-controls",
+			"data-active": active || void 0,
+			hidden: !active,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "tabbed-container-query",
+				children: [search ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "tabbed-container-search",
+					children: /* @__PURE__ */ jsx(ListSearch, {
+						...search,
+						size: "md",
+						shortcutDisabled: !active
+					})
+				}) : null, filter ? /* @__PURE__ */ jsx(TooltipProvider, {
+					delay: 200,
+					children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("div", {
+							"data-slot": "tabbed-container-filter",
+							"data-active": filterCount > 0 || void 0,
+							children: [
+								/* @__PURE__ */ jsx(ListFilterIcon, { "aria-hidden": "true" }),
+								filterCount > 0 ? /* @__PURE__ */ jsx(Txt, {
+									as: "span",
+									variant: "meta",
+									"aria-hidden": "true",
+									"data-slot": "tabbed-container-filter-count",
+									children: filterCount
+								}) : null,
+								filter.multiple ? /* @__PURE__ */ jsx(Combobox, {
+									...filter,
+									clearLabel: "Clear",
+									size: "md",
+									variant: "default"
+								}) : /* @__PURE__ */ jsx(Combobox, {
+									...filter,
+									size: "md",
+									variant: "default"
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx(TooltipContent, {
+						side: "bottom",
+						children: filterCount > 0 ? `Filter, ${filterCount} selected` : "Filter"
+					})] })
+				}) : null]
+			})
+		}, value);
+	});
+};
+var isContainerChild = (child) => isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);
+var isDataList = (child) => child.type === TabbedContainerDataList;
+function TabbedContainerRoot({ children, defaultTab, value, onValueChange, frame = "inset", className }) {
+	const panels = Children.toArray(children).filter(isContainerChild);
+	const dataLists = panels.filter(isDataList);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultTab,
+		value,
+		onValueChange,
+		appearance: "contained",
+		frame,
+		className: cn("tabbed-container min-h-0 flex-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "tabbed-container-rail",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "tabbed-container-tabs",
+				children: /* @__PURE__ */ jsx(TabList, { children: panels.map((panel) => /* @__PURE__ */ jsx(Tab, {
+					value: panel.props.value,
+					disabled: panel.props.disabled,
+					attention: panel.props.attention,
+					disabledTooltip: panel.props.disabledTooltip,
+					onClick: panel.props.onClick,
+					onClose: panel.props.onClose,
+					className: panel.props.tabClassName,
+					children: panel.props.label
+				}, panel.props.value)) })
+			}), /* @__PURE__ */ jsx(DataListControls, { dataLists })]
+		}), panels]
+	});
+}
+// src/ds/layout/tabbed-container/index.ts
+var TabbedContainer = Object.assign(TabbedContainerRoot, {
+	Panel: TabbedContainerPanel,
+	DataList: TabbedContainerDataList
+});
+export { TabbedContainer as t };
+
+//# sourceMappingURL=tabbed-container-9yvqEQON.js.map

package/dist/tabbed-container-9yvqEQON.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbed-container-9yvqEQON.js","names":[],"sources":["../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport type { TabsRootProps } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div key={value} data-slot=\"tabbed-container-controls\" data-active={active || undefined} hidden={!active}>\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <Txt as=\"span\" variant=\"meta\" aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\">\n                        {filterCount}\n                      </Txt>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: TabsRootProps<T>['frame'];\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"mappings":"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"}

package/dist/tabbed-container-Bmk5dgJ4.cjs

@@ -0,0 +1,130 @@
+require('./tabbed-container.css');const require_combobox = require("./combobox-i723LxeC.cjs");
+const require_data_list = require("./data-list-072hHK9L.cjs");
+const require_list_search = require("./list-search-yF02rvZt.cjs");
+const require_tabs_content = require("./tabs-content-D_ic2ZqI.cjs");
+const require_tabs_tab = require("./tabs-tab-Dj2huH5T.cjs");
+const require_tooltip = require("./tooltip-BsExuMO8.cjs");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/ds/layout/tabbed-container/tabbed-container-root.tsx
+var TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_content.TabContent, {
+	value,
+	keepMounted: true,
+	className: require_utils.cn("min-h-0 flex-1", className),
+	children
+});
+var TabbedContainerDataList = ({ value, columns, fit, children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_content.TabContent, {
+	value,
+	keepMounted: true,
+	className: require_utils.cn("tabbed-container-data-list min-h-0 flex-1", className),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_data_list.DataList, {
+		columns,
+		fit,
+		variant: "light",
+		className: "min-h-0 px-0 pb-0",
+		children
+	})
+});
+var DataListControls = ({ dataLists }) => {
+	const tabs = (0, react.useContext)(require_tabs_tab.TabsContext);
+	return dataLists.map((dataList) => {
+		const { filter, search, value } = dataList.props;
+		if (!search && !filter) return null;
+		const active = value === tabs?.value;
+		const filterCount = filter ? Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0 : 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "tabbed-container-controls",
+			"data-active": active || void 0,
+			hidden: !active,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "tabbed-container-query",
+				children: [search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-slot": "tabbed-container-search",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_list_search.ListSearch, {
+						...search,
+						size: "md",
+						shortcutDisabled: !active
+					})
+				}) : null, filter ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipProvider, {
+					delay: 200,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tooltip.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							"data-slot": "tabbed-container-filter",
+							"data-active": filterCount > 0 || void 0,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListFilterIcon, { "aria-hidden": "true" }),
+								filterCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									as: "span",
+									variant: "meta",
+									"aria-hidden": "true",
+									"data-slot": "tabbed-container-filter-count",
+									children: filterCount
+								}) : null,
+								filter.multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
+									...filter,
+									clearLabel: "Clear",
+									size: "md",
+									variant: "default"
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
+									...filter,
+									size: "md",
+									variant: "default"
+								})
+							]
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipContent, {
+						side: "bottom",
+						children: filterCount > 0 ? `Filter, ${filterCount} selected` : "Filter"
+					})] })
+				}) : null]
+			})
+		}, value);
+	});
+};
+var isContainerChild = (child) => (0, react.isValidElement)(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);
+var isDataList = (child) => child.type === TabbedContainerDataList;
+function TabbedContainerRoot({ children, defaultTab, value, onValueChange, frame = "inset", className }) {
+	const panels = react.Children.toArray(children).filter(isContainerChild);
+	const dataLists = panels.filter(isDataList);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tabs_tab.Tabs, {
+		defaultTab,
+		value,
+		onValueChange,
+		appearance: "contained",
+		frame,
+		className: require_utils.cn("tabbed-container min-h-0 flex-1", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-slot": "tabbed-container-rail",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "tabbed-container-tabs",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_tab.TabList, { children: panels.map((panel) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_tab.Tab, {
+					value: panel.props.value,
+					disabled: panel.props.disabled,
+					attention: panel.props.attention,
+					disabledTooltip: panel.props.disabledTooltip,
+					onClick: panel.props.onClick,
+					onClose: panel.props.onClose,
+					className: panel.props.tabClassName,
+					children: panel.props.label
+				}, panel.props.value)) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataListControls, { dataLists })]
+		}), panels]
+	});
+}
+// src/ds/layout/tabbed-container/index.ts
+var TabbedContainer = Object.assign(TabbedContainerRoot, {
+	Panel: TabbedContainerPanel,
+	DataList: TabbedContainerDataList
+});
+Object.defineProperty(exports, "TabbedContainer", {
+	enumerable: true,
+	get: function() {
+		return TabbedContainer;
+	}
+});
+
+//# sourceMappingURL=tabbed-container-Bmk5dgJ4.cjs.map

package/dist/tabbed-container-Bmk5dgJ4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbed-container-Bmk5dgJ4.cjs","names":["TabContent","cn","DataList","useContext","TabsContext","ListSearch","TooltipProvider","Tooltip","TooltipTrigger","ListFilterIcon","Txt","Combobox","TooltipContent","isValidElement","Children","Tabs","TabList","Tab"],"sources":["../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport type { TabsRootProps } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div key={value} data-slot=\"tabbed-container-controls\" data-active={active || undefined} hidden={!active}>\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <Txt as=\"span\" variant=\"meta\" aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\">\n                        {filterCount}\n                      </Txt>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: TabsRootProps<T>['frame'];\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"mappings":";;;;;;;;;;;;AA+CA,IAAa,wBAAwB,EAAE,OAAO,UAAU,gBACtD,iBAAA,GAAA,kBAAA,IAAA,CAACA,qBAAAA,YAAD;CAAmB;CAAO,aAAA;CAAY,WAAWC,cAAAA,GAAG,kBAAkB,SAAS;CAC5E;AACS,CAAA;AAGd,IAAa,2BAA2B,EAAE,OAAO,SAAS,KAAK,UAAU,gBACvE,iBAAA,GAAA,kBAAA,IAAA,CAACD,qBAAAA,YAAD;CAAmB;CAAO,aAAA;CAAY,WAAWC,cAAAA,GAAG,6CAA6C,SAAS;CACxG,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,UAAD;EAAmB;EAAc;EAAK,SAAQ;EAAQ,WAAU;EAC7D;CACO,CAAA;AACA,CAAA;AAGd,IAAa,oBAAoB,EAAE,gBAA6E;CAC9G,MAAM,QAAA,GAAOC,MAAAA,WAAAA,CAAWC,iBAAAA,WAAW;CACnC,OAAO,UAAU,KAAI,aAAY;EAC/B,MAAM,EAAE,QAAQ,QAAQ,UAAU,SAAS;EAC3C,IAAI,CAAC,UAAU,CAAC,QAAQ,OAAO;EAC/B,MAAM,SAAS,UAAU,MAAM;EAC/B,MAAM,cAAc,SAAU,MAAM,QAAQ,OAAO,KAAK,IAAI,OAAO,MAAM,SAAS,OAAO,QAAQ,IAAI,IAAK;EAC1G,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAiB,aAAU;GAA4B,eAAa,UAAU,KAAA;GAAW,QAAQ,CAAC;GAChG,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,aAAU;IAAf,UAAA,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,aAAU;KACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;MAAY,GAAI;MAAQ,MAAK;MAAK,kBAAkB,CAAC;KAAS,CAAA;IAC3D,CAAA,IACH,MACH,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,iBAAD;KAAiB,OAAO;KACtB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;MAAgB,SAAA;MACd,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OAAK,aAAU;OAA0B,eAAa,cAAc,KAAK,KAAA;OAAzE,UAAA;QACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,gBAAD,EAAgB,eAAY,OAAQ,CAAA;QACnC,cAAc,IACb,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;SAAK,IAAG;SAAO,SAAQ;SAAO,eAAY;SAAO,aAAU;SACxD,UAAA;QACE,CAAA,IACH;QACH,OAAO,WACN,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;SAAU,GAAI;SAAQ,YAAW;SAAQ,MAAK;SAAK,SAAQ;QAAW,CAAA,IAEtE,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,UAAD;SAAU,GAAI;SAAQ,MAAK;SAAK,SAAQ;QAAW,CAAA;OAElD;;KACS,CAAA,GAChB,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;MAAgB,MAAK;MAClB,UAAA,cAAc,IAAI,WAAW,YAAY,aAAa;KACzC,CAAA,CACT,EAAA,CAAA;IACM,CAAA,IACf,IACD;;EACF,GAhCK,KAgCL;CAET,CAAC;AACH;AAaA,IAAM,oBAAoB,WAAA,GACxBC,MAAAA,eAAAA,CAAe,KAAK,MAAM,MAAM,SAAS,wBAAwB,MAAM,SAAS;AAElF,IAAM,cACJ,UACwD,MAAM,SAAS;AAEzE,SAAgB,oBAAsC,EACpD,UACA,YACA,OACA,eACA,QAAQ,SACR,aAC0B;CAC1B,MAAM,SAASC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,gBAAgB;CACjE,MAAM,YAAY,OAAO,OAAO,UAAU;CAC1C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,MAAD;EACc;EACL;EACQ;EACf,YAAW;EACJ;EACP,WAAWd,cAAAA,GAAG,mCAAmC,SAAS;EAN5D,UAAA,CAQE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,aAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,aAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACe,iBAAAA,SAAD,EAAA,UACG,OAAO,KAAI,UACV,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,KAAD;KAEE,OAAO,MAAM,MAAM;KACnB,UAAU,MAAM,MAAM;KACtB,WAAW,MAAM,MAAM;KACvB,iBAAiB,MAAM,MAAM;KAC7B,SAAS,MAAM,MAAM;KACrB,SAAS,MAAM,MAAM;KACrB,WAAW,MAAM,MAAM;KAEtB,UAAA,MAAM,MAAM;IACV,GAVE,MAAM,MAAM,KAUd,CACN,EACM,CAAA;GACN,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD,EAA6B,UAAY,CAAA,CACtC;EACJ,CAAA,GAAA,MACG;;AAEV;;AC7JA,IAAa,kBAAkB,OAAO,OAAO,qBAAqB;CAChE,OAAO;CACP,UAAU;AACZ,CAAC"}

package/dist/tabs-content-BGkPZ5EQ.js

@@ -0,0 +1,29 @@
+import { i as TabsContext } from "./tabs-tab-CJVS0WED.js";
+import { focusRing } from "./primitives/transitions.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+// src/ds/components/Tabs/tabs-content.tsx
+var TabContent = ({ children, value, flush = false, keepMounted = false, className }) => {
+	const selected = useContext(TabsContext)?.value === value;
+	const [visited, setVisited] = useState(selected);
+	useEffect(() => {
+		if (keepMounted && selected) setVisited(true);
+	}, [keepMounted, selected]);
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		value,
+		keepMounted,
+		"data-slot": "tabs-content",
+		"data-flush": flush || void 0,
+		className: cn("grid overflow-y-auto ring-offset-background", flush ? "h-full min-h-0" : "py-2", focusRing, className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "tabs-content-body",
+			className: "contents",
+			children: !keepMounted || selected || visited ? children : null
+		})
+	});
+};
+export { TabContent as t };
+
+//# sourceMappingURL=tabs-content-BGkPZ5EQ.js.map

package/dist/tabs-content-BGkPZ5EQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-BGkPZ5EQ.js","names":["BaseTabs"],"sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"mappings":";;;;;;;AAcA,IAAa,cAAc,EAAE,UAAU,OAAO,QAAQ,OAAO,cAAc,OAAO,gBAAiC;CAEjH,MAAM,WADO,WAAW,WACP,CAAA,EAAM,UAAU;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,QAAQ;CAC/C,gBAAgB;EACd,IAAI,eAAe,UAAU,WAAW,IAAI;CAC9C,GAAG,CAAC,aAAa,QAAQ,CAAC;CAC1B,OACE,oBAACA,KAAS,OAAV;EACS;EACM;EACb,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,+CAEA,QAAQ,mBAAmB,QAC3B,WACA,SACF;EAEA,UAAA,oBAAC,OAAD;GAAK,aAAU;GAAoB,WAAU;GAC1C,UAAA,CAAC,eAAe,YAAY,UAAU,WAAW;EAC/C,CAAA;CACS,CAAA;AAEpB"}

package/dist/tabs-content-D_ic2ZqI.cjs

@@ -0,0 +1,34 @@
+const require_tabs_tab = require("./tabs-tab-Dj2huH5T.cjs");
+const require_primitives_transitions = require("./primitives/transitions.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tabs = require("@base-ui/react/tabs");
+// src/ds/components/Tabs/tabs-content.tsx
+var TabContent = ({ children, value, flush = false, keepMounted = false, className }) => {
+	const selected = (0, react.useContext)(require_tabs_tab.TabsContext)?.value === value;
+	const [visited, setVisited] = (0, react.useState)(selected);
+	(0, react.useEffect)(() => {
+		if (keepMounted && selected) setVisited(true);
+	}, [keepMounted, selected]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Panel, {
+		value,
+		keepMounted,
+		"data-slot": "tabs-content",
+		"data-flush": flush || void 0,
+		className: require_utils.cn("grid overflow-y-auto ring-offset-background", flush ? "h-full min-h-0" : "py-2", require_primitives_transitions.focusRing, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "tabs-content-body",
+			className: "contents",
+			children: !keepMounted || selected || visited ? children : null
+		})
+	});
+};
+Object.defineProperty(exports, "TabContent", {
+	enumerable: true,
+	get: function() {
+		return TabContent;
+	}
+});
+
+//# sourceMappingURL=tabs-content-D_ic2ZqI.cjs.map

package/dist/tabs-content-D_ic2ZqI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-content-D_ic2ZqI.cjs","names":["useContext","TabsContext","useState","BaseTabs","cn","focusRing"],"sources":["../src/ds/components/Tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { useContext, useEffect, useState } from 'react';\nimport { TabsContext } from './tabs-context';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type TabContentProps = {\n  children: React.ReactNode;\n  value: string;\n  flush?: boolean;\n  keepMounted?: boolean;\n  className?: string;\n};\n\nexport const TabContent = ({ children, value, flush = false, keepMounted = false, className }: TabContentProps) => {\n  const tabs = useContext(TabsContext);\n  const selected = tabs?.value === value;\n  const [visited, setVisited] = useState(selected);\n  useEffect(() => {\n    if (keepMounted && selected) setVisited(true);\n  }, [keepMounted, selected]);\n  return (\n    <BaseTabs.Panel\n      value={value}\n      keepMounted={keepMounted}\n      data-slot=\"tabs-content\"\n      data-flush={flush || undefined}\n      className={cn(\n        'grid overflow-y-auto ring-offset-background',\n        // Flush panels give the row to their content (scroll region, code block) instead of padding it.\n        flush ? 'h-full min-h-0' : 'py-2',\n        focusRing,\n        className,\n      )}\n    >\n      <div data-slot=\"tabs-content-body\" className=\"contents\">\n        {!keepMounted || selected || visited ? children : null}\n      </div>\n    </BaseTabs.Panel>\n  );\n};\n"],"mappings":";;;;;;;AAcA,IAAa,cAAc,EAAE,UAAU,OAAO,QAAQ,OAAO,cAAc,OAAO,gBAAiC;CAEjH,MAAM,YAAA,GADOA,MAAAA,WAAAA,CAAWC,iBAAAA,WACP,CAAA,EAAM,UAAU;CACjC,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,QAAQ;CAC/C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,eAAe,UAAU,WAAW,IAAI;CAC9C,GAAG,CAAC,aAAa,QAAQ,CAAC;CAC1B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,KAAS,OAAV;EACS;EACM;EACb,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAWC,cAAAA,GACT,+CAEA,QAAQ,mBAAmB,QAC3BC,+BAAAA,WACA,SACF;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,aAAU;GAAoB,WAAU;GAC1C,UAAA,CAAC,eAAe,YAAY,UAAU,WAAW;EAC/C,CAAA;CACS,CAAA;AAEpB"}