@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/radar-chart.js

@@ -1,147 +1,172 @@
 "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 { 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";
-var RADAR_CHART_PALETTE = [
-  "var(--color-chart-1)",
-  "var(--color-chart-2)",
-  "var(--color-chart-3)"
+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)"
 ];
-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
-  }
+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
+	}
 };
-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 })
-    }
-  ) });
+/**
+* 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 });
+	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 });
+/**
+* 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
+	});
 }
-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
-    }
-  );
+/**
+* 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
+	});
 }
-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
-    }
-  );
+/**
+* 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
+	});
 }
-export {
-  RADAR_CHART_LAYOUT,
-  RADAR_CHART_PALETTE,
-  RadarChart,
-  RadarChartAngleAxis,
-  RadarChartGrid,
-  RadarChartSeries,
-  RadarChartValueAxis
-};
-//# sourceMappingURL=radar-chart.js.map
+//#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,65 +1,51 @@
 "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";
+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";
+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__ */ jsx(
-    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-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]"
-      }
-    }
-  }
-);
-function RadioGroupItem({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx(
-    RadioPrimitive.Root,
-    {
-      "data-slot": "radio-group-item",
-      "data-size": resolvedSize,
-      className: cn(radioVariants({ size: resolvedSize }), className),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        RadioPrimitive.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" })
-        }
-      )
-    }
-  );
+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

@@ -1,20 +1,18 @@
-import * as React from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { useRender } from '@base-ui/react/use-render';
-import { VariantProps } from 'class-variance-authority';
-
+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?: "sm" | "md" | "lg" | "xs" | null | undefined;
-    bordered?: boolean | null | undefined;
-    showReviewText?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  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;
+  rating: number;
+  reviewCount?: number;
+  reviewLabel?: string;
+  ratingLabel?: string;
 };
-declare function ReviewBlock({ bordered, className, rating, ratingLabel, render, reviewCount, reviewLabel, size, showReviewText, ...props }: ReviewBlockProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-
-export { ReviewBlock, type ReviewBlockProps, type ReviewBlockSize, reviewBlockVariants };
+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

@@ -1,10 +1,154 @@
-import {
-  ReviewBlock,
-  reviewBlockVariants
-} from "./chunk-BUXCGZ6X.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  ReviewBlock,
-  reviewBlockVariants
-};
-//# sourceMappingURL=review-block.js.map
+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 };