@giddaa-housing/ui 1.0.0 → 1.2.0

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-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] 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 };

package/dist/rich-text-editor.d.ts

@@ -1,16 +1,32 @@
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+//#region src/rich-text-editor.d.ts
 interface RichTextEditorProps {
-    value?: string;
-    defaultValue?: string;
-    onChange?: (html: string) => void;
-    size?: ComponentSize;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    "aria-label"?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (html: string) => void;
+  size?: ComponentSize;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  /**
+   * Associates the editor with a `<label htmlFor={id}>`. Because the editable
+   * surface is a contenteditable div (not a labelable form control), clicking
+   * such a label focuses the editor via a manual handler rather than natively.
+   */
+  id?: string;
+  "aria-label"?: string;
+  /**
+   * Marks the field as invalid. Mirrors the `aria-invalid` convention used by
+   * the other form controls and drives the danger border/ring styling.
+   */
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"];
 }
-declare function RichTextEditor({ value, defaultValue, onChange, size, placeholder, disabled, className, "aria-label": ariaLabel, }: RichTextEditorProps): React.JSX.Element;
-
-export { RichTextEditor, type RichTextEditorProps };
+/** Imperative handle exposing native-like focus control (e.g. for RHF error focus). */
+interface RichTextEditorHandle {
+  focus: () => void;
+  blur: () => void;
+}
+declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RichTextEditorHandle>>;
+//#endregion
+export { RichTextEditor, type RichTextEditorHandle, type RichTextEditorProps };