@yamada-ui/progress 2.0.0-next-20241005223501 → 2.0.0-next-20241005235555
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-ALBGJOCS.mjs → chunk-Y2GYTIRP.mjs} +3 -6
- package/dist/chunk-Y2GYTIRP.mjs.map +1 -0
- package/dist/circle-progress.d.mts +1 -8
- package/dist/circle-progress.d.ts +1 -8
- package/dist/circle-progress.js +2 -5
- package/dist/circle-progress.js.map +1 -1
- package/dist/circle-progress.mjs +1 -1
- package/dist/index.js +2 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunk-ALBGJOCS.mjs.map +0 -1
@@ -12,14 +12,11 @@ import { cx, valueToPercent } from "@yamada-ui/utils";
|
|
12
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
13
13
|
var CircleProgress = forwardRef(
|
14
14
|
(props, ref) => {
|
15
|
-
const [styles,
|
16
|
-
"CircleProgress",
|
17
|
-
props
|
18
|
-
);
|
15
|
+
const [styles, mergedProps] = useComponentStyle("CircleProgress", props);
|
19
16
|
let {
|
20
17
|
className,
|
21
18
|
children,
|
22
|
-
boxSize =
|
19
|
+
boxSize = "6rem",
|
23
20
|
thickness = "0.625rem",
|
24
21
|
color = "primary",
|
25
22
|
trackColor = "border",
|
@@ -143,4 +140,4 @@ export {
|
|
143
140
|
CircleProgress,
|
144
141
|
CircleProgressLabel
|
145
142
|
};
|
146
|
-
//# sourceMappingURL=chunk-
|
143
|
+
//# sourceMappingURL=chunk-Y2GYTIRP.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [string | number, string | number]\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n ThemeProps<\"CircleProgress\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"CircleProgress\", props)\n let {\n className,\n children,\n boxSize = \"6rem\",\n thickness = \"0.625rem\",\n color = \"primary\",\n trackColor = \"border\",\n value = 0,\n min = 0,\n max = 100,\n isAnimation = false,\n isRounded,\n speed = [\"1.4s\", \"2s\"],\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n fontSize: \"$boxSize\",\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDashoffset: 66,\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionDuration: \"0.6s\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n stroke={color}\n strokeWidth=\"$thickness\"\n strokeLinecap={isRounded ? \"round\" : undefined}\n opacity={isTransparent ? 0 : undefined}\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} r={42} fill=\"transparent\" {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n display: \"block\",\n boxSize,\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n fontSize: \"0.25em\",\n textAlign: \"center\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
|
@@ -2,13 +2,6 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
2
|
import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
|
3
3
|
|
4
4
|
interface CircleProgressOptions {
|
5
|
-
/**
|
6
|
-
* The CSS `box-size` property.
|
7
|
-
*
|
8
|
-
* @default '6rem'
|
9
|
-
* @deprecated Use `boxSize` instead.
|
10
|
-
*/
|
11
|
-
size?: CSSUIProps["boxSize"];
|
12
5
|
/**
|
13
6
|
* The CSS `width` property.
|
14
7
|
*
|
@@ -64,7 +57,7 @@ interface CircleProgressOptions {
|
|
64
57
|
*/
|
65
58
|
speed?: [string | number, string | number];
|
66
59
|
}
|
67
|
-
interface CircleProgressProps extends Omit<HTMLUIProps, "color">,
|
60
|
+
interface CircleProgressProps extends Omit<HTMLUIProps, "color">, ThemeProps<"CircleProgress">, CircleProgressOptions {
|
68
61
|
}
|
69
62
|
/**
|
70
63
|
* `CircleProgress` is a component that displays progress in a circular progress bar.
|
@@ -2,13 +2,6 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
2
2
|
import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
|
3
3
|
|
4
4
|
interface CircleProgressOptions {
|
5
|
-
/**
|
6
|
-
* The CSS `box-size` property.
|
7
|
-
*
|
8
|
-
* @default '6rem'
|
9
|
-
* @deprecated Use `boxSize` instead.
|
10
|
-
*/
|
11
|
-
size?: CSSUIProps["boxSize"];
|
12
5
|
/**
|
13
6
|
* The CSS `width` property.
|
14
7
|
*
|
@@ -64,7 +57,7 @@ interface CircleProgressOptions {
|
|
64
57
|
*/
|
65
58
|
speed?: [string | number, string | number];
|
66
59
|
}
|
67
|
-
interface CircleProgressProps extends Omit<HTMLUIProps, "color">,
|
60
|
+
interface CircleProgressProps extends Omit<HTMLUIProps, "color">, ThemeProps<"CircleProgress">, CircleProgressOptions {
|
68
61
|
}
|
69
62
|
/**
|
70
63
|
* `CircleProgress` is a component that displays progress in a circular progress bar.
|
package/dist/circle-progress.js
CHANGED
@@ -31,14 +31,11 @@ var import_utils = require("@yamada-ui/utils");
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
32
32
|
var CircleProgress = (0, import_core.forwardRef)(
|
33
33
|
(props, ref) => {
|
34
|
-
const [styles,
|
35
|
-
"CircleProgress",
|
36
|
-
props
|
37
|
-
);
|
34
|
+
const [styles, mergedProps] = (0, import_core.useComponentStyle)("CircleProgress", props);
|
38
35
|
let {
|
39
36
|
className,
|
40
37
|
children,
|
41
|
-
boxSize =
|
38
|
+
boxSize = "6rem",
|
42
39
|
thickness = "0.625rem",
|
43
40
|
color = "primary",
|
44
41
|
trackColor = "border",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `
|
1
|
+
{"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [string | number, string | number]\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n ThemeProps<\"CircleProgress\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"CircleProgress\", props)\n let {\n className,\n children,\n boxSize = \"6rem\",\n thickness = \"0.625rem\",\n color = \"primary\",\n trackColor = \"border\",\n value = 0,\n min = 0,\n max = 100,\n isAnimation = false,\n isRounded,\n speed = [\"1.4s\", \"2s\"],\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n fontSize: \"$boxSize\",\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDashoffset: 66,\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionDuration: \"0.6s\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n stroke={color}\n strokeWidth=\"$thickness\"\n strokeLinecap={isRounded ? \"round\" : undefined}\n opacity={isTransparent ? 0 : undefined}\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} r={42} fill=\"transparent\" {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n display: \"block\",\n boxSize,\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n fontSize: \"0.25em\",\n textAlign: \"center\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
|
package/dist/circle-progress.mjs
CHANGED
package/dist/index.js
CHANGED
@@ -144,14 +144,11 @@ var import_utils2 = require("@yamada-ui/utils");
|
|
144
144
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
145
145
|
var CircleProgress = (0, import_core2.forwardRef)(
|
146
146
|
(props, ref) => {
|
147
|
-
const [styles,
|
148
|
-
"CircleProgress",
|
149
|
-
props
|
150
|
-
);
|
147
|
+
const [styles, mergedProps] = (0, import_core2.useComponentStyle)("CircleProgress", props);
|
151
148
|
let {
|
152
149
|
className,
|
153
150
|
children,
|
154
|
-
boxSize =
|
151
|
+
boxSize = "6rem",
|
155
152
|
thickness = "0.625rem",
|
156
153
|
color = "primary",
|
157
154
|
trackColor = "border",
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/progress.tsx","../src/circle-progress.tsx"],"sourcesContent":["export { Progress } from \"./progress\"\nexport type { ProgressProps } from \"./progress\"\nexport { CircleProgress, CircleProgressLabel } from \"./circle-progress\"\nexport type { CircleProgressProps } from \"./circle-progress\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Interpolation,\n ColorModeToken,\n CSS,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { createContext, cx, valueToPercent } from \"@yamada-ui/utils\"\n\nconst [ProgressProvider, useProgress] = createContext<{\n [key: string]: CSSUIObject\n}>({\n name: `ProgressStylesContext`,\n errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in \"<Progress />\" `,\n})\n\ninterface ProgressOptions {\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n hasStripe?: boolean\n /**\n * If `true`, and hasStripe is `true`, the stripes will be animated.\n *\n * @default false\n */\n isStripeAnimation?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '1.4s'\n */\n speed?: string | number\n /**\n * The CSS `color` property.\n */\n filledTrackColor?: ColorModeToken<CSS.Property.Color, \"colors\">\n}\n\nexport interface ProgressProps\n extends HTMLUIProps,\n ThemeProps<\"Progress\">,\n ProgressOptions {}\n\n/**\n * `Progress` is a component for visually indicating progress.\n *\n * @see Docs https://yamada-ui.com/components/feedback/progress\n */\nexport const Progress = forwardRef<ProgressProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Progress\", props)\n const {\n className,\n children,\n value,\n min,\n max,\n hasStripe,\n isStripeAnimation,\n isAnimation,\n speed,\n borderRadius: _borderRadius,\n rounded,\n ...rest\n } = omitThemeProps(mergedProps, [\"filledTrackColor\"])\n\n const borderRadius =\n _borderRadius ?? rounded ?? (styles.track?.borderRadius as string | number)\n\n const css: CSSUIObject = {\n ...styles.track,\n }\n\n return (\n <ProgressProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-progress\", className)}\n __css={css}\n borderRadius={borderRadius}\n {...rest}\n >\n <ProgressFilledTrack\n min={min}\n max={max}\n value={value}\n hasStripe={hasStripe}\n isStripeAnimation={isStripeAnimation}\n isAnimation={isAnimation}\n speed={speed}\n borderRadius={borderRadius}\n />\n {children}\n </ui.div>\n </ProgressProvider>\n )\n})\n\nProgress.displayName = \"Progress\"\nProgress.__ui__ = \"Progress\"\n\ninterface ProgressFilledTrackProps extends HTMLUIProps, ProgressProps {}\n\nconst ProgressFilledTrack: FC<ProgressFilledTrackProps> = ({\n value = 0,\n min = 0,\n max = 100,\n hasStripe,\n isStripeAnimation,\n isAnimation,\n speed = \"1.4s\",\n ...rest\n}) => {\n const percent = valueToPercent(value, min, max)\n\n const styles = useProgress()\n\n const stripeAnimation = useAnimation({\n keyframes: {\n \"0%\": { bgPosition: \"1rem 0\" },\n \"100%\": { bgPosition: \"0 0\" },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const interpolationAnimation = useAnimation({\n keyframes: {\n \"0%\": { left: \"-40%\" },\n \"100%\": { left: \"100%\" },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n timingFunction: \"ease\",\n })\n\n isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation\n\n const css: Interpolation<{}> = {\n ...(isStripeAnimation\n ? {\n animation: stripeAnimation,\n }\n : {}),\n ...(isAnimation\n ? {\n position: \"absolute\",\n willChange: \"left\",\n minWidth: \"50%\",\n animation: interpolationAnimation,\n }\n : {}),\n }\n\n const __css: CSSUIObject = {\n w: `${percent}%`,\n ...styles.filledTrack,\n }\n\n return <ui.div css={css} __css={__css} {...rest} />\n}\n\nProgressFilledTrack.displayName = \"ProgressFilledTrack\"\nProgressFilledTrack.__ui__ = \"ProgressFilledTrack\"\n","import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `box-size` property.\n *\n * @default '6rem'\n * @deprecated Use `boxSize` instead.\n */\n size?: CSSUIProps[\"boxSize\"]\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [string | number, string | number]\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n Omit<ThemeProps<\"CircleProgress\">, \"size\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, { size = \"6rem\", ...mergedProps }] = useComponentStyle(\n \"CircleProgress\",\n props,\n )\n let {\n className,\n children,\n boxSize = size,\n thickness = \"0.625rem\",\n color = \"primary\",\n trackColor = \"border\",\n value = 0,\n min = 0,\n max = 100,\n isAnimation = false,\n isRounded,\n speed = [\"1.4s\", \"2s\"],\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n fontSize: \"$boxSize\",\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDashoffset: 66,\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionDuration: \"0.6s\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n stroke={color}\n strokeWidth=\"$thickness\"\n strokeLinecap={isRounded ? \"round\" : undefined}\n opacity={isTransparent ? 0 : undefined}\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} r={42} fill=\"transparent\" {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n display: \"block\",\n boxSize,\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n fontSize: \"0.25em\",\n textAlign: \"center\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":["import_core","import_use_animation","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/progress.tsx","../src/circle-progress.tsx"],"sourcesContent":["export { Progress } from \"./progress\"\nexport type { ProgressProps } from \"./progress\"\nexport { CircleProgress, CircleProgressLabel } from \"./circle-progress\"\nexport type { CircleProgressProps } from \"./circle-progress\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n Interpolation,\n ColorModeToken,\n CSS,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { createContext, cx, valueToPercent } from \"@yamada-ui/utils\"\n\nconst [ProgressProvider, useProgress] = createContext<{\n [key: string]: CSSUIObject\n}>({\n name: `ProgressStylesContext`,\n errorMessage: `useProgress returned is 'undefined'. Seems you forgot to wrap the components in \"<Progress />\" `,\n})\n\ninterface ProgressOptions {\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n hasStripe?: boolean\n /**\n * If `true`, and hasStripe is `true`, the stripes will be animated.\n *\n * @default false\n */\n isStripeAnimation?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '1.4s'\n */\n speed?: string | number\n /**\n * The CSS `color` property.\n */\n filledTrackColor?: ColorModeToken<CSS.Property.Color, \"colors\">\n}\n\nexport interface ProgressProps\n extends HTMLUIProps,\n ThemeProps<\"Progress\">,\n ProgressOptions {}\n\n/**\n * `Progress` is a component for visually indicating progress.\n *\n * @see Docs https://yamada-ui.com/components/feedback/progress\n */\nexport const Progress = forwardRef<ProgressProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Progress\", props)\n const {\n className,\n children,\n value,\n min,\n max,\n hasStripe,\n isStripeAnimation,\n isAnimation,\n speed,\n borderRadius: _borderRadius,\n rounded,\n ...rest\n } = omitThemeProps(mergedProps, [\"filledTrackColor\"])\n\n const borderRadius =\n _borderRadius ?? rounded ?? (styles.track?.borderRadius as string | number)\n\n const css: CSSUIObject = {\n ...styles.track,\n }\n\n return (\n <ProgressProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-progress\", className)}\n __css={css}\n borderRadius={borderRadius}\n {...rest}\n >\n <ProgressFilledTrack\n min={min}\n max={max}\n value={value}\n hasStripe={hasStripe}\n isStripeAnimation={isStripeAnimation}\n isAnimation={isAnimation}\n speed={speed}\n borderRadius={borderRadius}\n />\n {children}\n </ui.div>\n </ProgressProvider>\n )\n})\n\nProgress.displayName = \"Progress\"\nProgress.__ui__ = \"Progress\"\n\ninterface ProgressFilledTrackProps extends HTMLUIProps, ProgressProps {}\n\nconst ProgressFilledTrack: FC<ProgressFilledTrackProps> = ({\n value = 0,\n min = 0,\n max = 100,\n hasStripe,\n isStripeAnimation,\n isAnimation,\n speed = \"1.4s\",\n ...rest\n}) => {\n const percent = valueToPercent(value, min, max)\n\n const styles = useProgress()\n\n const stripeAnimation = useAnimation({\n keyframes: {\n \"0%\": { bgPosition: \"1rem 0\" },\n \"100%\": { bgPosition: \"0 0\" },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const interpolationAnimation = useAnimation({\n keyframes: {\n \"0%\": { left: \"-40%\" },\n \"100%\": { left: \"100%\" },\n },\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n timingFunction: \"ease\",\n })\n\n isStripeAnimation = !isAnimation && hasStripe && isStripeAnimation\n\n const css: Interpolation<{}> = {\n ...(isStripeAnimation\n ? {\n animation: stripeAnimation,\n }\n : {}),\n ...(isAnimation\n ? {\n position: \"absolute\",\n willChange: \"left\",\n minWidth: \"50%\",\n animation: interpolationAnimation,\n }\n : {}),\n }\n\n const __css: CSSUIObject = {\n w: `${percent}%`,\n ...styles.filledTrack,\n }\n\n return <ui.div css={css} __css={__css} {...rest} />\n}\n\nProgressFilledTrack.displayName = \"ProgressFilledTrack\"\nProgressFilledTrack.__ui__ = \"ProgressFilledTrack\"\n","import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [string | number, string | number]\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n ThemeProps<\"CircleProgress\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"CircleProgress\", props)\n let {\n className,\n children,\n boxSize = \"6rem\",\n thickness = \"0.625rem\",\n color = \"primary\",\n trackColor = \"border\",\n value = 0,\n min = 0,\n max = 100,\n isAnimation = false,\n isRounded,\n speed = [\"1.4s\", \"2s\"],\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n fontSize: \"$boxSize\",\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDashoffset: 66,\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionDuration: \"0.6s\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n stroke={color}\n strokeWidth=\"$thickness\"\n strokeLinecap={isRounded ? \"round\" : undefined}\n opacity={isTransparent ? 0 : undefined}\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} r={42} fill=\"transparent\" {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n display: \"block\",\n boxSize,\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n fontSize: \"0.25em\",\n textAlign: \"center\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":["import_core","import_use_animation","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/progress",
|
3
|
-
"version": "2.0.0-next-
|
3
|
+
"version": "2.0.0-next-20241005235555",
|
4
4
|
"description": "Yamada UI progress components",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -36,10 +36,10 @@
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@yamada-ui/core": "1.15.2-next-
|
40
|
-
"@yamada-ui/use-animation": "1.0.39-next-
|
41
|
-
"@yamada-ui/use-token": "1.1.27-next-
|
42
|
-
"@yamada-ui/use-value": "1.1.27-next-
|
39
|
+
"@yamada-ui/core": "1.15.2-next-20241005235555",
|
40
|
+
"@yamada-ui/use-animation": "1.0.39-next-20241005235555",
|
41
|
+
"@yamada-ui/use-token": "1.1.27-next-20241005235555",
|
42
|
+
"@yamada-ui/use-value": "1.1.27-next-20241005235555",
|
43
43
|
"@yamada-ui/utils": "1.5.2"
|
44
44
|
},
|
45
45
|
"devDependencies": {
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n CSSUIObject,\n CSSUIProps,\n ThemeProps,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useAnimation } from \"@yamada-ui/use-animation\"\nimport { cx, valueToPercent } from \"@yamada-ui/utils\"\n\ninterface CircleProgressOptions {\n /**\n * The CSS `box-size` property.\n *\n * @default '6rem'\n * @deprecated Use `boxSize` instead.\n */\n size?: CSSUIProps[\"boxSize\"]\n /**\n * The CSS `width` property.\n *\n * @default '0.625ewm'\n */\n thickness?: CSSUIProps[\"width\"]\n /**\n * The CSS `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * The CSS `color` property.\n *\n * @default 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n */\n isAnimation?: boolean\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [string | number, string | number]\n}\n\nexport interface CircleProgressProps\n extends Omit<HTMLUIProps, \"color\">,\n Omit<ThemeProps<\"CircleProgress\">, \"size\">,\n CircleProgressOptions {}\n\n/**\n * `CircleProgress` is a component that displays progress in a circular progress bar.\n *\n * @see Docs https://yamada-ui.com/components/feedback/circle-progress\n */\nexport const CircleProgress = forwardRef<CircleProgressProps, \"div\">(\n (props, ref) => {\n const [styles, { size = \"6rem\", ...mergedProps }] = useComponentStyle(\n \"CircleProgress\",\n props,\n )\n let {\n className,\n children,\n boxSize = size,\n thickness = \"0.625rem\",\n color = \"primary\",\n trackColor = \"border\",\n value = 0,\n min = 0,\n max = 100,\n isAnimation = false,\n isRounded,\n speed = [\"1.4s\", \"2s\"],\n ...rest\n } = omitThemeProps(mergedProps)\n\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n\n const interval = !isAnimation ? percent * 2.64 : undefined\n\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n strokeDasharray: \"1, 400\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-100\",\n },\n \"100%\": {\n strokeDasharray: \"400, 400\",\n strokeDashoffset: \"-260\",\n },\n },\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n fontSize: \"$boxSize\",\n }\n\n const circleProps: CircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDashoffset: 66,\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionDuration: \"0.6s\",\n transitionTimingFunction: \"ease\",\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...rest}\n >\n <Shape boxSize={boxSize} isAnimation={isAnimation} speed={speed}>\n <Circle stroke={trackColor} strokeWidth=\"$thickness\" />\n <Circle\n stroke={color}\n strokeWidth=\"$thickness\"\n strokeLinecap={isRounded ? \"round\" : undefined}\n opacity={isTransparent ? 0 : undefined}\n {...circleProps}\n />\n </Shape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst Circle: FC<CircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} r={42} fill=\"transparent\" {...rest} />\n)\n\nCircle.displayName = \"Circle\"\nCircle.__ui__ = \"Circle\"\n\ninterface ShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst Shape: FC<ShapeProps> = ({ boxSize, isAnimation, speed, ...rest }) => {\n const animation = useAnimation({\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n display: \"block\",\n boxSize,\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nShape.displayName = \"Shape\"\nShape.__ui__ = \"Shape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n fontSize: \"0.25em\",\n textAlign: \"center\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
|