@hanwenbo/x-taro-ui 0.0.1

package/lib/patterns/pressable/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Pressable Pattern
+ * Touch feedback and press handling
+ */
+/// <reference types="react" />
+export interface PressableOptions {
+    disabled?: boolean;
+    onPress?: () => void;
+    onPressIn?: () => void;
+    onPressOut?: () => void;
+    onLongPress?: () => void;
+    delayLongPress?: number;
+    scale?: number;
+}
+export interface PressableState {
+    pressed: boolean;
+    pressing: boolean;
+}
+/**
+ * Hook for pressable interactions
+ */
+export declare function usePressable(options?: PressableOptions): {
+    pressed: boolean;
+    handlers: {
+        onTouchStart: () => void;
+        onTouchEnd: () => void;
+        onTouchCancel: () => void;
+        onMouseDown: () => void;
+        onMouseUp: () => void;
+        onMouseLeave: () => void;
+        onClick: () => void;
+    };
+    style: import("react").CSSProperties;
+};
+/**
+ * Get press feedback style
+ */
+export declare function getPressStyle(pressed: boolean, scale?: number): React.CSSProperties;
+/**
+ * Pressable component props helper
+ */
+export declare function getPressableProps(options: PressableOptions): {
+    disabled: boolean | undefined;
+    'aria-disabled': boolean | undefined;
+    role: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/patterns/pressable/index.js

@@ -0,0 +1,108 @@
+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);
+
+// src/patterns/pressable/index.ts
+var index_exports = {};
+__export(index_exports, {
+  getPressStyle: () => getPressStyle,
+  getPressableProps: () => getPressableProps,
+  usePressable: () => usePressable
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_design_system = require("../../theme/generated/design-system.generated");
+function resolvePressMotion(scale) {
+  return scale > import_design_system.designSystemMotion.patterns.press.scale ? import_design_system.designSystemMotion.patterns.subtlePress : import_design_system.designSystemMotion.patterns.press;
+}
+function usePressable(options = {}) {
+  const {
+    disabled,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    delayLongPress = 500,
+    scale = 0.95
+  } = options;
+  const [pressed, setPressed] = (0, import_react.useState)(false);
+  const longPressTimer = (0, import_react.useRef)(null);
+  const longPressed = (0, import_react.useRef)(false);
+  const handleTouchStart = (0, import_react.useCallback)(() => {
+    if (disabled) return;
+    setPressed(true);
+    longPressed.current = false;
+    if (onLongPress) {
+      longPressTimer.current = setTimeout(() => {
+        longPressed.current = true;
+        onLongPress();
+      }, delayLongPress);
+    }
+    onPressIn == null ? void 0 : onPressIn();
+  }, [delayLongPress, disabled, onLongPress, onPressIn]);
+  const handleTouchEnd = (0, import_react.useCallback)(() => {
+    if (disabled) return;
+    if (longPressTimer.current) clearTimeout(longPressTimer.current);
+    setPressed(false);
+    onPressOut == null ? void 0 : onPressOut();
+  }, [disabled, onPressOut]);
+  const handleTouchCancel = (0, import_react.useCallback)(() => {
+    if (disabled) return;
+    if (longPressTimer.current) clearTimeout(longPressTimer.current);
+    setPressed(false);
+    onPressOut == null ? void 0 : onPressOut();
+  }, [disabled, onPressOut]);
+  return {
+    pressed,
+    handlers: {
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchCancel,
+      onMouseDown: handleTouchStart,
+      onMouseUp: handleTouchEnd,
+      onMouseLeave: handleTouchCancel,
+      onClick: () => {
+        if (!disabled && !longPressed.current) {
+          onPress == null ? void 0 : onPress();
+        }
+        longPressed.current = false;
+      }
+    },
+    style: getPressStyle(pressed, scale)
+  };
+}
+function getPressStyle(pressed, scale = 0.95) {
+  const motion = resolvePressMotion(scale);
+  return {
+    transform: pressed ? `scale(${scale})` : "scale(1)",
+    transition: `transform ${motion.durationMs}ms ${motion.easing}`
+  };
+}
+function getPressableProps(options) {
+  const { disabled } = options;
+  return {
+    disabled,
+    "aria-disabled": disabled,
+    role: "button"
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPressStyle,
+  getPressableProps,
+  usePressable
+});

package/lib/taro-components.d.ts

@@ -0,0 +1,51 @@
+import '@tarojs/components';
+
+type TaroWebEventHandler = (event: any) => void;
+
+declare module '@tarojs/components/types/View' {
+  interface ViewProps {
+    ariaDisabled?: boolean | string;
+    ariaSelected?: boolean | string;
+    dir?: 'auto' | 'ltr' | 'rtl';
+    onBlur?: TaroWebEventHandler;
+    onContextMenu?: TaroWebEventHandler;
+    onFocus?: TaroWebEventHandler;
+    onKeyDown?: TaroWebEventHandler;
+    onKeyUp?: TaroWebEventHandler;
+    onMouseDown?: TaroWebEventHandler;
+    onMouseEnter?: TaroWebEventHandler;
+    onMouseLeave?: TaroWebEventHandler;
+    onMouseUp?: TaroWebEventHandler;
+    onWheel?: TaroWebEventHandler;
+    tabIndex?: number;
+  }
+}
+
+declare module '@tarojs/components/types/Input' {
+  interface InputProps {
+    readonly?: boolean;
+    role?: string;
+  }
+}
+
+declare module '@tarojs/components/types/ScrollView' {
+  interface ScrollViewProps {
+    onMouseDown?: TaroWebEventHandler;
+    onMouseUp?: TaroWebEventHandler;
+    onWheel?: TaroWebEventHandler;
+    role?: string;
+  }
+}
+
+declare module '@tarojs/components/types/Text' {
+  interface TextProps {
+    ariaLabel?: string;
+    role?: string;
+  }
+}
+
+declare module '@tarojs/components/types/Textarea' {
+  interface TextareaProps {
+    readonly?: boolean;
+  }
+}

package/lib/theme/default-theme.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Default theme creation and utilities
+ * Following x-design-system specification
+ */
+import type { BaseColor, ColorScheme, Theme, ThemeConfig, ThemeMode, ThemeColors, FormControlTokens } from './types';
+export declare const DEFAULT_BASE_COLOR: BaseColor;
+export declare const DEFAULT_COLOR_SCHEME: ColorScheme;
+export declare const DEFAULT_RADIUS: 8;
+export declare const baseColors: ("neutral" | "zinc" | "stone" | "gray" | "slate" | "blue" | "emerald" | "amber" | "rose")[];
+export declare const colorSchemes: ("light" | "dark")[];
+export declare const PX_TO_RPX = 2;
+export declare function pxToRpx(px: number): number;
+export declare function isThemeMode(value: unknown): value is ThemeMode;
+export declare function isBaseColor(value: unknown): value is BaseColor;
+export declare function isColorScheme(value: unknown): value is ColorScheme;
+export declare function getColors(baseColor: BaseColor, colorScheme: ColorScheme): ThemeColors;
+declare type NormalizedThemeConfig = Omit<Required<ThemeConfig>, 'radius' | 'cssVariables'> & {
+    radius: number;
+    cssVariables: Record<string, string>;
+};
+export declare function normalizeThemeConfig(config?: ThemeConfig): NormalizedThemeConfig;
+export declare function createTheme(config?: ThemeConfig): Theme;
+export declare function resolveThemeMode(mode: ThemeMode): ColorScheme;
+export declare function getFormControlTokens(size: 'mini' | 'small' | 'middle' | 'large'): FormControlTokens;
+export declare function normalizeRadius(radius: number | string | undefined): number;
+export declare const defaultTheme: Theme;
+export {};
+//# sourceMappingURL=default-theme.d.ts.map

package/lib/theme/default-theme.js

@@ -0,0 +1,139 @@
+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);
+
+// src/theme/default-theme.ts
+var default_theme_exports = {};
+__export(default_theme_exports, {
+  DEFAULT_BASE_COLOR: () => DEFAULT_BASE_COLOR,
+  DEFAULT_COLOR_SCHEME: () => DEFAULT_COLOR_SCHEME,
+  DEFAULT_RADIUS: () => DEFAULT_RADIUS,
+  PX_TO_RPX: () => PX_TO_RPX,
+  baseColors: () => baseColors,
+  colorSchemes: () => colorSchemes,
+  createTheme: () => createTheme,
+  defaultTheme: () => defaultTheme,
+  getColors: () => getColors,
+  getFormControlTokens: () => getFormControlTokens,
+  isBaseColor: () => isBaseColor,
+  isColorScheme: () => isColorScheme,
+  isThemeMode: () => isThemeMode,
+  normalizeRadius: () => normalizeRadius,
+  normalizeThemeConfig: () => normalizeThemeConfig,
+  pxToRpx: () => pxToRpx,
+  resolveThemeMode: () => resolveThemeMode
+});
+module.exports = __toCommonJS(default_theme_exports);
+var import_design_system = require("./generated/design-system.generated");
+var DEFAULT_BASE_COLOR = import_design_system.designSystemThemeDefaults.defaultBaseColor;
+var DEFAULT_COLOR_SCHEME = import_design_system.designSystemThemeDefaults.defaultColorScheme;
+var DEFAULT_RADIUS = import_design_system.designSystemRadiusDefaults.themeRadius;
+var baseColors = [...import_design_system.designSystemBaseColors];
+var colorSchemes = [...import_design_system.designSystemColorSchemes];
+var PX_TO_RPX = 2;
+function pxToRpx(px) {
+  return px * PX_TO_RPX;
+}
+function isThemeMode(value) {
+  return typeof value === "string" && ["light", "dark", "system"].includes(value);
+}
+function isBaseColor(value) {
+  return typeof value === "string" && baseColors.includes(value);
+}
+function isColorScheme(value) {
+  return typeof value === "string" && colorSchemes.includes(value);
+}
+function getColors(baseColor, colorScheme) {
+  return import_design_system.designSystemThemePresets[baseColor][colorScheme];
+}
+function normalizeThemeConfig(config = {}) {
+  const baseColor = isBaseColor(config.baseColor) ? config.baseColor : DEFAULT_BASE_COLOR;
+  const colorScheme = isColorScheme(config.colorScheme) ? config.colorScheme : DEFAULT_COLOR_SCHEME;
+  return {
+    baseColor,
+    colorScheme,
+    radius: normalizeRadius(config.radius),
+    colors: config.colors ?? {},
+    cssVariables: Object.fromEntries(
+      Object.entries(config.cssVariables ?? {}).map(([key, value]) => [key, String(value)])
+    )
+  };
+}
+function createTheme(config = {}) {
+  const normalized = normalizeThemeConfig(config);
+  const baseColors2 = getColors(normalized.baseColor, normalized.colorScheme);
+  return {
+    mode: normalized.colorScheme,
+    baseColor: normalized.baseColor,
+    colorScheme: normalized.colorScheme,
+    radius: normalized.radius,
+    colors: {
+      ...baseColors2,
+      ...normalized.colors
+    },
+    cssVariables: normalized.cssVariables
+  };
+}
+function resolveThemeMode(mode) {
+  if (mode === "system") {
+    return "light";
+  }
+  return mode;
+}
+function getFormControlTokens(size) {
+  return {
+    height: import_design_system.designSystemFormControls.singleHeight[size],
+    minHeight: import_design_system.designSystemFormControls.multipleMinHeight[size],
+    textSize: import_design_system.designSystemFormControls.textSize[size],
+    inlinePadding: import_design_system.designSystemFormControls.inlinePadding[size],
+    gap: import_design_system.designSystemFormControls.gap[size],
+    iconSize: import_design_system.designSystemFormControls.iconSize[size]
+  };
+}
+function normalizeRadius(radius) {
+  if (typeof radius === "number") {
+    return radius;
+  }
+  if (typeof radius === "string") {
+    const parsed = parseFloat(radius);
+    if (!isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return DEFAULT_RADIUS;
+}
+var defaultTheme = createTheme({});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_BASE_COLOR,
+  DEFAULT_COLOR_SCHEME,
+  DEFAULT_RADIUS,
+  PX_TO_RPX,
+  baseColors,
+  colorSchemes,
+  createTheme,
+  defaultTheme,
+  getColors,
+  getFormControlTokens,
+  isBaseColor,
+  isColorScheme,
+  isThemeMode,
+  normalizeRadius,
+  normalizeThemeConfig,
+  pxToRpx,
+  resolveThemeMode
+});