UNPKG

@yamada-ui/react

Version:

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

1 lines 4.66 kB
{"version":3,"file":"circle-progress.cjs","names":["createSlotComponent","circleProgressStyle","useProgress","styled","mergeCSS","varAttr"],"sources":["../../../../src/components/circle-progress/circle-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseProgressProps } from \"../progress\"\nimport type { CircleProgressStyle } from \"./circle-progress.style\"\nimport { createSlotComponent, mergeCSS, styled, varAttr } from \"../../core\"\nimport { isNumber } from \"../../utils\"\nimport { useProgress } from \"../progress\"\nimport { circleProgressStyle } from \"./circle-progress.style\"\n\nexport interface CircleProgressRootProps\n extends HTMLStyledProps,\n UseProgressProps,\n ThemeProps<CircleProgressStyle> {\n /**\n * The animation duration in seconds.\n */\n duration?: number | string\n /**\n * The color of the progress range.\n */\n rangeColor?: CSSProps[\"color\"]\n /**\n * The thickness of the progress bar.\n */\n thickness?: CSSProps[\"width\"]\n /**\n * The color of the progress track.\n */\n trackColor?: CSSProps[\"color\"]\n /**\n * Props for the progress circle element.\n */\n circleProps?: CircleProgressCircleProps\n /**\n * Props for the progress range element.\n */\n rangeProps?: CircleProgressRangeProps\n /**\n * Props for the progress track element.\n */\n trackProps?: CircleProgressTrackProps\n}\n\nconst {\n PropsContext: CircleProgressPropsContext,\n usePropsContext: useCircleProgressPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<CircleProgressRootProps, CircleProgressStyle>(\n \"circle-progress\",\n circleProgressStyle,\n)\n\nexport { CircleProgressPropsContext, useCircleProgressPropsContext }\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see https://yamada-ui.com/docs/components/circle-progress\n */\nexport const CircleProgressRoot = withProvider<\"div\", CircleProgressRootProps>(\n ({\n css,\n children,\n max,\n min,\n rangeColor,\n trackColor,\n value,\n circleProps,\n rangeProps,\n trackProps,\n ...rest\n }) => {\n const { percent, getRangeProps, getRootProps, getTrackProps } =\n useProgress<\"svg\">({ max, min, value })\n\n return (\n <styled.div css={mergeCSS(css, { \"--percent\": percent })} {...rest}>\n <CircleProgressCircle {...getRootProps(circleProps)}>\n <CircleProgressTrack\n stroke={trackColor}\n {...getTrackProps(trackProps)}\n />\n <CircleProgressRange\n stroke={rangeColor}\n {...getRangeProps(rangeProps)}\n />\n </CircleProgressCircle>\n\n {children}\n </styled.div>\n )\n },\n \"root\",\n)(({ boxSize, duration, thickness, ...rest }) => ({\n \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n \"--size\": varAttr(boxSize, \"sizes\"),\n \"--thickness\": varAttr(thickness, \"sizes\"),\n ...rest,\n}))\n\ninterface CircleProgressCircleProps extends HTMLStyledProps<\"svg\"> {}\n\nconst CircleProgressCircle = withContext<\"svg\", CircleProgressCircleProps>(\n \"svg\",\n \"circle\",\n)()\n\ninterface CircleProgressTrackProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressTrack = withContext<\"circle\", CircleProgressTrackProps>(\n \"circle\",\n \"track\",\n)()\n\ninterface CircleProgressRangeProps extends HTMLStyledProps<\"circle\"> {}\n\nconst CircleProgressRange = withContext<\"circle\", CircleProgressRangeProps>(\n \"circle\",\n \"range\",\n)()\n\nexport interface CircleProgressLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const CircleProgressLabel = withContext<\n \"span\",\n CircleProgressLabelProps\n>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,aACA,iBACEA,6CACF,mBACAC,kDACD;;;;;;AASD,MAAa,qBAAqB,cAC/B,EACC,KACA,UACA,KACA,KACA,YACA,YACA,OACA,aACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,SAAS,eAAe,cAAc,kBAC5CC,iCAAmB;EAAE;EAAK;EAAK;EAAO,CAAC;AAEzC,QACE,4CAACC,uBAAO;EAAI,KAAKC,2BAAS,KAAK,EAAE,aAAa,SAAS,CAAC;EAAE,GAAI;aAC5D,4CAAC;GAAqB,GAAI,aAAa,YAAY;cACjD,2CAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B,EACF,2CAAC;IACC,QAAQ;IACR,GAAI,cAAc,WAAW;KAC7B;IACmB,EAEtB;GACU;GAGjB,OACD,EAAE,EAAE,SAAS,UAAU,UAAW,GAAG,YAAY;CAChD,8DAAuB,SAAS,GAAG,GAAG,SAAS,KAAK;CACpD,UAAUC,oBAAQ,SAAS,QAAQ;CACnC,eAAeA,oBAAQ,WAAW,QAAQ;CAC1C,GAAG;CACJ,EAAE;AAIH,MAAM,uBAAuB,YAC3B,OACA,SACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAM,sBAAsB,YAC1B,UACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YAGjC,QAAQ,QAAQ,EAAE"}