@hanwenbo/x-taro-ui 0.0.1

package/lib/components/segmented/segmented.js

@@ -0,0 +1,309 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/segmented/segmented.tsx
+var segmented_exports = {};
+__export(segmented_exports, {
+  default: () => segmented_default
+});
+module.exports = __toCommonJS(segmented_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_inlineAlignment = require("../../utils/inlineAlignment");
+var import_taroProps = require("../../utils/taroProps");
+var import_configProvider = require("../configProvider");
+var import_useTaroSelectionIndicator = require("../internal/selectionControl/useTaroSelectionIndicator");
+var variantSurface = {
+  default: (colors) => colors.muted,
+  outline: (colors) => colors.background,
+  filled: (colors) => colors.accent
+};
+var variantThumb = {
+  default: (colors) => colors.background,
+  outline: (colors) => colors.muted,
+  filled: (colors) => colors.primary
+};
+var renderNode = (content, textStyle) => {
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: textStyle }, content);
+  }
+  return content;
+};
+var normalizeOption = (option) => typeof option === "string" || typeof option === "number" ? { label: option, value: option } : option;
+var SegmentedItem = ({
+  option,
+  currentValue,
+  disabled,
+  block,
+  motion,
+  indicatorReady,
+  itemDomId,
+  metrics,
+  activeTextColor,
+  mutedTextColor,
+  activeBackground,
+  semanticClassNames,
+  semanticStyles,
+  onSelect
+}) => {
+  const isActive = option.value === currentValue;
+  const isDisabled = disabled || Boolean(option.disabled);
+  const {
+    pressed,
+    handlers,
+    style: pressStyle
+  } = (0, import_patterns.usePressable)({
+    disabled: isDisabled,
+    onPress: () => onSelect(option),
+    scale: 0.985
+  });
+  const accessibleLabel = typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : "分段选项";
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: itemDomId,
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)(
+        "tab",
+        `${accessibleLabel}，${isActive ? "已选中" : "未选中"}${isDisabled ? "，已禁用" : ""}`
+      ),
+      "aria-selected": isActive,
+      "aria-disabled": isDisabled,
+      className: (0, import_utils.classNames)(
+        "x-segmented__item",
+        semanticClassNames == null ? void 0 : semanticClassNames.item,
+        isActive && (semanticClassNames == null ? void 0 : semanticClassNames.itemActive),
+        pressed && "x-segmented__item--pressed"
+      ),
+      "data-slot": "segmented-item",
+      "data-active": isActive ? "true" : "false",
+      "data-disabled": isDisabled ? "true" : "false",
+      "data-value": String(option.value),
+      style: {
+        position: "relative",
+        zIndex: 1,
+        display: "flex",
+        boxSizing: "border-box",
+        flex: block ? 1 : void 0,
+        flexDirection: option.description ? "column" : "row",
+        minWidth: block ? 0 : 48,
+        minHeight: metrics.itemHeight,
+        paddingLeft: metrics.itemPaddingX,
+        paddingRight: metrics.itemPaddingX,
+        paddingTop: option.description ? 8 : metrics.itemPaddingY,
+        paddingBottom: option.description ? 8 : metrics.itemPaddingY,
+        borderRadius: metrics.itemRadius,
+        whiteSpace: "nowrap",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: option.description ? 4 : metrics.gap,
+        backgroundColor: isActive && (!motion || !indicatorReady) ? activeBackground : "transparent",
+        opacity: isDisabled ? 0.5 : 1,
+        ...pressStyle,
+        ...semanticStyles == null ? void 0 : semanticStyles.item,
+        ...isActive ? semanticStyles == null ? void 0 : semanticStyles.itemActive : void 0
+      },
+      ...handlers
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: "x-segmented__item-content",
+        "data-slot": "segmented-item-content",
+        style: (0, import_inlineAlignment.centeredInlineContent)(metrics.gap)
+      },
+      option.icon ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: "x-segmented__item-icon",
+          "data-slot": "segmented-item-icon",
+          style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+        },
+        option.icon
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: "x-segmented__item-label",
+          "data-slot": "segmented-item-label",
+          style: (0, import_inlineAlignment.centeredInlineSlot)({ minWidth: 0 })
+        },
+        renderNode(option.label, {
+          fontSize: metrics.fontSize,
+          fontWeight: "500",
+          color: isActive ? activeTextColor : mutedTextColor,
+          lineHeight: `${metrics.textLineHeight}px`,
+          whiteSpace: "nowrap"
+        })
+      ),
+      option.badge ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: "x-segmented__item-badge",
+          "data-slot": "segmented-item-badge",
+          style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+        },
+        option.badge
+      ) : null
+    ),
+    option.description ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: "x-segmented__item-description",
+        "data-slot": "segmented-item-description",
+        style: (0, import_inlineAlignment.centeredInlineSlot)({ width: "100%" })
+      },
+      renderNode(option.description, {
+        fontSize: 11,
+        color: mutedTextColor,
+        lineHeight: "1.3",
+        textAlign: "center"
+      })
+    ) : null
+  );
+};
+var Segmented = ({
+  options = [],
+  value,
+  defaultValue,
+  size: sizeProp,
+  variant = "default",
+  block = false,
+  disabled: disabledProp,
+  motion = true,
+  onChange,
+  children,
+  className,
+  style,
+  classNames: semanticClassNames,
+  styles: semanticStyles
+}) => {
+  const { theme } = (0, import_theme.useTheme)();
+  const providerSize = (0, import_configProvider.useSize)();
+  const providerDisabled = (0, import_configProvider.useDisabled)();
+  const size = sizeProp ?? providerSize ?? "middle";
+  const disabled = Boolean(disabledProp || providerDisabled);
+  const normalizedOptions = (0, import_react.useMemo)(() => options.map(normalizeOption), [options]);
+  const [innerValue, setInnerValue] = (0, import_react.useState)(
+    defaultValue ?? (normalizedOptions.length > 0 ? normalizedOptions[0].value : void 0)
+  );
+  const currentValue = value !== void 0 ? value : innerValue;
+  const metrics = import_theme.segmentedSizeMetrics[size];
+  const currentKey = currentValue === void 0 ? null : String(currentValue);
+  const { containerId, itemId, indicatorStyle, indicatorReady, indicatorMotionReady } = (0, import_useTaroSelectionIndicator.useTaroSelectionIndicator)({
+    activeKey: currentKey,
+    enabled: motion && currentKey !== null,
+    inset: metrics.thumbInset,
+    mode: "static"
+  });
+  const activeTextColor = variant === "filled" ? theme.colors["primary-foreground"] : theme.colors.foreground;
+  const handleSelect = (option) => {
+    if (disabled || option.disabled || option.value === currentValue) return;
+    if (value === void 0) setInnerValue(option.value);
+    onChange == null ? void 0 : onChange(option.value, option);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: containerId,
+      ...(0, import_taroProps.resolveTaroAccessibilityProps)("tablist", "分段选择"),
+      className: (0, import_utils.classNames)("x-segmented", semanticClassNames == null ? void 0 : semanticClassNames.root, className),
+      "data-slot": "segmented-root",
+      "data-disabled": disabled ? "true" : "false",
+      "data-size": size,
+      "data-variant": variant,
+      style: {
+        position: "relative",
+        display: block ? "flex" : "inline-flex",
+        boxSizing: "border-box",
+        flexDirection: "row",
+        alignItems: "stretch",
+        gap: 0,
+        padding: metrics.containerPadding,
+        borderRadius: metrics.containerRadius,
+        backgroundColor: variantSurface[variant](theme.colors),
+        borderWidth: variant === "outline" ? 1 : 0,
+        borderStyle: "solid",
+        borderColor: theme.colors.border,
+        width: block ? "100%" : void 0,
+        opacity: disabled ? 0.5 : 1,
+        ...semanticStyles == null ? void 0 : semanticStyles.root,
+        ...style
+      }
+    },
+    motion ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: (0, import_utils.classNames)("x-segmented__thumb", semanticClassNames == null ? void 0 : semanticClassNames.thumb),
+        "data-slot": "segmented-thumb",
+        "data-motion-ready": indicatorMotionReady ? "true" : "false",
+        style: {
+          position: "absolute",
+          top: metrics.thumbInset,
+          bottom: metrics.thumbInset,
+          left: 0,
+          borderRadius: metrics.itemRadius,
+          backgroundColor: variantThumb[variant](theme.colors),
+          boxShadow: "var(--x-segmented-thumb-shadow)",
+          transitionProperty: indicatorMotionReady ? "transform, width, opacity" : "none",
+          transitionDuration: "var(--x-duration-overlayDefault)",
+          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          width: indicatorStyle.width,
+          opacity: indicatorStyle.opacity,
+          transform: indicatorStyle.transform,
+          pointerEvents: "none",
+          ...semanticStyles == null ? void 0 : semanticStyles.thumb
+        }
+      }
+    ) : null,
+    normalizedOptions.length > 0 ? normalizedOptions.map((option) => /* @__PURE__ */ import_react.default.createElement(
+      SegmentedItem,
+      {
+        key: String(option.value),
+        option,
+        currentValue,
+        disabled,
+        block,
+        motion,
+        indicatorReady,
+        itemDomId: itemId(String(option.value)),
+        metrics,
+        activeTextColor,
+        mutedTextColor: theme.colors["muted-foreground"],
+        activeBackground: variantThumb[variant](theme.colors),
+        semanticClassNames,
+        semanticStyles,
+        onSelect: handleSelect
+      }
+    )) : children
+  );
+};
+Segmented.displayName = "Segmented";
+var segmented_default = Segmented;

package/lib/components/segmented/types.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Segmented Component Types
+ *
+ * @description
+ * Design system aligned segmented component types
+ */
+import { ReactNode } from 'react';
+import type { SizeVariant } from '../../theme/types';
+export declare type SegmentedValue = string | number;
+export interface SegmentedOption {
+    /** Visible label */
+    label: ReactNode;
+    /** Internal value */
+    value: SegmentedValue;
+    /** Optional leading icon */
+    icon?: ReactNode;
+    /** Optional trailing badge */
+    badge?: ReactNode;
+    /** Secondary text */
+    description?: ReactNode;
+    /** Disable only this segment */
+    disabled?: boolean;
+}
+export declare type SegmentedOptionInput = SegmentedValue | SegmentedOption;
+export interface SegmentedProps {
+    /** Segment options */
+    options?: SegmentedOptionInput[];
+    /** Controlled value */
+    value?: SegmentedValue;
+    /** Initial value */
+    defaultValue?: SegmentedValue;
+    /** Size variant */
+    size?: SizeVariant;
+    /** Stretch each segment evenly */
+    block?: boolean;
+    /** Disable all interactions */
+    disabled?: boolean;
+    /** Change callback */
+    onChange?: (value: SegmentedValue, option: SegmentedOption) => void;
+    /** Component children */
+    children?: ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    classNames?: {
+        root?: string;
+        thumb?: string;
+        item?: string;
+        itemActive?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        thumb?: React.CSSProperties;
+        item?: React.CSSProperties;
+        itemActive?: React.CSSProperties;
+    };
+    motion?: boolean;
+    variant?: 'default' | 'outline' | 'filled';
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/segmented/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/components/segmented/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/select/index.d.ts

@@ -0,0 +1,5 @@
+export { Select } from './select';
+export type { SelectProps, SelectOption, SelectVariant } from './types';
+export { useSelectTokens, useSelectColors, useDropdownTokens } from './tokens';
+export { default } from './select';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/select/index.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/select/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Select: () => import_select.Select,
+  default: () => import_select2.default,
+  useDropdownTokens: () => import_tokens.useDropdownTokens,
+  useSelectColors: () => import_tokens.useSelectColors,
+  useSelectTokens: () => import_tokens.useSelectTokens
+});
+module.exports = __toCommonJS(index_exports);
+var import_select = require("./select");
+var import_tokens = require("./tokens");
+var import_select2 = __toESM(require("./select"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select,
+  useDropdownTokens,
+  useSelectColors,
+  useSelectTokens
+});

package/lib/components/select/select.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Select Component
+ *
+ * @description
+ * Cross-platform select aligned with x-mobile-ui's visual and interaction contract.
+ */
+import React from 'react';
+import type { SelectProps } from './types';
+export declare const Select: React.FC<SelectProps>;
+export default Select;
+//# sourceMappingURL=select.d.ts.map