@pisell/private-materials 6.6.9 → 6.6.11

package/dist/lib/plus/productSelect/components/TabsStructure/TabsStructure.less

@@ -1,230 +0,0 @@
-// ===== Mixins =====
-.pisell-tabstruct-focus-ring() {
-  outline: 2px solid var(--ps-color-primary, #7f56d9);
-  outline-offset: 2px;
-}
-
-.pisell-tabstruct-disabled() {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.pisell-tabstruct-smooth-scroll() {
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-}
-
-.pisell-tabstruct-hide-scrollbar() {
-  scrollbar-width: none;
-  /* Firefox */
-  -ms-overflow-style: none;
-  /* IE and Edge */
-
-  &::-webkit-scrollbar {
-    display: none;
-    /* Chrome, Safari, Opera */
-  }
-}
-
-// ===== Tab Wrapper =====
-.pisell-tabstruct-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  inline-size: 100%;
-  box-sizing: border-box;
-}
-
-// ===== Tab List =====
-.pisell-tabstruct-list {
-  padding: 0;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  list-style: none;
-  gap: 8px;
-  border-radius: 20px;
-}
-
-// ===== Tab Item =====
-.pisell-tabstruct-item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 16px;
-  height: 40px;
-  border: none;
-  background: var(--ps-tab-item-bg, #fff);
-  color: #1b1b1b;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  white-space: nowrap;
-  user-select: none;
-  // 基础样式采用原pill样式
-  border-radius: 20px;
-
-  > span {
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  // Focus state
-  &:focus-visible {
-    .pisell-tabstruct-focus-ring();
-  }
-
-  &--selected {
-    color: #ffffff;
-    border-radius: 20px;
-    background-color: var(--ps-color-primary, #7f56d9);;
-  }
-
-  &[aria-selected='true'] {
-    color: #ffffff;
-    border-radius: 20px;
-    background-color: var(--ps-color-primary, #7f56d9);;
-  }
-
-  // Disabled state
-  &--disabled {
-    .pisell-tabstruct-disabled();
-    color: #adb5bd;
-  }
-}
-
-// ===== Tab Rail =====
-.pisell-tabstruct-rail {
-  position: relative;
-  display: inline-flex;
-  inline-size: 100%;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  .pisell-tabstruct-smooth-scroll();
-  .pisell-tabstruct-hide-scrollbar();
-}
-
-// ===== Selection Indicator =====
-.pisell-tabstruct-selection {
-  position: absolute;
-  z-index: 10;
-  transition: all 0.2s ease-in-out;
-  pointer-events: none;
-  z-index: 0;
-  block-size: 100%;
-  background-color: var(--ps-color-primary, #7f56d9);
-  border-radius: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  &--positioned {
-    inset-block-start: auto;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    border-radius: calc(20px - 2px);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset-block-start: 1px;
-    inset-inline-start: 1px;
-    inset-inline-end: 1px;
-    block-size: 50%;
-    background-color: var(--ps-color-primary, #7f56d9);
-    border-radius: 20px 20px 0 0;
-  }
-
-  &--focused {
-    .pisell-tabstruct-focus-ring();
-  }
-}
-
-// ===== Scroll Shadow =====
-.pisell-tabstruct-shadow {
-  position: absolute;
-  z-index: 5;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity all 0.2s ease-in-out;
-
-  &--visible {
-    opacity: 1;
-  }
-
-  &--start {
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inline-size: 20px;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
-  }
-
-  &--end {
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inline-size: 20px;
-    background: linear-gradient(
-      270deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      transparent 100%
-    );
-  }
-}
-
-// ===== Chevron Controls =====
-.pisell-tabstruct-chevron-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  z-index: 15;
-}
-
-.pisell-tabstruct-chevron-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 12px;
-  background-color: #f8f9fa;
-  color: #262626;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
-
-  &:hover:not(.pisell-tabstruct-chevron-button--disabled) {
-    background-color: #e9ecef;
-    color: #495057;
-  }
-
-  &:focus-visible {
-    .pisell-tabstruct-focus-ring();
-  }
-
-  &--disabled {
-    .pisell-tabstruct-disabled();
-    color: #adb5bd;
-    background-color: #f2f4f7;
-  }
-
-  svg {
-    font-size: 20px;
-    font-weight: bold;
-    flex-shrink: 0;
-  }
-}

package/dist/lib/plus/productSelect/components/TabsStructure/hooks.js

@@ -1,190 +0,0 @@
-const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
-const require_utils = require('./utils.js');
-let react = require("react");
-
-//#region src/plus/productSelect/components/TabsStructure/hooks.ts
-/**
-* Hook for managing selection indicator position with enhanced features
-* @param containerRef - Ref to the tab container
-* @param selectedTabId - ID of the currently selected tab (optional)
-* @param transition - Custom transition string (optional)
-* @returns Selection indicator props and list container props
-*/
-function useSelectionIndicator(containerRef, selectedTabId, transition) {
-	const [indicatorStyle, setIndicatorStyle] = (0, react.useState)({
-		width: 0,
-		transform: "translateX(0)",
-		transition: "none"
-	});
-	const [selectedTabRef, setSelectedTabRef] = (0, react.useState)();
-	const [isFocusVisible, setIsFocusVisible] = (0, react.useState)(false);
-	const [focusRingClasses, setFocusRingClasses] = (0, react.useState)("");
-	const setSelectedTab = (0, react.useCallback)((element) => {
-		setSelectedTabRef((prevRef) => prevRef?.current === element ? prevRef : { current: element });
-	}, []);
-	const findSelectedTabByAttribute = (0, react.useCallback)(() => {
-		if (!containerRef.current) return null;
-		const selectedTab = containerRef.current.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
-		if (selectedTab) setSelectedTab(selectedTab);
-		return selectedTab;
-	}, [containerRef, setSelectedTab]);
-	const findSelectedTabById = (0, react.useCallback)(() => {
-		if (!selectedTabId || !containerRef.current) return null;
-		return containerRef.current.querySelector(`[id="${selectedTabId}"]`);
-	}, [containerRef, selectedTabId]);
-	const getTransition = (0, react.useCallback)((customTransition) => {
-		return customTransition || "transform 300ms, width 100ms";
-	}, []);
-	const getDirection = (0, react.useCallback)(() => {
-		if (!containerRef.current) return "ltr";
-		return window.getComputedStyle(containerRef.current).direction || "ltr";
-	}, [containerRef]);
-	const updateIndicatorPosition = (0, react.useCallback)(() => {
-		try {
-			const selectedTab = findSelectedTabByAttribute() || findSelectedTabById();
-			if (!selectedTab || !containerRef.current) {
-				setIndicatorStyle((prev) => ({
-					...prev,
-					width: 0,
-					transform: "translateX(0)"
-				}));
-				return;
-			}
-			containerRef.current;
-			const offsetParent = selectedTab.offsetParent;
-			if (!offsetParent) {
-				setIndicatorStyle((prev) => ({
-					...prev,
-					width: 0,
-					transform: "translateX(0)"
-				}));
-				return;
-			}
-			if (!selectedTab.isConnected) {
-				console.warn("useSelectionIndicator: Selected tab is no longer connected to DOM");
-				return;
-			}
-			const direction = getDirection();
-			const width = selectedTab.offsetWidth;
-			if (width <= 0) {
-				setIndicatorStyle((prev) => ({
-					...prev,
-					width: 0,
-					transform: "translateX(0)"
-				}));
-				return;
-			}
-			let left;
-			if (direction === "rtl") left = -1 * (offsetParent.clientWidth - selectedTab.offsetLeft - selectedTab.offsetWidth);
-			else left = selectedTab.offsetLeft;
-			const transitionValue = getTransition(transition);
-			setIndicatorStyle({
-				width: `${width}px`,
-				transform: `translateX(${left}px)`,
-				transition: transitionValue
-			});
-		} catch (error) {
-			console.warn("useSelectionIndicator: Error updating indicator position:", error);
-			setIndicatorStyle((prev) => ({
-				...prev,
-				width: 0,
-				transform: "translateX(0)"
-			}));
-		}
-	}, [
-		containerRef,
-		selectedTabId,
-		transition,
-		findSelectedTabByAttribute,
-		findSelectedTabById,
-		getDirection,
-		getTransition
-	]);
-	const debouncedUpdate = (0, react.useMemo)(() => require_utils.debounce(updateIndicatorPosition, 50), [updateIndicatorPosition]);
-	const handleFocusIn = (0, react.useCallback)((event) => {
-		setIsFocusVisible(event.target instanceof HTMLElement && event.target.matches(":focus-visible"));
-		setFocusRingClasses(event.target instanceof HTMLElement && event.target.matches(":focus-visible") ? "focus-visible" : "");
-	}, []);
-	const handleFocusOut = (0, react.useCallback)(() => {
-		setIsFocusVisible(false);
-		setFocusRingClasses("");
-	}, []);
-	const handleMouseDown = (0, react.useCallback)(() => {
-		setIsFocusVisible(false);
-		setFocusRingClasses("");
-	}, []);
-	(0, react.useEffect)(() => {
-		debouncedUpdate();
-	}, [debouncedUpdate, selectedTabId]);
-	(0, react.useEffect)(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		let resizeObserver = null;
-		try {
-			resizeObserver = new ResizeObserver((entries) => {
-				try {
-					if (entries.filter((entry) => entry.target && entry.target.isConnected).length > 0) debouncedUpdate();
-				} catch (error) {
-					console.warn("useSelectionIndicator: Error in ResizeObserver callback:", error);
-				}
-			});
-			resizeObserver.observe(container);
-			if (selectedTabRef?.current) resizeObserver.observe(selectedTabRef.current);
-		} catch (error) {
-			console.warn("useSelectionIndicator: Failed to create ResizeObserver:", error);
-		}
-		return () => {
-			if (resizeObserver) try {
-				resizeObserver.disconnect();
-			} catch (error) {
-				console.warn("useSelectionIndicator: Error disconnecting ResizeObserver:", error);
-			}
-		};
-	}, [
-		containerRef,
-		selectedTabRef,
-		debouncedUpdate
-	]);
-	(0, react.useEffect)(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const nativeFocusIn = (event) => {
-			handleFocusIn({
-				...event,
-				currentTarget: event.currentTarget,
-				target: event.target
-			});
-		};
-		container.addEventListener("focusin", nativeFocusIn);
-		container.addEventListener("focusout", handleFocusOut);
-		container.addEventListener("mousedown", handleMouseDown);
-		return () => {
-			container.removeEventListener("focusin", nativeFocusIn);
-			container.removeEventListener("focusout", handleFocusOut);
-			container.removeEventListener("mousedown", handleMouseDown);
-		};
-	}, [
-		containerRef,
-		handleFocusIn,
-		handleFocusOut,
-		handleMouseDown
-	]);
-	return {
-		selectionIndicatorProps: {
-			focusRingClasses,
-			isFocusVisible,
-			style: {
-				...indicatorStyle,
-				transition: getTransition(transition)
-			}
-		},
-		listContainerProps: {
-			onFocus: handleFocusIn,
-			onBlur: handleFocusOut,
-			onMouseDown: handleMouseDown
-		}
-	};
-}
-
-//#endregion
-exports.useSelectionIndicator = useSelectionIndicator;

package/dist/lib/plus/productSelect/components/TabsStructure/styles.js

@@ -1,66 +0,0 @@
-
-//#region src/plus/productSelect/components/TabsStructure/styles.ts
-const tabWrapperClasses = { wrapper: "pisell-tabstruct-wrapper" };
-const tabListClasses = { list: "pisell-tabstruct-list" };
-const tabItemClasses = {
-	item: "pisell-tabstruct-item",
-	selected: "pisell-tabstruct-item--selected",
-	disabled: "pisell-tabstruct-item--disabled"
-};
-const railClasses = { rail: "pisell-tabstruct-rail" };
-const selectionClasses = {
-	selection: "pisell-tabstruct-selection",
-	position: "pisell-tabstruct-selection--positioned",
-	focused: "pisell-tabstruct-selection--focused"
-};
-const shadowClasses = {
-	shadow: "pisell-tabstruct-shadow",
-	isVisible: "pisell-tabstruct-shadow--visible",
-	locationStart: "pisell-tabstruct-shadow--start",
-	locationEnd: "pisell-tabstruct-shadow--end"
-};
-const chevronClasses = {
-	controls: "pisell-tabstruct-chevron-controls",
-	button: "pisell-tabstruct-chevron-button",
-	disabled: "pisell-tabstruct-chevron-button--disabled"
-};
-const chevronButtonClasses = {
-	button: "pisell-tabstruct-chevron-button",
-	disabled: "pisell-tabstruct-chevron-button--disabled",
-	prev: "pisell-tabstruct-chevron-button--prev",
-	next: "pisell-tabstruct-chevron-button--next"
-};
-const tabWrapperClassNames = { wrapper: tabWrapperClasses.wrapper };
-const tabListClassNames = { list: tabListClasses.list };
-const tabItemClassNames = {
-	item: tabItemClasses.item,
-	selected: tabItemClasses.selected,
-	disabled: tabItemClasses.disabled
-};
-const railClassNames = { rail: railClasses.rail };
-const selectionClassNames = {
-	selection: selectionClasses.selection,
-	position: selectionClasses.position,
-	focused: selectionClasses.focused
-};
-const shadowClassNames = {
-	shadow: shadowClasses.shadow,
-	isVisible: shadowClasses.isVisible,
-	locationStart: shadowClasses.locationStart,
-	locationEnd: shadowClasses.locationEnd
-};
-const chevronClassNames = {
-	controls: chevronClasses.controls,
-	button: chevronClasses.button,
-	disabled: chevronClasses.disabled
-};
-
-//#endregion
-exports.chevronButtonClasses = chevronButtonClasses;
-exports.chevronClasses = chevronClasses;
-exports.railClasses = railClasses;
-exports.selectionClasses = selectionClasses;
-exports.shadowClasses = shadowClasses;
-exports.tabItemClasses = tabItemClasses;
-exports.tabListClasses = tabListClasses;
-exports.tabWrapperClasses = tabWrapperClasses;

package/dist/lib/plus/productSelect/components/TabsStructure/utils.js

@@ -1,36 +0,0 @@
-
-//#region src/plus/productSelect/components/TabsStructure/utils.ts
-function debounce(func, wait) {
-	let timeout = null;
-	return (...args) => {
-		if (timeout) clearTimeout(timeout);
-		timeout = setTimeout(() => {
-			func(...args);
-		}, wait);
-	};
-}
-/**
-* 安全的滚动函数，包含错误处理和边界检查
-* @param element - 要滚动的元素
-* @param options - 滚动选项
-*/
-function safeScrollTo(element, options) {
-	try {
-		if (!element || !element.scrollTo) return false;
-		const { left = 0, behavior = "smooth" } = options;
-		const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
-		const safeLeft = Math.max(0, Math.min(left, maxScrollLeft));
-		element.scrollTo({
-			left: safeLeft,
-			behavior
-		});
-		return true;
-	} catch (error) {
-		console.warn("Failed to scroll element:", error);
-		return false;
-	}
-}
-
-//#endregion
-exports.debounce = debounce;
-exports.safeScrollTo = safeScrollTo;

package/dist/lib/plus/productSelect/components/pisellPriceText/index.js

@@ -1,38 +0,0 @@
-const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
-const require_useEngineContext = require('../../../../hooks/useEngineContext.js');
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let __pisell_materials = require("@pisell/materials");
-require("./index.less");
-
-//#region src/plus/productSelect/components/pisellPriceText/index.tsx
-const index = (props) => {
-	const context = require_useEngineContext.default();
-	const { value } = props;
-	const locale = context.appHelper.utils?.storage?.get("umi_locale") || "en";
-	const [_prefix, _suffix] = (0, react.useMemo)(() => {
-		if (!props.isMini) return ["", ""];
-		if (!locale) return ["From", ""];
-		if (locale.toLowerCase().includes("zh")) return ["", "起"];
-		return ["From", ""];
-	}, [locale, props.isMini]);
-	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("pisell-price-text", props.className) }, props.prefix, _prefix ? /* @__PURE__ */ react.default.createElement("span", {
-		className: "pisell-price-text-prefix-text",
-		style: {
-			fontSize: "0.65em",
-			marginRight: 4
-		}
-	}, _prefix) : null, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText.Amount, { value }), _suffix ? /* @__PURE__ */ react.default.createElement("span", {
-		style: {
-			fontSize: "0.65em",
-			marginLeft: 4
-		},
-		className: "pisell-price-text-suffix-text"
-	}, _suffix) : null, props.suffix);
-};
-var pisellPriceText_default = index;
-
-//#endregion
-exports.default = pisellPriceText_default;

package/dist/lib/plus/productSelect/components/pisellPriceText/index.less

@@ -1,4 +0,0 @@
-.pisell-price-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

package/dist/lib/plus/productSelect/hooks/useToken.js

@@ -1,25 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
-const require_token = require('../theme/token.js');
-let react = require("react");
-
-//#region src/plus/productSelect/hooks/useToken.ts
-function useToken(customToken) {
-	return (0, react.useMemo)(() => {
-		return {
-			...require_token.defaultToken,
-			...customToken || {}
-		};
-	}, [customToken]);
-}
-function genCSSVars(token) {
-	const cssVars = {};
-	Object.entries(token).forEach(([key, value]) => {
-		const cssKey = `--ps-${key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`;
-		cssVars[cssKey] = value;
-	});
-	return cssVars;
-}
-
-//#endregion
-exports.genCSSVars = genCSSVars;
-exports.useToken = useToken;