{"_id":"@devekkx/svelte-star-rating","_rev":"3-42f8699b7b7a7d5fe03db09965bdb143","name":"@devekkx/svelte-star-rating","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@devekkx/svelte-star-rating","version":"1.0.0","keywords":["svelte","star","rating"],"author":{"name":"Emmanuel Komla Kpendo","email":"devekkx@gmail.com"},"license":"MIT","_id":"@devekkx/svelte-star-rating@1.0.0","maintainers":[{"name":"devekkx","email":"devekkx@gmail.com"}],"dist":{"shasum":"dbf23e7258543eb82a379486b096ca89b85efcf2","tarball":"https://registry.npmjs.org/@devekkx/svelte-star-rating/-/svelte-star-rating-1.0.0.tgz","fileCount":11,"integrity":"sha512-AE1fP1Eg0jO7QA/Yq6P8uYqhnoxribpGHb3BRBW3AG8ZfqMBr9YQqvcz4UK6xqB8HzMLuRdZFX4U8898yLTkBA==","signatures":[{"sig":"MEUCIQCJhicYjW2Aqhk89MZfTUdNukhvTM+8zlzxS6+6oa9duQIgeq2hXsfa6ImzyXFPnpwbhKL2uqJmb4jNvVXQpkZHYDo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13978},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"5ad106a7233af7513edaf5acb61cb7d1299cca6f","scripts":{"dev":"vite dev","lint":"prettier --check . && eslint .","test":"npm run test:unit -- --run","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"devekkx","email":"devekkx@gmail.com"},"_npmVersion":"10.8.2","description":"Simple star rating component for Svelte","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","svelte":"^5.39.5","vitest":"^3.2.4","globals":"^16.4.0","publint":"^0.3.13","prettier":"^3.6.2","@eslint/js":"^9.36.0","playwright":"^1.55.1","typescript":"^5.9.2","@types/node":"^22","svelte-check":"^4.3.2","@sveltejs/kit":"^2.43.2","@eslint/compat":"^1.4.0","@vitest/browser":"^3.2.4","@sveltejs/package":"^2.5.4","typescript-eslint":"^8.44.1","eslint-plugin-svelte":"^3.12.4","vitest-browser-svelte":"^1.1.0","@sveltejs/adapter-auto":"^6.1.0","eslint-config-prettier":"^10.1.8","prettier-plugin-svelte":"^3.4.0","@sveltejs/vite-plugin-svelte":"^6.2.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte-star-rating_1.0.0_1774177207463_0.8834907331402502","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@devekkx/svelte-star-rating","version":"1.0.1","keywords":["svelte","star","rating"],"author":{"name":"Emmanuel Komla Kpendo","email":"devekkx@gmail.com"},"license":"MIT","_id":"@devekkx/svelte-star-rating@1.0.1","maintainers":[{"name":"devekkx","email":"devekkx@gmail.com"}],"dist":{"shasum":"bba96a839aab2c89e520b36f4efb0aa0726a6589","tarball":"https://registry.npmjs.org/@devekkx/svelte-star-rating/-/svelte-star-rating-1.0.1.tgz","fileCount":11,"integrity":"sha512-gYnvK3AKZ+ze8D/avDjs8qgfu1cEvA8NKch3c3PEtxw5Y+HhVWWPq2eDHCPr/9KAYzp/rFO80vOyyKMZeQ5pOg==","signatures":[{"sig":"MEYCIQCb53173XGzyZmnnD1jFpD5PgXtNtQF+Xnfky5qwjfuBgIhAJWnI4HAVKjznWCoQkKMcyKsW1onPgl+sqJ6lZjpX2uY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14011},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"c6e54a69c2621b6bf55173445f1c3321e58be6c1","scripts":{"dev":"vite dev","lint":"prettier --check . && eslint .","test":"npm run test:unit -- --run","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"devekkx","email":"devekkx@gmail.com"},"_npmVersion":"10.8.2","description":"Simple star rating component for Svelte","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.7","eslint":"^9.36.0","svelte":"^5.39.5","vitest":"^3.2.4","globals":"^16.4.0","publint":"^0.3.13","prettier":"^3.6.2","@eslint/js":"^9.36.0","playwright":"^1.55.1","typescript":"^5.9.2","@types/node":"^22","svelte-check":"^4.3.2","@sveltejs/kit":"^2.43.2","@eslint/compat":"^1.4.0","@vitest/browser":"^3.2.4","@sveltejs/package":"^2.5.4","typescript-eslint":"^8.44.1","eslint-plugin-svelte":"^3.12.4","vitest-browser-svelte":"^1.1.0","@sveltejs/adapter-auto":"^6.1.0","eslint-config-prettier":"^10.1.8","prettier-plugin-svelte":"^3.4.0","@sveltejs/vite-plugin-svelte":"^6.2.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte-star-rating_1.0.1_1774179155507_0.11593125312412367","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@devekkx/svelte-star-rating","description":"Simple star rating component for Svelte","author":{"name":"Emmanuel Komla Kpendo","email":"devekkx@gmail.com"},"version":"1.0.2","license":"MIT","scripts":{"dev":"vite dev","build":"vite build && npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format":"prettier --write .","lint":"prettier --check . && eslint .","test:unit":"vitest","test":"npm run test:unit -- --run"},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@eslint/compat":"^1.4.0","@eslint/js":"^9.36.0","@sveltejs/adapter-auto":"^6.1.0","@sveltejs/kit":"^2.43.2","@sveltejs/package":"^2.5.4","@sveltejs/vite-plugin-svelte":"^6.2.0","@types/node":"^22","@vitest/browser":"^3.2.4","eslint":"^9.36.0","eslint-config-prettier":"^10.1.8","eslint-plugin-svelte":"^3.12.4","globals":"^16.4.0","playwright":"^1.55.1","prettier":"^3.6.2","prettier-plugin-svelte":"^3.4.0","publint":"^0.3.13","svelte":"^5.39.5","svelte-check":"^4.3.2","typescript":"^5.9.2","typescript-eslint":"^8.44.1","vite":"^7.1.7","vitest":"^3.2.4","vitest-browser-svelte":"^1.1.0"},"keywords":["svelte","star","rating"],"_id":"@devekkx/svelte-star-rating@1.0.2","gitHead":"1bc7d86cf09f69a00838c41173b9e8dfb471ce7b","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-f2D+kyN4lbpfEWsW9U3EEVBbB0VjdBuiLOUK6h856l/+1g6ODWGXhGvqe0ZTu6QQSvPv4gJSrhPBv3uYB774tA==","shasum":"9cdd017826442aa698f1f55f5671c1f27d9b112e","tarball":"https://registry.npmjs.org/@devekkx/svelte-star-rating/-/svelte-star-rating-1.0.2.tgz","fileCount":11,"unpackedSize":14011,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDTWexBIVAUEo7jRM0vaAWDfWWrxDuxW9el6PVonvNe1AiEAqdty6AZSHp5thMzWzJKUy+0tK+CukvUN9/MuoNN/+4w="}]},"_npmUser":{"name":"devekkx","email":"devekkx@gmail.com"},"directories":{},"maintainers":[{"name":"devekkx","email":"devekkx@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-star-rating_1.0.2_1774179157425_0.9908551789343898"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-22T11:00:07.377Z","modified":"2026-03-22T11:32:37.686Z","1.0.0":"2026-03-22T11:00:07.602Z","1.0.1":"2026-03-22T11:32:35.650Z","1.0.2":"2026-03-22T11:32:37.562Z"},"author":{"name":"Emmanuel Komla Kpendo","email":"devekkx@gmail.com"},"license":"MIT","keywords":["svelte","star","rating"],"description":"Simple star rating component for Svelte","maintainers":[{"name":"devekkx","email":"devekkx@gmail.com"}],"readme":"# Svelte Star Rating\n\nA simple, zero-dependency star rating component for Svelte 5. It supports partial fills, full keyboard and mouse interaction, a readonly display mode, and per-instance customization of colors, size, and stroke.\n\n## Installation\n\nInstall the package with your preferred package manager:\n\n```bash\nnpm install @devekkx/svelte-star-rating\n# or\npnpm add @devekkx/svelte-star-rating\n# or\nbun add @devekkx/svelte-star-rating\n```\n\nThis package requires Svelte 5 as a peer dependency.\n\n## Quick start\n\nHere is a basic interactive rating input:\n\n```svelte\n<script lang=\"ts\">\n\timport { StarRating } from '@devekkx/svelte-star-rating';\n\n\tlet value = $state(4.4);\n\n\tconst config = {\n\t\treadonly: false,\n\t\tmaxVal: 5,\n\t\tminVal: 0,\n\t\tstep: 0.1,\n\t\tnumOfStars: 5,\n\t\tstarConfig: {\n\t\t\tsize: 26,\n\t\t\tfilledColor: '#F98416',\n\t\t\tunfilledColor: '#5D5D5D'\n\t\t}\n\t};\n</script>\n\n<StarRating bind:value {config} /><p>Current rating: {value}</p>\n```\n\nAnd here is a read-only display, useful for showing an existing score:\n\n```svelte\n<script lang=\"ts\">\n\timport { StarRating } from '@devekkx/svelte-star-rating';\n\n\tlet value = 3.7;\n\n\tconst config = {\n\t\treadonly: true,\n\t\tminVal: 0,\n\t\tmaxVal: 5,\n\t\tstep: 0.1,\n\t\tnumOfStars: 5,\n\t\tstarConfig: {\n\t\t\tsize: 20,\n\t\t\tfilledColor: '#ffc107',\n\t\t\tunfilledColor: '#e0e0e0'\n\t\t}\n\t};\n</script>\n\n<StarRating {config} bind:value />\n```\n\nWhen `readonly` is true, the slider is disabled and the displayed rating cannot be changed by the user.\n\n## API\n\n### Component: StarRating\n\n| Prop   | Type    | Required | Default | Description                                                 |\n| ------ | ------- | -------- | ------- | ----------------------------------------------------------- |\n| config | ConfigI | Yes      | -       | Controls behavior and appearance                            |\n| value  | number  | No       | 4.54    | The current rating. Use `bind:value` to read and update it. |\n\n### Types\n\n```ts\nexport interface StarConfigI {\n\tsize: number; // Pixel size of each star SVG\n\tfilledColor: string; // Fill color for filled stars\n\tunfilledColor: string; // Fill color for unfilled stars\n\tstrokeColor?: string; // Outline color for each star. Defaults to filledColor when not set.\n}\n\nexport interface ConfigI {\n\tname?: string; // Name attribute on the hidden range input. Defaults to \"stars\".\n\treadonly: boolean; // When true, the rating cannot be changed by the user.\n\tnumOfStars: number; // How many stars to render.\n\tminVal: number; // Minimum selectable value.\n\tmaxVal: number; // Maximum selectable value.\n\tstep: number; // Granularity of the rating (e.g. 0.5 for half-stars, 1 for whole stars).\n\tstarConfig: StarConfigI;\n\tstyles?: {\n\t\tcontainerStyles?: string; // Inline CSS for the outer container element.\n\t\tstarStyles?: string; // Inline CSS for the row of stars (useful for controlling gap).\n\t};\n}\n```\n\n## Stroke color\n\nEach star has an outline that you can control with `strokeColor` inside `starConfig`. If you do not set it, the outline defaults to the same color as `filledColor`, making it visible on unfilled stars but seamless on filled ones.\n\nA darker shade of your fill color is a common choice for the stroke:\n\n```ts\nstarConfig: {\n  size: 26,\n  filledColor: '#F98416',\n  unfilledColor: '#5D5D5D',\n  strokeColor: '#C8690F'  // a darker orange outline\n}\n```\n\nOr use a completely different color to create a distinct border effect:\n\n```ts\nstarConfig: {\n  size: 26,\n  filledColor: '#ffd700',\n  unfilledColor: '#e0e0e0',\n  strokeColor: '#999999'\n}\n```\n\n## Partial fill\n\nThe `value` prop can be fractional. Stars at indices below `Math.floor(value)` are fully filled. The star at index `Math.floor(value)` is partially filled to show the fractional part. Stars beyond that are empty.\n\nFor example, with `value = 3.7` and 5 stars:\n\n- Stars 1, 2, 3 are fully filled\n- Star 4 is 70% filled\n- Star 5 is empty\n\nThe `step` field controls how finely the user can adjust the rating. Use `step: 1` for whole stars, `step: 0.5` for half stars, or `step: 0.1` for tenth-star precision.\n\n## Styling and customization\n\nThe component uses inline SVG fills, so star colors work without any external CSS.\n\nTo control layout and spacing, pass a `styles` object:\n\n- `containerStyles` is applied to the outer section wrapper. Use it to set margins, borders, padding, width, and alignment.\n- `starStyles` is applied to the row that holds the stars. Use it to control the gap between stars.\n\nExample:\n\n```svelte\n<script lang=\"ts\">\n\timport { StarRating, type ConfigI } from '@devekkx/svelte-star-rating';\n\n\tlet value = $state(4.4);\n\n\tconst config: ConfigI = {\n\t\treadonly: false,\n\t\tmaxVal: 5,\n\t\tminVal: 0,\n\t\tstep: 0.1,\n\t\tnumOfStars: 5,\n\t\tstyles: {\n\t\t\tcontainerStyles:\n\t\t\t\t'border: 1px solid #ddd; padding: 8px; border-radius: 8px; width: max-content;',\n\t\t\tstarStyles: 'gap: 0.2rem;'\n\t\t},\n\t\tstarConfig: {\n\t\t\tsize: 26,\n\t\t\tfilledColor: '#F98416',\n\t\t\tunfilledColor: '#5D5D5D',\n\t\t\tstrokeColor: '#C8690F'\n\t\t}\n\t};\n</script>\n\n<StarRating bind:value {config} />\n```\n\n## More examples\n\nFive stars, whole-number steps:\n\n```svelte\n<script lang=\"ts\">\n\timport { StarRating } from '@devekkx/svelte-star-rating';\n\n\tlet value = $state(0);\n\n\tconst config = {\n\t\treadonly: false,\n\t\tminVal: 0,\n\t\tmaxVal: 5,\n\t\tstep: 1,\n\t\tnumOfStars: 5,\n\t\tstarConfig: { size: 32, filledColor: 'gold', unfilledColor: '#ccc' }\n\t};\n</script>\n\n<StarRating bind:value {config} /><p>Your rating: {value}</p>\n```\n\nTen stars, quarter-step precision:\n\n```svelte\n<script lang=\"ts\">\n\timport { StarRating } from '@devekkx/svelte-star-rating';\n\n\tlet value = $state(7.5);\n\n\tconst config = {\n\t\treadonly: false,\n\t\tminVal: 0,\n\t\tmaxVal: 10,\n\t\tstep: 0.25,\n\t\tnumOfStars: 10,\n\t\tstarConfig: { size: 18, filledColor: '#4f46e5', unfilledColor: '#e5e7eb' }\n\t};\n</script>\n\n<StarRating bind:value {config} />\n```\n\n## Accessibility\n\nWhen `readonly` is false, the underlying range input is keyboard-focusable and operable with arrow keys. Consider adding a visible label or `aria-label` attribute in your application to describe what the rating is for.\n\n## Notes\n\nThe component is exported as a named export:\n\n```ts\nimport { StarRating } from '@devekkx/svelte-star-rating';\n// types are also available\nimport type { ConfigI, StarConfigI } from '@devekkx/svelte-star-rating';\n```\n\nIt requires Svelte 5. It renders correctly in server-side rendering environments since it is purely presentational. The range input interaction is client-only.\n\n## License\n\nMIT License. Copyright 2025 Emmanuel Komla Kpendo.\n","readmeFilename":"README.md"}