@kuzenbo/core 0.0.4 → 0.0.6

package/dist/ui/rating.js

@@ -1,5 +1,6 @@
 "use client";
 
+import { a as useComponentSize, s as useKuzenboComponentDefaults } from "../size-provider-18EvJgDT.js";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
@@ -10,57 +11,58 @@ import { HugeiconsIcon } from "@hugeicons/react";
 const ratingStarVariants = tv({
 	base: [
 		"relative inline-flex shrink-0",
-		"cursor-pointer",
+		"cursor-clickable",
 		"transition-colors duration-150"
 	],
+	defaultVariants: {
+		editable: false,
+		size: "md"
+	},
 	variants: {
+		editable: {
+			false: ["cursor-default"],
+			true: ["hover:scale-110"]
+		},
 		size: {
-			xs: ["size-3"],
-			sm: ["size-3.5"],
-			md: ["size-4"],
 			lg: ["size-5"],
-			xl: ["size-6"]
-		},
-		editable: {
-			true: ["hover:scale-110"],
-			false: ["cursor-default"]
+			md: ["size-4"],
+			sm: ["size-3.5"],
+			xl: ["size-6"],
+			xs: ["size-3"]
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		editable: false
 	}
 });
 const ratingStarFilledVariants = tv({
 	base: ["absolute inset-0", "fill-warning-foreground text-warning-foreground"],
+	defaultVariants: { visible: true },
 	variants: { visible: {
-		true: ["opacity-100"],
-		false: ["opacity-0"]
-	} },
-	defaultVariants: { visible: true }
+		false: ["opacity-0"],
+		true: ["opacity-100"]
+	} }
 });
 const ratingStarHalfVariants = tv({
 	base: ["absolute inset-0 overflow-hidden", "fill-warning-foreground text-warning-foreground"],
+	defaultVariants: { visible: true },
 	variants: { visible: {
-		true: ["opacity-100"],
-		false: ["opacity-0"]
-	} },
-	defaultVariants: { visible: true }
+		false: ["opacity-0"],
+		true: ["opacity-100"]
+	} }
 });
 const ratingStarOutlineVariants = tv({
 	base: ["relative", "text-muted-foreground"],
+	defaultVariants: { active: false },
 	variants: { active: {
-		true: ["opacity-30"],
-		false: ["opacity-100"]
-	} },
-	defaultVariants: { active: false }
+		false: ["opacity-100"],
+		true: ["opacity-30"]
+	} }
 });
 const RatingStar = ({ className, size, filled = false, halfFilled = false, active = false, editable = false, starClassName, onClick, ...props }) => {
+	const resolvedSize = useComponentSize(size);
 	const getStarSize = () => {
-		if (size === "xs") return 12;
-		if (size === "sm") return 14;
-		if (size === "lg") return 20;
-		if (size === "xl") return 24;
+		if (resolvedSize === "xs") return 12;
+		if (resolvedSize === "sm") return 14;
+		if (resolvedSize === "lg") return 20;
+		if (resolvedSize === "xl") return 24;
 		return 16;
 	};
 	const getAriaLabel = () => {
@@ -72,9 +74,11 @@ const RatingStar = ({ className, size, filled = false, halfFilled = false, activ
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": getAriaLabel(),
 		className: cn(ratingStarVariants({
-			size,
-			editable
+			editable,
+			size: resolvedSize
 		}), className),
+		"data-size": resolvedSize,
+		"data-slot": "rating-star",
 		disabled: !editable,
 		onClick,
 		type: "button",
@@ -117,33 +121,36 @@ const RatingStar = ({ className, size, filled = false, halfFilled = false, activ
 //#region src/ui/rating/rating.tsx
 const ratingVariants = tv({
 	base: ["inline-flex items-center gap-1"],
+	defaultVariants: { size: "md" },
 	variants: { size: {
-		xs: ["gap-0.5"],
-		sm: ["gap-0.5"],
-		md: ["gap-1"],
 		lg: ["gap-1.5"],
-		xl: ["gap-2"]
-	} },
-	defaultVariants: { size: "md" }
+		md: ["gap-1"],
+		sm: ["gap-0.5"],
+		xl: ["gap-2"],
+		xs: ["gap-0.5"]
+	} }
 });
 const ratingValueVariants = tv({
 	base: ["text-sm font-medium"],
+	defaultVariants: { size: "md" },
 	variants: { size: {
-		xs: ["text-xs"],
-		sm: ["text-xs"],
-		md: ["text-sm"],
 		lg: ["text-base"],
-		xl: ["text-base"]
-	} },
-	defaultVariants: { size: "md" }
+		md: ["text-sm"],
+		sm: ["text-xs"],
+		xl: ["text-base"],
+		xs: ["text-xs"]
+	} }
 });
 const Rating = ({ className, size, rating, maxRating = 5, showValue = false, editable = false, onRatingChange, starClassName, ...props }) => {
+	const { size: componentDefaultSize } = useKuzenboComponentDefaults("Rating");
+	const resolvedSize = useComponentSize(size, componentDefaultSize);
 	const handleStarClick = useCallback((e) => {
 		const value = Number(e.currentTarget.dataset.value);
 		if (editable && onRatingChange) onRatingChange(value);
 	}, [editable, onRatingChange]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(ratingVariants({ size }), className),
+		className: cn(ratingVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
 		"data-slot": "rating",
 		...props,
 		children: [Array.from({ length: maxRating }, (_, index) => {
@@ -158,10 +165,12 @@ const Rating = ({ className, size, rating, maxRating = 5, showValue = false, edi
 				filled: isFilled,
 				halfFilled: isHalfFilled,
 				onClick: handleStarClick,
-				size
+				size: resolvedSize
 			}, starValue);
 		}), showValue && /* @__PURE__ */ jsx("span", {
-			className: cn(ratingValueVariants({ size }), "ml-1"),
+			className: cn(ratingValueVariants({ size: resolvedSize }), "ml-1"),
+			"data-size": resolvedSize,
+			"data-slot": "rating-value",
 			children: rating.toFixed(1)
 		})]
 	});

package/dist/ui/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../../src/ui/rating/rating-star.tsx","../../src/ui/rating/rating.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { StarIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nexport const ratingStarVariants = tv({\n  base: [\n    // Layout: relative container for star\n    \"relative inline-flex shrink-0\",\n    // Cursor: clickable when editable\n    \"cursor-pointer\",\n    // Transitions: smooth color transitions\n    \"transition-colors duration-150\",\n  ],\n  variants: {\n    size: {\n      xs: [\n        // Extra small size: smallest star\n        \"size-3\",\n      ],\n      sm: [\n        // Small size: smaller star\n        \"size-3.5\",\n      ],\n      md: [\n        // Medium size: default star\n        \"size-4\",\n      ],\n      lg: [\n        // Large size: larger star\n        \"size-5\",\n      ],\n      xl: [\n        // Extra large size: largest star\n        \"size-6\",\n      ],\n    },\n    editable: {\n      true: [\n        // Hover: slight scale on hover when editable\n        \"hover:scale-110\",\n      ],\n      false: [\n        // Non-editable: no pointer cursor\n        \"cursor-default\",\n      ],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    editable: false,\n  },\n});\n\nexport const ratingStarFilledVariants = tv({\n  base: [\n    // Layout: absolute positioned filled star\n    \"absolute inset-0\",\n    // Fill: semantic warning token for filled stars\n    \"fill-warning-foreground text-warning-foreground\",\n  ],\n  variants: {\n    visible: {\n      true: [\n        // Visible: show filled star\n        \"opacity-100\",\n      ],\n      false: [\n        // Hidden: hide filled star\n        \"opacity-0\",\n      ],\n    },\n  },\n  defaultVariants: {\n    visible: true,\n  },\n});\n\nexport const ratingStarHalfVariants = tv({\n  base: [\n    // Layout: absolute positioned half-filled star\n    \"absolute inset-0 overflow-hidden\",\n    // Fill: semantic warning token for half-filled stars\n    \"fill-warning-foreground text-warning-foreground\",\n  ],\n  variants: {\n    visible: {\n      true: [\n        // Visible: show half-filled star\n        \"opacity-100\",\n      ],\n      false: [\n        // Hidden: hide half-filled star\n        \"opacity-0\",\n      ],\n    },\n  },\n  defaultVariants: {\n    visible: true,\n  },\n});\n\nexport const ratingStarOutlineVariants = tv({\n  base: [\n    // Layout: relative positioned outline star\n    \"relative\",\n    // Color: muted color for outline\n    \"text-muted-foreground\",\n  ],\n  variants: {\n    active: {\n      true: [\n        // Active: slightly visible outline\n        \"opacity-30\",\n      ],\n      false: [\n        // Inactive: more visible outline\n        \"opacity-100\",\n      ],\n    },\n  },\n  defaultVariants: {\n    active: false,\n  },\n});\n\ntype RatingStarVariants = VariantProps<typeof ratingStarVariants>;\n\nexport type RatingStarProps = RatingStarVariants &\n  ComponentProps<\"button\"> & {\n    filled?: boolean;\n    halfFilled?: boolean;\n    active?: boolean;\n    starClassName?: string;\n  };\n\nexport const RatingStar = ({\n  className,\n  size,\n  filled = false,\n  halfFilled = false,\n  active = false,\n  editable = false,\n  starClassName,\n  onClick,\n  ...props\n}: RatingStarProps) => {\n  const getStarSize = () => {\n    if (size === \"xs\") {\n      return 12;\n    }\n    if (size === \"sm\") {\n      return 14;\n    }\n    if (size === \"lg\") {\n      return 20;\n    }\n    if (size === \"xl\") {\n      return 24;\n    }\n    return 16;\n  };\n\n  const getAriaLabel = () => {\n    if (filled) {\n      return \"Filled star\";\n    }\n    if (halfFilled) {\n      return \"Half-filled star\";\n    }\n    return \"Empty star\";\n  };\n\n  const starSize = getStarSize();\n\n  return (\n    <button\n      aria-label={getAriaLabel()}\n      className={cn(ratingStarVariants({ size, editable }), className)}\n      disabled={!editable}\n      onClick={onClick}\n      type=\"button\"\n      {...props}\n    >\n      {/* Filled star overlay */}\n      <span\n        className={cn(\n          ratingStarFilledVariants({ visible: filled }),\n          starClassName\n        )}\n      >\n        <HugeiconsIcon\n          className=\"fill-warning-foreground text-warning-foreground\"\n          icon={StarIcon}\n          size={starSize}\n          strokeWidth={1.5}\n        />\n      </span>\n\n      {/* Half-filled star overlay */}\n      {halfFilled && (\n        <span\n          className={cn(\n            ratingStarHalfVariants({ visible: true }),\n            starClassName\n          )}\n        >\n          <div className=\"w-1/2 overflow-hidden\">\n            <HugeiconsIcon\n              className=\"fill-warning-foreground text-warning-foreground\"\n              icon={StarIcon}\n              size={starSize}\n              strokeWidth={1.5}\n            />\n          </div>\n        </span>\n      )}\n\n      {/* Outline star */}\n      <span\n        className={cn(ratingStarOutlineVariants({ active }), starClassName)}\n      >\n        <HugeiconsIcon icon={StarIcon} size={starSize} strokeWidth={1.5} />\n      </span>\n    </button>\n  );\n};\n","\"use client\";\n\nimport type { ComponentProps, MouseEvent } from \"react\";\n\nimport { useCallback } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport { RatingStar } from \"./rating-star\";\n\nexport const ratingVariants = tv({\n  base: [\n    // Layout: flex container with centered items\n    \"inline-flex items-center gap-1\",\n  ],\n  variants: {\n    size: {\n      xs: [\n        // Extra small size: compact gap\n        \"gap-0.5\",\n      ],\n      sm: [\n        // Small size: smaller gap and text\n        \"gap-0.5\",\n      ],\n      md: [\n        // Medium size: default gap\n        \"gap-1\",\n      ],\n      lg: [\n        // Large size: larger gap\n        \"gap-1.5\",\n      ],\n      xl: [\n        // Extra large size: largest spacing\n        \"gap-2\",\n      ],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport const ratingValueVariants = tv({\n  base: [\n    // Typography: rating value text styling\n    \"text-sm font-medium\",\n  ],\n  variants: {\n    size: {\n      xs: [\n        // Extra small size: smallest text\n        \"text-xs\",\n      ],\n      sm: [\n        // Small size: smaller text\n        \"text-xs\",\n      ],\n      md: [\n        // Medium size: default text\n        \"text-sm\",\n      ],\n      lg: [\n        // Large size: larger text\n        \"text-base\",\n      ],\n      xl: [\n        // Extra large size: largest text\n        \"text-base\",\n      ],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype RatingVariants = VariantProps<typeof ratingVariants>;\n\nexport type RatingProps = RatingVariants &\n  Omit<ComponentProps<\"div\">, \"onClick\"> & {\n    rating: number;\n    maxRating?: number;\n    showValue?: boolean;\n    editable?: boolean;\n    onRatingChange?: (rating: number) => void;\n    starClassName?: string;\n  };\n\nconst Rating = ({\n  className,\n  size,\n  rating,\n  maxRating = 5,\n  showValue = false,\n  editable = false,\n  onRatingChange,\n  starClassName,\n  ...props\n}: RatingProps) => {\n  const handleStarClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const value = Number(e.currentTarget.dataset.value);\n      if (editable && onRatingChange) {\n        onRatingChange(value);\n      }\n    },\n    [editable, onRatingChange]\n  );\n\n  return (\n    <div\n      className={cn(ratingVariants({ size }), className)}\n      data-slot=\"rating\"\n      {...props}\n    >\n      {Array.from({ length: maxRating }, (_, index) => {\n        const starValue = index + 1;\n        const isFilled = starValue <= Math.floor(rating);\n        const isHalfFilled =\n          !isFilled && starValue - 0.5 <= rating && rating < starValue;\n        const isActive = starValue <= rating;\n\n        return (\n          <RatingStar\n            active={isActive}\n            className={starClassName}\n            data-value={starValue}\n            editable={editable}\n            filled={isFilled}\n            halfFilled={isHalfFilled}\n            key={starValue}\n            onClick={handleStarClick}\n            size={size}\n          />\n        );\n      })}\n      {showValue && (\n        <span className={cn(ratingValueVariants({ size }), \"ml-1\")}>\n          {rating.toFixed(1)}\n        </span>\n      )}\n    </div>\n  );\n};\n\nRating.Star = RatingStar;\n\nexport { Rating, RatingStar };\n\nexport type { RatingStarProps } from \"./rating-star\";\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":[],"sources":["../../src/ui/rating/rating-star.tsx","../../src/ui/rating/rating.tsx"],"sourcesContent":["\"use client\";\n\nimport { StarIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn, tv } from \"tailwind-variants\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\n\nexport const ratingStarVariants = tv({\n  base: [\n    // Layout: relative container for star\n    \"relative inline-flex shrink-0\",\n    // Cursor: clickable when editable\n    \"cursor-clickable\",\n    // Transitions: smooth color transitions\n    \"transition-colors duration-150\",\n  ],\n  defaultVariants: {\n    editable: false,\n    size: \"md\",\n  },\n  variants: {\n    editable: {\n      false: [\n        // Non-editable: no pointer cursor\n        \"cursor-default\",\n      ],\n      true: [\n        // Hover: slight scale on hover when editable\n        \"hover:scale-110\",\n      ],\n    },\n    size: {\n      lg: [\n        // Large size: larger star\n        \"size-5\",\n      ],\n      md: [\n        // Medium size: default star\n        \"size-4\",\n      ],\n      sm: [\n        // Small size: smaller star\n        \"size-3.5\",\n      ],\n      xl: [\n        // Extra large size: largest star\n        \"size-6\",\n      ],\n      xs: [\n        // Extra small size: smallest star\n        \"size-3\",\n      ],\n    },\n  },\n});\n\nexport const ratingStarFilledVariants = tv({\n  base: [\n    // Layout: absolute positioned filled star\n    \"absolute inset-0\",\n    // Fill: semantic warning token for filled stars\n    \"fill-warning-foreground text-warning-foreground\",\n  ],\n  defaultVariants: {\n    visible: true,\n  },\n  variants: {\n    visible: {\n      false: [\n        // Hidden: hide filled star\n        \"opacity-0\",\n      ],\n      true: [\n        // Visible: show filled star\n        \"opacity-100\",\n      ],\n    },\n  },\n});\n\nexport const ratingStarHalfVariants = tv({\n  base: [\n    // Layout: absolute positioned half-filled star\n    \"absolute inset-0 overflow-hidden\",\n    // Fill: semantic warning token for half-filled stars\n    \"fill-warning-foreground text-warning-foreground\",\n  ],\n  defaultVariants: {\n    visible: true,\n  },\n  variants: {\n    visible: {\n      false: [\n        // Hidden: hide half-filled star\n        \"opacity-0\",\n      ],\n      true: [\n        // Visible: show half-filled star\n        \"opacity-100\",\n      ],\n    },\n  },\n});\n\nexport const ratingStarOutlineVariants = tv({\n  base: [\n    // Layout: relative positioned outline star\n    \"relative\",\n    // Color: muted color for outline\n    \"text-muted-foreground\",\n  ],\n  defaultVariants: {\n    active: false,\n  },\n  variants: {\n    active: {\n      false: [\n        // Inactive: more visible outline\n        \"opacity-100\",\n      ],\n      true: [\n        // Active: slightly visible outline\n        \"opacity-30\",\n      ],\n    },\n  },\n});\n\ntype RatingStarVariants = VariantProps<typeof ratingStarVariants>;\n\nexport type RatingStarProps = RatingStarVariants &\n  ComponentProps<\"button\"> & {\n    filled?: boolean;\n    halfFilled?: boolean;\n    active?: boolean;\n    starClassName?: string;\n  };\n\nexport const RatingStar = ({\n  className,\n  size,\n  filled = false,\n  halfFilled = false,\n  active = false,\n  editable = false,\n  starClassName,\n  onClick,\n  ...props\n}: RatingStarProps) => {\n  const resolvedSize = useComponentSize(size);\n\n  const getStarSize = () => {\n    if (resolvedSize === \"xs\") {\n      return 12;\n    }\n    if (resolvedSize === \"sm\") {\n      return 14;\n    }\n    if (resolvedSize === \"lg\") {\n      return 20;\n    }\n    if (resolvedSize === \"xl\") {\n      return 24;\n    }\n    return 16;\n  };\n\n  const getAriaLabel = () => {\n    if (filled) {\n      return \"Filled star\";\n    }\n    if (halfFilled) {\n      return \"Half-filled star\";\n    }\n    return \"Empty star\";\n  };\n\n  const starSize = getStarSize();\n\n  return (\n    <button\n      aria-label={getAriaLabel()}\n      className={cn(\n        ratingStarVariants({ editable, size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"rating-star\"\n      disabled={!editable}\n      onClick={onClick}\n      type=\"button\"\n      {...props}\n    >\n      {/* Filled star overlay */}\n      <span\n        className={cn(\n          ratingStarFilledVariants({ visible: filled }),\n          starClassName\n        )}\n      >\n        <HugeiconsIcon\n          className=\"fill-warning-foreground text-warning-foreground\"\n          icon={StarIcon}\n          size={starSize}\n          strokeWidth={1.5}\n        />\n      </span>\n\n      {/* Half-filled star overlay */}\n      {halfFilled && (\n        <span\n          className={cn(\n            ratingStarHalfVariants({ visible: true }),\n            starClassName\n          )}\n        >\n          <div className=\"w-1/2 overflow-hidden\">\n            <HugeiconsIcon\n              className=\"fill-warning-foreground text-warning-foreground\"\n              icon={StarIcon}\n              size={starSize}\n              strokeWidth={1.5}\n            />\n          </div>\n        </span>\n      )}\n\n      {/* Outline star */}\n      <span\n        className={cn(ratingStarOutlineVariants({ active }), starClassName)}\n      >\n        <HugeiconsIcon icon={StarIcon} size={starSize} strokeWidth={1.5} />\n      </span>\n    </button>\n  );\n};\n","\"use client\";\n\nimport type { ComponentProps, MouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport { cn, tv } from \"tailwind-variants\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport {\n  useComponentSize,\n  useKuzenboComponentDefaults,\n} from \"../shared/size/size-provider\";\nimport { RatingStar } from \"./rating-star\";\n\nexport const ratingVariants = tv({\n  base: [\n    // Layout: flex container with centered items\n    \"inline-flex items-center gap-1\",\n  ],\n  defaultVariants: {\n    size: \"md\",\n  },\n  variants: {\n    size: {\n      lg: [\n        // Large size: larger gap\n        \"gap-1.5\",\n      ],\n      md: [\n        // Medium size: default gap\n        \"gap-1\",\n      ],\n      sm: [\n        // Small size: smaller gap and text\n        \"gap-0.5\",\n      ],\n      xl: [\n        // Extra large size: largest spacing\n        \"gap-2\",\n      ],\n      xs: [\n        // Extra small size: compact gap\n        \"gap-0.5\",\n      ],\n    },\n  },\n});\n\nexport const ratingValueVariants = tv({\n  base: [\n    // Typography: rating value text styling\n    \"text-sm font-medium\",\n  ],\n  defaultVariants: {\n    size: \"md\",\n  },\n  variants: {\n    size: {\n      lg: [\n        // Large size: larger text\n        \"text-base\",\n      ],\n      md: [\n        // Medium size: default text\n        \"text-sm\",\n      ],\n      sm: [\n        // Small size: smaller text\n        \"text-xs\",\n      ],\n      xl: [\n        // Extra large size: largest text\n        \"text-base\",\n      ],\n      xs: [\n        // Extra small size: smallest text\n        \"text-xs\",\n      ],\n    },\n  },\n});\n\ntype RatingVariants = VariantProps<typeof ratingVariants>;\n\nexport type RatingProps = RatingVariants &\n  Omit<ComponentProps<\"div\">, \"onClick\"> & {\n    rating: number;\n    maxRating?: number;\n    showValue?: boolean;\n    editable?: boolean;\n    onRatingChange?: (rating: number) => void;\n    starClassName?: string;\n  };\n\nconst Rating = ({\n  className,\n  size,\n  rating,\n  maxRating = 5,\n  showValue = false,\n  editable = false,\n  onRatingChange,\n  starClassName,\n  ...props\n}: RatingProps) => {\n  const { size: componentDefaultSize } =\n    useKuzenboComponentDefaults<RatingProps>(\"Rating\");\n  const resolvedSize = useComponentSize(size, componentDefaultSize);\n\n  const handleStarClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const value = Number(e.currentTarget.dataset.value);\n      if (editable && onRatingChange) {\n        onRatingChange(value);\n      }\n    },\n    [editable, onRatingChange]\n  );\n\n  return (\n    <div\n      className={cn(ratingVariants({ size: resolvedSize }), className)}\n      data-size={resolvedSize}\n      data-slot=\"rating\"\n      {...props}\n    >\n      {Array.from({ length: maxRating }, (_, index) => {\n        const starValue = index + 1;\n        const isFilled = starValue <= Math.floor(rating);\n        const isHalfFilled =\n          !isFilled && starValue - 0.5 <= rating && rating < starValue;\n        const isActive = starValue <= rating;\n\n        return (\n          <RatingStar\n            active={isActive}\n            className={starClassName}\n            data-value={starValue}\n            editable={editable}\n            filled={isFilled}\n            halfFilled={isHalfFilled}\n            key={starValue}\n            onClick={handleStarClick}\n            size={resolvedSize}\n          />\n        );\n      })}\n      {showValue && (\n        <span\n          className={cn(ratingValueVariants({ size: resolvedSize }), \"ml-1\")}\n          data-size={resolvedSize}\n          data-slot=\"rating-value\"\n        >\n          {rating.toFixed(1)}\n        </span>\n      )}\n    </div>\n  );\n};\n\nRating.Star = RatingStar;\n\nexport { Rating, RatingStar };\n\nexport type { RatingStarProps } from \"./rating-star\";\n"],"mappings":"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"}

package/dist/ui/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","names":[],"sources":["../../src/ui/resizable/resizable-handle.tsx","../../src/ui/resizable/resizable-panel.tsx","../../src/ui/resizable/resizable.tsx"],"mappings":";;;;;KAMY,oBAAA,GAAuB,cAAA,QAAsB,SAAA;EACvD,UAAA;AAAA;AAAA,cAGI,eAAA;EAAmB,UAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAItB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCTX,mBAAA,GAAsB,cAAA,QAAsB,KAAA;AAAA,cAElD,cAAA;EAAA,GAAkB;AAAA,GAAc,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCE7C,wBAAA,GAA2B,cAAA,QAAsB,KAAA;AAAA,cAEvD,mBAAA;EAAA;;;KAGH,wBAAA,GAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"resizable.d.ts","names":[],"sources":["../../src/ui/resizable/resizable-handle.tsx","../../src/ui/resizable/resizable-panel.tsx","../../src/ui/resizable/resizable.tsx"],"mappings":";;;;;KAKY,oBAAA,GAAuB,cAAA,QAAsB,SAAA;EACvD,UAAA;AAAA;AAAA,cAGI,eAAA;EAAmB,UAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAItB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCTX,mBAAA,GAAsB,cAAA,QAAsB,KAAA;AAAA,cAElD,cAAA;EAAA,GAAkB;AAAA,GAAc,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCE7C,wBAAA,GAA2B,cAAA,QAAsB,KAAA;AAAA,cAEvD,mBAAA;EAAA;;;KAGH,wBAAA,GAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/resizable.js

@@ -6,10 +6,10 @@ import { Group, Panel, Separator } from "react-resizable-panels";
 
 //#region src/ui/resizable/resizable-handle.tsx
 const ResizableHandle = ({ withHandle, className, ...props }) => /* @__PURE__ */ jsx(Separator, {
-	className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
+	className: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
 	"data-slot": "resizable-handle",
 	...props,
-	children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+	children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-raised bg-border flex h-6 w-1 shrink-0 rounded-lg" })
 });
 
 //#endregion

package/dist/ui/resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","names":[],"sources":["../../src/ui/resizable/resizable-handle.tsx","../../src/ui/resizable/resizable-panel.tsx","../../src/ui/resizable/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Separator } from \"react-resizable-panels\";\nimport { cn } from \"tailwind-variants\";\nexport type ResizableHandleProps = ComponentProps<typeof Separator> & {\n  withHandle?: boolean;\n};\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) => (\n  <Separator\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    data-slot=\"resizable-handle\"\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n    )}\n  </Separator>\n);\n\nexport { ResizableHandle };\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Panel } from \"react-resizable-panels\";\nexport type ResizablePanelProps = ComponentProps<typeof Panel>;\n\nconst ResizablePanel = ({ ...props }: ResizablePanelProps) => (\n  <Panel data-slot=\"resizable-panel\" {...props} />\n);\n\nexport { ResizablePanel };\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Group } from \"react-resizable-panels\";\nimport { cn } from \"tailwind-variants\";\n\nimport { ResizableHandle } from \"./resizable-handle\";\nimport { ResizablePanel } from \"./resizable-panel\";\nexport type ResizablePanelGroupProps = ComponentProps<typeof Group>;\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: ResizablePanelGroupProps) => (\n  <Group\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    data-slot=\"resizable-panel-group\"\n    {...props}\n  />\n);\n\nResizablePanelGroup.Handle = ResizableHandle;\nResizablePanelGroup.Panel = ResizablePanel;\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n\nexport type { ResizableHandleProps } from \"./resizable-handle\";\nexport type { ResizablePanelProps } from \"./resizable-panel\";\n"],"mappings":";;;;;;;AAUA,MAAM,mBAAmB,EACvB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6oBACA,UACD;CACD,aAAU;CACV,GAAI;WAEH,cACC,oBAAC,SAAI,WAAU,oDAAoD;EAE3D;;;;ACnBd,MAAM,kBAAkB,EAAE,GAAG,YAC3B,oBAAC;CAAM,aAAU;CAAkB,GAAI;EAAS;;;;ACGlD,MAAM,uBAAuB,EAC3B,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,qEACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;AAGJ,oBAAoB,SAAS;AAC7B,oBAAoB,QAAQ"}
+{"version":3,"file":"resizable.js","names":[],"sources":["../../src/ui/resizable/resizable-handle.tsx","../../src/ui/resizable/resizable-panel.tsx","../../src/ui/resizable/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Separator } from \"react-resizable-panels\";\nimport { cn } from \"tailwind-variants\";\nexport type ResizableHandleProps = ComponentProps<typeof Separator> & {\n  withHandle?: boolean;\n};\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) => (\n  <Separator\n    className={cn(\n      \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    data-slot=\"resizable-handle\"\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-raised bg-border flex h-6 w-1 shrink-0 rounded-lg\" />\n    )}\n  </Separator>\n);\n\nexport { ResizableHandle };\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Panel } from \"react-resizable-panels\";\nexport type ResizablePanelProps = ComponentProps<typeof Panel>;\n\nconst ResizablePanel = ({ ...props }: ResizablePanelProps) => (\n  <Panel data-slot=\"resizable-panel\" {...props} />\n);\n\nexport { ResizablePanel };\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Group } from \"react-resizable-panels\";\nimport { cn } from \"tailwind-variants\";\n\nimport { ResizableHandle } from \"./resizable-handle\";\nimport { ResizablePanel } from \"./resizable-panel\";\nexport type ResizablePanelGroupProps = ComponentProps<typeof Group>;\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: ResizablePanelGroupProps) => (\n  <Group\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    data-slot=\"resizable-panel-group\"\n    {...props}\n  />\n);\n\nResizablePanelGroup.Handle = ResizableHandle;\nResizablePanelGroup.Panel = ResizablePanel;\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n\nexport type { ResizableHandleProps } from \"./resizable-handle\";\nexport type { ResizablePanelProps } from \"./resizable-panel\";\n"],"mappings":";;;;;;;AASA,MAAM,mBAAmB,EACvB,YACA,WACA,GAAG,YAEH,oBAAC,WAAD;CACE,WAAW,GACT,6oBACA,UACD;CACD,aAAU;CACV,GAAI;WAEH,cACC,oBAAC,OAAD,EAAK,WAAU,uDAAwD;CAE/D;;;;ACnBd,MAAM,kBAAkB,EAAE,GAAG,YAC3B,oBAAC,OAAD;CAAO,aAAU;CAAkB,GAAI;CAAS;;;;ACGlD,MAAM,uBAAuB,EAC3B,WACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,qEACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;AAGJ,oBAAoB,SAAS;AAC7B,oBAAoB,QAAQ"}

package/dist/ui/scroll-area.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { t as mergeBaseUIClassName } from "../merge-base-ui-class-name-HKsgjcXj.js";
-import { n as ScrollAreaThumb, t as ScrollBar } from "../scroll-bar-C4qEUKlT.js";
+import { n as ScrollAreaThumb, t as ScrollBar } from "../scroll-bar-BKRy5Me9.js";
 import { Children, isValidElement } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";

package/dist/ui/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive","ScrollAreaPrimitive","ScrollAreaPrimitive","ScrollAreaPrimitive"],"sources":["../../src/ui/scroll-area/scroll-content.tsx","../../src/ui/scroll-area/scroll-corner.tsx","../../src/ui/scroll-area/scroll-viewport.tsx","../../src/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaContentProps = ScrollAreaPrimitive.Content.Props;\n\nconst ScrollAreaContent = ({ className, ...props }: ScrollAreaContentProps) => (\n  <ScrollAreaPrimitive.Content\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Content.State>(\n      undefined,\n      className\n    )}\n    data-slot=\"scroll-area-content\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaContent };\n","import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaCornerProps = ScrollAreaPrimitive.Corner.Props;\n\nconst ScrollAreaCorner = ({ className, ...props }: ScrollAreaCornerProps) => (\n  <ScrollAreaPrimitive.Corner\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Corner.State>(\n      undefined,\n      className\n    )}\n    data-slot=\"scroll-area-corner\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaCorner };\n","import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaViewportProps = ScrollAreaPrimitive.Viewport.Props;\n\nconst ScrollAreaViewport = ({\n  className,\n  ...props\n}: ScrollAreaViewportProps) => (\n  <ScrollAreaPrimitive.Viewport\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Viewport.State>(\n      \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n      className\n    )}\n    data-slot=\"scroll-area-viewport\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaViewport };\n","\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { Children, isValidElement } from \"react\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { ScrollBar } from \"./scroll-bar\";\nimport { ScrollAreaContent } from \"./scroll-content\";\nimport { ScrollAreaCorner } from \"./scroll-corner\";\nimport { ScrollAreaThumb } from \"./scroll-thumb\";\nimport { ScrollAreaViewport } from \"./scroll-viewport\";\nexport type ScrollAreaProps = ScrollAreaPrimitive.Root.Props;\n\nconst ScrollArea = ({ className, children, ...props }: ScrollAreaProps) => (\n  <ScrollAreaPrimitive.Root\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Root.State>(\n      \"relative\",\n      className\n    )}\n    data-slot=\"scroll-area\"\n    {...props}\n  >\n    {Children.toArray(children).some((child) => {\n      if (!isValidElement(child)) {\n        return false;\n      }\n      return (\n        child.type === ScrollAreaPrimitive.Viewport ||\n        child.type === ScrollAreaViewport\n      );\n    }) ? (\n      children\n    ) : (\n      <>\n        <ScrollAreaViewport>\n          <ScrollAreaContent>{children}</ScrollAreaContent>\n        </ScrollAreaViewport>\n        <ScrollBar />\n        <ScrollAreaCorner />\n      </>\n    )}\n  </ScrollAreaPrimitive.Root>\n);\n\nScrollArea.Bar = ScrollBar;\nScrollArea.Content = ScrollAreaContent;\nScrollArea.Corner = ScrollAreaCorner;\nScrollArea.Scrollbar = ScrollBar;\nScrollArea.Thumb = ScrollAreaThumb;\nScrollArea.Viewport = ScrollAreaViewport;\n\nexport {\n  ScrollArea,\n  ScrollAreaContent,\n  ScrollAreaCorner,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n};\n\nexport type { ScrollBarProps } from \"./scroll-bar\";\nexport type { ScrollAreaContentProps } from \"./scroll-content\";\nexport type { ScrollAreaCornerProps } from \"./scroll-corner\";\nexport type { ScrollAreaThumbProps } from \"./scroll-thumb\";\nexport type { ScrollAreaViewportProps } from \"./scroll-viewport\";\n"],"mappings":";;;;;;;;;AAKA,MAAM,qBAAqB,EAAE,WAAW,GAAG,YACzC,oBAACA,aAAoB;CACnB,WAAW,qBACT,QACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,oBAAoB,EAAE,WAAW,GAAG,YACxC,oBAACC,aAAoB;CACnB,WAAW,qBACT,QACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAACC,aAAoB;CACnB,WAAW,qBACT,sJACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACHJ,MAAM,cAAc,EAAE,WAAW,UAAU,GAAG,YAC5C,oBAACC,aAAoB;CACnB,WAAW,qBACT,YACA,UACD;CACD,aAAU;CACV,GAAI;WAEH,SAAS,QAAQ,SAAS,CAAC,MAAM,UAAU;AAC1C,MAAI,CAAC,eAAe,MAAM,CACxB,QAAO;AAET,SACE,MAAM,SAASA,aAAoB,YACnC,MAAM,SAAS;GAEjB,GACA,WAEA;EACE,oBAAC,gCACC,oBAAC,qBAAmB,WAA6B,GAC9B;EACrB,oBAAC,cAAY;EACb,oBAAC,qBAAmB;KACnB;EAEoB;AAG7B,WAAW,MAAM;AACjB,WAAW,UAAU;AACrB,WAAW,SAAS;AACpB,WAAW,YAAY;AACvB,WAAW,QAAQ;AACnB,WAAW,WAAW"}
+{"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive","ScrollAreaPrimitive","ScrollAreaPrimitive","ScrollAreaPrimitive"],"sources":["../../src/ui/scroll-area/scroll-content.tsx","../../src/ui/scroll-area/scroll-corner.tsx","../../src/ui/scroll-area/scroll-viewport.tsx","../../src/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaContentProps = ScrollAreaPrimitive.Content.Props;\n\nconst ScrollAreaContent = ({ className, ...props }: ScrollAreaContentProps) => (\n  <ScrollAreaPrimitive.Content\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Content.State>(\n      undefined,\n      className\n    )}\n    data-slot=\"scroll-area-content\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaContent };\n","import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaCornerProps = ScrollAreaPrimitive.Corner.Props;\n\nconst ScrollAreaCorner = ({ className, ...props }: ScrollAreaCornerProps) => (\n  <ScrollAreaPrimitive.Corner\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Corner.State>(\n      undefined,\n      className\n    )}\n    data-slot=\"scroll-area-corner\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaCorner };\n","import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nexport type ScrollAreaViewportProps = ScrollAreaPrimitive.Viewport.Props;\n\nconst ScrollAreaViewport = ({\n  className,\n  ...props\n}: ScrollAreaViewportProps) => (\n  <ScrollAreaPrimitive.Viewport\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Viewport.State>(\n      \"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n      className\n    )}\n    data-slot=\"scroll-area-viewport\"\n    {...props}\n  />\n);\n\nexport { ScrollAreaViewport };\n","\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { Children, isValidElement } from \"react\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { ScrollBar } from \"./scroll-bar\";\nimport { ScrollAreaContent } from \"./scroll-content\";\nimport { ScrollAreaCorner } from \"./scroll-corner\";\nimport { ScrollAreaThumb } from \"./scroll-thumb\";\nimport { ScrollAreaViewport } from \"./scroll-viewport\";\nexport type ScrollAreaProps = ScrollAreaPrimitive.Root.Props;\n\nconst ScrollArea = ({ className, children, ...props }: ScrollAreaProps) => (\n  <ScrollAreaPrimitive.Root\n    className={mergeBaseUIClassName<ScrollAreaPrimitive.Root.State>(\n      \"relative\",\n      className\n    )}\n    data-slot=\"scroll-area\"\n    {...props}\n  >\n    {Children.toArray(children).some((child) => {\n      if (!isValidElement(child)) {\n        return false;\n      }\n      return (\n        child.type === ScrollAreaPrimitive.Viewport ||\n        child.type === ScrollAreaViewport\n      );\n    }) ? (\n      children\n    ) : (\n      <>\n        <ScrollAreaViewport>\n          <ScrollAreaContent>{children}</ScrollAreaContent>\n        </ScrollAreaViewport>\n        <ScrollBar />\n        <ScrollAreaCorner />\n      </>\n    )}\n  </ScrollAreaPrimitive.Root>\n);\n\nScrollArea.Bar = ScrollBar;\nScrollArea.Content = ScrollAreaContent;\nScrollArea.Corner = ScrollAreaCorner;\nScrollArea.Scrollbar = ScrollBar;\nScrollArea.Thumb = ScrollAreaThumb;\nScrollArea.Viewport = ScrollAreaViewport;\n\nexport {\n  ScrollArea,\n  ScrollAreaContent,\n  ScrollAreaCorner,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  ScrollBar,\n};\n\nexport type { ScrollBarProps } from \"./scroll-bar\";\nexport type { ScrollAreaContentProps } from \"./scroll-content\";\nexport type { ScrollAreaCornerProps } from \"./scroll-corner\";\nexport type { ScrollAreaThumbProps } from \"./scroll-thumb\";\nexport type { ScrollAreaViewportProps } from \"./scroll-viewport\";\n"],"mappings":";;;;;;;;;AAKA,MAAM,qBAAqB,EAAE,WAAW,GAAG,YACzC,oBAACA,aAAoB,SAArB;CACE,WAAW,qBACT,QACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,oBAAoB,EAAE,WAAW,GAAG,YACxC,oBAACC,aAAoB,QAArB;CACE,WAAW,qBACT,QACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAACC,aAAoB,UAArB;CACE,WAAW,qBACT,sJACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACHJ,MAAM,cAAc,EAAE,WAAW,UAAU,GAAG,YAC5C,oBAACC,aAAoB,MAArB;CACE,WAAW,qBACT,YACA,UACD;CACD,aAAU;CACV,GAAI;WAEH,SAAS,QAAQ,SAAS,CAAC,MAAM,UAAU;AAC1C,MAAI,CAAC,eAAe,MAAM,CACxB,QAAO;AAET,SACE,MAAM,SAASA,aAAoB,YACnC,MAAM,SAAS;GAEjB,GACA,WAEA;EACE,oBAAC,oBAAD,YACE,oBAAC,mBAAD,EAAoB,UAA6B,GAC9B;EACrB,oBAAC,WAAD,EAAa;EACb,oBAAC,kBAAD,EAAoB;EACnB;CAEoB;AAG7B,WAAW,MAAM;AACjB,WAAW,UAAU;AACrB,WAAW,SAAS;AACpB,WAAW,YAAY;AACvB,WAAW,QAAQ;AACnB,WAAW,WAAW"}