@pablo-v/rating 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+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/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @pablo-v/rating
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Star rating input and read-only display
+
+```bash
+pnpm add @pablo-v/rating @pablo-v/tokens
+```
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/rating/style.css';
+import { Rating } from '@pablo-v/rating';
+```

package/dist/Rating.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef } from 'react';
+export interface RatingProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** 0 means no rating. Fractions are shown only when `readOnly`. */
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** @default 5 */
+    max?: number;
+    /** Shows the value as an image instead of an input. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Picking the current value again resets it to 0. @default true */
+    clearable?: boolean;
+    /** Form field name for the selected radio. */
+    name?: string;
+    /** @default 'md' */
+    size?: 'md' | 'lg';
+    /** Accessible name of each star. @default n => `${n} star(s)` */
+    getLabel?: (value: number) => string;
+    /** Accessible name in read-only mode. @default (v, max) => `${v} out of ${max} stars` */
+    getValueText?: (value: number, max: number) => string;
+}
+/** Star rating on native radios, or a read-only score that can show fractions. */
+export declare function Rating({ value: valueProp, defaultValue, onChange, max, readOnly, disabled, clearable, name, size, getLabel, getValueText, className, ...rest }: RatingProps): import("react").JSX.Element;
+//# sourceMappingURL=Rating.d.ts.map

package/dist/Rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../src/Rating.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,qBAAqB,EAAuC,MAAM,OAAO,CAAC;AAExF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACvE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,yFAAyF;IACzF,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACvD;AAKD,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EAAE,SAAS,EAChB,YAAgB,EAChB,QAAQ,EACR,GAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAgB,EAChB,IAAI,EACJ,IAAW,EACX,QAAuB,EACvB,YAA+B,EAC/B,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,+BAuEb"}

package/dist/Rating.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp, cx, useControllableState } from '@pablo-v/core';
+import { StarIcon } from '@pablo-v/pixel-icons';
+import { useId, useState } from 'react';
+const defaultLabel = (n) => `${n} ${n === 1 ? 'star' : 'stars'}`;
+const defaultValueText = (v, max) => `${v} out of ${max} stars`;
+/** Star rating on native radios, or a read-only score that can show fractions. */
+export function Rating({ value: valueProp, defaultValue = 0, onChange, max = 5, readOnly, disabled, clearable = true, name, size = 'md', getLabel = defaultLabel, getValueText = defaultValueText, className, ...rest }) {
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue, onChange });
+    const [hover, setHover] = useState(null);
+    const groupName = useId();
+    const iconSize = size === 'lg' ? 32 : 16;
+    const stars = Array.from({ length: max }, (_, i) => i + 1);
+    if (readOnly) {
+        return (_jsx("div", { role: "img", "aria-label": getValueText(value, max), "data-size": size, "data-readonly": "", className: cx('pxl-rating', className), ...rest, children: stars.map((n) => (_jsxs("span", { className: "pxl-rating__star", style: { '--_fill': `${clamp(value - n + 1, 0, 1) * 100}%` }, children: [_jsx(StarIcon, { size: iconSize }), _jsx("span", { className: "pxl-rating__fill", children: _jsx(StarIcon, { size: iconSize }) })] }, n))) }));
+    }
+    const shown = hover ?? Math.round(value);
+    return (_jsx("div", { role: "radiogroup", "aria-disabled": disabled || undefined, "data-size": size, className: cx('pxl-rating', className), onPointerLeave: () => setHover(null), ...rest, children: stars.map((n) => (_jsxs("label", { className: "pxl-rating__star", "data-lit": n <= shown || undefined, onPointerEnter: () => !disabled && setHover(n), children: [_jsx("input", { type: "radio", className: "pxl-rating__input", name: name ?? groupName, value: n, checked: Math.round(value) === n, disabled: disabled, "aria-label": getLabel(n), onChange: () => setValue(n), onClick: () => {
+                        if (clearable && Math.round(value) === n) {
+                            setValue(0);
+                            setHover(null);
+                        }
+                    } }), _jsx(StarIcon, { size: iconSize })] }, n))) }));
+}
+//# sourceMappingURL=Rating.js.map

package/dist/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../src/Rating.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Rating, type RatingProps } from './Rating.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Rating } from './Rating.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC"}

package/dist/rating.css

@@ -0,0 +1,101 @@
+.pxl-rating {
+  --_cell: var(--pxl-size-xs);
+  --_off: var(--pxl-gray-600);
+  --_on: var(--pxl-accent);
+
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.pxl-rating[data-size="lg"] {
+  --_cell: var(--pxl-size-md);
+}
+
+.pxl-rating[data-readonly] {
+  gap: 2px;
+}
+
+.pxl-rating[data-readonly][data-size="md"] {
+  --_cell: 16px;
+}
+
+.pxl-rating[data-readonly][data-size="lg"] {
+  --_cell: 32px;
+}
+
+.pxl-rating__star {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: var(--_cell);
+  height: var(--_cell);
+  border-radius: var(--pxl-radius-sm);
+  color: var(--_off);
+}
+
+label.pxl-rating__star {
+  cursor: pointer;
+}
+
+.pxl-rating__star .pxl-icon {
+  transition:
+    color var(--pxl-dur-fast) linear,
+    transform var(--pxl-dur-base) var(--pxl-ease-spring);
+}
+
+.pxl-rating__star[data-lit] {
+  color: var(--_on);
+}
+
+label.pxl-rating__star:hover .pxl-icon {
+  transform: scale(1.15);
+}
+
+label.pxl-rating__star:has(:checked) .pxl-icon {
+  animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out);
+}
+
+.pxl-rating__star:has(:focus-visible) {
+  outline: 2px solid var(--pxl-accent);
+  outline-offset: -2px;
+}
+
+.pxl-rating__input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.pxl-rating[aria-disabled="true"] {
+  opacity: var(--pxl-opacity-disabled);
+}
+
+.pxl-rating[aria-disabled="true"] .pxl-rating__star {
+  cursor: not-allowed;
+}
+
+/* Read-only fractions: a lit copy of the star, clipped to --_fill, sits over the unlit one. */
+.pxl-rating__fill {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--_on);
+  clip-path: inset(0 calc(100% - var(--_fill)) 0 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  label.pxl-rating__star:hover .pxl-icon {
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .pxl-rating__star[data-lit],
+  .pxl-rating__fill {
+    color: Highlight;
+  }
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@pablo-v/rating",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Star rating input and read-only display",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/rating"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/rating.css",
+      "default": "./dist/rating.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.1",
+    "@pablo-v/pixel-icons": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }