@yamada-ui/progress 1.2.4-dev-20241214144625 → 1.2.4-dev-20241215203956

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.
@@ -16,14 +16,14 @@ var CircleProgress = forwardRef(
16
16
  "CircleProgress",
17
17
  props
18
18
  );
19
- let {
19
+ const {
20
20
  className,
21
21
  boxSize = size,
22
22
  children,
23
23
  color = "primary",
24
- fullRounded,
25
- isAnimation = false,
26
24
  isRounded,
25
+ fullRounded = isRounded,
26
+ isAnimation = false,
27
27
  max = 100,
28
28
  min = 0,
29
29
  speed = ["1.4s", "2s"],
@@ -32,7 +32,6 @@ var CircleProgress = forwardRef(
32
32
  value = 0,
33
33
  ...rest
34
34
  } = omitThemeProps(mergedProps);
35
- fullRounded != null ? fullRounded : fullRounded = isRounded;
36
35
  const isTransparent = value === 0 && !isAnimation;
37
36
  const percent = valueToPercent(value, min, max);
38
37
  const interval = !isAnimation ? percent * 2.64 : void 0;
@@ -165,4 +164,4 @@ export {
165
164
  CircleProgress,
166
165
  CircleProgressLabel
167
166
  };
168
- //# sourceMappingURL=chunk-BXZEJVOS.mjs.map
167
+ //# sourceMappingURL=chunk-QN66U6FL.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 const {\n className,\n boxSize = size,\n children,\n color = \"primary\",\n isRounded,\n fullRounded = isRounded,\n isAnimation = false,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n const interval = !isAnimation ? percent * 2.64 : undefined\n const animation = useAnimation({\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
@@ -35,14 +35,14 @@ var CircleProgress = (0, import_core.forwardRef)(
35
35
  "CircleProgress",
36
36
  props
37
37
  );
38
- let {
38
+ const {
39
39
  className,
40
40
  boxSize = size,
41
41
  children,
42
42
  color = "primary",
43
- fullRounded,
44
- isAnimation = false,
45
43
  isRounded,
44
+ fullRounded = isRounded,
45
+ isAnimation = false,
46
46
  max = 100,
47
47
  min = 0,
48
48
  speed = ["1.4s", "2s"],
@@ -51,7 +51,6 @@ var CircleProgress = (0, import_core.forwardRef)(
51
51
  value = 0,
52
52
  ...rest
53
53
  } = (0, import_core.omitThemeProps)(mergedProps);
54
- fullRounded != null ? fullRounded : fullRounded = isRounded;
55
54
  const isTransparent = value === 0 && !isAnimation;
56
55
  const percent = (0, import_utils.valueToPercent)(value, min, max);
57
56
  const interval = !isAnimation ? percent * 2.64 : void 0;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 boxSize = size,\n children,\n color = \"primary\",\n fullRounded,\n isAnimation = false,\n isRounded,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n\n fullRounded ??= isRounded\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 duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 const {\n className,\n boxSize = size,\n children,\n color = \"primary\",\n isRounded,\n fullRounded = isRounded,\n isAnimation = false,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n const interval = !isAnimation ? percent * 2.64 : undefined\n const animation = useAnimation({\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  CircleProgress,
4
4
  CircleProgressLabel
5
- } from "./chunk-BXZEJVOS.mjs";
5
+ } from "./chunk-QN66U6FL.mjs";
6
6
  export {
7
7
  CircleProgress,
8
8
  CircleProgressLabel
package/dist/index.js CHANGED
@@ -38,14 +38,14 @@ var CircleProgress = (0, import_core.forwardRef)(
38
38
  "CircleProgress",
39
39
  props
40
40
  );
41
- let {
41
+ const {
42
42
  className,
43
43
  boxSize = size,
44
44
  children,
45
45
  color = "primary",
46
- fullRounded,
47
- isAnimation = false,
48
46
  isRounded,
47
+ fullRounded = isRounded,
48
+ isAnimation = false,
49
49
  max = 100,
50
50
  min = 0,
51
51
  speed = ["1.4s", "2s"],
@@ -54,7 +54,6 @@ var CircleProgress = (0, import_core.forwardRef)(
54
54
  value = 0,
55
55
  ...rest
56
56
  } = (0, import_core.omitThemeProps)(mergedProps);
57
- fullRounded != null ? fullRounded : fullRounded = isRounded;
58
57
  const isTransparent = value === 0 && !isAnimation;
59
58
  const percent = (0, import_utils.valueToPercent)(value, min, max);
60
59
  const interval = !isAnimation ? percent * 2.64 : void 0;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/circle-progress.tsx","../src/progress.tsx"],"sourcesContent":["export { CircleProgress, CircleProgressLabel } from \"./circle-progress\"\nexport type { CircleProgressProps } from \"./circle-progress\"\nexport { Progress } from \"./progress\"\nexport type { ProgressProps } from \"./progress\"\n","import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 boxSize = size,\n children,\n color = \"primary\",\n fullRounded,\n isAnimation = false,\n isRounded,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n\n fullRounded ??= isRounded\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 duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n Interpolation,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\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 | undefined\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 CSS `color` property.\n */\n filledTrackColor?: ColorModeToken<CSS.Property.Color, \"colors\">\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n hasStripe?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, and hasStripe is `true`, the stripes will be animated.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isStripeAnimation?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '1.4s'\n */\n speed?: number | string\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\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 borderRadius: _borderRadius,\n children,\n hasStripe,\n isAnimation,\n isStripeAnimation,\n max = 100,\n min = 0,\n rounded,\n speed,\n value,\n ...rest\n } = omitThemeProps(mergedProps, [\"filledTrackColor\"])\n\n const borderRadius =\n _borderRadius ?? rounded ?? (styles.track?.borderRadius as number | string)\n\n const css: CSSUIObject = {\n overflow: \"hidden\",\n pos: \"relative\",\n w: \"100%\",\n ...styles.track,\n }\n\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ProgressProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-progress\", className)}\n borderRadius={borderRadius}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <ProgressFilledTrack\n borderRadius={borderRadius}\n hasStripe={hasStripe}\n isAnimation={isAnimation}\n isStripeAnimation={isStripeAnimation}\n max={max}\n min={min}\n speed={speed}\n value={value}\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 hasStripe,\n isAnimation,\n isStripeAnimation,\n max = 100,\n min = 0,\n speed = \"1.4s\",\n value = 0,\n ...rest\n}) => {\n const percent = valueToPercent(value, min, max)\n\n const styles = useProgress()\n\n const stripeAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { bgPosition: \"1rem 0\" },\n \"100%\": { bgPosition: \"0 0\" },\n },\n timingFunction: \"linear\",\n })\n\n const interpolationAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { left: \"-40%\" },\n \"100%\": { left: \"100%\" },\n },\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 animation: interpolationAnimation,\n minWidth: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n }\n : {}),\n }\n\n const __css: CSSUIObject = {\n h: \"100%\",\n w: `${percent}%`,\n ...styles.filledTrack,\n }\n\n return <ui.div css={css} aria-hidden __css={__css} {...rest} />\n}\n\nProgressFilledTrack.displayName = \"ProgressFilledTrack\"\nProgressFilledTrack.__ui__ = \"ProgressFilledTrack\"\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/circle-progress.tsx","../src/progress.tsx"],"sourcesContent":["export { CircleProgress, CircleProgressLabel } from \"./circle-progress\"\nexport type { CircleProgressProps } from \"./circle-progress\"\nexport { Progress } from \"./progress\"\nexport type { ProgressProps } from \"./progress\"\n","import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 const {\n className,\n boxSize = size,\n children,\n color = \"primary\",\n isRounded,\n fullRounded = isRounded,\n isAnimation = false,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n const isTransparent = value === 0 && !isAnimation\n const percent = valueToPercent(value, min, max)\n const interval = !isAnimation ? percent * 2.64 : undefined\n const animation = useAnimation({\n duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n Interpolation,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\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 | undefined\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 CSS `color` property.\n */\n filledTrackColor?: ColorModeToken<CSS.Property.Color, \"colors\">\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n hasStripe?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, and hasStripe is `true`, the stripes will be animated.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isStripeAnimation?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '1.4s'\n */\n speed?: number | string\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: number\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 borderRadius: _borderRadius,\n children,\n hasStripe,\n isAnimation,\n isStripeAnimation,\n max = 100,\n min = 0,\n rounded,\n speed,\n value,\n ...rest\n } = omitThemeProps(mergedProps, [\"filledTrackColor\"])\n\n const borderRadius =\n _borderRadius ?? rounded ?? (styles.track?.borderRadius as number | string)\n\n const css: CSSUIObject = {\n overflow: \"hidden\",\n pos: \"relative\",\n w: \"100%\",\n ...styles.track,\n }\n\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ProgressProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-progress\", className)}\n borderRadius={borderRadius}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <ProgressFilledTrack\n borderRadius={borderRadius}\n hasStripe={hasStripe}\n isAnimation={isAnimation}\n isStripeAnimation={isStripeAnimation}\n max={max}\n min={min}\n speed={speed}\n value={value}\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 hasStripe,\n isAnimation,\n isStripeAnimation,\n max = 100,\n min = 0,\n speed = \"1.4s\",\n value = 0,\n ...rest\n}) => {\n const percent = valueToPercent(value, min, max)\n\n const styles = useProgress()\n\n const stripeAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { bgPosition: \"1rem 0\" },\n \"100%\": { bgPosition: \"0 0\" },\n },\n timingFunction: \"linear\",\n })\n\n const interpolationAnimation = useAnimation({\n duration: typeof speed === \"string\" ? speed : `${speed}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": { left: \"-40%\" },\n \"100%\": { left: \"100%\" },\n },\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 animation: interpolationAnimation,\n minWidth: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n }\n : {}),\n }\n\n const __css: CSSUIObject = {\n h: \"100%\",\n w: `${percent}%`,\n ...styles.filledTrack,\n }\n\n return <ui.div css={css} aria-hidden __css={__css} {...rest} />\n}\n\nProgressFilledTrack.displayName = \"ProgressFilledTrack\"\nProgressFilledTrack.__ui__ = \"ProgressFilledTrack\"\n"],"mappings":"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","names":["import_core","import_use_animation","import_utils","import_jsx_runtime"]}
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  CircleProgress,
4
4
  CircleProgressLabel
5
- } from "./chunk-BXZEJVOS.mjs";
5
+ } from "./chunk-QN66U6FL.mjs";
6
6
  import {
7
7
  Progress
8
8
  } from "./chunk-LNYVNKOE.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/progress",
3
- "version": "1.2.4-dev-20241214144625",
3
+ "version": "1.2.4-dev-20241215203956",
4
4
  "description": "Yamada UI progress components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,11 +36,11 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.16.2-dev-20241214144625",
40
- "@yamada-ui/use-animation": "1.0.46-dev-20241214144625",
41
- "@yamada-ui/use-token": "1.1.34-dev-20241214144625",
42
- "@yamada-ui/use-value": "1.1.34-dev-20241214144625",
43
- "@yamada-ui/utils": "1.6.2-dev-20241214144625"
39
+ "@yamada-ui/core": "1.16.2-dev-20241215203956",
40
+ "@yamada-ui/use-animation": "1.0.46-dev-20241215203956",
41
+ "@yamada-ui/use-token": "1.1.34-dev-20241215203956",
42
+ "@yamada-ui/use-value": "1.1.34-dev-20241215203956",
43
+ "@yamada-ui/utils": "1.6.2-dev-20241215203956"
44
44
  },
45
45
  "devDependencies": {
46
46
  "clean-package": "2.2.0",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/circle-progress.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n CSSUIProps,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\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 `color` property.\n *\n * @default 'primary'\n */\n color?: CSSUIProps[\"color\"]\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the progress will be indeterminate and the `value` prop will be ignored.\n *\n * @default false\n *\n * @deprecated It will be deprecated in version 2.0.\n */\n isAnimation?: boolean\n /**\n * If `true`, the cap of the progress indicator will be rounded.\n *\n * @default false\n *\n * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The maximum value of the progress.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum value of the progress.\n *\n * @default 0\n */\n min?: number\n /**\n * The animation speed in seconds.\n *\n * @default '[1.4s, 2s]'\n */\n speed?: [number | string, number | string]\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 'border'\n */\n trackColor?: CSSUIProps[\"color\"]\n /**\n * The value of the progress.\n *\n * @default 0\n */\n value?: 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 boxSize = size,\n children,\n color = \"primary\",\n fullRounded,\n isAnimation = false,\n isRounded,\n max = 100,\n min = 0,\n speed = [\"1.4s\", \"2s\"],\n thickness = \"0.625rem\",\n trackColor = \"border\",\n value = 0,\n ...rest\n } = omitThemeProps(mergedProps)\n\n fullRounded ??= isRounded\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 duration: typeof speed[0] === \"string\" ? speed[0] : `${speed[0]}s`,\n iterationCount: \"infinite\",\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 timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n ...styles,\n fontSize: \"$boxSize\",\n vars: [\n { name: \"boxSize\", token: \"sizes\", value: boxSize },\n { name: \"thickness\", token: \"sizes\", value: thickness },\n ],\n }\n\n const circleProps: CircleProgressCircleProps = isAnimation\n ? {\n animation,\n }\n : {\n strokeDasharray:\n interval == null ? undefined : `${interval} ${264 - interval}`,\n strokeDashoffset: 66,\n transitionDuration: \"0.6s\",\n transitionProperty: \"stroke-dasharray, stroke\",\n transitionTimingFunction: \"ease\",\n }\n\n const ariaProps: HTMLUIProps = !isAnimation\n ? {\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuenow\": value,\n role: \"meter\",\n }\n : {}\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-circle-progress\", className)}\n __css={css}\n {...ariaProps}\n {...rest}\n >\n <CircleProgressShape\n boxSize={boxSize}\n isAnimation={isAnimation}\n speed={speed}\n >\n <CircleProgressCircle stroke={trackColor} strokeWidth=\"$thickness\" />\n <CircleProgressCircle\n opacity={isTransparent ? 0 : undefined}\n stroke={color}\n strokeLinecap={fullRounded ? \"round\" : undefined}\n strokeWidth=\"$thickness\"\n {...circleProps}\n />\n </CircleProgressShape>\n {children}\n </ui.div>\n )\n },\n)\n\nCircleProgress.displayName = \"CircleProgress\"\nCircleProgress.__ui__ = \"CircleProgress\"\n\ninterface CircleProgressCircleProps extends HTMLUIProps<\"circle\"> {}\n\nconst CircleProgressCircle: FC<CircleProgressCircleProps> = ({ ...rest }) => (\n <ui.circle cx={50} cy={50} fill=\"transparent\" r={42} {...rest} />\n)\n\nCircleProgressCircle.displayName = \"CircleProgressCircle\"\nCircleProgressCircle.__ui__ = \"CircleProgressCircle\"\n\ninterface CircleProgressShapeProps\n extends Omit<HTMLUIProps<\"svg\">, \"children\" | \"speed\">,\n Pick<Required<CircleProgressProps>, \"children\" | \"isAnimation\" | \"speed\"> {}\n\nconst CircleProgressShape: FC<CircleProgressShapeProps> = ({\n boxSize,\n isAnimation,\n speed,\n ...rest\n}) => {\n const animation = useAnimation({\n duration: typeof speed[1] === \"string\" ? speed[1] : `${speed[1]}s`,\n iterationCount: \"infinite\",\n keyframes: {\n \"0%\": {\n transform: \"rotate(0deg)\",\n },\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n },\n timingFunction: \"linear\",\n })\n\n const css: CSSUIObject = {\n boxSize,\n display: \"block\",\n ...(isAnimation ? { animation } : {}),\n }\n\n return <ui.svg aria-hidden viewBox=\"0 0 100 100\" __css={css} {...rest} />\n}\n\nCircleProgressShape.displayName = \"CircleProgressShape\"\nCircleProgressShape.__ui__ = \"CircleProgressShape\"\n\nexport const CircleProgressLabel = ui(\"span\", {\n baseStyle: {\n fontSize: \"0.25em\",\n left: \"50%\",\n position: \"absolute\",\n textAlign: \"center\",\n top: \"50%\",\n transform: \"translate(-50%, -50%)\",\n width: \"100%\",\n },\n})\n\nCircleProgressLabel.displayName = \"CircleProgressLabel\"\nCircleProgressLabel.__ui__ = \"CircleProgressLabel\"\n"],"mappings":"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","names":[]}