@hanwenbo/x-taro-ui 0.0.1

package/es/components/notification/types.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Notification Component Types
+ *
+ * @description
+ * Design system aligned notification component types
+ */
+import type { ReactNode } from 'react';
+export declare type NotificationTone = 'default' | 'info' | 'success' | 'warning' | 'error';
+export declare type NotificationType = 'success' | 'fail' | 'info' | 'warning';
+export declare type NotificationPlacement = 'top' | 'bottom';
+export declare type NotificationVariant = 'soft' | 'outline' | 'solid';
+export interface NotificationParams {
+    title?: string;
+    content?: ReactNode;
+    duration?: number;
+    type?: NotificationType;
+    onClose?: () => void;
+}
+export interface NotificationAction {
+    key: string;
+    label: ReactNode;
+    danger?: boolean;
+}
+export interface NotificationItem {
+    key: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    tone?: NotificationTone;
+    type?: NotificationTone | NotificationType;
+    variant?: NotificationVariant;
+    duration?: number;
+    closable?: boolean;
+    actions?: NotificationAction[];
+}
+export interface NotificationProps {
+    /** Single notification key */
+    messageKey?: string;
+    /** Single notification title */
+    title?: ReactNode;
+    /** Single notification description */
+    description?: ReactNode;
+    content?: ReactNode;
+    /** Single notification icon */
+    icon?: ReactNode;
+    /** Single notification tone */
+    tone?: NotificationTone;
+    type?: NotificationTone | NotificationType;
+    /** Single notification variant */
+    variant?: NotificationVariant;
+    /** Auto close duration */
+    duration?: number;
+    visible?: boolean;
+    /** Render in the canonical fixed top/bottom notification host. */
+    fixed?: boolean;
+    placement?: NotificationPlacement;
+    /** Show close button */
+    closable?: boolean;
+    /** Notification actions */
+    actions?: NotificationAction[];
+    /** Notification stack */
+    items?: NotificationItem[];
+    /** Empty content text */
+    emptyText?: ReactNode;
+    /** Close callback */
+    onClose?: (key?: string) => void;
+    /** Action callback */
+    onActionClick?: (actionKey: string, notificationKey: string) => void;
+    /** Fallback description node */
+    children?: ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/notification/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pageIndicator/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as PageIndicator } from './pageIndicator';
+export { default } from './pageIndicator';
+//# sourceMappingURL=index.d.ts.map

package/es/components/pageIndicator/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as PageIndicator } from "./pageIndicator";
+export { default } from "./pageIndicator";

package/es/components/pageIndicator/pageIndicator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PageIndicatorProps } from './types';
+declare const PageIndicator: React.FC<PageIndicatorProps>;
+export default PageIndicator;
+//# sourceMappingURL=pageIndicator.d.ts.map

package/es/components/pageIndicator/pageIndicator.js

@@ -0,0 +1,218 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { View } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { useTokens, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveThemeColor } from "../../utils/resolveThemeColor";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { useConfigProvider } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+var toLength = function toLength(value, fallback) {
+  if (typeof value === 'number') {
+    return "".concat(Number.isFinite(value) ? Math.max(0, value) : fallback, "px");
+  }
+  return value.trim() || "".concat(fallback, "px");
+};
+var scaleLength = function scaleLength(value, factor) {
+  return typeof value === 'number' ? value * factor : "calc(".concat(value, " * ").concat(factor, ")");
+};
+var clamp = function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+};
+var normalizeIndex = function normalizeIndex(value) {
+  return Number.isFinite(value) ? Math.trunc(value) : 0;
+};
+var PageIndicatorDot = function PageIndicatorDot(_ref) {
+  var active = _ref.active,
+    index = _ref.index,
+    interactive = _ref.interactive,
+    className = _ref.className,
+    style = _ref.style,
+    onPress = _ref.onPress;
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    motion = _useTokens.motion;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var pressable = usePressable({
+    disabled: !interactive,
+    onPress: onPress,
+    scale: 0.95
+  });
+  var accessibilityProps = interactive ? resolveTaroAccessibilityProps('button', "\u7B2C ".concat(index + 1, " \u9875")) : {};
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread(_objectSpread({
+    "data-slot": "page-indicator-dot",
+    "data-index": index,
+    "data-active": active ? 'true' : 'false',
+    "data-state": active ? 'active' : 'default'
+  }, accessibilityProps), {}, {
+    "aria-current": interactive && active ? 'page' : undefined,
+    tabIndex: interactive ? 0 : undefined,
+    className: className,
+    onFocus: function onFocus() {
+      if (interactive) setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var _preventDefault, _ref2;
+      var key = event.key;
+      if (!interactive || key !== 'Enter' && key !== ' ' && key !== 'Spacebar') return;
+      (_preventDefault = (_ref2 = event).preventDefault) === null || _preventDefault === void 0 || _preventDefault.call(_ref2);
+      onPress();
+    }
+  }, interactive ? pressable.handlers : {}), {}, {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      transform: interactive ? pressable.style.transform : undefined,
+      cursor: interactive ? 'pointer' : undefined,
+      boxShadow: focused ? "0 0 0 2px ".concat(withOpacity(colors.ring, 0.28)) : 'none',
+      transition: interactive ? "width ".concat(motion.durationsMs.overlayDefault, "ms ease, height ").concat(motion.durationsMs.overlayDefault, "ms ease, border-radius ").concat(motion.durationsMs.overlayDefault, "ms ease, background-color ").concat(motion.durationsMs.overlayDefault, "ms ease, transform ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard, ", box-shadow ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard) : "all ".concat(motion.durationsMs.overlayDefault, "ms ease")
+    })
+  }));
+};
+var PageIndicator = function PageIndicator(_ref3) {
+  var _ref4, _resolveThemeColor, _resolveThemeColor2;
+  var total = _ref3.total,
+    current = _ref3.current,
+    _ref3$defaultCurrent = _ref3.defaultCurrent,
+    defaultCurrent = _ref3$defaultCurrent === void 0 ? 0 : _ref3$defaultCurrent,
+    maxVisible = _ref3.maxVisible,
+    _ref3$dotSize = _ref3.dotSize,
+    dotSize = _ref3$dotSize === void 0 ? 8 : _ref3$dotSize,
+    activeSize = _ref3.activeSize,
+    color = _ref3.color,
+    activeColor = _ref3.activeColor,
+    dotColor = _ref3.dotColor,
+    activeDotColor = _ref3.activeDotColor,
+    dotWidth = _ref3.dotWidth,
+    dotHeight = _ref3.dotHeight,
+    activeDotWidth = _ref3.activeDotWidth,
+    activeDotHeight = _ref3.activeDotHeight,
+    dotBorderRadius = _ref3.dotBorderRadius,
+    activeDotBorderRadius = _ref3.activeDotBorderRadius,
+    dotSpacing = _ref3.dotSpacing,
+    _ref3$shape = _ref3.shape,
+    shape = _ref3$shape === void 0 ? 'dot' : _ref3$shape,
+    _ref3$direction = _ref3.direction,
+    direction = _ref3$direction === void 0 ? 'horizontal' : _ref3$direction,
+    _ref3$stretch = _ref3.stretch,
+    stretch = _ref3$stretch === void 0 ? false : _ref3$stretch,
+    _ref3$clickable = _ref3.clickable,
+    clickable = _ref3$clickable === void 0 ? false : _ref3$clickable,
+    onChange = _ref3.onChange,
+    className = _ref3.className,
+    style = _ref3.style;
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors,
+    namedColors = _useTokens2.namedColors;
+  var config = useConfigProvider();
+  var _useState3 = useState(defaultCurrent),
+    _useState4 = _slicedToArray(_useState3, 2),
+    innerCurrent = _useState4[0],
+    setInnerCurrent = _useState4[1];
+  var isControlled = current !== undefined;
+  var pageCount = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;
+  var requestedIndex = normalizeIndex(current !== null && current !== void 0 ? current : innerCurrent);
+  var activeIndex = pageCount > 0 ? clamp(requestedIndex, 0, pageCount - 1) : 0;
+  var isHorizontal = direction === 'horizontal';
+  var dotWidthValue = dotWidth !== null && dotWidth !== void 0 ? dotWidth : dotSize;
+  var dotHeightValue = dotHeight !== null && dotHeight !== void 0 ? dotHeight : dotSize;
+  var resolvedDotWidth = toLength(dotWidthValue, 8);
+  var resolvedDotHeight = toLength(dotHeightValue, 8);
+  var resolvedActiveWidth = toLength((_ref4 = activeDotWidth !== null && activeDotWidth !== void 0 ? activeDotWidth : activeSize) !== null && _ref4 !== void 0 ? _ref4 : shape === 'pill' ? scaleLength(dotWidthValue, 2.5) : dotWidthValue, shape === 'pill' ? 20 : 8);
+  var resolvedActiveHeight = toLength(activeDotHeight !== null && activeDotHeight !== void 0 ? activeDotHeight : dotHeightValue, 8);
+  var resolvedMaxVisible = maxVisible === undefined || !Number.isFinite(maxVisible) ? pageCount : Math.max(1, Math.floor(maxVisible));
+  var visibleCount = Math.min(pageCount, resolvedMaxVisible);
+  var halfWindow = Math.floor(visibleCount / 2);
+  var start = Math.max(0, activeIndex - halfWindow);
+  var end = Math.min(pageCount - 1, start + visibleCount - 1);
+  start = Math.max(0, end - visibleCount + 1);
+  var visibleIndexes = Array.from({
+    length: end - start + 1
+  }, function (_, index) {
+    return start + index;
+  });
+  React.useEffect(function () {
+    if (!isControlled && innerCurrent !== activeIndex) {
+      setInnerCurrent(activeIndex);
+    }
+  }, [activeIndex, innerCurrent, isControlled]);
+  if (pageCount === 0) {
+    return null;
+  }
+  var handleChange = function handleChange(index) {
+    if (!isControlled) {
+      setInnerCurrent(index);
+    }
+    onChange === null || onChange === void 0 || onChange(index);
+  };
+  var prefixCls = config.prefixCls;
+  var isInteractive = clickable || Boolean(onChange);
+  var resolvedDotRadius = toLength(dotBorderRadius !== null && dotBorderRadius !== void 0 ? dotBorderRadius : shape === 'pill' ? '999px' : 4, shape === 'pill' ? 999 : 4);
+  var resolvedActiveRadius = toLength(activeDotBorderRadius !== null && activeDotBorderRadius !== void 0 ? activeDotBorderRadius : shape === 'pill' ? '999px' : 4, shape === 'pill' ? 999 : 4);
+  var resolvedBaseColor = resolveThemeColor(color || 'primary', colors, namedColors);
+  var resolvedDotColor = (_resolveThemeColor = resolveThemeColor(dotColor, colors, namedColors)) !== null && _resolveThemeColor !== void 0 ? _resolveThemeColor : color === undefined || color === 'primary' ? colors['muted-foreground'] : resolvedBaseColor;
+  var resolvedActiveColor = (_resolveThemeColor2 = resolveThemeColor(activeDotColor !== null && activeDotColor !== void 0 ? activeDotColor : activeColor, colors, namedColors)) !== null && _resolveThemeColor2 !== void 0 ? _resolveThemeColor2 : resolvedBaseColor;
+  var rootAccessibilityProps = isInteractive ? resolveTaroAccessibilityProps('group', '页面指示器') : {};
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+    "data-slot": "page-indicator-root",
+    "data-direction": direction,
+    "data-stretch": stretch ? 'true' : 'false',
+    "data-total": pageCount,
+    "data-current": activeIndex
+  }, rootAccessibilityProps), {}, {
+    className: classNames("".concat(prefixCls, "-page-indicator"), className),
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      minWidth: 0,
+      minHeight: 0,
+      width: stretch && isHorizontal ? '100%' : undefined,
+      height: stretch && !isHorizontal ? '100%' : undefined,
+      gap: toLength(dotSpacing !== null && dotSpacing !== void 0 ? dotSpacing : 8, 8)
+    }, style),
+    children: visibleIndexes.map(function (index) {
+      var isActive = index === activeIndex;
+      var physicalWidth = isHorizontal ? isActive ? resolvedActiveWidth : resolvedDotWidth : isActive ? resolvedActiveHeight : resolvedDotHeight;
+      var physicalHeight = isHorizontal ? isActive ? resolvedActiveHeight : resolvedDotHeight : isActive ? resolvedActiveWidth : resolvedDotWidth;
+      return /*#__PURE__*/_jsx(PageIndicatorDot, {
+        index: index,
+        active: isActive,
+        interactive: isInteractive,
+        onPress: function onPress() {
+          return handleChange(index);
+        },
+        className: classNames("".concat(prefixCls, "-page-indicator__dot"), isActive && "".concat(prefixCls, "-page-indicator__dot--active")),
+        style: {
+          width: stretch && isHorizontal ? 0 : physicalWidth,
+          height: stretch && !isHorizontal ? 0 : physicalHeight,
+          borderRadius: isActive ? resolvedActiveRadius : resolvedDotRadius,
+          backgroundColor: isActive ? resolvedActiveColor : resolvedDotColor,
+          opacity: 1,
+          flexGrow: stretch ? 1 : 0,
+          flexBasis: stretch ? 0 : 'auto',
+          flexShrink: 0
+        }
+      }, index);
+    })
+  }));
+};
+PageIndicator.displayName = 'PageIndicator';
+export default PageIndicator;

package/es/components/pageIndicator/types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * PageIndicator Component Types
+ *
+ * @description
+ * Design system aligned pageIndicator component types
+ */
+/// <reference types="react" />
+export interface PageIndicatorProps {
+    /** Total number of pages */
+    total: number;
+    /** Controlled current index */
+    current?: number;
+    /** Initial current index */
+    defaultCurrent?: number;
+    /** Maximum number of visible indicators */
+    maxVisible?: number;
+    /** Dot size */
+    dotSize?: number | string;
+    /** Active dot size */
+    activeSize?: number | string;
+    /** Semantic theme color name or CSS color used by the indicator */
+    color?: string;
+    /** Active dot color alias */
+    activeColor?: string;
+    /** Inactive dot semantic theme color name or CSS color */
+    dotColor?: string;
+    /** Active dot semantic theme color name or CSS color */
+    activeDotColor?: string;
+    dotWidth?: number | string;
+    dotHeight?: number | string;
+    activeDotWidth?: number | string;
+    activeDotHeight?: number | string;
+    dotBorderRadius?: number | string;
+    activeDotBorderRadius?: number | string;
+    dotSpacing?: number | string;
+    /** Indicator shape */
+    shape?: 'dot' | 'pill';
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Distribute indicators across container */
+    stretch?: boolean;
+    /** Opt in to pointer and keyboard selection; passive by default */
+    clickable?: boolean;
+    /** Index change callback */
+    onChange?: (current: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/pageIndicator/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pagination/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Pagination } from './pagination';
+export { default } from './pagination';
+//# sourceMappingURL=index.d.ts.map

package/es/components/pagination/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as Pagination } from "./pagination";
+export { default } from "./pagination";

package/es/components/pagination/pagination.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PaginationProps } from './types';
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;
+//# sourceMappingURL=pagination.d.ts.map