{"version":3,"file":"SemiCircleProgress.mjs","sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@raikou/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n RaikouColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n SemiCircleProgressFilledSegmentStyle,\n SemiCircleProgressLabelStyle,\n SemiCircleProgressRootStyle,\n SemiCircleProgressSvgStyle,\n} from './SemiCircleProgress.css';\n\nexport type SemiCircleProgressStylesNames =\n | 'root'\n | 'svg'\n | 'emptySegment'\n | 'filledSegment'\n | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n root:\n | '--scp-filled-segment-color'\n | '--scp-empty-segment-color'\n | '--scp-rotation'\n | '--scp-transition-duration'\n | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n extends BoxProps,\n StylesApiProps,\n ElementProps<'div'> {\n /** Progress value from `0` to `100` */\n value: number;\n\n /** Diameter of the svg in px, `200` by default */\n size?: number;\n\n /** Circle thickness in px, `12` by default */\n thickness?: number;\n\n /** Orientation of the circle, `'up'` by default */\n orientation?: 'up' | 'down';\n\n /** Direction from which the circle is filled, `'left-to-right'` by default */\n fillDirection?: 'right-to-left' | 'left-to-right';\n\n /** Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default */\n filledSegmentColor?: RaikouColor;\n\n /** Key of `theme.colors` or any valid CSS color value, by default the value is determined based on the color scheme value */\n emptySegmentColor?: RaikouColor;\n\n /** Transition duration of filled section styles changes in ms, `0` by default */\n transitionDuration?: number;\n\n /** Label rendered inside the circle */\n label?: React.ReactNode;\n\n /** Label position relative to the circle center, `'bottom'` by default */\n labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n props: SemiCircleProgressProps;\n ref: HTMLDivElement;\n stylesNames: SemiCircleProgressStylesNames;\n vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps: Partial = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n};\n\nfunction getRotation({\n orientation,\n fillDirection,\n}: Pick) {\n if (orientation === 'down') {\n if (fillDirection === 'right-to-left') {\n return 'rotate(180deg) rotateY(180deg)';\n }\n return 'rotate(180deg)';\n }\n if (fillDirection === 'left-to-right') {\n return 'rotateY(180deg)';\n }\n\n return undefined;\n}\n\nconst varsResolver = createVarsResolver(\n (\n theme,\n {\n filledSegmentColor,\n emptySegmentColor,\n orientation,\n fillDirection,\n transitionDuration,\n thickness,\n }\n ) => ({\n root: {\n '--scp-filled-segment-color': filledSegmentColor\n ? getThemeColor(filledSegmentColor, theme)\n : undefined,\n '--scp-empty-segment-color': emptySegmentColor\n ? getThemeColor(emptySegmentColor, theme)\n : undefined,\n '--scp-rotation': getRotation({ orientation, fillDirection }),\n '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n '--scp-thickness': rem(thickness),\n },\n })\n);\n\nexport const SemiCircleProgress = factory((_props, ref) => {\n const props = useProps('SemiCircleProgress', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n thickness,\n value,\n orientation,\n fillDirection,\n filledSegmentColor,\n emptySegmentColor,\n transitionDuration,\n label,\n labelPosition,\n ...others\n } = props;\n\n const getStyles = useStyles({\n name: 'SemiCircleProgress',\n classes: {\n root: SemiCircleProgressRootStyle,\n svg: SemiCircleProgressSvgStyle,\n filledSegment: SemiCircleProgressFilledSegmentStyle,\n label: SemiCircleProgressLabelStyle,\n },\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n const coordinateForCircle = size! / 2;\n const radius = (size! - 2 * thickness!) / 2;\n const circumference = Math.PI * radius;\n const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n return (\n \n {label && (\n

\n {label}\n

\n )}\n\n \n \n\n \n \n \n );\n});\n\nSemiCircleProgress.displayName = '@raikou/core/SemiCircleProgress';\n"],"names":[],"mappings":"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"}