@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, createElement } from "react";
+import Fieldset from "../Fieldset/index.js";
+import Flex from "../Flex/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a as spacingXs, b as spacingNone, s as spacingMd, g as spacingLg } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import Label from "../Label/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { c as colorBorderFocus, e as colorBorderCritical, i as colorBorderSelected, b as colorBorderUnselected } from "../../BorderColor-BACbvI20.js";
+import { d as borderRadiusFull } from "../../BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { f as colorObjectSelected, e as colorObjectInverse } from "../../ObjectColor-CSHEae46.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { a as shouldForwardPropExcluding, s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const RadioContainer = styled(Flex).withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["disabled"]),
+  displayName: "RadioContainer",
+  componentId: "sc-n0lr20-0"
+})({
+  alignItems: "flex-start",
+  width: "max-content",
+  maxWidth: "fit-content",
+  flexWrap: "nowrap",
+  gap: getSpacing(spacingXs)
+}, ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+});
+const RadioStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "RadioStyled",
+  componentId: "sc-n0lr20-1"
+})({
+  position: "relative",
+  width: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  height: `calc(${getBodySize("md").fontSize} * ${getBodySize("md").lineHeight})`,
+  cursor: "pointer",
+  "&:has(:focus-visible)": {
+    svg: {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      borderRadius: getBorderRadius(borderRadiusFull),
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      })
+    }
+  }
+});
+const RadioInputStyled = styled.input.withConfig({
+  shouldForwardProp,
+  displayName: "RadioInputStyled",
+  componentId: "sc-n0lr20-2"
+})({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0,
+  zIndex: 1,
+  margin: 0,
+  padding: 0,
+  cursor: "inherit",
+  appearance: "none",
+  "&:focus, &:focus-visible": {
+    outline: "none"
+  }
+});
+const RadioLabelStyled = styled(Label).withConfig({
+  shouldForwardProp,
+  displayName: "RadioLabelStyled",
+  componentId: "sc-n0lr20-3"
+})({
+  cursor: "pointer"
+});
+const RadioSVGStyled = styled.svg.withConfig({
+  shouldForwardProp,
+  displayName: "RadioSVGStyled",
+  componentId: "sc-n0lr20-4"
+})({
+  fill: "none",
+  width: "inherit",
+  height: "inherit"
+});
+const RadioFillingCircleStyled = styled.circle.withConfig({
+  shouldForwardProp,
+  displayName: "RadioFillingCircleStyled",
+  componentId: "sc-n0lr20-5"
+})({
+  fill: getObjectColor(colorObjectSelected)
+}, forcedColors({
+  fill: "FieldText"
+}));
+const RadioBorderPathStyled = styled.circle.withConfig({
+  shouldForwardProp,
+  displayName: "RadioBorderPathStyled",
+  componentId: "sc-n0lr20-6"
+})({
+  fill: getObjectColor(colorObjectInverse)
+}, forcedColors({
+  fill: "Field"
+}), ({
+  checked,
+  status
+}) => {
+  return {
+    stroke: status === inputStateError ? getBorderColor(colorBorderCritical) : checked ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderUnselected),
+    ...forcedColors({
+      stroke: "FieldText"
+    })
+  };
+});
+const RadioSVG = ({
+  checked,
+  status
+}) => /* @__PURE__ */ jsxs(RadioSVGStyled, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(RadioBorderPathStyled, { cx: "13", cy: "13", r: "12.5", checked, status }),
+  checked && /* @__PURE__ */ jsx(RadioFillingCircleStyled, { cx: "13", cy: "13", r: "8" })
+] });
+const Radio = ({
+  uid,
+  status,
+  label,
+  checked,
+  disabled,
+  ...props
+}) => {
+  const inputProps = {
+    ...props,
+    id: uid
+  };
+  return /* @__PURE__ */ jsxs(RadioContainer, { disabled, gapSpacing: spacingXs, children: [
+    /* @__PURE__ */ jsxs(RadioStyled, { children: [
+      /* @__PURE__ */ jsx(RadioInputStyled, { ...inputProps, checked, status, type: "radio", disabled }),
+      /* @__PURE__ */ jsx(RadioSVG, { status, checked })
+    ] }),
+    /* @__PURE__ */ jsx(RadioLabelStyled, { bottomSpacing: spacingNone, htmlFor: uid, uid, children: label })
+  ] });
+};
+const RadioGroup = ({
+  component: _component,
+  radios,
+  checkedValue,
+  onUpdate,
+  orientation = "horizontal",
+  status,
+  disabled,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(checkedValue);
+  const [currentStatus, setCurrentStatus] = useState(status);
+  const ref = useRef(null);
+  const prevChecked = useRef(checked);
+  const handleChange = (event) => {
+    const value = event.target.value;
+    setChecked(value);
+    setCurrentStatus(void 0);
+    if (onUpdate) {
+      onUpdate(value);
+    }
+  };
+  useEffect(() => {
+    if (checked === checkedValue) {
+      return;
+    }
+    setChecked(checkedValue);
+  }, [checkedValue]);
+  useEffect(() => {
+    setCurrentStatus(status);
+  }, [status]);
+  useEffect(() => {
+    if (prevChecked.current !== checked) {
+      const checkedInput = ref.current.querySelector(`[value='${checked}']`);
+      checkedInput && checkedInput.focus();
+    }
+    prevChecked.current = checked;
+  }, [checked]);
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, status: currentStatus, ...{
+    "aria-disabled": disabled,
+    "aria-invalid": inputStateError === currentStatus ? true : void 0
+  }, ref, children: /* @__PURE__ */ jsx(Flex, { orientation, gapSpacing: orientation === "horizontal" ? spacingLg : spacingMd, bottomSpacing: spacingMd, children: radios.map((radio) => {
+    return /* @__PURE__ */ createElement(Radio, { ...radio, onChange: handleChange, checked: checked === radio.value, key: radio.uid, status: currentStatus, disabled });
+  }) }) });
+};
+export {
+  RadioGroup as default
+};

package/dist/components/RadioGroup/props.d.ts

@@ -0,0 +1,33 @@
+import { FieldsetSharedProps } from '../Fieldset/props';
+import { FlexOrientation } from '../Flex/props';
+import { radioGroupComponentName } from './componentName';
+import { RadioProps } from './components/Radio/props';
+/**
+ * Props for the RadioGroup component.
+ * A group of radio buttons with shared validation and selection state.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/input-and-selection-radiogroup--docs} RadioGroup stories
+ */
+export interface RadioGroupProps extends FieldsetSharedProps {
+    /**
+     * Array of radio button configurations.
+     */
+    radios: RadioProps[];
+    /**
+     * Value of the currently selected radio button.
+     */
+    checkedValue?: string;
+    /**
+     * Callback fired when the selection changes. Receives the selected value.
+     */
+    onUpdate?: (a: string) => void;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof radioGroupComponentName;
+    /**
+     * Layout direction of the radio buttons.
+     * - `horizontal`: Side by side
+     * - `vertical`: Stacked
+     */
+    orientation?: FlexOrientation;
+}

package/dist/components/RadioGroup/validate.d.ts

@@ -0,0 +1,159 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { RadioGroupProps } from './props';
+export type RadioGroupCmsProps = CmsProps<RadioGroupProps>;
+export declare const radioGroupSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"RadioGroup">;
+    radios: z.ZodArray<z.ZodObject<{
+        layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+            sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+            md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+            lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        }, z.core.$strip>]>>>;
+        disabled: z.ZodOptional<z.ZodBoolean>;
+        uid: z.ZodString;
+        bottomSpacing: z.ZodOptional<z.ZodEnum<{
+            sm: "sm";
+            md: "md";
+            lg: "lg";
+            none: "none";
+            "2xs": "2xs";
+            xs: "xs";
+            xl: "xl";
+            "2xl": "2xl";
+            "3xl": "3xl";
+            "4xl": "4xl";
+            "5xl": "5xl";
+            "6xl": "6xl";
+            "7xl": "7xl";
+            None: "None";
+            "2Xs": "2Xs";
+            Xs: "Xs";
+            Sm: "Sm";
+            Md: "Md";
+            Lg: "Lg";
+            Xl: "Xl";
+            "2Xl": "2Xl";
+            "3Xl": "3Xl";
+            "4Xl": "4Xl";
+            "5Xl": "5Xl";
+            "6Xl": "6Xl";
+            "7Xl": "7Xl";
+        }>>;
+        status: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            success: "success";
+        }>>;
+        sysId: z.ZodString;
+        customId: z.ZodOptional<z.ZodString>;
+        enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+        tracking: z.ZodOptional<z.ZodObject<{
+            contact_action: z.ZodOptional<z.ZodString>;
+            contact_subject: z.ZodOptional<z.ZodString>;
+            contact_available_tools: z.ZodOptional<z.ZodString>;
+            contact_tool: z.ZodOptional<z.ZodString>;
+            contact_trigger: z.ZodOptional<z.ZodString>;
+            contact_variant: z.ZodOptional<z.ZodString>;
+            information_action: z.ZodOptional<z.ZodString>;
+            information_name: z.ZodOptional<z.ZodString>;
+            information_ui_type: z.ZodOptional<z.ZodString>;
+            information_trigger: z.ZodOptional<z.ZodString>;
+            information_ui_location: z.ZodOptional<z.ZodString>;
+            information_id: z.ZodOptional<z.ZodString>;
+            information_ui_size: z.ZodOptional<z.ZodString>;
+            error_action: z.ZodOptional<z.ZodString>;
+            error_type: z.ZodOptional<z.ZodString>;
+            error_message: z.ZodOptional<z.ZodString>;
+            error_ui_type: z.ZodOptional<z.ZodString>;
+            error_trigger: z.ZodOptional<z.ZodString>;
+            error_trigger_name: z.ZodOptional<z.ZodString>;
+            error_code: z.ZodOptional<z.ZodString>;
+            error_details: z.ZodOptional<z.ZodString>;
+            error_location: z.ZodOptional<z.ZodString>;
+        }, z.core.$loose>>;
+        component: z.ZodLiteral<"Radio">;
+        value: z.ZodString;
+        label: z.ZodString;
+        onUpdate: z.ZodOptional<z.ZodNever>;
+    }, z.core.$loose>>;
+    checkedValue: z.ZodOptional<z.ZodString>;
+    orientation: z.ZodOptional<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    legend: z.ZodOptional<z.ZodObject<{
+        contents: z.ZodArray<z.ZodUnknown>;
+    }, z.core.$loose>>;
+    errorMessage: z.ZodOptional<z.ZodString>;
+    helperText: z.ZodOptional<z.ZodString>;
+    disabled: z.ZodOptional<z.ZodBoolean>;
+    status: z.ZodOptional<z.ZodEnum<{
+        error: "error";
+        success: "success";
+    }>>;
+    onUpdate: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateRadioGroupProps: (props: unknown) => ValidationResult<RadioGroupCmsProps>;
+export declare const isRadioGroupProps: (props: unknown) => props is RadioGroupCmsProps;

package/dist/components/RadioGroup/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Rating/assets/StarSVG.d.ts

@@ -0,0 +1,2 @@
+declare const StarSvg: () => import("react/jsx-runtime").JSX.Element;
+export default StarSvg;

package/dist/components/Rating/componentName.d.ts

@@ -0,0 +1 @@
+export declare const ratingComponentName: "Rating";

package/dist/components/Rating/components/Star/index.d.ts

@@ -0,0 +1,2 @@
+declare const Star: () => import("react/jsx-runtime").JSX.Element;
+export default Star;

package/dist/components/Rating/components/Star/styled.d.ts

@@ -0,0 +1,2 @@
+import { SVGAttributes } from 'react';
+export declare const StarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, keyof SVGAttributes<SVGElement>> & SVGAttributes<SVGElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, keyof SVGAttributes<SVGElement>> & SVGAttributes<SVGElement>, never>>> & string;

package/dist/components/Rating/index.d.ts

@@ -0,0 +1,5 @@
+import { RatingProps } from './props';
+declare const Rating: ({ value, onUpdate, className, groupName, legend, uid, component: _component, ...props }: RatingProps) => import("react/jsx-runtime").JSX.Element;
+export default Rating;
+export * from './props';
+export * from './styled';

package/dist/components/Rating/index.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import Fieldset from "../Fieldset/index.js";
+import styled from "styled-components";
+import { v as viewport } from "../../index-CG4uiVbZ.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+import { s as screenreaderOnly } from "../../index-p6eyyJpy.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { a as colorBackgroundNeutral } from "../../BackgroundColor-Ba4D10TC.js";
+import { i as colorBorderSelected, a as colorBorderNeutral, b as colorBorderUnselected, c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { f as colorObjectSelected } from "../../ObjectColor-CSHEae46.js";
+import { a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
+const StarSvg = () => {
+  return /* @__PURE__ */ jsx(StarSvgStyled, { viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1 9.95223L9.26911 8.58599L12.8296 1L16.6847 8.44108L25 9.48408L19.1147 15.449L20.6911 23.6799L13.199 19.9252L5.85987 23.9682L7.11465 15.6831L1 9.95223Z", fill: "white", stroke: "#7E7E7E", strokeLinecap: "round", strokeLinejoin: "round" }) });
+};
+const StarSvgStyled = styled.svg.withConfig({
+  shouldForwardProp,
+  displayName: "StarSvgStyled",
+  componentId: "sc-mqpq7y-0"
+})({
+  display: "inline-block",
+  width: "24px",
+  height: "22.968px",
+  ...viewport.md({
+    width: "32px",
+    height: "30.624px"
+  })
+});
+const getSvgPathStyles = (props) => ({
+  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : getBackgroundColor(colorBackgroundNeutral),
+  strokeWidth: "1px",
+  stroke: props.selected ? getBorderColor(colorBorderSelected) : props.isInHoverRange ? getBorderColor(colorBorderNeutral) : getBorderColor(colorBorderUnselected)
+});
+const getHoverSvgPathStyles = (props) => ({
+  fill: props.selected ? getHoverColor(colorObjectSelected) : getHoverColor(colorBackgroundNeutral),
+  strokeWidth: "1px",
+  stroke: props.selected ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderNeutral)
+});
+const StarsWrapperStyled = styled.div.withConfig({
+  displayName: "StarsWrapperStyled",
+  componentId: "sc-1h7pfev-0"
+})({
+  display: "flex",
+  gap: getSpacing(spacingXs)
+});
+const StarLabelStyled = styled.label.withConfig({
+  shouldForwardProp,
+  displayName: "StarLabelStyled",
+  componentId: "sc-1h7pfev-1"
+})(({
+  selected,
+  isInHoverRange
+}) => {
+  const normalStyles = getSvgPathStyles({
+    selected,
+    isInHoverRange
+  });
+  const hoverStyles = getHoverSvgPathStyles({
+    selected
+  });
+  return {
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    svg: {
+      path: {
+        ...normalStyles,
+        transition: "fill 200ms, stroke 200ms"
+      }
+    },
+    "&:hover svg path": {
+      ...hoverStyles,
+      transition: "fill 200ms, stroke 200ms"
+    },
+    // Apply focus-visible styles on label when input is focused
+    "&:has(:focus-visible)": {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      outlineOffset: "2px"
+    }
+  };
+});
+const HiddenRadioStyled = styled.input.withConfig({
+  displayName: "HiddenRadioStyled",
+  componentId: "sc-1h7pfev-2"
+})(screenreaderOnly);
+const Rating = ({
+  value,
+  onUpdate,
+  className,
+  groupName,
+  legend,
+  uid,
+  component: _component,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(value ?? 0);
+  const [hoverValue, setHoverValue] = useState(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const handleChange = (event) => {
+    const newValue = Number(event.target.value);
+    setInternalValue(newValue);
+    if (onUpdate) {
+      onUpdate(newValue);
+    }
+  };
+  const handleMouseEnter = (index) => {
+    setHoverValue(index + 1);
+  };
+  const handleMouseLeave = () => {
+    setHoverValue(null);
+  };
+  const handleClick = (starValue) => {
+    if (starValue === internalValue) {
+      setInternalValue(0);
+      if (onUpdate) {
+        onUpdate(0);
+      }
+    }
+  };
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, uid, ref, legend, children: /* @__PURE__ */ jsx(StarsWrapperStyled, { className, role: "radiogroup", children: [...Array(5)].map((_, index) => {
+    const starValue = index + 1;
+    const isInHoverRange = hoverValue !== null && starValue <= hoverValue;
+    return /* @__PURE__ */ jsxs(StarLabelStyled, { selected: starValue <= internalValue, isInHoverRange, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, children: [
+      /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue), "aria-label": `${starValue} von 5 Sternen` }),
+      /* @__PURE__ */ jsx(StarSvg, {})
+    ] }, `star-${starValue}-${uid}`);
+  }) }) });
+};
+export {
+  HiddenRadioStyled,
+  StarLabelStyled,
+  StarsWrapperStyled,
+  Rating as default
+};

package/dist/components/Rating/props.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { FieldsetSharedProps } from '../Fieldset';
+import { ratingComponentName } from './componentName';
+/**
+ * Props for the Rating component
+ */
+export interface RatingProps extends Omit<FieldsetSharedProps, 'errorMessage' | 'status' | 'helperText'>, Omit<HTMLAttributes<HTMLFieldSetElement>, 'children'> {
+    /**
+     * A unique id is mandatory
+     */
+    uid: string;
+    /**
+     * The current rating value (number of stars selected)
+     */
+    value?: number;
+    /**
+     * Callback fired when the rating value changes
+     */
+    onUpdate?: (value: number) => void;
+    /**
+     * Optional group name to identify the rating group for accessibility
+     *
+     * @deprecated Use `uid` directly as the radio group name. Will be removed in next major.
+     */
+    groupName?: string;
+    /**
+     * Pin component's name
+     */
+    component?: typeof ratingComponentName;
+}

package/dist/components/Rating/styled.d.ts

@@ -0,0 +1,9 @@
+export declare const StarsWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StarLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "selected" | "isInHoverRange"> & {
+    selected: boolean;
+    isInHoverRange?: boolean;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "selected" | "isInHoverRange"> & {
+    selected: boolean;
+    isInHoverRange?: boolean;
+}, never>>> & string;
+export declare const HiddenRadioStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;