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

package/dist/schedule-week-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-week-bar.mjs","names":[],"sources":["../src/schedule-week-bar.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport {Calendar, ChevronLeft, ChevronRight, Play} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\n\nconst DAY_MS = 86_400_000;\n\n/** Project schedule bounds the week-stepper pages through. */\nexport interface ScheduleMeta {\n\t/** ISO date (YYYY-MM-DD) of the project's first day. */\n\tprojectStart: string;\n\t/** Total number of days in the schedule. */\n\ttotalDays: number;\n}\n\nconst DEFAULT_META: ScheduleMeta = {projectStart: \"2026-06-01\", totalDays: 180};\n\nfunction dayMs(iso: string, offsetDays = 0): number {\n\treturn Date.parse(`${iso}T00:00:00Z`) + offsetDays * DAY_MS;\n}\n\nfunction weekLabel(startMs: number): string {\n\tconst fmt = new Intl.DateTimeFormat(\"en-US\", {month: \"short\", day: \"numeric\", timeZone: \"UTC\"});\n\treturn `${fmt.format(new Date(startMs))} – ${fmt.format(new Date(startMs + 6 * DAY_MS))}`;\n}\n\nconst scheduleWeekBarVariants = cva(\n\t\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:rounded wwc:border wwc:p-2 wwc:text-sm\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\t/** Translucent frosted panel that floats over 3D / map content. */\n\t\t\t\tfrosted: \"wwc:border-border/50 wwc:bg-background/80 wwc:shadow-lg wwc:backdrop-blur-lg\",\n\t\t\t\t/** Solid bordered surface for use inside a toolbar or panel. */\n\t\t\t\tplain: \"wwc:border-border wwc:bg-card\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"frosted\",\n\t\t},\n\t},\n);\n\nexport interface ScheduleWeekBarProps\n\textends Omit<React.HTMLAttributes<HTMLDivElement>, \"onPlay\">, VariantProps<typeof scheduleWeekBarVariants> {\n\t/** Schedule bounds the stepper pages through. Defaults to a 180-day project. */\n\tmeta?: ScheduleMeta;\n\t/** Called with the zero-based project day of the visible week's start when Play is pressed. */\n\tonPlay?: (day: number) => void;\n}\n\n/** A compact week stepper with prev / next paging and a 4D-timeline play trigger. */\nconst ScheduleWeekBar = React.forwardRef<HTMLDivElement, ScheduleWeekBarProps>(\n\t({className, variant, meta = DEFAULT_META, onPlay, ...props}, ref) => {\n\t\tconst [weekIndex, setWeekIndex] = React.useState(0);\n\t\tconst initialized = React.useRef(false);\n\n\t\tconst maxWeek = React.useMemo(() => Math.max(0, Math.floor((meta.totalDays - 1) / 7)), [meta.totalDays]);\n\n\t\t// Default to the week containing today, clamped to the schedule.\n\t\tReact.useEffect(() => {\n\t\t\tif (initialized.current) return;\n\t\t\tinitialized.current = true;\n\t\t\tconst todayDay = Math.floor((dayMs(new Date().toISOString().slice(0, 10)) - dayMs(meta.projectStart)) / DAY_MS);\n\t\t\tsetWeekIndex(Math.max(0, Math.min(maxWeek, Math.floor(todayDay / 7))));\n\t\t}, [meta.projectStart, maxWeek]);\n\n\t\tconst weekStartDay = weekIndex * 7;\n\t\tconst label = weekLabel(dayMs(meta.projectStart, weekStartDay));\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(scheduleWeekBarVariants({variant}), className)} {...props}>\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-1\">\n\t\t\t\t\t<Calendar className=\"wwc:size-3.5 wwc:shrink-0 wwc:text-muted-foreground\" aria-hidden=\"true\" />\n\t\t\t\t\t<span className=\"wwc:font-semibold wwc:tabular-nums wwc:text-foreground\">{label}</span>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:justify-between wwc:gap-0.5 wwc:px-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\taria-label=\"Previous week\"\n\t\t\t\t\t\tdisabled={weekIndex <= 0}\n\t\t\t\t\t\tonClick={() => setWeekIndex((w) => Math.max(0, w - 1))}\n\t\t\t\t\t\tclassName=\"wwc:size-6 wwc:text-muted-foreground wwc:hover:text-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronLeft className=\"wwc:size-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\taria-label={`Play 4D timeline from ${label}`}\n\t\t\t\t\t\tonClick={() => onPlay?.(weekStartDay)}\n\t\t\t\t\t\tclassName=\"wwc:size-6 wwc:text-muted-foreground wwc:hover:text-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Play className=\"wwc:size-4 wwc:fill-current\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\taria-label=\"Next week\"\n\t\t\t\t\t\tdisabled={weekIndex >= maxWeek}\n\t\t\t\t\t\tonClick={() => setWeekIndex((w) => Math.min(maxWeek, w + 1))}\n\t\t\t\t\t\tclassName=\"wwc:size-6 wwc:text-muted-foreground wwc:hover:text-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronRight className=\"wwc:size-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nScheduleWeekBar.displayName = \"ScheduleWeekBar\";\n\nexport {ScheduleWeekBar, scheduleWeekBarVariants};\n"],"mappings":";;;;;;;AAOA,MAAM,SAAS;AAUf,MAAM,eAA6B;CAAC,cAAc;CAAc,WAAW;AAAG;AAE9E,SAAS,MAAM,KAAa,aAAa,GAAW;CACnD,OAAO,KAAK,MAAM,GAAG,IAAI,WAAW,IAAI,aAAa;AACtD;AAEA,SAAS,UAAU,SAAyB;CAC3C,MAAM,MAAM,IAAI,KAAK,eAAe,SAAS;EAAC,OAAO;EAAS,KAAK;EAAW,UAAU;CAAK,CAAC;CAC9F,OAAO,GAAG,IAAI,OAAO,IAAI,KAAK,OAAO,CAAC,EAAE,KAAK,IAAI,OAAO,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC;AACvF;AAEA,MAAM,0BAA0B,IAC/B,+FACA;CACC,UAAU,EACT,SAAS;;EAER,SAAS;;EAET,OAAO;CACR,EACD;CACA,iBAAiB,EAChB,SAAS,UACV;AACD,CACD;;AAWA,MAAM,kBAAkB,MAAM,YAC5B,EAAC,WAAW,SAAS,OAAO,cAAc,QAAQ,GAAG,SAAQ,QAAQ;CACrE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC;CAClD,MAAM,cAAc,MAAM,OAAO,KAAK;CAEtC,MAAM,UAAU,MAAM,cAAc,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;CAGvG,MAAM,gBAAgB;EACrB,IAAI,YAAY,SAAS;EACzB,YAAY,UAAU;EACtB,MAAM,WAAW,KAAK,OAAO,uBAAM,IAAI,KAAK,EAAA,CAAE,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,MAAM,KAAK,YAAY,KAAK,MAAM;EAC9G,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC;CACtE,GAAG,CAAC,KAAK,cAAc,OAAO,CAAC;CAE/B,MAAM,eAAe,YAAY;CACjC,MAAM,QAAQ,UAAU,MAAM,KAAK,cAAc,YAAY,CAAC;CAE9D,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,wBAAwB,EAAC,QAAO,CAAC,GAAG,SAAS;EAAG,GAAI;EAAjF,UAAA,CACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,UAAD;IAAU,WAAU;IAAsD,eAAY;GAAQ,CAAA,GAC9F,oBAAC,QAAD;IAAM,WAAU;IAA0D,UAAA;GAAY,CAAA,CAClF;EACL,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,oBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,MAAA;KACA,cAAW;KACX,UAAU,aAAa;KACvB,eAAe,cAAc,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,CAAC;KACrD,WAAU;KAEV,UAAA,oBAAC,aAAD,EAAa,WAAU,aAAc,CAAA;IAC9B,CAAA;IACR,oBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,MAAA;KACA,cAAY,yBAAyB;KACrC,eAAe,SAAS,YAAY;KACpC,WAAU;KAEV,UAAA,oBAAC,MAAD,EAAM,WAAU,8BAA+B,CAAA;IACxC,CAAA;IACR,oBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,MAAA;KACA,cAAW;KACX,UAAU,aAAa;KACvB,eAAe,cAAc,MAAM,KAAK,IAAI,SAAS,IAAI,CAAC,CAAC;KAC3D,WAAU;KAEV,UAAA,oBAAC,cAAD,EAAc,WAAU,aAAc,CAAA;IAC/B,CAAA;GACJ;EACD,CAAA,CAAA;;AAEP,CACD;AACA,gBAAgB,cAAc"}

package/dist/score-gauge.d.mts

@@ -0,0 +1,24 @@
+import * as React from "react";
+//#region src/score-gauge.d.ts
+export type ScoreGaugeTone = "success" | "warning" | "danger" | "primary";
+export interface ScoreGaugeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The score to plot. Clamped to `0..max`. */
+  value: number;
+  /** Top of the scale. Defaults to 100. */
+  max?: number;
+  /** Colour of the filled arc and the score figure. */
+  tone?: ScoreGaugeTone;
+  /** Diameter in px. Defaults to 120. */
+  size?: number;
+  /** Caption under the score. Defaults to `/ {max}`; pass `null` to hide. */
+  caption?: React.ReactNode;
+}
+/**
+ * Radial score dial — a ring whose filled arc is the score, with the figure centred inside it.
+ * Use for a single headline index (health score, readiness, compliance), not for a distribution:
+ * a donut of several categories is a pie chart, and belongs in a `TrendChart`.
+ */
+declare const ScoreGauge: React.ForwardRefExoticComponent<ScoreGaugeProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScoreGauge };
+//# sourceMappingURL=score-gauge.d.mts.map

package/dist/score-gauge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"score-gauge.d.mts","names":[],"sources":["../src/score-gauge.tsx"],"mappings":";;YAOY;iBAgBK,wBAAwB,KAAK,MAAM,eAAe;;EAElE;;EAEA;;EAEA,OAAO;;EAEP;;EAEA,UAAU,MAAM;;;;;;;cAQX,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/score-gauge.mjs

@@ -0,0 +1,73 @@
+import { ChartContainer } from "./chart.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/score-gauge.tsx
+const TONE_ARC = {
+	success: "#16a34a",
+	warning: "#f59e0b",
+	danger: "#dc2626",
+	primary: "#3b82f6"
+};
+const TONE_TEXT = {
+	success: "wwc:text-green-600",
+	warning: "wwc:text-amber-600",
+	danger: "wwc:text-red-600",
+	primary: "wwc:text-primary"
+};
+/**
+* Radial score dial — a ring whose filled arc is the score, with the figure centred inside it.
+* Use for a single headline index (health score, readiness, compliance), not for a distribution:
+* a donut of several categories is a pie chart, and belongs in a `TrendChart`.
+*/
+const ScoreGauge = React.forwardRef(({ value, max = 100, tone = "primary", size = 120, caption, className, ...props }, ref) => {
+	const clamped = Math.min(Math.max(value, 0), max);
+	const option = React.useMemo(() => ({ series: [{
+		type: "pie",
+		radius: ["78%", "100%"],
+		center: ["50%", "50%"],
+		silent: true,
+		label: { show: false },
+		labelLine: { show: false },
+		data: [{
+			value: clamped,
+			itemStyle: { color: TONE_ARC[tone] }
+		}, {
+			value: max - clamped,
+			itemStyle: { color: "#e5e7eb" }
+		}]
+	}] }), [
+		clamped,
+		max,
+		tone
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:relative wwc:shrink-0", className),
+		style: {
+			height: size,
+			width: size
+		},
+		role: "img",
+		"aria-label": `${clamped} out of ${max}`,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChartContainer, {
+			option,
+			height: size
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:flex wwc:flex-col wwc:items-center wwc:justify-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("wwc:text-2xl wwc:font-semibold", TONE_TEXT[tone]),
+				children: clamped
+			}), caption !== null && /* @__PURE__ */ jsx("span", {
+				className: "wwc:text-xs wwc:text-muted-foreground",
+				children: caption ?? `/ ${max}`
+			})]
+		})]
+	});
+});
+ScoreGauge.displayName = "ScoreGauge";
+//#endregion
+export { ScoreGauge };
+
+//# sourceMappingURL=score-gauge.mjs.map

package/dist/score-gauge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"score-gauge.mjs","names":[],"sources":["../src/score-gauge.tsx"],"sourcesContent":["import type {EChartsOption} from \"echarts\";\n\nimport {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {ChartContainer} from \"./chart\";\n\nexport type ScoreGaugeTone = \"success\" | \"warning\" | \"danger\" | \"primary\";\n\nconst TONE_ARC: Record<ScoreGaugeTone, string> = {\n\tsuccess: \"#16a34a\",\n\twarning: \"#f59e0b\",\n\tdanger: \"#dc2626\",\n\tprimary: \"#3b82f6\",\n};\n\nconst TONE_TEXT: Record<ScoreGaugeTone, string> = {\n\tsuccess: \"wwc:text-green-600\",\n\twarning: \"wwc:text-amber-600\",\n\tdanger: \"wwc:text-red-600\",\n\tprimary: \"wwc:text-primary\",\n};\n\nexport interface ScoreGaugeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** The score to plot. Clamped to `0..max`. */\n\tvalue: number;\n\t/** Top of the scale. Defaults to 100. */\n\tmax?: number;\n\t/** Colour of the filled arc and the score figure. */\n\ttone?: ScoreGaugeTone;\n\t/** Diameter in px. Defaults to 120. */\n\tsize?: number;\n\t/** Caption under the score. Defaults to `/ {max}`; pass `null` to hide. */\n\tcaption?: React.ReactNode;\n}\n\n/**\n * Radial score dial — a ring whose filled arc is the score, with the figure centred inside it.\n * Use for a single headline index (health score, readiness, compliance), not for a distribution:\n * a donut of several categories is a pie chart, and belongs in a `TrendChart`.\n */\nconst ScoreGauge = React.forwardRef<HTMLDivElement, ScoreGaugeProps>(\n\t({value, max = 100, tone = \"primary\", size = 120, caption, className, ...props}, ref) => {\n\t\tconst clamped = Math.min(Math.max(value, 0), max);\n\n\t\tconst option = React.useMemo<EChartsOption>(\n\t\t\t() => ({\n\t\t\t\tseries: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"pie\",\n\t\t\t\t\t\tradius: [\"78%\", \"100%\"],\n\t\t\t\t\t\tcenter: [\"50%\", \"50%\"],\n\t\t\t\t\t\tsilent: true,\n\t\t\t\t\t\tlabel: {show: false},\n\t\t\t\t\t\tlabelLine: {show: false},\n\t\t\t\t\t\tdata: [\n\t\t\t\t\t\t\t{value: clamped, itemStyle: {color: TONE_ARC[tone]}},\n\t\t\t\t\t\t\t{value: max - clamped, itemStyle: {color: \"#e5e7eb\"}},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t}),\n\t\t\t[clamped, max, tone],\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"wwc:relative wwc:shrink-0\", className)}\n\t\t\t\tstyle={{height: size, width: size}}\n\t\t\t\t// oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a canvas dial, not a bitmap\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label={`${clamped} out of ${max}`}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartContainer option={option} height={size} />\n\t\t\t\t<div className=\"wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:flex wwc:flex-col wwc:items-center wwc:justify-center\">\n\t\t\t\t\t<span className={cn(\"wwc:text-2xl wwc:font-semibold\", TONE_TEXT[tone])}>{clamped}</span>\n\t\t\t\t\t{caption !== null && <span className=\"wwc:text-xs wwc:text-muted-foreground\">{caption ?? `/ ${max}`}</span>}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nScoreGauge.displayName = \"ScoreGauge\";\n\nexport {ScoreGauge};\n"],"mappings":";;;;;AASA,MAAM,WAA2C;CAChD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;AACV;AAEA,MAAM,YAA4C;CACjD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;AACV;;;;;;AAoBA,MAAM,aAAa,MAAM,YACvB,EAAC,OAAO,MAAM,KAAK,OAAO,WAAW,OAAO,KAAK,SAAS,WAAW,GAAG,SAAQ,QAAQ;CACxF,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG;CAEhD,MAAM,SAAS,MAAM,eACb,EACN,QAAQ,CACP;EACC,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM;EACtB,QAAQ,CAAC,OAAO,KAAK;EACrB,QAAQ;EACR,OAAO,EAAC,MAAM,MAAK;EACnB,WAAW,EAAC,MAAM,MAAK;EACvB,MAAM,CACL;GAAC,OAAO;GAAS,WAAW,EAAC,OAAO,SAAS,MAAK;EAAC,GACnD;GAAC,OAAO,MAAM;GAAS,WAAW,EAAC,OAAO,UAAS;EAAC,CACrD;CACD,CACD,EACD,IACA;EAAC;EAAS;EAAK;CAAI,CACpB;CAEA,OACC,qBAAC,OAAD;EACM;EACL,WAAW,GAAG,6BAA6B,SAAS;EACpD,OAAO;GAAC,QAAQ;GAAM,OAAO;EAAI;EAEjC,MAAK;EACL,cAAY,GAAG,QAAQ,UAAU;EACjC,GAAI;EAPL,UAAA,CASC,oBAAC,gBAAD;GAAwB;GAAQ,QAAQ;EAAO,CAAA,GAC/C,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,QAAD;IAAM,WAAW,GAAG,kCAAkC,UAAU,KAAK;IAAI,UAAA;GAAc,CAAA,GACtF,YAAY,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAAyC,UAAA,WAAW,KAAK;GAAY,CAAA,CACtG;EACD,CAAA,CAAA;;AAEP,CACD;AACA,WAAW,cAAc"}

package/dist/scroll-area.d.mts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+//#region src/scroll-area.d.ts
+/** A custom scrollable area with styled scrollbars built on Radix. */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  /** Extra classes for the scrollbar track — e.g. a narrower `w-1.5` on a dense surface. */
+  scrollbarClassName?: string;
+  /** Extra classes for the scrollbar thumb — e.g. a lighter `bg-border/60`. */
+  thumbClassName?: string;
+  /**
+   * Constrain the content to the viewport's width instead of letting it size to itself.
+   *
+   * Radix renders the viewport's child as `display: table`, which is how it measures content — and
+   * which means a wide child (a long unbroken path, a table) makes that child wider than the
+   * scroll area. Anything positioned against its right edge, including padding meant to clear the
+   * scrollbar, then sits outside the visible box. Set this on any FIXED-WIDTH panel whose content
+   * should wrap or truncate rather than overflow. Off by default, so a pane that scrolls
+   * horizontally on purpose is unaffected.
+   */
+  fitWidth?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  thumbClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.mts.map

package/dist/scroll-area.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.mts","names":[],"sources":["../src/scroll-area.tsx"],"mappings":";;;;cAKM,YAAU,MAAA,0BAAA,KAAA,oBAAA,kBAAA,MAAA,cAAA;;EAIO;;EAEJ;;;;;;;;;;;EAWN;IAYX,MAAA,cAAA;cAGI,WAAS,MAAA,0BAAA,KAAA,oBAAA,2BAAA,MAAA,cAAA;EAEqF;IAiBlG,MAAA,cAAA"}

package/dist/scroll-area.mjs

@@ -0,0 +1,35 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+//#region src/scroll-area.tsx
+/** A custom scrollable area with styled scrollbars built on Radix. */
+const ScrollArea = React.forwardRef(({ className, children, scrollbarClassName, thumbClassName, fitWidth, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+	ref,
+	className: cn("wwc:relative wwc:overflow-hidden", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+			className: cn("wwc:h-full wwc:w-full wwc:rounded-[inherit]", fitWidth && "wwc:[&>div]:!block"),
+			children
+		}),
+		/* @__PURE__ */ jsx(ScrollBar, {
+			className: scrollbarClassName,
+			thumbClassName
+		}),
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+	]
+}));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+	ref,
+	orientation,
+	className: cn("wwc:flex wwc:touch-none wwc:select-none wwc:transition-colors", orientation === "vertical" && "wwc:h-full wwc:w-2.5 wwc:border-l wwc:border-l-transparent wwc:p-[1px]", orientation === "horizontal" && "wwc:h-2.5 wwc:flex-col wwc:border-t wwc:border-t-transparent wwc:p-[1px]", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: cn("wwc:relative wwc:flex-1 wwc:rounded-full wwc:bg-border", thumbClassName) })
+}));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+//#endregion
+export { ScrollArea, ScrollBar };
+
+//# sourceMappingURL=scroll-area.mjs.map

package/dist/scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.mjs","names":[],"sources":["../src/scroll-area.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\n\n/** A custom scrollable area with styled scrollbars built on Radix. */\nconst ScrollArea = React.forwardRef<\n\tReact.ElementRef<typeof ScrollAreaPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n\t\t/** Extra classes for the scrollbar track — e.g. a narrower `w-1.5` on a dense surface. */\n\t\tscrollbarClassName?: string;\n\t\t/** Extra classes for the scrollbar thumb — e.g. a lighter `bg-border/60`. */\n\t\tthumbClassName?: string;\n\t\t/**\n\t\t * Constrain the content to the viewport's width instead of letting it size to itself.\n\t\t *\n\t\t * Radix renders the viewport's child as `display: table`, which is how it measures content — and\n\t\t * which means a wide child (a long unbroken path, a table) makes that child wider than the\n\t\t * scroll area. Anything positioned against its right edge, including padding meant to clear the\n\t\t * scrollbar, then sits outside the visible box. Set this on any FIXED-WIDTH panel whose content\n\t\t * should wrap or truncate rather than overflow. Off by default, so a pane that scrolls\n\t\t * horizontally on purpose is unaffected.\n\t\t */\n\t\tfitWidth?: boolean;\n\t}\n>(({className, children, scrollbarClassName, thumbClassName, fitWidth, ...props}, ref) => (\n\t<ScrollAreaPrimitive.Root ref={ref} className={cn(\"wwc:relative wwc:overflow-hidden\", className)} {...props}>\n\t\t<ScrollAreaPrimitive.Viewport\n\t\t\tclassName={cn(\"wwc:h-full wwc:w-full wwc:rounded-[inherit]\", fitWidth && \"wwc:[&>div]:!block\")}\n\t\t>\n\t\t\t{children}\n\t\t</ScrollAreaPrimitive.Viewport>\n\t\t<ScrollBar className={scrollbarClassName} thumbClassName={thumbClassName} />\n\t\t<ScrollAreaPrimitive.Corner />\n\t</ScrollAreaPrimitive.Root>\n));\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n\tReact.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {thumbClassName?: string}\n>(({className, orientation = \"vertical\", thumbClassName, ...props}, ref) => (\n\t<ScrollAreaPrimitive.ScrollAreaScrollbar\n\t\tref={ref}\n\t\torientation={orientation}\n\t\tclassName={cn(\n\t\t\t\"wwc:flex wwc:touch-none wwc:select-none wwc:transition-colors\",\n\t\t\torientation === \"vertical\" && \"wwc:h-full wwc:w-2.5 wwc:border-l wwc:border-l-transparent wwc:p-[1px]\",\n\t\t\torientation === \"horizontal\" && \"wwc:h-2.5 wwc:flex-col wwc:border-t wwc:border-t-transparent wwc:p-[1px]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<ScrollAreaPrimitive.ScrollAreaThumb\n\t\t\tclassName={cn(\"wwc:relative wwc:flex-1 wwc:rounded-full wwc:bg-border\", thumbClassName)}\n\t\t/>\n\t</ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport {ScrollArea, ScrollBar};\n"],"mappings":";;;;;;AAKA,MAAM,aAAa,MAAM,YAmBtB,EAAC,WAAW,UAAU,oBAAoB,gBAAgB,UAAU,GAAG,SAAQ,QACjF,qBAAC,oBAAoB,MAArB;CAA+B;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAAtG,UAAA;EACC,oBAAC,oBAAoB,UAArB;GACC,WAAW,GAAG,+CAA+C,YAAY,oBAAoB;GAE5F;EAC4B,CAAA;EAC9B,oBAAC,WAAD;GAAW,WAAW;GAAoC;EAAiB,CAAA;EAC3E,oBAAC,oBAAoB,QAArB,CAA6B,CAAA;CACJ;AAC1B,CAAA,CAAA;AACD,WAAW,cAAc,oBAAoB,KAAK;AAElD,MAAM,YAAY,MAAM,YAGrB,EAAC,WAAW,cAAc,YAAY,gBAAgB,GAAG,SAAQ,QACnE,oBAAC,oBAAoB,qBAArB;CACM;CACQ;CACb,WAAW,GACV,iEACA,gBAAgB,cAAc,0EAC9B,gBAAgB,gBAAgB,4EAChC,SACD;CACA,GAAI;CAEJ,UAAA,oBAAC,oBAAoB,iBAArB,EACC,WAAW,GAAG,0DAA0D,cAAc,EACtF,CAAA;AACuC,CAAA,CACzC;AACD,UAAU,cAAc,oBAAoB,oBAAoB"}

package/dist/search-filter-bar.d.mts

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/search-filter-bar.d.ts
+export type SearchFilterBarFilter = {
+  id: string;
+  label: string;
+  count?: number;
+};
+export interface SearchFilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  search: string;
+  onSearchChange: (next: string) => void;
+  searchPlaceholder?: string;
+  filters?: SearchFilterBarFilter[];
+  activeFilterId?: string;
+  onActiveFilterChange?: (id: string | undefined) => void;
+  trailing?: React.ReactNode;
+  /** Applied-filter strip rendered directly under the search row (e.g. `<FilterChips>`). */
+  filterStrip?: React.ReactNode;
+}
+declare const SearchFilterBar: React.ForwardRefExoticComponent<SearchFilterBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SearchFilterBar };
+//# sourceMappingURL=search-filter-bar.d.mts.map

package/dist/search-filter-bar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-filter-bar.d.mts","names":[],"sources":["../src/search-filter-bar.tsx"],"mappings":";;YAOY;EACX;EACA;EACA;;iBAGgB,6BAA6B,MAAM,eAAe;EAClE;EACA,iBAAiB;EACjB;EACA,UAAU;EACV;EACA,wBAAwB;EACxB,WAAW,MAAM;;EAEjB,cAAc,MAAM;;cAGf,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/search-filter-bar.mjs

@@ -0,0 +1,56 @@
+import { Input } from "./input.mjs";
+import { Chip } from "./chip.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/search-filter-bar.tsx
+const SearchFilterBar = React.forwardRef(({ className, search, onSearchChange, searchPlaceholder = "Search...", filters, activeFilterId, onActiveFilterChange, trailing, filterStrip, ...rest }, ref) => {
+	const hasFilters = filters !== void 0 && filters.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:p-3 wwc:border-b",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:relative wwc:flex-1",
+					children: [/* @__PURE__ */ jsx(Search, { className: "wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+						placeholder: searchPlaceholder,
+						value: search,
+						onChange: (e) => onSearchChange(e.target.value),
+						className: "wwc:pl-8"
+					})]
+				}), trailing && /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-2",
+					children: trailing
+				})]
+			}),
+			filterStrip && /* @__PURE__ */ jsx("div", {
+				className: "wwc:px-3 wwc:py-2 wwc:border-b",
+				children: filterStrip
+			}),
+			hasFilters && /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-1.5 wwc:px-3 wwc:py-2 wwc:border-b wwc:flex-wrap",
+				children: filters.map((filter) => {
+					const isActive = activeFilterId === filter.id;
+					return /* @__PURE__ */ jsxs(Chip, {
+						size: "sm",
+						pressed: isActive,
+						onPressedChange: (next) => {
+							if (!onActiveFilterChange) return;
+							onActiveFilterChange(next ? filter.id : void 0);
+						},
+						children: [filter.label, filter.count !== void 0 && ` ${filter.count}`]
+					}, filter.id);
+				})
+			})
+		]
+	});
+});
+SearchFilterBar.displayName = "SearchFilterBar";
+//#endregion
+export { SearchFilterBar };
+
+//# sourceMappingURL=search-filter-bar.mjs.map

package/dist/search-filter-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-filter-bar.mjs","names":[],"sources":["../src/search-filter-bar.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Search} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Chip} from \"./chip\";\nimport {Input} from \"./input\";\n\nexport type SearchFilterBarFilter = {\n\tid: string;\n\tlabel: string;\n\tcount?: number;\n};\n\nexport interface SearchFilterBarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tsearch: string;\n\tonSearchChange: (next: string) => void;\n\tsearchPlaceholder?: string;\n\tfilters?: SearchFilterBarFilter[];\n\tactiveFilterId?: string;\n\tonActiveFilterChange?: (id: string | undefined) => void;\n\ttrailing?: React.ReactNode;\n\t/** Applied-filter strip rendered directly under the search row (e.g. `<FilterChips>`). */\n\tfilterStrip?: React.ReactNode;\n}\n\nconst SearchFilterBar = React.forwardRef<HTMLDivElement, SearchFilterBarProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tsearch,\n\t\t\tonSearchChange,\n\t\t\tsearchPlaceholder = \"Search...\",\n\t\t\tfilters,\n\t\t\tactiveFilterId,\n\t\t\tonActiveFilterChange,\n\t\t\ttrailing,\n\t\t\tfilterStrip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasFilters = filters !== undefined && filters.length > 0;\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:flex wwc:flex-col\", className)} {...rest}>\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2 wwc:p-3 wwc:border-b\">\n\t\t\t\t\t<div className=\"wwc:relative wwc:flex-1\">\n\t\t\t\t\t\t<Search className=\"wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\t\tonChange={(e) => onSearchChange(e.target.value)}\n\t\t\t\t\t\t\tclassName=\"wwc:pl-8\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{trailing && <div className=\"wwc:flex wwc:items-center wwc:gap-2\">{trailing}</div>}\n\t\t\t\t</div>\n\t\t\t\t{filterStrip && <div className=\"wwc:px-3 wwc:py-2 wwc:border-b\">{filterStrip}</div>}\n\t\t\t\t{hasFilters && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1.5 wwc:px-3 wwc:py-2 wwc:border-b wwc:flex-wrap\">\n\t\t\t\t\t\t{filters.map((filter) => {\n\t\t\t\t\t\t\tconst isActive = activeFilterId === filter.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Chip\n\t\t\t\t\t\t\t\t\tkey={filter.id}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tpressed={isActive}\n\t\t\t\t\t\t\t\t\tonPressedChange={(next) => {\n\t\t\t\t\t\t\t\t\t\tif (!onActiveFilterChange) return;\n\t\t\t\t\t\t\t\t\t\tonActiveFilterChange(next ? filter.id : undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{filter.label}\n\t\t\t\t\t\t\t\t\t{filter.count !== undefined && ` ${filter.count}`}\n\t\t\t\t\t\t\t\t</Chip>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nSearchFilterBar.displayName = \"SearchFilterBar\";\n\nexport {SearchFilterBar};\n"],"mappings":";;;;;;;AAyBA,MAAM,kBAAkB,MAAM,YAE5B,EACC,WACA,QACA,gBACA,oBAAoB,aACpB,SACA,gBACA,sBACA,UACA,aACA,GAAG,QAEJ,QACI;CACJ,MAAM,aAAa,YAAY,KAAA,KAAa,QAAQ,SAAS;CAE7D,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;EAAtE,UAAA;GACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,oBAAC,QAAD,EAAQ,WAAU,2GAA4G,CAAA,GAC9H,oBAAC,OAAD;MACC,aAAa;MACb,OAAO;MACP,WAAW,MAAM,eAAe,EAAE,OAAO,KAAK;MAC9C,WAAU;KACV,CAAA,CACG;IACJ,CAAA,GAAA,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAuC,UAAA;IAAc,CAAA,CAC7E;;GACJ,eAAe,oBAAC,OAAD;IAAK,WAAU;IAAkC,UAAA;GAAiB,CAAA;GACjF,cACA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,QAAQ,KAAK,WAAW;KACxB,MAAM,WAAW,mBAAmB,OAAO;KAC3C,OACC,qBAAC,MAAD;MAEC,MAAK;MACL,SAAS;MACT,kBAAkB,SAAS;OAC1B,IAAI,CAAC,sBAAsB;OAC3B,qBAAqB,OAAO,OAAO,KAAK,KAAA,CAAS;MAClD;MAPD,UAAA,CASE,OAAO,OACP,OAAO,UAAU,KAAA,KAAa,IAAI,OAAO,OACrC;KAVA,GAAA,OAAO,EAUP;IAER,CAAC;GACG,CAAA;EAEF;;AAEP,CACD;AACA,gBAAgB,cAAc"}

package/dist/section-header.d.mts

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/section-header.d.ts
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  /** Supporting line under the title. Omit for a bare heading above a band of tiles. */
+  description?: React.ReactNode;
+  /** Right-aligned slot for the section's actions (buttons, links, search). */
+  actions?: React.ReactNode;
+  /** Heading level rendered. Defaults to `h2`; use `h1` when the section owns the page. */
+  as?: "h1" | "h2" | "h3";
+  /** `md` (default) for page sections, `sm` for a heading above a row of tiles. */
+  size?: "sm" | "md";
+}
+/**
+ * Title (+ optional description) on the left, actions on the right — the heading that sits above a
+ * page section, settings pane, or band of tiles. Use this rather than an ad-hoc `h2` + `p` pair so
+ * every section reads at the same size and spacing.
+ */
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SectionHeader };
+//# sourceMappingURL=section-header.d.mts.map

package/dist/section-header.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.d.mts","names":[],"sources":["../src/section-header.tsx"],"mappings":";;iBAGiB,2BAA2B,KAAK,MAAM,eAAe;EACrE,OAAO,MAAM;;EAEb,cAAc,MAAM;;EAEpB,UAAU,MAAM;;EAEhB;;EAEA;;;;;;;cAQK,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/section-header.mjs

@@ -0,0 +1,32 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/section-header.tsx
+/**
+* Title (+ optional description) on the left, actions on the right — the heading that sits above a
+* page section, settings pane, or band of tiles. Use this rather than an ad-hoc `h2` + `p` pair so
+* every section reads at the same size and spacing.
+*/
+const SectionHeader = React.forwardRef(({ title, description, actions, as: Heading = "h2", size = "md", className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:mb-4 wwc:flex wwc:items-start wwc:justify-between wwc:gap-4", className),
+	...props,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "wwc:min-w-0",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			className: cn("wwc:m-0! wwc:font-semibold! wwc:tracking-tight", size === "md" ? "wwc:text-xl!" : "wwc:text-base!"),
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "wwc:mt-1 wwc:text-sm wwc:text-muted-foreground",
+			children: description
+		})]
+	}), actions && /* @__PURE__ */ jsx("div", {
+		className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2",
+		children: actions
+	})]
+}));
+SectionHeader.displayName = "SectionHeader";
+//#endregion
+export { SectionHeader };
+
+//# sourceMappingURL=section-header.mjs.map

package/dist/section-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.mjs","names":[],"sources":["../src/section-header.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\ttitle: React.ReactNode;\n\t/** Supporting line under the title. Omit for a bare heading above a band of tiles. */\n\tdescription?: React.ReactNode;\n\t/** Right-aligned slot for the section's actions (buttons, links, search). */\n\tactions?: React.ReactNode;\n\t/** Heading level rendered. Defaults to `h2`; use `h1` when the section owns the page. */\n\tas?: \"h1\" | \"h2\" | \"h3\";\n\t/** `md` (default) for page sections, `sm` for a heading above a row of tiles. */\n\tsize?: \"sm\" | \"md\";\n}\n\n/**\n * Title (+ optional description) on the left, actions on the right — the heading that sits above a\n * page section, settings pane, or band of tiles. Use this rather than an ad-hoc `h2` + `p` pair so\n * every section reads at the same size and spacing.\n */\nconst SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(\n\t({title, description, actions, as: Heading = \"h2\", size = \"md\", className, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"wwc:mb-4 wwc:flex wwc:items-start wwc:justify-between wwc:gap-4\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"wwc:min-w-0\">\n\t\t\t\t{/*\n\t\t\t\t * Size, weight and margin are IMPORTANT, and the reason is the same one PageContentHeader\n\t\t\t\t * documents: this renders a semantic h1/h2/h3, our utilities live in `@layer utilities`,\n\t\t\t\t * and ANY unlayered `h2 {}` rule in a host app beats a layered one however specific it\n\t\t\t\t * is. `styles.tw4.css` ships no reset by design — a TW4 consumer is expected to bring its\n\t\t\t\t * own — so a host that brings none leaves the browser's `1.5em bold` in charge and every\n\t\t\t\t * section heading in the library reads as a page title. A section header that renders at\n\t\t\t\t * the host's h2 size is not a section header.\n\t\t\t\t *\n\t\t\t\t * `m-0!` for the same reason: the UA heading margin would open a gap this component's own\n\t\t\t\t * `mb-4` already owns.\n\t\t\t\t */}\n\t\t\t\t<Heading\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:m-0! wwc:font-semibold! wwc:tracking-tight\",\n\t\t\t\t\t\tsize === \"md\" ? \"wwc:text-xl!\" : \"wwc:text-base!\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</Heading>\n\t\t\t\t{description && <p className=\"wwc:mt-1 wwc:text-sm wwc:text-muted-foreground\">{description}</p>}\n\t\t\t</div>\n\t\t\t{actions && <div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2\">{actions}</div>}\n\t\t</div>\n\t),\n);\nSectionHeader.displayName = \"SectionHeader\";\n\nexport {SectionHeader};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,gBAAgB,MAAM,YAC1B,EAAC,OAAO,aAAa,SAAS,IAAI,UAAU,MAAM,OAAO,MAAM,WAAW,GAAG,SAAQ,QACrF,qBAAC,OAAD;CACM;CACL,WAAW,GAAG,mEAAmE,SAAS;CAC1F,GAAI;CAHL,UAAA,CAKC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CAaC,oBAAC,SAAD;GACC,WAAW,GACV,kDACA,SAAS,OAAO,iBAAiB,gBAClC;GAEC,UAAA;EACO,CAAA,GACR,eAAe,oBAAC,KAAD;GAAG,WAAU;GAAkD,UAAA;EAAe,CAAA,CAC1F;CACJ,CAAA,GAAA,WAAW,oBAAC,OAAD;EAAK,WAAU;EAAoD,UAAA;CAAa,CAAA,CACxF;AAEP,CAAA,CAAA;AACA,cAAc,cAAc"}

package/dist/section-panel.d.mts

@@ -0,0 +1,47 @@
+import * as React from "react";
+//#region src/section-panel.d.ts
+export interface SectionPanelProps {
+  /** Leading header icon (lucide or any component type). */
+  icon?: React.ElementType;
+  /** Section title shown in the header. */
+  title: string;
+  /** Optional count badge next to the title (e.g. number of items). */
+  count?: React.ReactNode;
+  /** Optional element rendered at the far right of the header (e.g. a button). */
+  action?: React.ReactNode;
+  /**
+   * Fixed body height in pixels. When set, the body scrolls internally so the panel's footprint
+   * stays constant regardless of how many rows it holds — the list grows inward, not down the page.
+   */
+  height?: number;
+  /** Rendered when there are no children (falsy). */
+  empty?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  /** Extra classes for the scrollable/content body. */
+  bodyClassName?: string;
+}
+/**
+ * A titled section container ("panel") for dashboards: an icon + title + count header with an optional
+ * right-aligned action, over a body that can be capped to a fixed height and scroll internally. Compose
+ * it with `Item` rows for a compact, count-stable list (the "assigned to you" pattern) or with cards.
+ */
+declare const SectionPanel: React.ForwardRefExoticComponent<SectionPanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface SectionPanelRowProps {
+  /** Primary single-line label on the left. */
+  title: React.ReactNode;
+  /** Right-aligned content (counts, badges, status). */
+  trailing?: React.ReactNode;
+  /** When set, the whole row is a button and a trailing chevron is shown. */
+  onClick?: () => void;
+  className?: string;
+}
+/**
+ * A compact single-line row for a `SectionPanel` list: a title on the left and trailing content on the
+ * right, optionally clickable (renders as a button with a chevron). No icon or description — kept short so
+ * many rows fit a fixed-height panel. Composes the `Item` primitive.
+ */
+declare const SectionPanelRow: React.ForwardRefExoticComponent<SectionPanelRowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SectionPanel, SectionPanelRow };
+//# sourceMappingURL=section-panel.d.mts.map

package/dist/section-panel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-panel.d.mts","names":[],"sources":["../src/section-panel.tsx"],"mappings":";;iBASiB;;EAEhB,OAAO,MAAM;;EAEb;;EAEA,QAAQ,MAAM;;EAEd,SAAS,MAAM;;;;;EAKf;;EAEA,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB;;EAEA;;;;;;;cAQK,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA;iBA2BD;;EAEhB,OAAO,MAAM;;EAEb,WAAW,MAAM;;EAEjB;EACA;;;;;;;cAQK,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/section-panel.mjs

@@ -0,0 +1,78 @@
+import { Badge } from "./badge.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "./card.mjs";
+import { ScrollArea } from "./scroll-area.mjs";
+import { Item, ItemTitle } from "./item.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/section-panel.tsx
+/**
+* A titled section container ("panel") for dashboards: an icon + title + count header with an optional
+* right-aligned action, over a body that can be capped to a fixed height and scroll internally. Compose
+* it with `Item` rows for a compact, count-stable list (the "assigned to you" pattern) or with cards.
+*/
+const SectionPanel = React.forwardRef(({ icon: Icon, title, count, action, height, empty, children, className, bodyClassName }, ref) => {
+	const hasChildren = React.Children.toArray(children).some(Boolean);
+	const body = /* @__PURE__ */ jsx("div", {
+		className: cn(!height && "wwc:px-4 wwc:pb-4", height && "wwc:px-4 wwc:py-2", bodyClassName),
+		children: hasChildren ? children : empty
+	});
+	return /* @__PURE__ */ jsxs(Card, {
+		ref,
+		className: cn("wwc:shadow-none", className),
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "wwc:flex wwc:flex-row wwc:items-center wwc:justify-between wwc:gap-2 wwc:space-y-0 wwc:px-4 wwc:py-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-2",
+				children: [
+					Icon && /* @__PURE__ */ jsx(Icon, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }),
+					/* @__PURE__ */ jsx(CardTitle, {
+						className: "wwc:text-base",
+						children: title
+					}),
+					count !== void 0 && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						children: count
+					})
+				]
+			}), action]
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "wwc:p-0",
+			children: height ? /* @__PURE__ */ jsx(ScrollArea, {
+				style: { height },
+				children: body
+			}) : body
+		})]
+	});
+});
+SectionPanel.displayName = "SectionPanel";
+/**
+* A compact single-line row for a `SectionPanel` list: a title on the left and trailing content on the
+* right, optionally clickable (renders as a button with a chevron). No icon or description — kept short so
+* many rows fit a fixed-height panel. Composes the `Item` primitive.
+*/
+const SectionPanelRow = React.forwardRef(({ title, trailing, onClick, className }, ref) => {
+	const row = /* @__PURE__ */ jsxs(Item, {
+		ref,
+		className: cn("wwc:gap-3 wwc:px-2 wwc:py-2.5", onClick && "wwc:cursor-pointer wwc:transition-colors wwc:hover:bg-muted/50", className),
+		children: [/* @__PURE__ */ jsx(ItemTitle, {
+			className: "wwc:truncate",
+			children: title
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-3",
+			children: [trailing, onClick && /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" })]
+		})]
+	});
+	return onClick ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: "wwc:block wwc:w-full wwc:text-left",
+		children: row
+	}) : row;
+});
+SectionPanelRow.displayName = "SectionPanelRow";
+//#endregion
+export { SectionPanel, SectionPanelRow };
+
+//# sourceMappingURL=section-panel.mjs.map

package/dist/section-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-panel.mjs","names":[],"sources":["../src/section-panel.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronRight} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Badge} from \"./badge\";\nimport {Card, CardContent, CardHeader, CardTitle} from \"./card\";\nimport {Item, ItemTitle} from \"./item\";\nimport {ScrollArea} from \"./scroll-area\";\n\nexport interface SectionPanelProps {\n\t/** Leading header icon (lucide or any component type). */\n\ticon?: React.ElementType;\n\t/** Section title shown in the header. */\n\ttitle: string;\n\t/** Optional count badge next to the title (e.g. number of items). */\n\tcount?: React.ReactNode;\n\t/** Optional element rendered at the far right of the header (e.g. a button). */\n\taction?: React.ReactNode;\n\t/**\n\t * Fixed body height in pixels. When set, the body scrolls internally so the panel's footprint\n\t * stays constant regardless of how many rows it holds — the list grows inward, not down the page.\n\t */\n\theight?: number;\n\t/** Rendered when there are no children (falsy). */\n\tempty?: React.ReactNode;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\t/** Extra classes for the scrollable/content body. */\n\tbodyClassName?: string;\n}\n\n/**\n * A titled section container (\"panel\") for dashboards: an icon + title + count header with an optional\n * right-aligned action, over a body that can be capped to a fixed height and scroll internally. Compose\n * it with `Item` rows for a compact, count-stable list (the \"assigned to you\" pattern) or with cards.\n */\nconst SectionPanel = React.forwardRef<HTMLDivElement, SectionPanelProps>(\n\t({icon: Icon, title, count, action, height, empty, children, className, bodyClassName}, ref) => {\n\t\tconst hasChildren = React.Children.toArray(children).some(Boolean);\n\t\tconst body = (\n\t\t\t<div className={cn(!height && \"wwc:px-4 wwc:pb-4\", height && \"wwc:px-4 wwc:py-2\", bodyClassName)}>\n\t\t\t\t{hasChildren ? children : empty}\n\t\t\t</div>\n\t\t);\n\t\treturn (\n\t\t\t<Card ref={ref} className={cn(\"wwc:shadow-none\", className)}>\n\t\t\t\t<CardHeader className=\"wwc:flex wwc:flex-row wwc:items-center wwc:justify-between wwc:gap-2 wwc:space-y-0 wwc:px-4 wwc:py-3\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t{Icon && <Icon className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />}\n\t\t\t\t\t\t<CardTitle className=\"wwc:text-base\">{title}</CardTitle>\n\t\t\t\t\t\t{count !== undefined && <Badge variant=\"secondary\">{count}</Badge>}\n\t\t\t\t\t</div>\n\t\t\t\t\t{action}\n\t\t\t\t</CardHeader>\n\t\t\t\t<CardContent className=\"wwc:p-0\">\n\t\t\t\t\t{height ? <ScrollArea style={{height}}>{body}</ScrollArea> : body}\n\t\t\t\t</CardContent>\n\t\t\t</Card>\n\t\t);\n\t},\n);\nSectionPanel.displayName = \"SectionPanel\";\n\nexport interface SectionPanelRowProps {\n\t/** Primary single-line label on the left. */\n\ttitle: React.ReactNode;\n\t/** Right-aligned content (counts, badges, status). */\n\ttrailing?: React.ReactNode;\n\t/** When set, the whole row is a button and a trailing chevron is shown. */\n\tonClick?: () => void;\n\tclassName?: string;\n}\n\n/**\n * A compact single-line row for a `SectionPanel` list: a title on the left and trailing content on the\n * right, optionally clickable (renders as a button with a chevron). No icon or description — kept short so\n * many rows fit a fixed-height panel. Composes the `Item` primitive.\n */\nconst SectionPanelRow = React.forwardRef<HTMLDivElement, SectionPanelRowProps>(\n\t({title, trailing, onClick, className}, ref) => {\n\t\tconst row = (\n\t\t\t<Item\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:gap-3 wwc:px-2 wwc:py-2.5\",\n\t\t\t\t\tonClick && \"wwc:cursor-pointer wwc:transition-colors wwc:hover:bg-muted/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ItemTitle className=\"wwc:truncate\">{title}</ItemTitle>\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-3\">\n\t\t\t\t\t{trailing}\n\t\t\t\t\t{onClick && <ChevronRight className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />}\n\t\t\t\t</div>\n\t\t\t</Item>\n\t\t);\n\t\treturn onClick ? (\n\t\t\t<button type=\"button\" onClick={onClick} className=\"wwc:block wwc:w-full wwc:text-left\">\n\t\t\t\t{row}\n\t\t\t</button>\n\t\t) : (\n\t\t\trow\n\t\t);\n\t},\n);\nSectionPanelRow.displayName = \"SectionPanelRow\";\n\nexport {SectionPanel, SectionPanelRow};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,eAAe,MAAM,YACzB,EAAC,MAAM,MAAM,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,WAAW,iBAAgB,QAAQ;CAC/F,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO;CACjE,MAAM,OACL,oBAAC,OAAD;EAAK,WAAW,GAAG,CAAC,UAAU,qBAAqB,UAAU,qBAAqB,aAAa;EAC7F,UAAA,cAAc,WAAW;CACtB,CAAA;CAEN,OACC,qBAAC,MAAD;EAAW;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAA1D,UAAA,CACC,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,QAAQ,oBAAC,MAAD,EAAM,WAAU,4CAA6C,CAAA;KACtE,oBAAC,WAAD;MAAW,WAAU;MAAiB,UAAA;KAAiB,CAAA;KACtD,UAAU,KAAA,KAAa,oBAAC,OAAD;MAAO,SAAQ;MAAa,UAAA;KAAa,CAAA;IAC7D;GACJ,CAAA,GAAA,MACU;EACZ,CAAA,GAAA,oBAAC,aAAD;GAAa,WAAU;GACrB,UAAA,SAAS,oBAAC,YAAD;IAAY,OAAO,EAAC,OAAM;IAAI,UAAA;GAAiB,CAAA,IAAI;EACjD,CAAA,CACR;;AAER,CACD;AACA,aAAa,cAAc;;;;;;AAiB3B,MAAM,kBAAkB,MAAM,YAC5B,EAAC,OAAO,UAAU,SAAS,aAAY,QAAQ;CAC/C,MAAM,MACL,qBAAC,MAAD;EACM;EACL,WAAW,GACV,iCACA,WAAW,kEACX,SACD;EAND,UAAA,CAQC,oBAAC,WAAD;GAAW,WAAU;GAAgB,UAAA;EAAiB,CAAA,GACtD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,UACA,WAAW,oBAAC,cAAD,EAAc,WAAU,4CAA6C,CAAA,CAC7E;EACA,CAAA,CAAA;;CAEP,OAAO,UACN,oBAAC,UAAD;EAAQ,MAAK;EAAkB;EAAS,WAAU;EAChD,UAAA;CACM,CAAA,IAER;AAEF,CACD;AACA,gBAAgB,cAAc"}

package/dist/section.d.mts

@@ -0,0 +1,15 @@
+import * as React from "react";
+//#region src/section.d.ts
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** Section title */
+  title?: React.ReactNode;
+  /** Section description */
+  description?: React.ReactNode;
+  /** Actions to display in the header */
+  actions?: React.ReactNode;
+}
+/** A semantic section component with optional title, description, and actions. */
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Section };
+//# sourceMappingURL=section.d.mts.map

package/dist/section.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.mts","names":[],"sources":["../src/section.tsx"],"mappings":";;iBAGiB,qBAAqB,KAAK,MAAM,eAAe;;EAE/D,QAAQ,MAAM;;EAEd,cAAc,MAAM;;EAEpB,UAAU,MAAM;;;cAIX,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}

package/dist/section.mjs

@@ -0,0 +1,34 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/section.tsx
+/** A semantic section component with optional title, description, and actions. */
+const Section = React.forwardRef(({ className, title, description, actions, children, ...props }, ref) => {
+	const hasHeader = title || description || actions;
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: cn("wwc:space-y-4", className),
+		...props,
+		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-start wwc:justify-between wwc:gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1",
+				children: [title && /* @__PURE__ */ jsx("h3", {
+					className: "wwc:text-lg wwc:font-semibold wwc:leading-none wwc:tracking-tight",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "wwc:text-sm wwc:text-muted-foreground",
+					children: description
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-2",
+				children: actions
+			})]
+		}), children]
+	});
+});
+Section.displayName = "Section";
+//#endregion
+export { Section };
+
+//# sourceMappingURL=section.mjs.map

package/dist/section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.mjs","names":[],"sources":["../src/section.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n\t/** Section title */\n\ttitle?: React.ReactNode;\n\t/** Section description */\n\tdescription?: React.ReactNode;\n\t/** Actions to display in the header */\n\tactions?: React.ReactNode;\n}\n\n/** A semantic section component with optional title, description, and actions. */\nconst Section = React.forwardRef<HTMLElement, SectionProps>(\n\t({className, title, description, actions, children, ...props}, ref) => {\n\t\tconst hasHeader = title || description || actions;\n\n\t\treturn (\n\t\t\t<section ref={ref} className={cn(\"wwc:space-y-4\", className)} {...props}>\n\t\t\t\t{hasHeader && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-start wwc:justify-between wwc:gap-4\">\n\t\t\t\t\t\t<div className=\"wwc:space-y-1\">\n\t\t\t\t\t\t\t{title && <h3 className=\"wwc:text-lg wwc:font-semibold wwc:leading-none wwc:tracking-tight\">{title}</h3>}\n\t\t\t\t\t\t\t{description && <p className=\"wwc:text-sm wwc:text-muted-foreground\">{description}</p>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{actions && <div className=\"wwc:flex wwc:items-center wwc:gap-2\">{actions}</div>}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t);\n\t},\n);\nSection.displayName = \"Section\";\n\nexport {Section};\n"],"mappings":";;;;;AAaA,MAAM,UAAU,MAAM,YACpB,EAAC,WAAW,OAAO,aAAa,SAAS,UAAU,GAAG,SAAQ,QAAQ;CACtE,MAAM,YAAY,SAAS,eAAe;CAE1C,OACC,qBAAC,WAAD;EAAc;EAAK,WAAW,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAAlE,UAAA,CACE,aACA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,SAAS,oBAAC,MAAD;KAAI,WAAU;KAAqE,UAAA;IAAU,CAAA,GACtG,eAAe,oBAAC,KAAD;KAAG,WAAU;KAAyC,UAAA;IAAe,CAAA,CACjF;GACJ,CAAA,GAAA,WAAW,oBAAC,OAAD;IAAK,WAAU;IAAuC,UAAA;GAAa,CAAA,CAC3E;EAEL,CAAA,GAAA,QACO;;AAEX,CACD;AACA,QAAQ,cAAc"}

package/dist/segmented-control.d.mts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/segmented-control.d.ts
+declare const segmentedControlVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SegmentedControlOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof segmentedControlVariants> {
+  /** Available options */
+  options: SegmentedControlOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Name for the radio group (for forms) */
+  name?: string;
+}
+/** A segmented control for selecting between multiple options. */
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SegmentedControl, segmentedControlVariants };
+//# sourceMappingURL=segmented-control.d.mts.map

package/dist/segmented-control.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.mts","names":[],"sources":["../src/segmented-control.tsx"],"mappings":";;;cAIM,2BAAwB;;6CAW5B;iBAuBe;EAChB;EACA,OAAO,MAAM;EACb;;iBAGgB,8BACR,KAAK,MAAM,eAAe,8BAA8B,oBAAoB;;EAEpF,SAAS;;EAET;;EAEA,YAAY;;EAEZ;;;cAIK,kBAAgB,MAAA,0BAAA,wBAAA,MAAA,cAAA"}