@react-cupertino-ui/rating 1.0.3

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,88 @@
+.react-cupertino-ui-rating {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  color: var(--foreground, #05060a);
+}
+.react-cupertino-ui-rating__stars {
+  display: inline-flex;
+  gap: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.65);
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-rating__stars::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-rating__stars {
+  box-shadow: 0 18px 45px rgba(15, 15, 15, 0.18);
+}
+.react-cupertino-ui-rating__slot {
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rating-size, 32px);
+  height: var(--rating-size, 32px);
+  border-radius: 999px;
+  transition: transform 160ms ease, filter 160ms ease;
+}
+.react-cupertino-ui-rating__slot[data-active=true] {
+  filter: drop-shadow(0 6px 12px rgba(10, 132, 255, 0.35));
+}
+.react-cupertino-ui-rating__slot:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
+}
+.react-cupertino-ui-rating[data-readonly=true] .react-cupertino-ui-rating__slot {
+  cursor: default;
+}
+.react-cupertino-ui-rating__star {
+  width: 100%;
+  height: 100%;
+}
+.react-cupertino-ui-rating__star svg {
+  width: 100%;
+  height: 100%;
+}
+.react-cupertino-ui-rating__helper {
+  font-size: 0.82rem;
+  color: color-mix(in srgb, currentColor, transparent 35%);
+  margin: 0;
+}
+.react-cupertino-ui-rating.size-sm {
+  --rating-size: 22px;
+}
+.react-cupertino-ui-rating.size-md {
+  --rating-size: 30px;
+}
+.react-cupertino-ui-rating.size-lg {
+  --rating-size: 38px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-rating {
+    color: rgba(248, 250, 252, 0.95);
+  }
+  .react-cupertino-ui-rating__stars {
+    background: rgba(15, 15, 20, 0.68);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export type RatingSize = "sm" | "md" | "lg";
+export interface RatingProps extends Omit<BaseProps<HTMLDivElement>, "children" | "size"> {
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    readOnly?: boolean;
+    allowHalf?: boolean;
+    onValueChange?: (value: number) => void;
+    size?: RatingSize;
+    labels?: string[];
+    helperText?: string;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+export { Rating };

package/dist/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const clampValue = (value, max, allowHalf) => {
+    const step = allowHalf ? 0.5 : 1;
+    const clamped = Math.max(0, Math.min(value, max));
+    return Math.round(clamped / step) * step;
+};
+const StarIcon = ({ percentage }) => {
+    const pct = Math.max(0, Math.min(percentage, 100));
+    return (_jsx("span", { className: "react-cupertino-ui-rating__star", children: _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "rating-fill", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: `${pct}%`, stopColor: "currentColor" }), _jsx("stop", { offset: `${pct}%`, stopColor: "rgba(255,255,255,0.2)" })] }) }), _jsx("path", { d: "M12 2.6l2.7 5.46 6.03.88-4.37 4.24 1.03 6.02L12 16.9l-5.37 2.8 1.03-6.02L3.3 8.94l6.03-.88L12 2.6z", fill: "url(#rating-fill)", stroke: "rgba(255,255,255,0.5)", strokeWidth: "0.6" })] }) }));
+};
+const Rating = React.forwardRef((props, ref) => {
+    const { className, value, defaultValue = 0, max = 5, allowHalf = true, readOnly = false, onValueChange, size = "md", labels, helperText, ...rest } = props;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() => clampValue(defaultValue, max, allowHalf));
+    const currentValue = isControlled ? clampValue(value, max, allowHalf) : internalValue;
+    const handleChange = (next) => {
+        const resolved = clampValue(next, max, allowHalf);
+        if (!isControlled) {
+            setInternalValue(resolved);
+        }
+        onValueChange?.(resolved);
+    };
+    const handleKeyDown = (event, index) => {
+        if (readOnly) {
+            return;
+        }
+        const step = allowHalf ? 0.5 : 1;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+            event.preventDefault();
+            handleChange(currentValue + step);
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+            event.preventDefault();
+            handleChange(currentValue - step);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            handleChange(0);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            handleChange(max);
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleChange(index + 1);
+        }
+    };
+    const getFillPercentage = (index) => {
+        const starValue = index + 1;
+        if (currentValue >= starValue) {
+            return 100;
+        }
+        if (currentValue + (allowHalf ? 0.5 : 1) > starValue && allowHalf) {
+            return 50;
+        }
+        return Math.max(0, (currentValue - index) * 100);
+    };
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-rating", `size-${size}`, className), "data-readonly": readOnly ? "true" : undefined, ...rest, children: [_jsx("div", { className: "react-cupertino-ui-rating__stars", role: "group", "aria-label": "Rating", children: Array.from({ length: max }).map((_, index) => {
+                    const percentage = getFillPercentage(index);
+                    const label = labels?.[index];
+                    const buttonValue = index + 1;
+                    if (readOnly) {
+                        return (_jsx("div", { className: "react-cupertino-ui-rating__slot", "aria-hidden": "true", title: label, children: _jsx(StarIcon, { percentage: percentage }) }, buttonValue));
+                    }
+                    return (_jsx("button", { type: "button", className: "react-cupertino-ui-rating__slot", "data-active": currentValue >= buttonValue ? "true" : undefined, onClick: (event) => {
+                            if (readOnly) {
+                                return;
+                            }
+                            if (allowHalf) {
+                                const rect = event.currentTarget.getBoundingClientRect();
+                                const clickOffset = event.clientX - rect.left;
+                                const isLeftHalf = clickOffset <= rect.width / 2;
+                                handleChange(isLeftHalf ? buttonValue - 0.5 : buttonValue);
+                                return;
+                            }
+                            handleChange(buttonValue);
+                        }, onKeyDown: (event) => handleKeyDown(event, index), "aria-label": label ?? `${buttonValue} star${buttonValue === 1 ? "" : "s"}`, children: _jsx(StarIcon, { percentage: percentage }) }, buttonValue));
+                }) }), helperText ? _jsx("p", { className: "react-cupertino-ui-rating__helper", children: helperText }) : null] }));
+});
+Rating.displayName = "Rating";
+export { Rating };

package/dist/index.scss

@@ -0,0 +1,84 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-rating {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  color: var(--foreground, #05060a);
+
+  &__stars {
+    display: inline-flex;
+    gap: 0.35rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.65);
+    @include glass.glass-panel(light, var(--glass-blur, 24px), 0.7);
+    box-shadow: 0 18px 45px rgba(15, 15, 15, 0.18);
+  }
+
+  &__slot {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rating-size, 32px);
+    height: var(--rating-size, 32px);
+    border-radius: 999px;
+    transition: transform 160ms ease, filter 160ms ease;
+
+    &[data-active="true"] {
+      filter: drop-shadow(0 6px 12px rgba(10, 132, 255, 0.35));
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
+    }
+  }
+
+  &[data-readonly="true"] &__slot {
+    cursor: default;
+  }
+
+  &__star {
+    width: 100%;
+    height: 100%;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__helper {
+    font-size: 0.82rem;
+    color: color-mix(in srgb, currentColor, transparent 35%);
+    margin: 0;
+  }
+
+  &.size-sm {
+    --rating-size: 22px;
+  }
+
+  &.size-md {
+    --rating-size: 30px;
+  }
+
+  &.size-lg {
+    --rating-size: 38px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-rating {
+    color: rgba(248, 250, 252, 0.95);
+
+    &__stars {
+      background: rgba(15, 15, 20, 0.68);
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/rating",
+  "version": "1.0.3",
+  "description": "Liquid Glass rating component",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}