@vodafone_de/brix-components 7.0.7 → 7.0.8

package/dist/components/Rating/index.js

@@ -1,153 +0,0 @@
-"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 { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.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 { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
-import { c as colorBorderFocus, i as colorBorderSelected, a as colorBorderNeutral, b as colorBorderUnselected } from "../../BorderColor-BummoQ1-.js";
-import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
-import { b as colorObjectSelected } from "../../ObjectColor-BZDBuV8H.js";
-import { a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
-const StarSVGBase = (props) => {
-  const viewport = useViewport();
-  let width = 32;
-  let height = 30.624;
-  if (viewport === viewportSm) {
-    width = 24;
-    height = 22.968;
-  }
-  return /* @__PURE__ */ jsx("svg", { style: {
-    display: "inline-block"
-  }, width, height, viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, 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 StarSVG = styled(StarSVGBase).withConfig({
-  displayName: "StarSVG",
-  componentId: "sc-iheyat-0"
-})([""]);
-const getSvgPathStyles = (props) => ({
-  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
-  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-1nbg0l6-0"
-})({
-  display: "flex",
-  gap: getSpacing(spacingXs)
-});
-const StarLabelStyled = styled.label.withConfig({
-  displayName: "StarLabelStyled",
-  componentId: "sc-1nbg0l6-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-1nbg0l6-2"
-})({
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  whiteSpace: "nowrap",
-  width: "1px"
-});
-const Rating = ({
-  value,
-  onUpdate,
-  className,
-  groupName,
-  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, 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, htmlFor: `${uid}-star-${starValue}`, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, "aria-label": `${starValue} von 5 Sternen`, children: [
-      /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", id: `${uid}-star-${starValue}`, name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue) }),
-      /* @__PURE__ */ jsx(StarSVG, {})
-    ] }, `star-${starValue}-${uid}`);
-  }) }) });
-};
-export {
-  HiddenRadioStyled,
-  StarLabelStyled,
-  StarsWrapperStyled,
-  Rating as default
-};

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

@@ -1,22 +0,0 @@
-import { FieldsetSharedProps } from '../Fieldset';
-/**
- * Props for the Rating component
- */
-export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled' | 'helperText'> {
-    /**
-     * 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
-     */
-    groupName?: string;
-    /**
-     * Pin component's name from string to the concrete name
-     */
-    component?: 'Rating';
-}

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

@@ -1,6 +0,0 @@
-export declare const StarsWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StarLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-    selected: boolean;
-    isInHoverRange?: boolean;
-}>> & 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>> & string;

package/dist/index-Cs0Hw0dj.js

@@ -1,25 +0,0 @@
-import { useState, useEffect } from "react";
-import { l as largeMediaQuery, m as mediumMediaQuery } from "./index-Ck2bCrhT.js";
-import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
-const viewportSm = "sm";
-const viewportMd = "md";
-const viewportLg = "lg";
-const useViewport = () => {
-  const tablet = useMediaQuery(mediumMediaQuery);
-  const desktop = useMediaQuery(largeMediaQuery);
-  const [viewportState, setViewportState] = useState(viewportSm);
-  useEffect(() => {
-    if (desktop) {
-      setViewportState(viewportLg);
-    } else if (tablet) {
-      setViewportState(viewportMd);
-    } else {
-      setViewportState(viewportSm);
-    }
-  }, [tablet, desktop]);
-  return viewportState;
-};
-export {
-  useViewport as u,
-  viewportSm as v
-};