{"name":"rating-group","title":"Rating Group","description":"A star rating input with hover preview, half-star support, and keyboard navigation.","installCommand":"bunx marko-ui add rating-group -y","usageTags":"<RatingGroup>","importSnippet":"import RatingGroup from \"@/components/ui/rating-group/rating-group.marko\";","usageSnippet":"<let/rating=3/>\n\n<RatingGroup label=\"Rate this\" value:=rating/>","tags":["RatingGroup"],"parts":[],"props":[{"name":"allowHalf","type":"boolean | undefined","required":false,"description":"Whether to allow half stars."},{"name":"autoFocus","type":"boolean | undefined","required":false,"description":"Whether to autofocus the rating."},{"name":"count","type":"number | undefined","required":false,"default":"5","description":"The total number of ratings."},{"name":"defaultValue","type":"number | undefined","required":false,"description":"The initial value of the rating when rendered.\nUse when you don't need to control the value of the rating."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the rating is disabled."},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the underlying input element."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the rating. Useful for composition."},{"name":"label","type":"string","required":false},{"name":"name","type":"string | undefined","required":false,"description":"The name attribute of the rating element (used in forms)."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the rating is readonly."},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the rating is required."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"value","type":"number | undefined","required":false,"description":"The controlled value of the rating"}],"events":[{"name":"onHoverChange","arg":"HoverChangeDetails","description":"Function to be called when the rating value is hovered."},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function to be called when the rating value changes."},{"name":"valueChange","arg":"number"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"rating-group-demo","title":"Basic","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<RatingGroup label=\"Rate this\" defaultValue=3/>","description":"A star rating with an initial value, uncontrolled."},{"id":"rating-group-half-stars","title":"Half stars","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<RatingGroup label=\"Rate this\" defaultValue=3.5 allowHalf/>","description":"Pass `allowHalf` to accept and render 0.5 increments."},{"id":"rating-group-custom-count","title":"Custom count","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<RatingGroup label=\"Out of 10\" count=10 defaultValue=7/>","description":"The `count` prop sets how many items render, independent of the value scale."},{"id":"rating-group-readonly","title":"Readonly","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<RatingGroup label=\"Average rating\" defaultValue=4.5 allowHalf readOnly/>","description":"A `readOnly` rating displays a value without accepting hover or click input."},{"id":"rating-group-disabled","title":"Disabled","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<RatingGroup label=\"Rate this\" defaultValue=2 disabled/>","description":"A disabled rating is skipped by the tab order and ignores pointer input."},{"id":"rating-group-controlled","title":"Controlled","source":"import RatingGroup from \"@marko-ui/shadcn/ui/rating-group/rating-group.marko\";\n\n<let/value=3/>\n\n<div class=\"flex flex-col gap-3\">\n  <RatingGroup\n    label=\"Rate this\"\n    value=value\n    valueChange(next) { value = next; }\n  />\n  <span class=\"text-sm text-muted-foreground\">Selected: ${value}</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}