@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/radar-chart.d.ts

@@ -0,0 +1,108 @@
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";
+//#region src/radar-chart.d.ts
+/**
+ * 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;
+//#endregion
+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,172 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer } from "./chart.js";
+import { jsx } from "react/jsx-runtime";
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";
+//#region src/radar-chart.tsx
+/**
+* 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.
+*/
+const RADAR_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
+];
+const DEFAULT_SERIES_COLOR = RADAR_CHART_PALETTE[0];
+const 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
+	}
+};
+/**
+* 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`, …).
+*/
+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(RadarChart$1, {
+				accessibilityLayer: true,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* 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.
+*/
+function RadarChartGrid(props) {
+	return /* @__PURE__ */ jsx(PolarGrid, {
+		stroke: "var(--color-line)",
+		...props
+	});
+}
+/**
+* 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.
+*/
+function RadarChartAngleAxis({ size, tick, ...props }) {
+	const defaultTick = {
+		fontSize: RADAR_CHART_LAYOUT[useComponentSize(size)].tickFontSize,
+		fill: "var(--color-fg-secondary)"
+	};
+	return /* @__PURE__ */ jsx(PolarAngleAxis, {
+		tickLine: false,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/**
+* 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`.
+*/
+function RadarChartValueAxis({ size, tick, ...props }) {
+	const defaultTick = {
+		fontSize: RADAR_CHART_LAYOUT[useComponentSize(size)].tickFontSize,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(PolarRadiusAxis, {
+		axisLine: false,
+		tickLine: false,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/**
+* 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.
+*/
+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: .15,
+		strokeWidth: layout.strokeWidth,
+		dot: dot ?? defaultDot,
+		activeDot: activeDot ?? defaultActiveDot,
+		...props
+	});
+}
+//#endregion
+export { RADAR_CHART_LAYOUT, RADAR_CHART_PALETTE, RadarChart, RadarChartAngleAxis, RadarChartGrid, RadarChartSeries, RadarChartValueAxis };

package/dist/radio-group.d.ts

@@ -1,16 +1,14 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { Radio } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
-import { VariantProps } from 'class-variance-authority';
-
-declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): React.JSX.Element;
+import { VariantProps } from "class-variance-authority";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/radio-group.d.ts
+declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): import("react").JSX.Element;
 declare const radioVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type RadioGroupItemSize = NonNullable<VariantProps<typeof radioVariants>["size"]>;
 type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
-    size?: RadioGroupItemSize;
+  size?: RadioGroupItemSize;
 };
 /**
  * Compose each radio item with the shared field primitives.
@@ -27,6 +25,6 @@ type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
  * </RadioGroup>
  * ```
  */
-declare function RadioGroupItem<Value = unknown>({ className, size, ...props }: RadioGroupItemProps<Value>): React.JSX.Element;
-
-export { RadioGroup, RadioGroupItem, radioVariants };
+declare function RadioGroupItem<Value = unknown>({ className, size, ...props }: RadioGroupItemProps<Value>): import("react").JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem, radioVariants };

package/dist/radio-group.js

@@ -1,100 +1,51 @@
-// src/components/ui/radio-group.tsx
-import { Radio as RadioPrimitive } from "@base-ui/react/radio";
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx } from "react/jsx-runtime";
 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 { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/radio-group.tsx
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    RadioGroupPrimitive,
-    {
-      "data-slot": "radio-group",
-      className: cn("grid w-full gap-2", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-slot": "radio-group",
+		className: cn("grid w-full gap-2", 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]",
-  {
-    variants: {
-      size: {
-        sm: "size-4 [--radio-dot-size:0.625rem]",
-        md: "size-5 [--radio-dot-size:0.75rem]",
-        lg: "size-6 [--radio-dot-size:0.875rem]"
-      }
-    }
-  }
-);
-function RadioGroupItem({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    RadioPrimitive.Root,
-    {
-      "data-slot": "radio-group-item",
-      "data-size": resolvedSize,
-      className: cn(radioVariants({ size: resolvedSize }), className),
-      ...props,
-      children: /* @__PURE__ */ jsx2(
-        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" })
-        }
-      )
-    }
-  );
+const radioVariants = cva("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: {
+	sm: "size-4 [--radio-dot-size:0.625rem]",
+	md: "size-5 [--radio-dot-size:0.75rem]",
+	lg: "size-6 [--radio-dot-size:0.875rem]"
+} } });
+/**
+* Compose each radio item with the shared field primitives.
+*
+* ```tsx
+* <RadioGroup defaultValue="option-1">
+*   <Field orientation="horizontal" size="md">
+*     <RadioGroupItem id="option-1" value="option-1" />
+*     <FieldContent>
+*       <FieldLabel htmlFor="option-1">Radio label</FieldLabel>
+*       <FieldDescription>Optional helper description for context.</FieldDescription>
+*     </FieldContent>
+*   </Field>
+* </RadioGroup>
+* ```
+*/
+function RadioGroupItem({ className, size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		"data-size": resolvedSize,
+		className: cn(radioVariants({ size: resolvedSize }), className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex size-full items-center justify-center",
+			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" })
+		})
+	});
 }
-export {
-  RadioGroup,
-  RadioGroupItem,
-  radioVariants
-};
-//# sourceMappingURL=radio-group.js.map
+//#endregion
+export { RadioGroup, RadioGroupItem, radioVariants };

package/dist/review-block.d.ts

@@ -0,0 +1,18 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/review-block.d.ts
+declare const reviewBlockVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+  bordered?: boolean | null | undefined;
+  showReviewText?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ReviewBlockSize = NonNullable<VariantProps<typeof reviewBlockVariants>["size"]>;
+type ReviewBlockProps = Omit<useRender.ComponentProps<"div">, "children"> & VariantProps<typeof reviewBlockVariants> & {
+  rating: number;
+  reviewCount?: number;
+  reviewLabel?: string;
+  ratingLabel?: string;
+};
+declare function ReviewBlock({ bordered, className, rating, ratingLabel, render, reviewCount, reviewLabel, size, showReviewText, ...props }: ReviewBlockProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { ReviewBlock, type ReviewBlockProps, type ReviewBlockSize, reviewBlockVariants };

package/dist/review-block.js

@@ -0,0 +1,154 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/review-block.tsx
+const STAR_INDEXES = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+const reviewBlockVariants = cva("group/review-block inline-flex w-fit min-w-0 flex-col items-center justify-center rounded-full bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow]", {
+	variants: {
+		size: {
+			xs: "gap-[2px] border px-6 py-1.5",
+			sm: "gap-[3px] border-[1.5px] px-10 py-1.5",
+			md: "gap-1 border-2 px-14 py-2",
+			lg: "gap-[5px] border-[2.5px] px-18 py-2.5"
+		},
+		bordered: {
+			true: "border-line-focus",
+			false: "border-transparent"
+		},
+		showReviewText: {
+			true: "",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		bordered: true,
+		showReviewText: true
+	}
+});
+const reviewBlockStarsVariants = cva("inline-flex shrink-0 items-center", {
+	variants: { size: {
+		xs: "gap-1.5",
+		sm: "gap-2",
+		md: "gap-2.5",
+		lg: "gap-3.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const reviewBlockStarVariants = cva("relative inline-flex shrink-0", {
+	variants: { size: {
+		xs: "size-4",
+		sm: "size-6",
+		md: "size-9",
+		lg: "size-12"
+	} },
+	defaultVariants: { size: "md" }
+});
+const reviewBlockStarIconVariants = cva("block h-full max-w-none", {
+	variants: { size: {
+		xs: "w-4",
+		sm: "w-6",
+		md: "w-9",
+		lg: "w-12"
+	} },
+	defaultVariants: { size: "md" }
+});
+const reviewBlockTextVariants = cva("text-center font-medium text-fg-primary whitespace-nowrap", {
+	variants: { size: {
+		xs: "text-[0.75rem] leading-[1.125rem]",
+		sm: "text-gdt-sm",
+		md: "text-[1rem] leading-[1.375rem]",
+		lg: "text-[1.125rem] leading-[1.5rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+function clampRating(rating) {
+	if (!Number.isFinite(rating)) return 0;
+	return Math.min(5, Math.max(0, rating));
+}
+function getStarFill(index, rating) {
+	return Math.min(1, Math.max(0, rating - index)) * 100;
+}
+function formatRating(rating) {
+	return Number.isInteger(rating) ? rating.toString() : rating.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+function formatReviewText(reviewCount, reviewLabel = "Review") {
+	const normalizedLabel = reviewCount === 1 ? reviewLabel : `${reviewLabel}s`;
+	return `${reviewCount.toLocaleString()} ${normalizedLabel}`;
+}
+function ReviewStarIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		focusable: "false",
+		viewBox: "0 0 35 33",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m17.119 0 4.042 12.437h13.077l-10.58 7.688L27.7 32.562l-10.58-7.686-10.58 7.686 4.04-12.437L0 12.438h13.077L17.12 0Z",
+			fill: "currentColor"
+		})
+	});
+}
+function ReviewStar({ fillPercent, size }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: reviewBlockStarVariants({ size }),
+		children: [/* @__PURE__ */ jsx(ReviewStarIcon, {
+			"aria-hidden": "true",
+			className: cn("text-line-focus", reviewBlockStarIconVariants({ size }))
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-y-0 left-0 overflow-hidden text-line-focus",
+			style: { width: `${fillPercent}%` },
+			children: /* @__PURE__ */ jsx(ReviewStarIcon, { className: reviewBlockStarIconVariants({ size }) })
+		})]
+	});
+}
+function ReviewBlock({ bordered = true, className, rating, ratingLabel, render, reviewCount, reviewLabel, size = "md", showReviewText = true, ...props }) {
+	const resolvedSize = size ?? "md";
+	const normalizedRating = clampRating(rating);
+	const formattedRating = formatRating(normalizedRating);
+	const reviewText = showReviewText && typeof reviewCount === "number" ? formatReviewText(reviewCount, reviewLabel) : null;
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			"aria-label": ratingLabel ?? (reviewText ? `${formattedRating} out of 5 stars, ${reviewText}` : `${formattedRating} out of 5 stars`),
+			className: cn(reviewBlockVariants({
+				bordered,
+				size: resolvedSize,
+				showReviewText: Boolean(reviewText)
+			}), className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: reviewBlockStarsVariants({ size: resolvedSize }),
+				children: STAR_INDEXES.map((index) => /* @__PURE__ */ jsx(ReviewStar, {
+					fillPercent: getStarFill(index, normalizedRating),
+					size: resolvedSize
+				}, index))
+			}), reviewText ? /* @__PURE__ */ jsx("span", {
+				className: reviewBlockTextVariants({ size: resolvedSize }),
+				children: reviewText
+			}) : null] }),
+			role: "img"
+		}, props),
+		render,
+		state: {
+			bordered,
+			rating: normalizedRating,
+			reviewCount,
+			size: resolvedSize,
+			showReviewText: Boolean(reviewText),
+			slot: "review-block"
+		}
+	});
+}
+//#endregion
+export { ReviewBlock, reviewBlockVariants };