@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/property-listing-card.js

@@ -0,0 +1,235 @@
+import {
+  Button,
+  ButtonLink
+} from "./chunk-B4H6RNDH.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselIndicator,
+  CarouselItem
+} from "./chunk-FZDSVMKY.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/property-listing-card.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var propertyListingCardVariants = cva(
+  "relative flex w-full min-w-0 flex-col overflow-hidden text-fg-primary",
+  {
+    variants: {
+      variant: {
+        default: "rounded-none border-0 shadow-none",
+        elevated: "rounded-2xl bg-surface-overlay border border-line-subtle shadow-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function PropertyListingCard({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      className: cn(propertyListingCardVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function PropertyListingCardMedia({
+  className,
+  images = [],
+  children,
+  ...props
+}) {
+  const hasMultipleImages = images.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative isolate min-h-70 overflow-hidden rounded-t-2xl bg-surface text-fg-primary",
+        className
+      ),
+      ...props,
+      children: [
+        hasMultipleImages ? /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            imageSize: "full",
+            opts: { loop: true },
+            className: "absolute inset-0 -z-10 size-full rounded-none bg-surface",
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(
+                CarouselItem,
+                {
+                  className: "relative h-full",
+                  children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage })
+                },
+                carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index
+              )) }),
+              /* @__PURE__ */ jsx(CarouselIndicator, { size: "sm", className: "bottom-16" })
+            ]
+          }
+        ) : images[0]?.src ? /* @__PURE__ */ jsx(
+          PropertyListingCardImage,
+          {
+            image: images[0],
+            className: "absolute inset-0 -z-10"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder", children: "Property Image" }),
+        children
+      ]
+    }
+  );
+}
+function PropertyListingCardImage({
+  image,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: image.src,
+      alt: image.alt ?? "Property image",
+      className: cn("size-full object-cover", className),
+      ...props
+    }
+  );
+}
+function PropertyListingCardMediaTop({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-x-2 top-2 z-10 flex items-start justify-between gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PropertyListingCardOptionsBar({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps(
+      {
+        className: cn(
+          "absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "property-listing-card-options-bar"
+    }
+  });
+}
+function PropertyListingCardDetails({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 pt-4", className), ...props });
+}
+function PropertyListingCardTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn("text-gdt-md font-bold text-fg-primary", className),
+      ...props
+    }
+  );
+}
+function PropertyListingCardOverview({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-gdt-sm text-fg-secondary", className), ...props });
+}
+function PropertyListingCardBadges({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-3", className), ...props });
+}
+function PropertyListingCardActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-5 border-line-subtle border-t pt-4 mt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PropertyListingCardActionButton({
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      variant: "tertiary",
+      size: "md",
+      className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
+      ...props
+    }
+  );
+}
+function PropertyListingCardActionButtonLink({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonLink,
+    {
+      variant: "tertiary",
+      size: "md",
+      className: cn("flex-1 bg-action-tertiary text-fg-primary", className),
+      ...props
+    }
+  );
+}
+export {
+  PropertyListingCard,
+  PropertyListingCardActionButton,
+  PropertyListingCardActionButtonLink,
+  PropertyListingCardActions,
+  PropertyListingCardBadges,
+  PropertyListingCardDetails,
+  PropertyListingCardMedia,
+  PropertyListingCardMediaTop,
+  PropertyListingCardOptionsBar,
+  PropertyListingCardOverview,
+  PropertyListingCardTitle,
+  propertyListingCardVariants
+};
+//# sourceMappingURL=property-listing-card.js.map

package/dist/property-listing-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/property-listing-card.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Button, ButtonLink } from \"./button\";\nimport {\n\tCarousel,\n\tCarouselContent,\n\tCarouselIndicator,\n\tCarouselItem,\n} from \"./carousel\";\n\nimport { cn } from \"./lib/cn\";\n\nconst propertyListingCardVariants = cva(\n\t\"relative flex w-full min-w-0 flex-col overflow-hidden text-fg-primary\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"rounded-none border-0 shadow-none\",\n\t\t\t\televated:\n\t\t\t\t\t\"rounded-2xl bg-surface-overlay border border-line-subtle shadow-1\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t},\n\t},\n);\n\ntype PropertyListingImage = {\n\tid?: string;\n\tsrc?: string;\n\talt?: string;\n};\n\ninterface PropertyListingCardProps\n\textends React.ComponentProps<\"article\">,\n\t\tVariantProps<typeof propertyListingCardVariants> {}\n\nfunction PropertyListingCard({\n\tclassName,\n\tvariant,\n\t...props\n}: PropertyListingCardProps) {\n\treturn (\n\t\t<article\n\t\t\tclassName={cn(propertyListingCardVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardMedia({\n\tclassName,\n\timages = [],\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\timages?: PropertyListingImage[];\n}) {\n\tconst hasMultipleImages = images.length > 1;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative isolate min-h-70 overflow-hidden rounded-t-2xl bg-surface text-fg-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasMultipleImages ? (\n\t\t\t\t<Carousel\n\t\t\t\t\timageSize=\"full\"\n\t\t\t\t\topts={{ loop: true }}\n\t\t\t\t\tclassName=\"absolute inset-0 -z-10 size-full rounded-none bg-surface\"\n\t\t\t\t>\n\t\t\t\t\t<CarouselContent>\n\t\t\t\t\t\t{images.map((carouselImage, index) => (\n\t\t\t\t\t\t\t<CarouselItem\n\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\tcarouselImage.id ??\n\t\t\t\t\t\t\t\t\tcarouselImage.src ??\n\t\t\t\t\t\t\t\t\tcarouselImage.alt ??\n\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclassName=\"relative h-full\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<PropertyListingCardImage image={carouselImage} />\n\t\t\t\t\t\t\t</CarouselItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</CarouselContent>\n\t\t\t\t\t<CarouselIndicator size=\"sm\" className=\"bottom-16\" />\n\t\t\t\t</Carousel>\n\t\t\t) : images[0]?.src ? (\n\t\t\t\t<PropertyListingCardImage\n\t\t\t\t\timage={images[0]}\n\t\t\t\t\tclassName=\"absolute inset-0 -z-10\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div className=\"absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder\">\n\t\t\t\t\tProperty Image\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nfunction PropertyListingCardImage({\n\timage,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"img\"> & {\n\timage: PropertyListingImage;\n}) {\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\talt={image.alt ?? \"Property image\"}\n\t\t\tclassName={cn(\"size-full object-cover\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardMediaTop({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute inset-x-2 top-2 z-10 flex items-start justify-between gap-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardOptionsBar({\n\tclassName,\n\trender,\n\t...props\n}: useRender.ComponentProps<\"a\">) {\n\treturn useRender({\n\t\tdefaultTagName: \"a\",\n\t\tprops: mergeProps<\"a\">(\n\t\t\t{\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: \"property-listing-card-options-bar\",\n\t\t},\n\t});\n}\n\nfunction PropertyListingCardDetails({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-4 pt-4\", className)} {...props} />\n\t);\n}\n\nfunction PropertyListingCardTitle({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"h3\">) {\n\treturn (\n\t\t<h3\n\t\t\tclassName={cn(\"text-gdt-md font-bold text-fg-primary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardOverview({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"p\">) {\n\treturn (\n\t\t<p className={cn(\"text-gdt-sm text-fg-secondary\", className)} {...props} />\n\t);\n}\n\nfunction PropertyListingCardBadges({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn <div className={cn(\"flex flex-wrap gap-3\", className)} {...props} />;\n}\n\nfunction PropertyListingCardActions({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-5 border-line-subtle border-t pt-4 mt-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardActionButton({\n\tclassName,\n\ttype = \"button\",\n\t...props\n}: React.ComponentProps<typeof Button>) {\n\treturn (\n\t\t<Button\n\t\t\ttype={type}\n\t\t\tvariant=\"tertiary\"\n\t\t\tsize=\"md\"\n\t\t\tclassName={cn(\"flex-1 bg-action-tertiary text-fg-primary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PropertyListingCardActionButtonLink({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof ButtonLink>) {\n\treturn (\n\t\t<ButtonLink\n\t\t\tvariant=\"tertiary\"\n\t\t\tsize=\"md\"\n\t\t\tclassName={cn(\"flex-1 bg-action-tertiary text-fg-primary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tPropertyListingCard,\n\tPropertyListingCardActionButton,\n\tPropertyListingCardActionButtonLink,\n\tPropertyListingCardActions,\n\tPropertyListingCardBadges,\n\tPropertyListingCardDetails,\n\tPropertyListingCardMedia,\n\tPropertyListingCardMediaTop,\n\tPropertyListingCardOptionsBar,\n\tPropertyListingCardOverview,\n\tPropertyListingCardTitle,\n\tpropertyListingCardVariants,\n};\nexport type { PropertyListingCardProps, PropertyListingImage };\n"],"mappings":"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","names":[]}

package/dist/radar-chart.d.ts

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { RadarChart as RadarChart$1, PolarAngleAxis, PolarGrid, Radar, PolarRadiusAxis } from 'recharts';
+import { ChartConfig } from './chart.js';
+import { ComponentSize } from './size-context.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Radar charts are composable wrappers over the recharts polar primitives.
+ * recharts 3 registers graphical items through context when they render, so —
+ * unlike the recharts 2 era that shaped `bar-chart`/`line-chart` — the
+ * primitives CAN be wrapped in our own components. Each wrapper bakes in the
+ * giddaa defaults (tokens, size-scaled type, mark specs) and forwards every
+ * recharts prop, so anything can be overridden in place or replaced with the
+ * raw recharts element.
+ *
+ * Anatomy: `RadarChart` is the plot root (frame + responsive box + recharts
+ * chart); compose the grid, axes, series, and the shared overlays from
+ * `./chart` as children:
+ *
+ * @example
+ * <ChartCard size="md">
+ *   <ChartHeader>
+ *     <ChartTitle>Listing scorecard</ChartTitle>
+ *     <ChartDescription>How this listing scores per criterion</ChartDescription>
+ *   </ChartHeader>
+ *   <RadarChart config={config} data={data}>
+ *     <RadarChartGrid />
+ *     <RadarChartAngleAxis dataKey="criterion" />
+ *     <ChartTooltip content={<ChartTooltipContent />} />
+ *     <RadarChartSeries dataKey="score" name="This listing" />
+ *   </RadarChart>
+ * </ChartCard>
+ */
+/**
+ * Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens
+ * (each theme's steps are validated against that theme's chart surface; see
+ * `styles/giddaa.css`). Assign colours in this fixed order, never cycled: a
+ * fourth series folds into "Other" or becomes a second chart.
+ */
+declare const RADAR_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
+type RadarChartLayout = {
+    /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
+    height: number;
+    /** Category (angle) and value (radius) tick label font size. */
+    tickFontSize: number;
+    /** Series outline stroke width in px. */
+    strokeWidth: number;
+    /** Radius of the resting data-point dot. */
+    dotRadius: number;
+    /** Radius of the active (hover) dot. */
+    activeDotRadius: number;
+};
+declare const RADAR_CHART_LAYOUT: Record<ComponentSize, RadarChartLayout>;
+type RadarChartProps = Omit<React.ComponentProps<typeof RadarChart$1>, "width" | "height"> & {
+    /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+    config?: ChartConfig;
+    /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+    size?: ComponentSize;
+    /** Applied to the responsive plot box, e.g. to override its height. */
+    className?: string;
+};
+/**
+ * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+ * responsive box) around the recharts `RadarChart` with a size-scaled height.
+ * `size` also flows to the child primitives through `SizeProvider`. Extra
+ * props reach the recharts chart (`outerRadius`, `startAngle`, `margin`, …).
+ */
+declare function RadarChart({ config, size, className, children, ...props }: RadarChartProps): React.JSX.Element;
+/**
+ * Polygon web behind the series — recharts `PolarGrid` on the recessive
+ * `line` token (`line-subtle` matches the ChartCard surface in both themes,
+ * so it would vanish). Pass `gridType="circle"` for rings or
+ * `radialLines={false}` to keep only the concentric outlines.
+ */
+declare function RadarChartGrid(props: React.ComponentProps<typeof PolarGrid>): React.JSX.Element;
+/**
+ * Category labels around the rim — recharts `PolarAngleAxis` with no tick
+ * lines and size-scaled secondary-ink labels. Passing your own `tick`
+ * replaces the default styling entirely.
+ */
+declare function RadarChartAngleAxis({ size, tick, ...props }: React.ComponentProps<typeof PolarAngleAxis> & {
+    size?: ComponentSize;
+}): React.JSX.Element;
+/**
+ * Value scale along one spoke — recharts `PolarRadiusAxis`, muted and
+ * line-free. Radars are usually read comparatively, so this is opt-in;
+ * include it (often with an explicit `domain={[0, max]}`) when the absolute
+ * scale matters. If the tick labels collide with a category label, move the
+ * scale between two spokes with `angle`.
+ */
+declare function RadarChartValueAxis({ size, tick, ...props }: React.ComponentProps<typeof PolarRadiusAxis> & {
+    size?: ComponentSize;
+}): React.JSX.Element;
+type RadarChartSeriesProps = React.ComponentProps<typeof Radar> & {
+    /** Series colour for the outline, wash, and dots. Defaults to brand. */
+    color?: string;
+    /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+    size?: ComponentSize;
+};
+/**
+ * One data series — recharts `Radar` with the giddaa mark spec: a 2px outline,
+ * the series colour washed to 15% inside the shape (matches the line-chart
+ * area wash), solid resting dots, and a hover dot ringed in `surface-raised`
+ * so overlapping series stay separable. `color` drives all of them at once;
+ * `stroke`/`fill`/`dot` still win when passed directly.
+ */
+declare function RadarChartSeries({ color, size, dot, activeDot, ...props }: RadarChartSeriesProps): React.JSX.Element;
+
+export { RADAR_CHART_LAYOUT, RADAR_CHART_PALETTE, RadarChart, RadarChartAngleAxis, RadarChartGrid, type RadarChartLayout, type RadarChartProps, RadarChartSeries, type RadarChartSeriesProps, RadarChartValueAxis };

package/dist/radar-chart.js

@@ -0,0 +1,147 @@
+"use client";
+import {
+  ChartContainer
+} from "./chunk-NOFXVRWL.js";
+import {
+  SizeProvider,
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/radar-chart.tsx
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as RadarChartPrimitive
+} from "recharts";
+import { jsx } from "react/jsx-runtime";
+var RADAR_CHART_PALETTE = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)"
+];
+var DEFAULT_SERIES_COLOR = RADAR_CHART_PALETTE[0];
+var RADAR_CHART_LAYOUT = {
+  sm: {
+    height: 180,
+    tickFontSize: 10,
+    strokeWidth: 2,
+    dotRadius: 2.5,
+    activeDotRadius: 4
+  },
+  md: {
+    height: 240,
+    tickFontSize: 11,
+    strokeWidth: 2,
+    dotRadius: 3,
+    activeDotRadius: 4.5
+  },
+  lg: {
+    height: 300,
+    tickFontSize: 12,
+    strokeWidth: 2,
+    dotRadius: 3.5,
+    activeDotRadius: 5
+  }
+};
+function RadarChart({
+  config = {},
+  size,
+  className,
+  children,
+  ...props
+}) {
+  const resolvedSize = useComponentSize(size);
+  const layout = RADAR_CHART_LAYOUT[resolvedSize];
+  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      config,
+      className: cn("aspect-auto w-full", className),
+      style: { height: layout.height },
+      children: /* @__PURE__ */ jsx(RadarChartPrimitive, { accessibilityLayer: true, ...props, children })
+    }
+  ) });
+}
+function RadarChartGrid(props) {
+  return /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--color-line)", ...props });
+}
+function RadarChartAngleAxis({
+  size,
+  tick,
+  ...props
+}) {
+  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
+  const defaultTick = {
+    fontSize: layout.tickFontSize,
+    fill: "var(--color-fg-secondary)"
+  };
+  return /* @__PURE__ */ jsx(PolarAngleAxis, { tickLine: false, tick: tick ?? defaultTick, ...props });
+}
+function RadarChartValueAxis({
+  size,
+  tick,
+  ...props
+}) {
+  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
+  const defaultTick = {
+    fontSize: layout.tickFontSize,
+    fill: "var(--color-fg-caption-placeholder)"
+  };
+  return /* @__PURE__ */ jsx(
+    PolarRadiusAxis,
+    {
+      axisLine: false,
+      tickLine: false,
+      tick: tick ?? defaultTick,
+      ...props
+    }
+  );
+}
+function RadarChartSeries({
+  color = DEFAULT_SERIES_COLOR,
+  size,
+  dot,
+  activeDot,
+  ...props
+}) {
+  const layout = RADAR_CHART_LAYOUT[useComponentSize(size)];
+  const defaultDot = {
+    r: layout.dotRadius,
+    fill: color,
+    fillOpacity: 1,
+    strokeWidth: 0
+  };
+  const defaultActiveDot = {
+    r: layout.activeDotRadius,
+    fill: color,
+    stroke: "var(--color-surface-raised)",
+    strokeWidth: 2
+  };
+  return /* @__PURE__ */ jsx(
+    Radar,
+    {
+      stroke: color,
+      fill: color,
+      fillOpacity: 0.15,
+      strokeWidth: layout.strokeWidth,
+      dot: dot ?? defaultDot,
+      activeDot: activeDot ?? defaultActiveDot,
+      ...props
+    }
+  );
+}
+export {
+  RADAR_CHART_LAYOUT,
+  RADAR_CHART_PALETTE,
+  RadarChart,
+  RadarChartAngleAxis,
+  RadarChartGrid,
+  RadarChartSeries,
+  RadarChartValueAxis
+};
+//# sourceMappingURL=radar-chart.js.map

package/dist/radar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radar-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tPolarAngleAxis,\n\tPolarGrid,\n\tPolarRadiusAxis,\n\tRadar,\n\tRadarChart as RadarChartPrimitive,\n} from \"recharts\";\nimport { type ChartConfig, ChartContainer } from \"./chart\";\nimport { cn } from \"./lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Radar charts are composable wrappers over the recharts polar primitives.\n * recharts 3 registers graphical items through context when they render, so —\n * unlike the recharts 2 era that shaped `bar-chart`/`line-chart` — the\n * primitives CAN be wrapped in our own components. Each wrapper bakes in the\n * giddaa defaults (tokens, size-scaled type, mark specs) and forwards every\n * recharts prop, so anything can be overridden in place or replaced with the\n * raw recharts element.\n *\n * Anatomy: `RadarChart` is the plot root (frame + responsive box + recharts\n * chart); compose the grid, axes, series, and the shared overlays from\n * `./chart` as children:\n *\n * @example\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Listing scorecard</ChartTitle>\n *     <ChartDescription>How this listing scores per criterion</ChartDescription>\n *   </ChartHeader>\n *   <RadarChart config={config} data={data}>\n *     <RadarChartGrid />\n *     <RadarChartAngleAxis dataKey=\"criterion\" />\n *     <ChartTooltip content={<ChartTooltipContent />} />\n *     <RadarChartSeries dataKey=\"score\" name=\"This listing\" />\n *   </RadarChart>\n * </ChartCard>\n */\n\n/**\n * Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens\n * (each theme's steps are validated against that theme's chart surface; see\n * `styles/giddaa.css`). Assign colours in this fixed order, never cycled: a\n * fourth series folds into \"Other\" or becomes a second chart.\n */\nconst RADAR_CHART_PALETTE = [\n\t\"var(--color-chart-1)\",\n\t\"var(--color-chart-2)\",\n\t\"var(--color-chart-3)\",\n] as const;\n\nconst DEFAULT_SERIES_COLOR = RADAR_CHART_PALETTE[0];\n\ntype RadarChartLayout = {\n\t/** Plot height in px. Width stays fluid via the ResponsiveContainer. */\n\theight: number;\n\t/** Category (angle) and value (radius) tick label font size. */\n\ttickFontSize: number;\n\t/** Series outline stroke width in px. */\n\tstrokeWidth: number;\n\t/** Radius of the resting data-point dot. */\n\tdotRadius: number;\n\t/** Radius of the active (hover) dot. */\n\tactiveDotRadius: number;\n};\n\nconst RADAR_CHART_LAYOUT: Record<ComponentSize, RadarChartLayout> = {\n\tsm: {\n\t\theight: 180,\n\t\ttickFontSize: 10,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 2.5,\n\t\tactiveDotRadius: 4,\n\t},\n\tmd: {\n\t\theight: 240,\n\t\ttickFontSize: 11,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3,\n\t\tactiveDotRadius: 4.5,\n\t},\n\tlg: {\n\t\theight: 300,\n\t\ttickFontSize: 12,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3.5,\n\t\tactiveDotRadius: 5,\n\t},\n};\n\ntype RadarChartProps = Omit<\n\tReact.ComponentProps<typeof RadarChartPrimitive>,\n\t\"width\" | \"height\"\n> & {\n\t/** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */\n\tconfig?: ChartConfig;\n\t/** Plot scale; inherited from the nearest `SizeProvider` when omitted. */\n\tsize?: ComponentSize;\n\t/** Applied to the responsive plot box, e.g. to override its height. */\n\tclassName?: string;\n};\n\n/**\n * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,\n * responsive box) around the recharts `RadarChart` with a size-scaled height.\n * `size` also flows to the child primitives through `SizeProvider`. Extra\n * props reach the recharts chart (`outerRadius`, `startAngle`, `margin`, …).\n */\nfunction RadarChart({\n\tconfig = {},\n\tsize,\n\tclassName,\n\tchildren,\n\t...props\n}: RadarChartProps) {\n\tconst resolvedSize = useComponentSize(size);\n\tconst layout = RADAR_CHART_LAYOUT[resolvedSize];\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<ChartContainer\n\t\t\t\tconfig={config}\n\t\t\t\tclassName={cn(\"aspect-auto w-full\", className)}\n\t\t\t\tstyle={{ height: layout.height }}\n\t\t\t>\n\t\t\t\t<RadarChartPrimitive accessibilityLayer {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</RadarChartPrimitive>\n\t\t\t</ChartContainer>\n\t\t</SizeProvider>\n\t);\n}\n\n/**\n * Polygon web behind the series — recharts `PolarGrid` on the recessive\n * `line` token (`line-subtle` matches the ChartCard surface in both themes,\n * so it would vanish). Pass `gridType=\"circle\"` for rings or\n * `radialLines={false}` to keep only the concentric outlines.\n */\nfunction RadarChartGrid(props: React.ComponentProps<typeof PolarGrid>) {\n\treturn <PolarGrid stroke=\"var(--color-line)\" {...props} />;\n}\n\n/**\n * Category labels around the rim — recharts `PolarAngleAxis` with no tick\n * lines and size-scaled secondary-ink labels. Passing your own `tick`\n * replaces the default styling entirely.\n */\nfunction RadarChartAngleAxis({\n\tsize,\n\ttick,\n\t...props\n}: React.ComponentProps<typeof PolarAngleAxis> & { size?: ComponentSize }) {\n\tconst layout = RADAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst defaultTick = {\n\t\tfontSize: layout.tickFontSize,\n\t\tfill: \"var(--color-fg-secondary)\",\n\t};\n\n\treturn (\n\t\t<PolarAngleAxis tickLine={false} tick={tick ?? defaultTick} {...props} />\n\t);\n}\n\n/**\n * Value scale along one spoke — recharts `PolarRadiusAxis`, muted and\n * line-free. Radars are usually read comparatively, so this is opt-in;\n * include it (often with an explicit `domain={[0, max]}`) when the absolute\n * scale matters. If the tick labels collide with a category label, move the\n * scale between two spokes with `angle`.\n */\nfunction RadarChartValueAxis({\n\tsize,\n\ttick,\n\t...props\n}: React.ComponentProps<typeof PolarRadiusAxis> & { size?: ComponentSize }) {\n\tconst layout = RADAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst defaultTick = {\n\t\tfontSize: layout.tickFontSize,\n\t\tfill: \"var(--color-fg-caption-placeholder)\",\n\t};\n\n\treturn (\n\t\t<PolarRadiusAxis\n\t\t\taxisLine={false}\n\t\t\ttickLine={false}\n\t\t\ttick={tick ?? defaultTick}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype RadarChartSeriesProps = React.ComponentProps<typeof Radar> & {\n\t/** Series colour for the outline, wash, and dots. Defaults to brand. */\n\tcolor?: string;\n\t/** Explicit mark scale; otherwise inherited from the chart's `size`. */\n\tsize?: ComponentSize;\n};\n\n/**\n * One data series — recharts `Radar` with the giddaa mark spec: a 2px outline,\n * the series colour washed to 15% inside the shape (matches the line-chart\n * area wash), solid resting dots, and a hover dot ringed in `surface-raised`\n * so overlapping series stay separable. `color` drives all of them at once;\n * `stroke`/`fill`/`dot` still win when passed directly.\n */\nfunction RadarChartSeries({\n\tcolor = DEFAULT_SERIES_COLOR,\n\tsize,\n\tdot,\n\tactiveDot,\n\t...props\n}: RadarChartSeriesProps) {\n\tconst layout = RADAR_CHART_LAYOUT[useComponentSize(size)];\n\tconst defaultDot = {\n\t\tr: layout.dotRadius,\n\t\tfill: color,\n\t\tfillOpacity: 1,\n\t\tstrokeWidth: 0,\n\t};\n\tconst defaultActiveDot = {\n\t\tr: layout.activeDotRadius,\n\t\tfill: color,\n\t\tstroke: \"var(--color-surface-raised)\",\n\t\tstrokeWidth: 2,\n\t};\n\n\treturn (\n\t\t<Radar\n\t\t\tstroke={color}\n\t\t\tfill={color}\n\t\t\tfillOpacity={0.15}\n\t\t\tstrokeWidth={layout.strokeWidth}\n\t\t\tdot={dot ?? defaultDot}\n\t\t\tactiveDot={activeDot ?? defaultActiveDot}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tRADAR_CHART_LAYOUT,\n\tRADAR_CHART_PALETTE,\n\tRadarChart,\n\tRadarChartAngleAxis,\n\tRadarChartGrid,\n\tRadarChartSeries,\n\tRadarChartValueAxis,\n};\nexport type { RadarChartLayout, RadarChartProps, RadarChartSeriesProps };\n"],"mappings":";;;;;;;;;;;;;AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,OACR;AA2HH;AAhFJ,IAAM,sBAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD;AAEA,IAAM,uBAAuB,oBAAoB,CAAC;AAelD,IAAM,qBAA8D;AAAA,EACnE,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,EAClB;AAAA,EACA,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,EAClB;AAAA,EACA,IAAI;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,iBAAiB;AAAA,EAClB;AACD;AAoBA,SAAS,WAAW;AAAA,EACnB,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAoB;AACnB,QAAM,eAAe,iBAAiB,IAAI;AAC1C,QAAM,SAAS,mBAAmB,YAAY;AAE9C,SACC,oBAAC,gBAAa,MAAM,cACnB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC7C,OAAO,EAAE,QAAQ,OAAO,OAAO;AAAA,MAE/B,8BAAC,uBAAoB,oBAAkB,MAAE,GAAG,OAC1C,UACF;AAAA;AAAA,EACD,GACD;AAEF;AAQA,SAAS,eAAe,OAA+C;AACtE,SAAO,oBAAC,aAAU,QAAO,qBAAqB,GAAG,OAAO;AACzD;AAOA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA2E;AAC1E,QAAM,SAAS,mBAAmB,iBAAiB,IAAI,CAAC;AACxD,QAAM,cAAc;AAAA,IACnB,UAAU,OAAO;AAAA,IACjB,MAAM;AAAA,EACP;AAEA,SACC,oBAAC,kBAAe,UAAU,OAAO,MAAM,QAAQ,aAAc,GAAG,OAAO;AAEzE;AASA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA4E;AAC3E,QAAM,SAAS,mBAAmB,iBAAiB,IAAI,CAAC;AACxD,QAAM,cAAc;AAAA,IACnB,UAAU,OAAO;AAAA,IACjB,MAAM;AAAA,EACP;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA;AAAA,EACL;AAEF;AAgBA,SAAS,iBAAiB;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA0B;AACzB,QAAM,SAAS,mBAAmB,iBAAiB,IAAI,CAAC;AACxD,QAAM,aAAa;AAAA,IAClB,GAAG,OAAO;AAAA,IACV,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,EACd;AACA,QAAM,mBAAmB;AAAA,IACxB,GAAG,OAAO;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,EACd;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,aAAa,OAAO;AAAA,MACpB,KAAK,OAAO;AAAA,MACZ,WAAW,aAAa;AAAA,MACvB,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}

package/dist/radio-group.js

@@ -1,53 +1,18 @@
-// src/components/ui/radio-group.tsx
+"use client";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/radio-group.tsx
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { cva } from "class-variance-authority";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/radio-group.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     RadioGroupPrimitive,
     {
       "data-slot": "radio-group",
@@ -57,7 +22,7 @@ function RadioGroup({ className, ...props }) {
   );
 }
 var radioVariants = cva(
-  "group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line-strong data-checked:border-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]",
+  "group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]",
   {
     variants: {
       size: {
@@ -74,19 +39,19 @@ function RadioGroupItem({
   ...props
 }) {
   const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     RadioPrimitive.Root,
     {
       "data-slot": "radio-group-item",
       "data-size": resolvedSize,
       className: cn(radioVariants({ size: resolvedSize }), className),
       ...props,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx(
         RadioPrimitive.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "flex size-full items-center justify-center",
-          children: /* @__PURE__ */ jsx2("span", { className: "absolute top-1/2 left-1/2 size-(--radio-dot-size) -translate-x-1/2 -translate-y-1/2 rounded-full bg-current" })
+          children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-(--radio-dot-size) -translate-x-1/2 -translate-y-1/2 rounded-full bg-current" })
         }
       )
     }

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/radio-group.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useComponentSize } from \"./size-context\";\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n\treturn (\n\t\t<RadioGroupPrimitive\n\t\t\tdata-slot=\"radio-group\"\n\t\t\tclassName={cn(\"grid w-full gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst radioVariants = cva(\n\t\"group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line-strong data-checked:border-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-4 [--radio-dot-size:0.625rem]\",\n\t\t\t\tmd: \"size-5 [--radio-dot-size:0.75rem]\",\n\t\t\t\tlg: \"size-6 [--radio-dot-size:0.875rem]\",\n\t\t\t},\n\t\t},\n\t},\n);\n\ntype RadioGroupItemSize = NonNullable<\n\tVariantProps<typeof radioVariants>[\"size\"]\n>;\ntype RadioGroupItemProps<Value = unknown> = RadioPrimitive.Root.Props<Value> & {\n\tsize?: RadioGroupItemSize;\n};\n\n/**\n * Compose each radio item with the shared field primitives.\n *\n * ```tsx\n * <RadioGroup defaultValue=\"option-1\">\n *   <Field orientation=\"horizontal\" size=\"md\">\n *     <RadioGroupItem id=\"option-1\" value=\"option-1\" />\n *     <FieldContent>\n *       <FieldLabel htmlFor=\"option-1\">Radio label</FieldLabel>\n *       <FieldDescription>Optional helper description for context.</FieldDescription>\n *     </FieldContent>\n *   </Field>\n * </RadioGroup>\n * ```\n */\nfunction RadioGroupItem<Value = unknown>({\n\tclassName,\n\tsize,\n\t...props\n}: RadioGroupItemProps<Value>) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<RadioPrimitive.Root\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(radioVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioPrimitive.Indicator\n\t\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\t\tclassName=\"flex size-full items-center justify-center\"\n\t\t\t>\n\t\t\t\t<span className=\"absolute top-1/2 left-1/2 size-(--radio-dot-size) -translate-x-1/2 -translate-y-1/2 rounded-full bg-current\" />\n\t\t\t</RadioPrimitive.Indicator>\n\t\t</RadioPrimitive.Root>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem, radioVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":";AAEA,SAAS,SAAS,sBAAsB;AACxC,SAAS,cAAc,2BAA2B;AAClD,SAAS,WAA8B;;;ACJvC,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;AC7BA,SAAS,eAA+B,kBAAkB;AAcjD;AAVT,IAAM,cAAc,cAAyC,MAAS;AAgBtE,SAAS,iBACR,MACA,WAA0B,MACzB;AACD,QAAM,gBAAgB,WAAW,WAAW;AAC5C,SAAO,QAAQ,iBAAiB;AACjC;;;AFjBE,gBAAAA,YAAA;AAFF,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA8B;AACvE,SACC,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,gBAAgB;AAAA,EACrB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AAwBA,SAAS,eAAgC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,QAAM,eAAe,iBAAiB,IAAI;AAE1C,SACC,gBAAAA;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACA,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,cAAc,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;AAAA,MAC7D,GAAG;AAAA,MAEJ,0BAAAA;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACA,aAAU;AAAA,UACV,WAAU;AAAA,UAEV,0BAAAA,KAAC,UAAK,WAAU,+GAA8G;AAAA;AAAA,MAC/H;AAAA;AAAA,EACD;AAEF;","names":["jsx"]}
+{"version":3,"sources":["../src/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./lib/cn\";\nimport { useComponentSize } from \"./size-context\";\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n\treturn (\n\t\t<RadioGroupPrimitive\n\t\t\tdata-slot=\"radio-group\"\n\t\t\tclassName={cn(\"grid w-full gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst radioVariants = cva(\n\t\"group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-4 [--radio-dot-size:0.625rem]\",\n\t\t\t\tmd: \"size-5 [--radio-dot-size:0.75rem]\",\n\t\t\t\tlg: \"size-6 [--radio-dot-size:0.875rem]\",\n\t\t\t},\n\t\t},\n\t},\n);\n\ntype RadioGroupItemSize = NonNullable<\n\tVariantProps<typeof radioVariants>[\"size\"]\n>;\ntype RadioGroupItemProps<Value = unknown> = RadioPrimitive.Root.Props<Value> & {\n\tsize?: RadioGroupItemSize;\n};\n\n/**\n * Compose each radio item with the shared field primitives.\n *\n * ```tsx\n * <RadioGroup defaultValue=\"option-1\">\n *   <Field orientation=\"horizontal\" size=\"md\">\n *     <RadioGroupItem id=\"option-1\" value=\"option-1\" />\n *     <FieldContent>\n *       <FieldLabel htmlFor=\"option-1\">Radio label</FieldLabel>\n *       <FieldDescription>Optional helper description for context.</FieldDescription>\n *     </FieldContent>\n *   </Field>\n * </RadioGroup>\n * ```\n */\nfunction RadioGroupItem<Value = unknown>({\n\tclassName,\n\tsize,\n\t...props\n}: RadioGroupItemProps<Value>) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<RadioPrimitive.Root\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tdata-size={resolvedSize}\n\t\t\tclassName={cn(radioVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioPrimitive.Indicator\n\t\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\t\tclassName=\"flex size-full items-center justify-center\"\n\t\t\t>\n\t\t\t\t<span className=\"absolute top-1/2 left-1/2 size-(--radio-dot-size) -translate-x-1/2 -translate-y-1/2 rounded-full bg-current\" />\n\t\t\t</RadioPrimitive.Indicator>\n\t\t</RadioPrimitive.Root>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem, radioVariants };\n"],"mappings":";;;;;;;;;AAEA,SAAS,SAAS,sBAAsB;AACxC,SAAS,cAAc,2BAA2B;AAClD,SAAS,WAA8B;AAOrC;AAFF,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAA8B;AACvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,gBAAgB;AAAA,EACrB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,MAAM;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AAwBA,SAAS,eAAgC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,QAAM,eAAe,iBAAiB,IAAI;AAE1C,SACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACA,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,cAAc,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;AAAA,MAC7D,GAAG;AAAA,MAEJ;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACA,aAAU;AAAA,UACV,WAAU;AAAA,UAEV,8BAAC,UAAK,WAAU,+GAA8G;AAAA;AAAA,MAC/H;AAAA;AAAA,EACD;AAEF;","names":[]}