@tamagui/progress 2.7.7 → 3.0.0-0.canary.1791056644527

package/dist/cjs/Progress.cjs

@@ -3,30 +3,28 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Progress_exports = {};
 __export(Progress_exports, {
-  Progress: () => Progress,
-  ProgressFrame: () => ProgressFrame,
-  ProgressIndicator: () => ProgressIndicator,
-  ProgressIndicatorFrame: () => ProgressIndicatorFrame,
-  createProgressScope: () => createProgressScope
+	Progress: () => Progress,
+	ProgressFrame: () => ProgressFrame,
+	ProgressIndicator: () => ProgressIndicator,
+	ProgressIndicatorFrame: () => ProgressIndicatorFrame,
+	createProgressScope: () => createProgressScope
 });
 module.exports = __toCommonJS(Progress_exports);
 var import_core = require("@tamagui/core");
@@ -41,138 +39,107 @@ const [createProgressContext, createProgressScope] = (0, import_create_context.c
 const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
 const INDICATOR_NAME = "ProgressIndicator";
 const ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: INDICATOR_NAME,
-  variants: {
-    unstyled: {
-      false: {
-        height: "100%",
-        width: "100%",
-        backgroundColor: "$background"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: INDICATOR_NAME,
+	height: "100%",
+	width: "100%"
 });
-const ProgressIndicator = ProgressIndicatorFrame.styleable(function ProgressIndicator2(props, forwardedRef) {
-  const {
-    __scopeProgress,
-    transition,
-    ...indicatorProps
-  } = props;
-  const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
-  const progressRatio = (context.value ?? 0) / context.max;
-  let x;
-  if (import_core.isWeb) {
-    x = `${-100 + progressRatio * 50}%`;
-  } else {
-    const baseWidth = context.width || 0;
-    x = Math.ceil(-baseWidth * (2 - progressRatio));
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressIndicatorFrame, {
-    "data-state": getProgressState(context.value, context.max),
-    "data-value": context.value ?? void 0,
-    "data-max": context.max,
-    x,
-    width: "200%",
-    ...(!props.unstyled && {
-      animateOnly: ["transform"],
-      // on native, hide until we have width measurement
-      ...(!import_core.isWeb && context.width === 0 && {
-        opacity: 0
-      })
-    }),
-    ...indicatorProps,
-    ref: forwardedRef,
-    transition: !import_core.isWeb && !context.width ? null : transition
-  });
+const ProgressIndicator = (0, import_core.createStyledHOC)(ProgressIndicatorFrame, function ProgressIndicator2(props, forwardedRef) {
+	const { __scopeProgress, transition, ...indicatorProps } = props;
+	const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
+	const progressRatio = (context.value ?? 0) / context.max;
+	let x;
+	if (import_core.isWeb) {
+		x = `${-100 + progressRatio * 50}%`;
+	} else {
+		const baseWidth = context.width || 0;
+		x = Math.ceil(-baseWidth * (2 - progressRatio));
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressIndicatorFrame, {
+		"data-state": getProgressState(context.value, context.max),
+		"data-value": context.value ?? void 0,
+		"data-max": context.max,
+		x,
+		width: "200%",
+		...!import_core.isWeb && context.width === 0 && { opacity: 0 },
+		...indicatorProps,
+		ref: forwardedRef,
+		transition: !import_core.isWeb && !context.width ? null : { transform: transition }
+	});
 });
 function defaultGetValueLabel(value, max) {
-  return `${Math.round(value / max * 100)}%`;
+	return `${Math.round(value / max * 100)}%`;
 }
 function getProgressState(value, maxValue) {
-  return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
+	return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
 }
 function isNumber(value) {
-  return typeof value === "number";
+	return typeof value === "number";
 }
 function isValidMaxNumber(max) {
-  return isNumber(max) && !Number.isNaN(max) && max > 0;
+	return isNumber(max) && !Number.isNaN(max) && max > 0;
 }
 function isValidValueNumber(value, max) {
-  return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
+	return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
 }
 const DEFAULT_MAX = 100;
+const progressTrackHeight = {
+	xs: 4,
+	sm: 6,
+	md: 9,
+	lg: 12,
+	xl: 16
+};
+const resolveProgressSize = (val) => {
+	if (typeof val === "string" && val in progressTrackHeight) {
+		return progressTrackHeight[val];
+	}
+	const resolved = Number((0, import_core.getVariableValue)((0, import_get_token.getSize)(val === true ? 36 : val)));
+	const base = Number.isFinite(resolved) ? resolved : Number((0, import_core.getVariableValue)((0, import_get_token.getSize)(36)));
+	return Math.round(base * .25);
+};
+const getProgressSize = import_core.styled.dynamic((val) => {
+	const size = resolveProgressSize(val);
+	return {
+		height: size,
+		minWidth: size * 20,
+		width: "100%"
+	};
+});
 const ProgressFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: "Progress",
-  variants: {
-    unstyled: {
-      false: {
-        borderRadius: 1e5,
-        overflow: "hidden",
-        backgroundColor: "$background"
-      }
-    },
-    size: {
-      "...size": val => {
-        const size = Math.round((0, import_core.getVariableValue)((0, import_get_token.getSize)(val)) * 0.25);
-        return {
-          height: size,
-          minWidth: (0, import_core.getVariableValue)(size) * 20,
-          width: "100%"
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "Progress",
+	overflow: "hidden",
+	variants: { size: getProgressSize }
 });
-const Progress = (0, import_helpers.withStaticProperties)(ProgressFrame.styleable(function Progress2(props, forwardedRef) {
-  const {
-    // @ts-expect-error
-    __scopeProgress,
-    value: valueProp,
-    max: maxProp,
-    getValueLabel = defaultGetValueLabel,
-    size = "$true",
-    ...progressProps
-  } = props;
-  const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
-  const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
-  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
-  const [width, setWidth] = (0, import_react.useState)(0);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressProvider, {
-    scope: __scopeProgress,
-    value,
-    max,
-    width,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressFrame, {
-      "aria-valuemax": max,
-      "aria-valuemin": 0,
-      "aria-valuenow": isNumber(value) ? value : void 0,
-      "aria-valuetext": valueLabel,
-      role: "progressbar",
-      "data-state": getProgressState(value, max),
-      "data-value": value ?? void 0,
-      "data-max": max,
-      ...(progressProps.unstyled !== true && {
-        size
-      }),
-      ...progressProps,
-      ...(!import_core.isWeb && {
-        onLayout: e => {
-          const newWidth = Math.round(e.nativeEvent.layout.width);
-          if (newWidth !== width) {
-            setWidth(newWidth);
-          }
-          progressProps.onLayout?.(e);
-        }
-      }),
-      ref: forwardedRef
-    })
-  });
-}), {
-  Indicator: ProgressIndicator
-});
+const Progress = (0, import_helpers.withStaticProperties)((0, import_core.createStyledHOC)(ProgressFrame, function Progress2(props, forwardedRef) {
+	const { __scopeProgress, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, size = true, ...progressProps } = props;
+	const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
+	const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
+	const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
+	const [width, setWidth] = (0, import_react.useState)(0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, {
+		scope: __scopeProgress,
+		value,
+		max,
+		width,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressFrame, {
+			"aria-valuemax": max,
+			"aria-valuemin": 0,
+			"aria-valuenow": isNumber(value) ? value : void 0,
+			"aria-valuetext": valueLabel,
+			role: "progressbar",
+			"data-state": getProgressState(value, max),
+			"data-value": value ?? void 0,
+			"data-max": max,
+			size,
+			...progressProps,
+			...!import_core.isWeb && { onLayout: (e) => {
+				const newWidth = Math.round(e.nativeEvent.layout.width);
+				if (newWidth !== width) {
+					setWidth(newWidth);
+				}
+				progressProps.onLayout?.(e);
+			} },
+			ref: forwardedRef
+		})
+	});
+}), { Indicator: ProgressIndicator });

package/dist/cjs/Progress.native.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Progress_exports = {};
+__export(Progress_exports, {
+	Progress: () => Progress,
+	ProgressFrame: () => ProgressFrame,
+	ProgressIndicator: () => ProgressIndicator,
+	ProgressIndicatorFrame: () => ProgressIndicatorFrame,
+	createProgressScope: () => createProgressScope
+});
+module.exports = __toCommonJS(Progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_get_token = require("@tamagui/get-token");
+var import_helpers = require("@tamagui/helpers");
+var import_stacks = require("@tamagui/stacks");
+var import_react = require("react");
+var PROGRESS_NAME = "Progress";
+var [createProgressContext, createProgressScope] = (0, import_create_context.createContextScope)(PROGRESS_NAME);
+var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
+var INDICATOR_NAME = "ProgressIndicator";
+var ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.YStack, {
+	displayName: INDICATOR_NAME,
+	height: "100%",
+	width: "100%"
+});
+var ProgressIndicator = (0, import_core.createStyledHOC)(ProgressIndicatorFrame, function ProgressIndicator2(props, forwardedRef) {
+	var { __scopeProgress, transition, ...indicatorProps } = props;
+	var context = useProgressContext(INDICATOR_NAME, __scopeProgress);
+	var _context_value;
+	var progressRatio = ((_context_value = context.value) !== null && _context_value !== void 0 ? _context_value : 0) / context.max;
+	var x;
+	if (import_core.isWeb) {
+		x = `${-100 + progressRatio * 50}%`;
+	} else {
+		var baseWidth = context.width || 0;
+		x = Math.ceil(-baseWidth * (2 - progressRatio));
+	}
+	var _context_value1;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressIndicatorFrame, {
+		"data-state": getProgressState(context.value, context.max),
+		"data-value": (_context_value1 = context.value) !== null && _context_value1 !== void 0 ? _context_value1 : void 0,
+		"data-max": context.max,
+		x,
+		width: "200%",
+		...!import_core.isWeb && context.width === 0 && { opacity: 0 },
+		...indicatorProps,
+		ref: forwardedRef,
+		transition: !import_core.isWeb && !context.width ? null : { transform: transition }
+	});
+});
+function defaultGetValueLabel(value, max) {
+	return `${Math.round(value / max * 100)}%`;
+}
+function getProgressState(value, maxValue) {
+	return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
+}
+function isNumber(value) {
+	return typeof value === "number";
+}
+function isValidMaxNumber(max) {
+	return isNumber(max) && !Number.isNaN(max) && max > 0;
+}
+function isValidValueNumber(value, max) {
+	return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
+}
+var DEFAULT_MAX = 100;
+var progressTrackHeight = {
+	xs: 4,
+	sm: 6,
+	md: 9,
+	lg: 12,
+	xl: 16
+};
+var resolveProgressSize = function(val) {
+	if (typeof val === "string" && val in progressTrackHeight) {
+		return progressTrackHeight[val];
+	}
+	var resolved = Number((0, import_core.getVariableValue)((0, import_get_token.getSize)(val === true ? 36 : val)));
+	var base = Number.isFinite(resolved) ? resolved : Number((0, import_core.getVariableValue)((0, import_get_token.getSize)(36)));
+	return Math.round(base * .25);
+};
+var getProgressSize = import_core.styled.dynamic(function(val) {
+	var size = resolveProgressSize(val);
+	return {
+		height: size,
+		minWidth: size * 20,
+		width: "100%"
+	};
+});
+var ProgressFrame = (0, import_core.styled)(import_stacks.YStack, {
+	displayName: "Progress",
+	overflow: "hidden",
+	variants: { size: getProgressSize }
+});
+var Progress = (0, import_helpers.withStaticProperties)((0, import_core.createStyledHOC)(ProgressFrame, function Progress2(props, forwardedRef) {
+	var { __scopeProgress, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, size = true, ...progressProps } = props;
+	var max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
+	var value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
+	var valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
+	var [width, setWidth] = (0, import_react.useState)(0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, {
+		scope: __scopeProgress,
+		value,
+		max,
+		width,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressFrame, {
+			"aria-valuemax": max,
+			"aria-valuemin": 0,
+			"aria-valuenow": isNumber(value) ? value : void 0,
+			"aria-valuetext": valueLabel,
+			role: "progressbar",
+			"data-state": getProgressState(value, max),
+			"data-value": value !== null && value !== void 0 ? value : void 0,
+			"data-max": max,
+			size,
+			...progressProps,
+			...!import_core.isWeb && { onLayout: function(e) {
+				var _progressProps_onLayout;
+				var newWidth = Math.round(e.nativeEvent.layout.width);
+				if (newWidth !== width) {
+					setWidth(newWidth);
+				}
+				(_progressProps_onLayout = progressProps.onLayout) === null || _progressProps_onLayout === void 0 ? void 0 : _progressProps_onLayout.call(progressProps, e);
+			} },
+			ref: forwardedRef
+		})
+	});
+}), { Indicator: ProgressIndicator });