@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/tab-list.mjs

@@ -0,0 +1,90 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/tab-list.tsx
+const tabListVariants = cva("wwc:inline-flex wwc:items-center wwc:gap-1", {
+	variants: {
+		variant: {
+			default: "wwc:bg-muted wwc:p-1 wwc:rounded-lg",
+			underline: "wwc:border-b wwc:border-border wwc:pb-px",
+			pills: "wwc:gap-2"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+const tabItemVariants = cva("wwc:inline-flex wwc:items-center wwc:justify-center wwc:whitespace-nowrap wwc:font-medium wwc:transition-all wwc:cursor-pointer wwc:select-none", {
+	variants: {
+		variant: {
+			default: "wwc:rounded-md data-[state=active]:wwc:bg-background data-[state=active]:wwc:shadow-sm",
+			underline: "wwc:border-b-2 wwc:border-transparent wwc:pb-2 data-[state=active]:wwc:border-primary data-[state=active]:wwc:text-foreground",
+			pills: "wwc:rounded-full wwc:border wwc:border-border data-[state=active]:wwc:border-primary data-[state=active]:wwc:bg-primary data-[state=active]:wwc:text-primary-foreground"
+		},
+		size: {
+			sm: "wwc:text-xs wwc:px-2 wwc:py-1",
+			md: "wwc:text-sm wwc:px-3 wwc:py-1.5",
+			lg: "wwc:text-base wwc:px-4 wwc:py-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+/** Standalone tab list component for simple tab navigation. */
+const TabList = React.forwardRef(({ className, variant, size, items, value: controlledValue, defaultValue, onChange, ...props }, ref) => {
+	const [internalValue, setInternalValue] = React.useState(defaultValue || items[0]?.value);
+	const value = controlledValue ?? internalValue;
+	const handleSelect = (itemValue) => {
+		if (controlledValue === void 0) setInternalValue(itemValue);
+		onChange?.(itemValue);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "tablist",
+		className: cn(tabListVariants({
+			variant,
+			size
+		}), className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "tab",
+			"aria-selected": value === item.value,
+			"aria-disabled": item.disabled,
+			"data-state": value === item.value ? "active" : "inactive",
+			disabled: item.disabled,
+			onClick: () => {
+				if (!item.disabled) handleSelect(item.value);
+			},
+			className: cn(tabItemVariants({
+				variant,
+				size
+			}), item.disabled && "wwc:opacity-50 wwc:cursor-not-allowed", value !== item.value && !item.disabled && "wwc:text-muted-foreground hover:wwc:text-foreground"),
+			children: [
+				item.icon && /* @__PURE__ */ jsx("span", {
+					className: "wwc:mr-2",
+					children: item.icon
+				}),
+				item.label,
+				typeof item.count === "number" && /* @__PURE__ */ jsx("span", {
+					className: "wwc:ml-2 wwc:rounded-full wwc:bg-muted wwc:px-1.5 wwc:py-0.5 wwc:text-xs wwc:tabular-nums",
+					children: item.count
+				})
+			]
+		}, item.value))
+	});
+});
+TabList.displayName = "TabList";
+//#endregion
+export { TabList, tabItemVariants, tabListVariants };
+
+//# sourceMappingURL=tab-list.mjs.map

package/dist/tab-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.mjs","names":[],"sources":["../src/tab-list.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport * as React from \"react\";\n\nconst tabListVariants = cva(\"wwc:inline-flex wwc:items-center wwc:gap-1\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"wwc:bg-muted wwc:p-1 wwc:rounded-lg\",\n\t\t\tunderline: \"wwc:border-b wwc:border-border wwc:pb-px\",\n\t\t\tpills: \"wwc:gap-2\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t\tlg: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t\tsize: \"md\",\n\t},\n});\n\nconst tabItemVariants = cva(\n\t\"wwc:inline-flex wwc:items-center wwc:justify-center wwc:whitespace-nowrap wwc:font-medium wwc:transition-all wwc:cursor-pointer wwc:select-none\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"wwc:rounded-md data-[state=active]:wwc:bg-background data-[state=active]:wwc:shadow-sm\",\n\t\t\t\tunderline:\n\t\t\t\t\t\"wwc:border-b-2 wwc:border-transparent wwc:pb-2 data-[state=active]:wwc:border-primary data-[state=active]:wwc:text-foreground\",\n\t\t\t\tpills:\n\t\t\t\t\t\"wwc:rounded-full wwc:border wwc:border-border data-[state=active]:wwc:border-primary data-[state=active]:wwc:bg-primary data-[state=active]:wwc:text-primary-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"wwc:text-xs wwc:px-2 wwc:py-1\",\n\t\t\t\tmd: \"wwc:text-sm wwc:px-3 wwc:py-1.5\",\n\t\t\t\tlg: \"wwc:text-base wwc:px-4 wwc:py-2\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nexport interface TabItem {\n\tvalue: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n\tdisabled?: boolean;\n\tcount?: number;\n}\n\nexport interface TabListProps\n\textends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">, VariantProps<typeof tabListVariants> {\n\t/** Tab items */\n\titems: TabItem[];\n\t/** Currently active tab value */\n\tvalue?: string;\n\t/** Default active tab value */\n\tdefaultValue?: string;\n\t/** Callback when tab changes */\n\tonChange?: (value: string) => void;\n}\n\n/** Standalone tab list component for simple tab navigation. */\nconst TabList = React.forwardRef<HTMLDivElement, TabListProps>(\n\t({className, variant, size, items, value: controlledValue, defaultValue, onChange, ...props}, ref) => {\n\t\tconst [internalValue, setInternalValue] = React.useState(defaultValue || items[0]?.value);\n\t\tconst value = controlledValue ?? internalValue;\n\n\t\tconst handleSelect = (itemValue: string) => {\n\t\t\tif (controlledValue === undefined) {\n\t\t\t\tsetInternalValue(itemValue);\n\t\t\t}\n\t\t\tonChange?.(itemValue);\n\t\t};\n\n\t\treturn (\n\t\t\t<div ref={ref} role=\"tablist\" className={cn(tabListVariants({variant, size}), className)} {...props}>\n\t\t\t\t{items.map((item) => (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\taria-selected={value === item.value}\n\t\t\t\t\t\taria-disabled={item.disabled}\n\t\t\t\t\t\tdata-state={value === item.value ? \"active\" : \"inactive\"}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!item.disabled) {\n\t\t\t\t\t\t\t\thandleSelect(item.value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttabItemVariants({variant, size}),\n\t\t\t\t\t\t\titem.disabled && \"wwc:opacity-50 wwc:cursor-not-allowed\",\n\t\t\t\t\t\t\tvalue !== item.value && !item.disabled && \"wwc:text-muted-foreground hover:wwc:text-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.icon && <span className=\"wwc:mr-2\">{item.icon}</span>}\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t{typeof item.count === \"number\" && (\n\t\t\t\t\t\t\t<span className=\"wwc:ml-2 wwc:rounded-full wwc:bg-muted wwc:px-1.5 wwc:py-0.5 wwc:text-xs wwc:tabular-nums\">\n\t\t\t\t\t\t\t\t{item.count}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</button>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t},\n);\nTabList.displayName = \"TabList\";\n\nexport {TabList, tabListVariants, tabItemVariants};\n"],"mappings":";;;;;AAIA,MAAM,kBAAkB,IAAI,8CAA8C;CACzE,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,OAAO;EACR;EACA,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CAAC;AAED,MAAM,kBAAkB,IACvB,mJACA;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WACC;GACD,OACC;EACF;EACA,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD;;AAuBA,MAAM,UAAU,MAAM,YACpB,EAAC,WAAW,SAAS,MAAM,OAAO,OAAO,iBAAiB,cAAc,UAAU,GAAG,SAAQ,QAAQ;CACrG,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,gBAAgB,MAAM,EAAE,EAAE,KAAK;CACxF,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,gBAAgB,cAAsB;EAC3C,IAAI,oBAAoB,KAAA,GACvB,iBAAiB,SAAS;EAE3B,WAAW,SAAS;CACrB;CAEA,OACC,oBAAC,OAAD;EAAU;EAAK,MAAK;EAAU,WAAW,GAAG,gBAAgB;GAAC;GAAS;EAAI,CAAC,GAAG,SAAS;EAAG,GAAI;EAC5F,UAAA,MAAM,KAAK,SACX,qBAAC,UAAD;GAEC,MAAK;GACL,MAAK;GACL,iBAAe,UAAU,KAAK;GAC9B,iBAAe,KAAK;GACpB,cAAY,UAAU,KAAK,QAAQ,WAAW;GAC9C,UAAU,KAAK;GACf,eAAe;IACd,IAAI,CAAC,KAAK,UACT,aAAa,KAAK,KAAK;GAEzB;GACA,WAAW,GACV,gBAAgB;IAAC;IAAS;GAAI,CAAC,GAC/B,KAAK,YAAY,yCACjB,UAAU,KAAK,SAAS,CAAC,KAAK,YAAY,qDAC3C;GAjBD,UAAA;IAmBE,KAAK,QAAQ,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,KAAK;IAAW,CAAA;IACzD,KAAK;IACL,OAAO,KAAK,UAAU,YACtB,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,KAAK;IACD,CAAA;GAEA;EAzBF,GAAA,KAAK,KAyBH,CACR;CACG,CAAA;AAEP,CACD;AACA,QAAQ,cAAc"}

package/dist/table.d.mts

@@ -0,0 +1,14 @@
+import * as React from "react";
+//#region src/table.d.ts
+/** A semantic HTML table with composable sub-components for structured data. */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+//# sourceMappingURL=table.d.mts.map

package/dist/table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.mts","names":[],"sources":["../src/table.tsx"],"mappings":";;;cAIM,OAAK,MAAA,0BAAA,MAAA,eAAA,oBAAA,MAAA,cAAA;cAaL,aAAW,MAAA,0BAAA,MAAA,eAAA,2BAAA,MAAA,cAAA;cAYX,WAAS,MAAA,0BAAA,MAAA,eAAA,2BAAA,MAAA,cAAA;cAOT,aAAW,MAAA,0BAAA,MAAA,eAAA,2BAAA,MAAA,cAAA;cAWX,UAAQ,MAAA,0BAAA,MAAA,eAAA,uBAAA,MAAA,cAAA;cAcR,WAAS,MAAA,0BAAA,MAAA,iBAAA,wBAAA,MAAA,cAAA;cAcT,WAAS,MAAA,0BAAA,MAAA,iBAAA,wBAAA,MAAA,cAAA;cAcT,cAAY,MAAA,0BAAA,MAAA,eAAA,2BAAA,MAAA,cAAA"}

package/dist/table.mjs

@@ -0,0 +1,60 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/table.tsx
+/** A semantic HTML table with composable sub-components for structured data. */
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: "wwc:relative wwc:w-full wwc:overflow-hidden",
+	children: /* @__PURE__ */ jsx("table", {
+		ref,
+		className: cn("wwc:w-full wwc:caption-bottom wwc:text-sm wwc:table-fixed", className),
+		...props
+	})
+}));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("wwc:bg-muted wwc:[&_tr]:border-b wwc:[&_tr]:hover:bg-muted", className),
+	...props
+}));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("wwc:[&_tr:last-child]:border-0", className),
+	...props
+}));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
+	ref,
+	className: cn("wwc:border-t wwc:bg-muted/50 wwc:font-medium wwc:[&>tr]:last:border-b-0", className),
+	...props
+}));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("wwc:border-b wwc:transition-colors wwc:hover:bg-muted/50 wwc:data-[state=selected]:bg-muted", className),
+	...props
+}));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
+	ref,
+	className: cn("wwc:h-10 wwc:px-3 wwc:text-left wwc:align-middle wwc:font-medium wwc:text-foreground wwc:truncate wwc:[&:has([role=checkbox])]:pr-0 wwc:[&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
+	ref,
+	className: cn("wwc:px-3 wwc:py-2 wwc:align-middle wwc:truncate wwc:max-w-0 wwc:[&:has([role=checkbox])]:pr-0 wwc:[&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
+	ref,
+	className: cn("wwc:mt-4 wwc:text-sm wwc:text-muted-foreground", className),
+	...props
+}));
+TableCaption.displayName = "TableCaption";
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=table.mjs.map

package/dist/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":[],"sources":["../src/table.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\n/** A semantic HTML table with composable sub-components for structured data. */\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n\t({className, ...props}, ref) => (\n\t\t<div className=\"wwc:relative wwc:w-full wwc:overflow-hidden\">\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"wwc:w-full wwc:caption-bottom wwc:text-sm wwc:table-fixed\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t),\n);\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n\t({className, ...props}, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\t// Muted band so the column labels read as a header strip against the white body rows.\n\t\t\tclassName={cn(\"wwc:bg-muted wwc:[&_tr]:border-b wwc:[&_tr]:hover:bg-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n\t({className, ...props}, ref) => (\n\t\t<tbody ref={ref} className={cn(\"wwc:[&_tr:last-child]:border-0\", className)} {...props} />\n\t),\n);\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n\t({className, ...props}, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"wwc:border-t wwc:bg-muted/50 wwc:font-medium wwc:[&>tr]:last:border-b-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n\t({className, ...props}, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:border-b wwc:transition-colors wwc:hover:bg-muted/50 wwc:data-[state=selected]:bg-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(\n\t({className, ...props}, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:h-10 wwc:px-3 wwc:text-left wwc:align-middle wwc:font-medium wwc:text-foreground wwc:truncate wwc:[&:has([role=checkbox])]:pr-0 wwc:[&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(\n\t({className, ...props}, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:px-3 wwc:py-2 wwc:align-middle wwc:truncate wwc:max-w-0 wwc:[&:has([role=checkbox])]:pr-0 wwc:[&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n\t({className, ...props}, ref) => (\n\t\t<caption ref={ref} className={cn(\"wwc:mt-4 wwc:text-sm wwc:text-muted-foreground\", className)} {...props} />\n\t),\n);\nTableCaption.displayName = \"TableCaption\";\n\nexport {Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption};\n"],"mappings":";;;;;AAIA,MAAM,QAAQ,MAAM,YAClB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,OAAD;CAAK,WAAU;CACd,UAAA,oBAAC,SAAD;EACM;EACL,WAAW,GAAG,6DAA6D,SAAS;EACpF,GAAI;CACJ,CAAA;AACG,CAAA,CAEP;AACA,MAAM,cAAc;AAEpB,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,SAAD;CACM;CAEL,WAAW,GAAG,8DAA8D,SAAS;CACrF,GAAI;AACJ,CAAA,CAEH;AACA,YAAY,cAAc;AAE1B,MAAM,YAAY,MAAM,YACtB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,SAAD;CAAY;CAAK,WAAW,GAAG,kCAAkC,SAAS;CAAG,GAAI;AAAQ,CAAA,CAE3F;AACA,UAAU,cAAc;AAExB,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,SAAD;CACM;CACL,WAAW,GAAG,2EAA2E,SAAS;CAClG,GAAI;AACJ,CAAA,CAEH;AACA,YAAY,cAAc;AAE1B,MAAM,WAAW,MAAM,YACrB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,MAAD;CACM;CACL,WAAW,GACV,+FACA,SACD;CACA,GAAI;AACJ,CAAA,CAEH;AACA,SAAS,cAAc;AAEvB,MAAM,YAAY,MAAM,YACtB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,MAAD;CACM;CACL,WAAW,GACV,iLACA,SACD;CACA,GAAI;AACJ,CAAA,CAEH;AACA,UAAU,cAAc;AAExB,MAAM,YAAY,MAAM,YACtB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,MAAD;CACM;CACL,WAAW,GACV,2IACA,SACD;CACA,GAAI;AACJ,CAAA,CAEH;AACA,UAAU,cAAc;AAExB,MAAM,eAAe,MAAM,YACzB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,WAAD;CAAc;CAAK,WAAW,GAAG,kDAAkD,SAAS;CAAG,GAAI;AAAQ,CAAA,CAE7G;AACA,aAAa,cAAc"}

package/dist/tabs.d.mts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+//#region src/tabs.d.ts
+type TabsVariant = "default" | "underline";
+type TabsSize = "sm" | "md" | "lg";
+/** Tabbed navigation with composable trigger and content sub-components. */
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  variant?: TabsVariant;
+  size?: TabsSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const tabsTriggerVariants: (props?: ({
+  variant?: "default" | "underline" | null | undefined;
+  display?: "text" | "icon" | "icon-text" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, Omit<VariantProps<typeof tabsTriggerVariants>, "variant" | "size"> {}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A single choice inside a {@link TabsDropdownTrigger}. */
+export interface TabsDropdownItem {
+  value: string;
+  label: React.ReactNode;
+}
+interface TabsDropdownTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "onSelect">, Pick<VariantProps<typeof tabsTriggerVariants>, "display"> {
+  /** The sub-views this tab pages between. */
+  items: TabsDropdownItem[];
+  /** Called with the chosen sub-item's value. Selecting also activates this tab. */
+  onSelect?: (value: string) => void;
+  /** The currently selected sub-item value (highlighted in the menu). */
+  activeItem?: string;
+}
+/**
+ * A tab trigger that opens a dropdown of sub-views. Clicking it activates the tab (like any
+ * `TabsTrigger`) and opens the menu; it inherits the surrounding `Tabs` variant/size, so it sits
+ * flush inside an `underline` tab row. Place it inside a `TabsList`.
+ */
+declare const TabsDropdownTrigger: React.ForwardRefExoticComponent<TabsDropdownTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Tabs, TabsContent, TabsDropdownTrigger, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.d.mts.map

package/dist/tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../src/tabs.tsx"],"mappings":";;;;KAQK;KACA;;cAQC,MAAI,MAAA,0BAAA,KAAA,cAAA,YAAA,MAAA,cAAA;EAGE,UAAA;EACH,OAAA;IASP,MAAA,cAAA;cAiCI,UAAQ,MAAA,0BAAA,KAAA,cAAA,gBAAA,MAAA,cAAA,0BAAA,MAAA,cAAA;cAaR,sBAAmB;;;;6CAmDxB;UAES,yBAER,MAAM,gCAAgC,cAAc,UACpD,KAAK,oBAAoB;cAErB,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;cAkBX,aAAW,MAAA,0BAAA,KAAA,cAAA,mBAAA,MAAA,cAAA,0BAAA,MAAA,cAAA;;iBAoBA;EAChB;EACA,OAAO,MAAM;;UAGJ,iCAER,KAAK,MAAM,gCAAgC,cAAc,uBACzD,KAAK,oBAAoB;;EAE1B,OAAO;;EAEP,YAAY;;EAEZ;;;;;;;cAQK,qBAAmB,MAAA,0BAAA,2BAAA,MAAA,cAAA"}

package/dist/tabs.mjs

@@ -0,0 +1,258 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+//#region src/tabs.tsx
+const TabsStyleContext = React.createContext({
+	variant: "default",
+	size: "md"
+});
+/** Tabbed navigation with composable trigger and content sub-components. */
+const Tabs = React.forwardRef(({ variant = "default", size = "md", ...props }, ref) => {
+	const ctx = React.useMemo(() => ({
+		variant,
+		size
+	}), [variant, size]);
+	return /* @__PURE__ */ jsx(TabsStyleContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(TabsPrimitive.Root, {
+			ref,
+			...props
+		})
+	});
+});
+Tabs.displayName = "Tabs";
+const tabsListVariants = cva("wwc:inline-flex wwc:items-center wwc:text-muted-foreground", {
+	variants: {
+		variant: {
+			default: "wwc:justify-center wwc:rounded-lg wwc:bg-muted wwc:p-1",
+			underline: "wwc:h-auto wwc:w-full wwc:justify-start wwc:border-b wwc:border-border wwc:bg-transparent wwc:p-0"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			size: "sm",
+			className: "wwc:h-8"
+		},
+		{
+			variant: "default",
+			size: "md",
+			className: "wwc:h-9"
+		},
+		{
+			variant: "default",
+			size: "lg",
+			className: "wwc:h-10"
+		},
+		{
+			variant: "underline",
+			size: "sm",
+			className: "wwc:gap-4"
+		},
+		{
+			variant: "underline",
+			size: "md",
+			className: "wwc:gap-6"
+		},
+		{
+			variant: "underline",
+			size: "lg",
+			className: "wwc:gap-8"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+const TabsList = React.forwardRef(({ className, ...props }, ref) => {
+	const { variant, size } = React.useContext(TabsStyleContext);
+	return /* @__PURE__ */ jsx(TabsPrimitive.List, {
+		ref,
+		className: cn(tabsListVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+const tabsTriggerVariants = cva("wwc:inline-flex wwc:items-center wwc:justify-center wwc:whitespace-nowrap wwc:font-medium wwc:ring-offset-background wwc:transition-all wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2 wwc:disabled:pointer-events-none wwc:disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "wwc:rounded-md wwc:aria-selected:bg-card wwc:aria-selected:text-foreground wwc:aria-selected:font-semibold wwc:aria-selected:ring-1 wwc:aria-selected:ring-border wwc:aria-selected:shadow-(--shadow-surface)",
+			underline: "wwc:-mb-px wwc:rounded-none wwc:border-b-2 wwc:border-transparent wwc:bg-transparent wwc:text-muted-foreground wwc:aria-selected:border-foreground wwc:aria-selected:text-foreground wwc:aria-selected:font-semibold"
+		},
+		display: {
+			text: "wwc:px-3 wwc:py-1 wwc:text-sm wwc:gap-2",
+			icon: "wwc:px-2.5 wwc:py-1.5",
+			"icon-text": "wwc:px-3 wwc:py-1 wwc:text-sm wwc:gap-2"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			display: "text",
+			size: "sm",
+			className: "wwc:px-2.5 wwc:py-0.5 wwc:text-xs"
+		},
+		{
+			variant: "default",
+			display: "text",
+			size: "lg",
+			className: "wwc:px-4 wwc:py-1.5 wwc:text-base"
+		},
+		{
+			variant: "default",
+			display: "icon-text",
+			size: "sm",
+			className: "wwc:px-2.5 wwc:py-0.5 wwc:text-xs"
+		},
+		{
+			variant: "default",
+			display: "icon-text",
+			size: "lg",
+			className: "wwc:px-4 wwc:py-1.5 wwc:text-base"
+		},
+		{
+			variant: "default",
+			display: "icon",
+			size: "sm",
+			className: "wwc:px-2 wwc:py-1"
+		},
+		{
+			variant: "default",
+			display: "icon",
+			size: "lg",
+			className: "wwc:px-3 wwc:py-2"
+		},
+		{
+			variant: "underline",
+			display: "text",
+			size: "sm",
+			className: "wwc:px-1 wwc:py-2 wwc:text-sm"
+		},
+		{
+			variant: "underline",
+			display: "text",
+			size: "md",
+			className: "wwc:px-1 wwc:py-3 wwc:text-base"
+		},
+		{
+			variant: "underline",
+			display: "text",
+			size: "lg",
+			className: "wwc:px-1 wwc:py-4 wwc:text-lg"
+		},
+		{
+			variant: "underline",
+			display: "icon-text",
+			size: "sm",
+			className: "wwc:px-1 wwc:py-2 wwc:text-sm"
+		},
+		{
+			variant: "underline",
+			display: "icon-text",
+			size: "md",
+			className: "wwc:px-1 wwc:py-3 wwc:text-base"
+		},
+		{
+			variant: "underline",
+			display: "icon-text",
+			size: "lg",
+			className: "wwc:px-1 wwc:py-4 wwc:text-lg"
+		},
+		{
+			variant: "underline",
+			display: "icon",
+			size: "sm",
+			className: "wwc:px-1 wwc:py-2"
+		},
+		{
+			variant: "underline",
+			display: "icon",
+			size: "md",
+			className: "wwc:px-1 wwc:py-3"
+		},
+		{
+			variant: "underline",
+			display: "icon",
+			size: "lg",
+			className: "wwc:px-1 wwc:py-4"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		display: "text",
+		size: "md"
+	}
+});
+const TabsTrigger = React.forwardRef(({ className, display, ...props }, ref) => {
+	const { variant, size } = React.useContext(TabsStyleContext);
+	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
+		ref,
+		className: cn(tabsTriggerVariants({
+			variant,
+			display,
+			size
+		}), className),
+		...props
+	});
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, {
+	ref,
+	className: cn("wwc:mt-2 wwc:ring-offset-background wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2", className),
+	...props
+}));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+/**
+* A tab trigger that opens a dropdown of sub-views. Clicking it activates the tab (like any
+* `TabsTrigger`) and opens the menu; it inherits the surrounding `Tabs` variant/size, so it sits
+* flush inside an `underline` tab row. Place it inside a `TabsList`.
+*/
+const TabsDropdownTrigger = React.forwardRef(({ className, children, items, onSelect, activeItem, display = "icon-text", ...props }, ref) => {
+	const { variant, size } = React.useContext(TabsStyleContext);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(TabsPrimitive.Trigger, {
+			ref,
+			className: cn(tabsTriggerVariants({
+				variant,
+				display,
+				size
+			}), "wwc:gap-1.5", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+				className: "wwc:size-3.5 wwc:opacity-60",
+				"aria-hidden": "true"
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			onSelect: () => onSelect?.(item.value),
+			className: cn(item.value === activeItem && "wwc:font-semibold wwc:text-foreground"),
+			children: item.label
+		}, item.value))
+	})] });
+});
+TabsDropdownTrigger.displayName = "TabsDropdownTrigger";
+//#endregion
+export { Tabs, TabsContent, TabsDropdownTrigger, TabsList, TabsTrigger };
+
+//# sourceMappingURL=tabs.mjs.map

package/dist/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":[],"sources":["../src/tabs.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport {ChevronDown} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from \"./dropdown-menu\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\n\nconst TabsStyleContext = React.createContext<{variant: TabsVariant; size: TabsSize}>({\n\tvariant: \"default\",\n\tsize: \"md\",\n});\n\n/** Tabbed navigation with composable trigger and content sub-components. */\nconst Tabs = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n\t\tvariant?: TabsVariant;\n\t\tsize?: TabsSize;\n\t}\n>(({variant = \"default\", size = \"md\", ...props}, ref) => {\n\tconst ctx = React.useMemo(() => ({variant, size}), [variant, size]);\n\treturn (\n\t\t<TabsStyleContext.Provider value={ctx}>\n\t\t\t<TabsPrimitive.Root ref={ref} {...props} />\n\t\t</TabsStyleContext.Provider>\n\t);\n});\nTabs.displayName = \"Tabs\";\n\n/* -----------------------------------------------------------------------------\n * TabsList\n * -------------------------------------------------------------------------- */\n\nconst tabsListVariants = cva(\"wwc:inline-flex wwc:items-center wwc:text-muted-foreground\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"wwc:justify-center wwc:rounded-lg wwc:bg-muted wwc:p-1\",\n\t\t\tunderline: \"wwc:h-auto wwc:w-full wwc:justify-start wwc:border-b wwc:border-border wwc:bg-transparent wwc:p-0\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t\tlg: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{variant: \"default\", size: \"sm\", className: \"wwc:h-8\"},\n\t\t{variant: \"default\", size: \"md\", className: \"wwc:h-9\"},\n\t\t{variant: \"default\", size: \"lg\", className: \"wwc:h-10\"},\n\t\t{variant: \"underline\", size: \"sm\", className: \"wwc:gap-4\"},\n\t\t{variant: \"underline\", size: \"md\", className: \"wwc:gap-6\"},\n\t\t{variant: \"underline\", size: \"lg\", className: \"wwc:gap-8\"},\n\t],\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t\tsize: \"md\",\n\t},\n});\n\nconst TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({className, ...props}, ref) => {\n\tconst {variant, size} = React.useContext(TabsStyleContext);\n\treturn <TabsPrimitive.List ref={ref} className={cn(tabsListVariants({variant, size}), className)} {...props} />;\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\n/* -----------------------------------------------------------------------------\n * TabsTrigger\n * -------------------------------------------------------------------------- */\n\nconst tabsTriggerVariants = cva(\n\t\"wwc:inline-flex wwc:items-center wwc:justify-center wwc:whitespace-nowrap wwc:font-medium wwc:ring-offset-background wwc:transition-all wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2 wwc:disabled:pointer-events-none wwc:disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t// Active state keys off `aria-selected`, NOT `data-[state=active]`. A trigger wrapped in\n\t\t\t// HoverTooltip gets Radix's tooltip `data-state` (\"open\"/\"closed\") merged over its own by\n\t\t\t// `asChild`, so data-state rules silently never match. aria-selected is set by Radix Tabs\n\t\t\t// and nothing overwrites it. Cues are redundant on purpose (surface + ring + weight +\n\t\t\t// color) so the state survives icon-only tabs, where there is no label to carry it.\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"wwc:rounded-md wwc:aria-selected:bg-card wwc:aria-selected:text-foreground wwc:aria-selected:font-semibold wwc:aria-selected:ring-1 wwc:aria-selected:ring-border wwc:aria-selected:shadow-(--shadow-surface)\",\n\t\t\t\tunderline:\n\t\t\t\t\t\"wwc:-mb-px wwc:rounded-none wwc:border-b-2 wwc:border-transparent wwc:bg-transparent wwc:text-muted-foreground wwc:aria-selected:border-foreground wwc:aria-selected:text-foreground wwc:aria-selected:font-semibold\",\n\t\t\t},\n\t\t\tdisplay: {\n\t\t\t\ttext: \"wwc:px-3 wwc:py-1 wwc:text-sm wwc:gap-2\",\n\t\t\t\ticon: \"wwc:px-2.5 wwc:py-1.5\",\n\t\t\t\t\"icon-text\": \"wwc:px-3 wwc:py-1 wwc:text-sm wwc:gap-2\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"\",\n\t\t\t\tmd: \"\",\n\t\t\t\tlg: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// Default rounded variant: size affects text size + padding\n\t\t\t{variant: \"default\", display: \"text\", size: \"sm\", className: \"wwc:px-2.5 wwc:py-0.5 wwc:text-xs\"},\n\t\t\t{variant: \"default\", display: \"text\", size: \"lg\", className: \"wwc:px-4 wwc:py-1.5 wwc:text-base\"},\n\t\t\t{variant: \"default\", display: \"icon-text\", size: \"sm\", className: \"wwc:px-2.5 wwc:py-0.5 wwc:text-xs\"},\n\t\t\t{variant: \"default\", display: \"icon-text\", size: \"lg\", className: \"wwc:px-4 wwc:py-1.5 wwc:text-base\"},\n\t\t\t{variant: \"default\", display: \"icon\", size: \"sm\", className: \"wwc:px-2 wwc:py-1\"},\n\t\t\t{variant: \"default\", display: \"icon\", size: \"lg\", className: \"wwc:px-3 wwc:py-2\"},\n\t\t\t// Underline + text/icon-text: padding + text-size scale with size\n\t\t\t{variant: \"underline\", display: \"text\", size: \"sm\", className: \"wwc:px-1 wwc:py-2 wwc:text-sm\"},\n\t\t\t{variant: \"underline\", display: \"text\", size: \"md\", className: \"wwc:px-1 wwc:py-3 wwc:text-base\"},\n\t\t\t{variant: \"underline\", display: \"text\", size: \"lg\", className: \"wwc:px-1 wwc:py-4 wwc:text-lg\"},\n\t\t\t{variant: \"underline\", display: \"icon-text\", size: \"sm\", className: \"wwc:px-1 wwc:py-2 wwc:text-sm\"},\n\t\t\t{variant: \"underline\", display: \"icon-text\", size: \"md\", className: \"wwc:px-1 wwc:py-3 wwc:text-base\"},\n\t\t\t{variant: \"underline\", display: \"icon-text\", size: \"lg\", className: \"wwc:px-1 wwc:py-4 wwc:text-lg\"},\n\t\t\t{variant: \"underline\", display: \"icon\", size: \"sm\", className: \"wwc:px-1 wwc:py-2\"},\n\t\t\t{variant: \"underline\", display: \"icon\", size: \"md\", className: \"wwc:px-1 wwc:py-3\"},\n\t\t\t{variant: \"underline\", display: \"icon\", size: \"lg\", className: \"wwc:px-1 wwc:py-4\"},\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tdisplay: \"text\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ninterface TabsTriggerProps\n\textends\n\t\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\tOmit<VariantProps<typeof tabsTriggerVariants>, \"variant\" | \"size\"> {}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n\t({className, display, ...props}, ref) => {\n\t\tconst {variant, size} = React.useContext(TabsStyleContext);\n\t\treturn (\n\t\t\t<TabsPrimitive.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(tabsTriggerVariants({variant, display, size}), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\n/* -----------------------------------------------------------------------------\n * TabsContent\n * -------------------------------------------------------------------------- */\n\nconst TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({className, ...props}, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"wwc:mt-2 wwc:ring-offset-background wwc:focus-visible:outline-none wwc:focus-visible:ring-2 wwc:focus-visible:ring-ring wwc:focus-visible:ring-offset-2\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * TabsDropdownTrigger\n * -------------------------------------------------------------------------- */\n\n/** A single choice inside a {@link TabsDropdownTrigger}. */\nexport interface TabsDropdownItem {\n\tvalue: string;\n\tlabel: React.ReactNode;\n}\n\ninterface TabsDropdownTriggerProps\n\textends\n\t\tOmit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, \"onSelect\">,\n\t\tPick<VariantProps<typeof tabsTriggerVariants>, \"display\"> {\n\t/** The sub-views this tab pages between. */\n\titems: TabsDropdownItem[];\n\t/** Called with the chosen sub-item's value. Selecting also activates this tab. */\n\tonSelect?: (value: string) => void;\n\t/** The currently selected sub-item value (highlighted in the menu). */\n\tactiveItem?: string;\n}\n\n/**\n * A tab trigger that opens a dropdown of sub-views. Clicking it activates the tab (like any\n * `TabsTrigger`) and opens the menu; it inherits the surrounding `Tabs` variant/size, so it sits\n * flush inside an `underline` tab row. Place it inside a `TabsList`.\n */\nconst TabsDropdownTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsDropdownTriggerProps>(\n\t({className, children, items, onSelect, activeItem, display = \"icon-text\", ...props}, ref) => {\n\t\tconst {variant, size} = React.useContext(TabsStyleContext);\n\t\treturn (\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<TabsPrimitive.Trigger\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={cn(tabsTriggerVariants({variant, display, size}), \"wwc:gap-1.5\", className)}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t\t<ChevronDown className=\"wwc:size-3.5 wwc:opacity-60\" aria-hidden=\"true\" />\n\t\t\t\t\t</TabsPrimitive.Trigger>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent align=\"start\">\n\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tonSelect={() => onSelect?.(item.value)}\n\t\t\t\t\t\t\tclassName={cn(item.value === activeItem && \"wwc:font-semibold wwc:text-foreground\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t);\n\t},\n);\nTabsDropdownTrigger.displayName = \"TabsDropdownTrigger\";\n\nexport {Tabs, TabsList, TabsTrigger, TabsContent, TabsDropdownTrigger};\n"],"mappings":"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"}

package/dist/task-monitor.d.mts

@@ -0,0 +1,70 @@
+import { CommentItem } from "./comment-thread.mjs";
+import { InlineCommentComposerSubmit } from "./inline-comment-composer.mjs";
+import { SearchFilterBarFilter } from "./search-filter-bar.mjs";
+import * as React from "react";
+//#region src/task-monitor.d.ts
+export type TaskMonitorItem = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  meta?: React.ReactNode;
+  /** Optional leading icon, carried onto the item's open browser tab. */
+  icon?: React.ReactNode;
+};
+export type TaskMonitorAction = {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onSelect: () => void;
+  tone?: "default" | "destructive";
+};
+export interface TaskMonitorProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: TaskMonitorItem[];
+  listTitle?: string;
+  search: string;
+  onSearchChange: (s: string) => void;
+  searchPlaceholder?: string;
+  filters?: SearchFilterBarFilter[];
+  activeFilterId?: string;
+  onActiveFilterChange?: (id: string | undefined) => void;
+  listActions?: TaskMonitorAction[];
+  /** Extra controls rendered beside the list search input (e.g. a `<Filter>` trigger). */
+  listTrailing?: React.ReactNode;
+  /** Applied-filter strip rendered under the list search input (e.g. `<FilterChips>`). */
+  listFilterStrip?: React.ReactNode;
+  renderListRow?: (item: TaskMonitorItem, isSelected: boolean) => React.ReactNode;
+  openItemIds: string[];
+  activeItemId?: string;
+  onActiveItemChange?: (id: string | undefined) => void;
+  onItemOpen?: (id: string) => void;
+  onItemClose?: (id: string) => void;
+  /** Reorder the open-item tabs by drag (browser-style). Fires with the full tab-id list in its new order. */
+  onReorder?: (orderedIds: string[]) => void;
+  renderItemBody: (item: TaskMonitorItem) => React.ReactNode;
+  /** Singular noun used in default empty-state copy and shortcut labels (e.g. "task", "alert", "issue"). Defaults to "item". */
+  itemNoun?: string;
+  /** Disable the built-in N / P / ←/→ / Esc keyboard shortcuts. */
+  disableKeyboardShortcuts?: boolean;
+  /** Comments for the active item. Newest-first ordering is the consumer's responsibility. */
+  comments?: CommentItem[];
+  commentValue?: string;
+  onCommentValueChange?: (s: string) => void;
+  onCommentSubmit?: (item: TaskMonitorItem, submission: InlineCommentComposerSubmit) => void;
+  commentPlaceholder?: string;
+  commentFlagged?: boolean;
+  onCommentFlaggedChange?: (flagged: boolean) => void;
+  commentDate?: Date;
+  onCommentDateChange?: (date: Date | undefined) => void;
+  onCommentAddImage?: (files: FileList) => void;
+  onCommentAddMention?: () => void;
+  actionPanelTitle?: string;
+  actionPanelDescription?: string;
+  actionPanelWidth?: number;
+  renderActionDetails?: (item: TaskMonitorItem) => React.ReactNode;
+  primaryAction?: TaskMonitorAction;
+  secondaryActions?: TaskMonitorAction[];
+}
+declare const TaskMonitor: React.ForwardRefExoticComponent<TaskMonitorProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TaskMonitor };
+//# sourceMappingURL=task-monitor.d.mts.map

package/dist/task-monitor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-monitor.d.mts","names":[],"sources":["../src/task-monitor.tsx"],"mappings":";;;;;YA2BY;EACX;EACA;EACA;EACA,OAAO,MAAM;;EAEb,OAAO,MAAM;;YAGF;EACX;EACA;EACA,OAAO,MAAM;EACb;EACA;;iBAGgB,yBAAyB,MAAM,eAAe;EAC9D,OAAO;EACP;EACA;EACA,iBAAiB;EACjB;EACA,UAAU;EACV;EACA,wBAAwB;EACxB,cAAc;;EAEd,eAAe,MAAM;;EAErB,kBAAkB,MAAM;EACxB,iBAAiB,MAAM,iBAAiB,wBAAwB,MAAM;EAEtE;EACA;EACA,sBAAsB;EACtB,cAAc;EACd,eAAe;;EAEf,aAAa;EACb,iBAAiB,MAAM,oBAAoB,MAAM;;EAEjD;;EAEA;;EAGA,WAAW;EACX;EACA,wBAAwB;EACxB,mBAAmB,MAAM,iBAAiB,YAAY;EACtD;EACA;EACA,0BAA0B;EAC1B,cAAc;EACd,uBAAuB,MAAM;EAC7B,qBAAqB,OAAO;EAC5B;EAEA;EACA;EACA;EACA,uBAAuB,MAAM,oBAAoB,MAAM;EACvD,gBAAgB;EAChB,mBAAmB;;cAoBd,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}