@hanwenbo/x-taro-ui 0.0.1

package/lib/theme/runtime/cssVariables.js

@@ -0,0 +1,213 @@
+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/runtime/cssVariables.ts
+var cssVariables_exports = {};
+__export(cssVariables_exports, {
+  buildComponentVariables: () => buildComponentVariables,
+  buildThemeStyle: () => buildThemeStyle,
+  buildThemeVariableString: () => buildThemeVariableString,
+  buildThemeVariables: () => buildThemeVariables,
+  withOpacity: () => withOpacity
+});
+module.exports = __toCommonJS(cssVariables_exports);
+var import_design_system = require("../generated/design-system.generated");
+var import_componentTokens = require("./componentTokens");
+var themeColorKeys = [
+  ...import_design_system.designSystemSemanticColorKeys,
+  ...import_design_system.designSystemCompatibilityColorKeys
+];
+function shadowToCss(shadow) {
+  const shadowColor = String(shadow.color);
+  if (shadow.opacity === 0 || shadowColor === "transparent") return "none";
+  const color = withOpacity(shadowColor, shadow.opacity);
+  return `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${color}`;
+}
+function buildFoundationVariables(theme) {
+  const spacingVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemSpacing).map(([key, value]) => [`--x-space-${key}`, `${value}px`])
+  );
+  const radiusVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemRadius).map(([key, value]) => [`--x-radius-${key}`, `${value}px`])
+  );
+  const controlHeightVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.singleHeight).map(([key, value]) => [
+      `--x-control-height-${key}`,
+      `${value}px`
+    ])
+  );
+  const controlMinHeightVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.multipleMinHeight).map(([key, value]) => [
+      `--x-control-min-height-${key}`,
+      `${value}px`
+    ])
+  );
+  const controlPaddingVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.inlinePadding).map(([key, value]) => [
+      `--x-control-padding-inline-${key}`,
+      `${value}px`
+    ])
+  );
+  const controlTextVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.textSize).map(([key, value]) => [
+      `--x-control-text-size-${key}`,
+      `${value}px`
+    ])
+  );
+  const controlGapVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.gap).map(([key, value]) => [
+      `--x-control-gap-${key}`,
+      `${value}px`
+    ])
+  );
+  const controlIconVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemFormControls.iconSize).map(([key, value]) => [
+      `--x-control-icon-size-${key}`,
+      `${value}px`
+    ])
+  );
+  const typographyVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemTypography.sizes).map(([key, value]) => [
+      `--x-font-size-${key}`,
+      `${value}px`
+    ])
+  );
+  const shadowVars = Object.fromEntries(
+    Object.entries(import_design_system.designSystemShadows).map(([key, value]) => [
+      `--x-shadow-${key}`,
+      shadowToCss(value)
+    ])
+  );
+  const motionVars = {
+    ...Object.fromEntries(
+      Object.entries(import_design_system.designSystemMotion.durationsMs).map(([key, value]) => [
+        `--x-duration-${key}`,
+        `${value}ms`
+      ])
+    ),
+    ...Object.fromEntries(
+      Object.entries(import_design_system.designSystemMotion.easing).map(([key, value]) => [`--x-easing-${key}`, value])
+    )
+  };
+  return {
+    ...spacingVars,
+    ...radiusVars,
+    ...controlHeightVars,
+    ...controlMinHeightVars,
+    ...controlPaddingVars,
+    ...controlTextVars,
+    ...controlGapVars,
+    ...controlIconVars,
+    ...typographyVars,
+    ...shadowVars,
+    ...motionVars,
+    "--radius": `${theme.radius}px`,
+    "--x-radius": `${theme.radius}px`,
+    "--x-radius-theme": `${theme.radius}px`,
+    "--x-radius-xs": "2px",
+    "--x-radius-2xl": `${import_design_system.designSystemRadius.xxl}px`,
+    "--x-radius-default": `${import_design_system.designSystemRadiusDefaults.themeRadius}px`
+  };
+}
+function buildColorVariables(colors) {
+  return Object.fromEntries(
+    themeColorKeys.flatMap((key) => [
+      [`--${key}`, colors[key]],
+      [`--x-${key}`, colors[key]]
+    ])
+  );
+}
+function buildThemeVariables(theme) {
+  const customVariables = Object.fromEntries(
+    Object.entries(theme.cssVariables).map(([key, value]) => [
+      key.startsWith("--") ? key : `--${key}`,
+      value
+    ])
+  );
+  return {
+    ...buildFoundationVariables(theme),
+    ...buildColorVariables(theme.colors),
+    ...(0, import_componentTokens.buildComponentSlotVariables)(theme),
+    ...customVariables
+  };
+}
+function buildThemeStyle(theme) {
+  const vars = buildThemeVariables(theme);
+  return {
+    ...vars,
+    backgroundColor: theme.colors.background,
+    color: theme.colors.foreground,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5714285714285714
+  };
+}
+function buildThemeVariableString(theme) {
+  const vars = buildThemeVariables(theme);
+  return Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+function withOpacity(color, opacity) {
+  if (color.startsWith("#")) {
+    const rawHex = color.slice(1);
+    const hex = rawHex.length === 3 || rawHex.length === 4 ? rawHex.split("").map((character) => `${character}${character}`).join("") : rawHex;
+    if (hex.length !== 6 && hex.length !== 8 || !/^[\da-f]+$/i.test(hex)) {
+      return color;
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  if (color.startsWith("rgb")) {
+    return color.replace(/rgba?\(([^)]+)\)/, (_, values) => {
+      const parts = values.split(",").map((v) => v.trim());
+      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${opacity})`;
+    });
+  }
+  return color;
+}
+function buildComponentVariables(theme, componentName) {
+  const baseVars = buildThemeVariables(theme);
+  switch (componentName) {
+    case "button":
+      return {
+        ...baseVars,
+        "--x-button-primary-bg": theme.colors.primary,
+        "--x-button-primary-color": theme.colors["primary-foreground"],
+        "--x-button-secondary-bg": theme.colors.secondary,
+        "--x-button-secondary-color": theme.colors["secondary-foreground"]
+      };
+    case "input":
+      return {
+        ...baseVars,
+        "--x-input-border": theme.colors.border,
+        "--x-input-bg": theme.colors.background,
+        "--x-input-focus-ring": theme.colors.ring
+      };
+    default:
+      return baseVars;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildComponentVariables,
+  buildThemeStyle,
+  buildThemeVariableString,
+  buildThemeVariables,
+  withOpacity
+});

package/lib/theme/runtime/slotOverrides.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Slot override system for x-taro-ui
+ * Allows component-level style customization
+ */
+/// <reference types="react" />
+import type { ComponentSlotOverrides, SlotOverrideConfig } from '../types';
+/**
+ * Register slot overrides for a component
+ */
+export declare function registerSlotOverrides(componentName: string, overrides: ComponentSlotOverrides): void;
+/**
+ * Get slot overrides for a component
+ */
+export declare function getSlotOverrides(componentName: string): ComponentSlotOverrides;
+/**
+ * Clear all slot overrides
+ */
+export declare function clearSlotOverrides(): void;
+/**
+ * Merge slot configs
+ */
+export declare function mergeSlotConfigs(base: SlotOverrideConfig, override?: SlotOverrideConfig): SlotOverrideConfig;
+/**
+ * Build className from slot overrides
+ */
+export declare function buildSlotClassName(componentName: string, slotName: string, defaultClassName?: string): string | undefined;
+/**
+ * Build style from slot overrides
+ */
+export declare function buildSlotStyle(componentName: string, slotName: string, defaultStyle?: React.CSSProperties): React.CSSProperties | undefined;
+/**
+ * Hook to use slot overrides (for reactive updates if needed)
+ */
+export declare function useSlotOverrides(componentName: string): ComponentSlotOverrides;
+//# sourceMappingURL=slotOverrides.d.ts.map

package/lib/theme/runtime/slotOverrides.js

@@ -0,0 +1,76 @@
+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/runtime/slotOverrides.ts
+var slotOverrides_exports = {};
+__export(slotOverrides_exports, {
+  buildSlotClassName: () => buildSlotClassName,
+  buildSlotStyle: () => buildSlotStyle,
+  clearSlotOverrides: () => clearSlotOverrides,
+  getSlotOverrides: () => getSlotOverrides,
+  mergeSlotConfigs: () => mergeSlotConfigs,
+  registerSlotOverrides: () => registerSlotOverrides,
+  useSlotOverrides: () => useSlotOverrides
+});
+module.exports = __toCommonJS(slotOverrides_exports);
+var globalSlotOverrides = /* @__PURE__ */ new Map();
+function registerSlotOverrides(componentName, overrides) {
+  globalSlotOverrides.set(componentName, overrides);
+}
+function getSlotOverrides(componentName) {
+  return globalSlotOverrides.get(componentName) ?? {};
+}
+function clearSlotOverrides() {
+  globalSlotOverrides.clear();
+}
+function mergeSlotConfigs(base, override) {
+  if (!override) return base;
+  return {
+    className: override.className ?? base.className,
+    style: { ...base.style, ...override.style }
+  };
+}
+function buildSlotClassName(componentName, slotName, defaultClassName) {
+  const overrides = getSlotOverrides(componentName);
+  const slotConfig = overrides[slotName];
+  if (!(slotConfig == null ? void 0 : slotConfig.className) && !defaultClassName) {
+    return void 0;
+  }
+  return [defaultClassName, slotConfig == null ? void 0 : slotConfig.className].filter(Boolean).join(" ") || void 0;
+}
+function buildSlotStyle(componentName, slotName, defaultStyle) {
+  const overrides = getSlotOverrides(componentName);
+  const slotConfig = overrides[slotName];
+  if (!(slotConfig == null ? void 0 : slotConfig.style) && !defaultStyle) {
+    return void 0;
+  }
+  return { ...defaultStyle, ...slotConfig == null ? void 0 : slotConfig.style };
+}
+function useSlotOverrides(componentName) {
+  return getSlotOverrides(componentName);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildSlotClassName,
+  buildSlotStyle,
+  clearSlotOverrides,
+  getSlotOverrides,
+  mergeSlotConfigs,
+  registerSlotOverrides,
+  useSlotOverrides
+});

package/lib/theme/selectionControl.d.ts

@@ -0,0 +1,126 @@
+/** x-mobile-ui deliberately compacts selection controls to 87.5% of the base scale. */
+export declare const MOBILE_SELECTION_SCALE = 0.875;
+export declare const scaleMobileSelection: (value: number) => number;
+export declare const tabsSizeMetrics: {
+    readonly mini: {
+        readonly height: number;
+        readonly paddingX: number;
+        readonly fontSize: 12;
+    };
+    readonly small: {
+        readonly height: number;
+        readonly paddingX: number;
+        readonly fontSize: 14;
+    };
+    readonly middle: {
+        readonly height: number;
+        readonly paddingX: number;
+        readonly fontSize: 14;
+    };
+    readonly large: {
+        readonly height: number;
+        readonly paddingX: number;
+        readonly fontSize: 16;
+    };
+};
+export declare const capsuleTabsSizeMetrics: {
+    readonly mini: {
+        readonly height: number;
+        readonly paddingInline: number;
+        readonly fontSize: 12;
+        readonly trackPadding: number;
+        readonly trackRadius: number;
+        readonly itemRadius: number;
+        readonly gap: number;
+        readonly contentGap: number;
+        readonly indicatorInset: 2;
+        readonly textLineHeight: 18;
+    };
+    readonly small: {
+        readonly height: number;
+        readonly paddingInline: number;
+        readonly fontSize: 14;
+        readonly trackPadding: number;
+        readonly trackRadius: number;
+        readonly itemRadius: number;
+        readonly gap: number;
+        readonly contentGap: number;
+        readonly indicatorInset: 2;
+        readonly textLineHeight: 20;
+    };
+    readonly middle: {
+        readonly height: number;
+        readonly paddingInline: number;
+        readonly fontSize: 14;
+        readonly trackPadding: number;
+        readonly trackRadius: number;
+        readonly itemRadius: number;
+        readonly gap: number;
+        readonly contentGap: number;
+        readonly indicatorInset: 4;
+        readonly textLineHeight: 20;
+    };
+    readonly large: {
+        readonly height: number;
+        readonly paddingInline: number;
+        readonly fontSize: 16;
+        readonly trackPadding: number;
+        readonly trackRadius: number;
+        readonly itemRadius: number;
+        readonly gap: number;
+        readonly contentGap: number;
+        readonly indicatorInset: 6;
+        readonly textLineHeight: 24;
+    };
+};
+export declare const segmentedSizeMetrics: {
+    readonly mini: {
+        readonly containerPadding: number;
+        readonly containerRadius: number;
+        readonly itemPaddingX: number;
+        readonly itemPaddingY: number;
+        readonly itemRadius: number;
+        readonly fontSize: 12;
+        readonly itemHeight: number;
+        readonly thumbInset: number;
+        readonly gap: number;
+        readonly textLineHeight: 18;
+    };
+    readonly small: {
+        readonly containerPadding: number;
+        readonly containerRadius: number;
+        readonly itemPaddingX: number;
+        readonly itemPaddingY: number;
+        readonly itemRadius: number;
+        readonly fontSize: 14;
+        readonly itemHeight: number;
+        readonly thumbInset: number;
+        readonly gap: number;
+        readonly textLineHeight: 20;
+    };
+    readonly middle: {
+        readonly containerPadding: number;
+        readonly containerRadius: number;
+        readonly itemPaddingX: number;
+        readonly itemPaddingY: number;
+        readonly itemRadius: number;
+        readonly fontSize: 14;
+        readonly itemHeight: number;
+        readonly thumbInset: number;
+        readonly gap: number;
+        readonly textLineHeight: 20;
+    };
+    readonly large: {
+        readonly containerPadding: number;
+        readonly containerRadius: number;
+        readonly itemPaddingX: number;
+        readonly itemPaddingY: number;
+        readonly itemRadius: number;
+        readonly fontSize: 16;
+        readonly itemHeight: number;
+        readonly thumbInset: number;
+        readonly gap: number;
+        readonly textLineHeight: 24;
+    };
+};
+//# sourceMappingURL=selectionControl.d.ts.map

package/lib/theme/selectionControl.js

@@ -0,0 +1,151 @@
+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/selectionControl.ts
+var selectionControl_exports = {};
+__export(selectionControl_exports, {
+  MOBILE_SELECTION_SCALE: () => MOBILE_SELECTION_SCALE,
+  capsuleTabsSizeMetrics: () => capsuleTabsSizeMetrics,
+  scaleMobileSelection: () => scaleMobileSelection,
+  segmentedSizeMetrics: () => segmentedSizeMetrics,
+  tabsSizeMetrics: () => tabsSizeMetrics
+});
+module.exports = __toCommonJS(selectionControl_exports);
+var import_design_system = require("./generated/design-system.generated");
+var MOBILE_SELECTION_SCALE = 0.875;
+var scaleMobileSelection = (value) => value * MOBILE_SELECTION_SCALE;
+var textLineHeights = {
+  mini: 18,
+  small: 20,
+  middle: 20,
+  large: 24
+};
+var tabsSizeMetrics = {
+  mini: { height: scaleMobileSelection(32), paddingX: scaleMobileSelection(12), fontSize: 12 },
+  small: { height: scaleMobileSelection(36), paddingX: scaleMobileSelection(16), fontSize: 14 },
+  middle: { height: scaleMobileSelection(40), paddingX: scaleMobileSelection(20), fontSize: 14 },
+  large: { height: scaleMobileSelection(48), paddingX: scaleMobileSelection(24), fontSize: 16 }
+};
+var capsuleTabsSizeMetrics = {
+  mini: {
+    height: textLineHeights.mini + scaleMobileSelection(4),
+    paddingInline: scaleMobileSelection(8),
+    fontSize: import_design_system.designSystemFormControls.textSize.mini,
+    trackPadding: scaleMobileSelection(2),
+    trackRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    gap: scaleMobileSelection(2),
+    contentGap: scaleMobileSelection(6),
+    indicatorInset: 2,
+    textLineHeight: textLineHeights.mini
+  },
+  small: {
+    height: textLineHeights.small + scaleMobileSelection(8),
+    paddingInline: scaleMobileSelection(12),
+    fontSize: import_design_system.designSystemFormControls.textSize.small,
+    trackPadding: scaleMobileSelection(2),
+    trackRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    gap: scaleMobileSelection(2),
+    contentGap: scaleMobileSelection(6),
+    indicatorInset: 2,
+    textLineHeight: textLineHeights.small
+  },
+  middle: {
+    height: textLineHeights.middle + scaleMobileSelection(12),
+    paddingInline: scaleMobileSelection(16),
+    fontSize: import_design_system.designSystemFormControls.textSize.middle,
+    trackPadding: scaleMobileSelection(4),
+    trackRadius: scaleMobileSelection(import_design_system.designSystemRadius.xl),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    gap: scaleMobileSelection(4),
+    contentGap: scaleMobileSelection(6),
+    indicatorInset: 4,
+    textLineHeight: textLineHeights.middle
+  },
+  large: {
+    height: textLineHeights.large + scaleMobileSelection(16),
+    paddingInline: scaleMobileSelection(24),
+    fontSize: import_design_system.designSystemFormControls.textSize.large,
+    trackPadding: scaleMobileSelection(6),
+    trackRadius: scaleMobileSelection(import_design_system.designSystemRadius.xxl),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    gap: scaleMobileSelection(6),
+    contentGap: scaleMobileSelection(6),
+    indicatorInset: 6,
+    textLineHeight: textLineHeights.large
+  }
+};
+var segmentedSizeMetrics = {
+  mini: {
+    containerPadding: scaleMobileSelection(2),
+    containerRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemPaddingX: scaleMobileSelection(8),
+    itemPaddingY: scaleMobileSelection(2),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.sm),
+    fontSize: import_design_system.designSystemFormControls.textSize.mini,
+    itemHeight: textLineHeights.mini + scaleMobileSelection(4),
+    thumbInset: scaleMobileSelection(2),
+    gap: scaleMobileSelection(4),
+    textLineHeight: textLineHeights.mini
+  },
+  small: {
+    containerPadding: scaleMobileSelection(4),
+    containerRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemPaddingX: scaleMobileSelection(12),
+    itemPaddingY: scaleMobileSelection(4),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.sm),
+    fontSize: import_design_system.designSystemFormControls.textSize.small,
+    itemHeight: textLineHeights.small + scaleMobileSelection(8),
+    thumbInset: scaleMobileSelection(4),
+    gap: scaleMobileSelection(6),
+    textLineHeight: textLineHeights.small
+  },
+  middle: {
+    containerPadding: scaleMobileSelection(6),
+    containerRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemPaddingX: scaleMobileSelection(16),
+    itemPaddingY: scaleMobileSelection(6),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.sm),
+    fontSize: import_design_system.designSystemFormControls.textSize.middle,
+    itemHeight: textLineHeights.middle + scaleMobileSelection(12),
+    thumbInset: scaleMobileSelection(6),
+    gap: scaleMobileSelection(6),
+    textLineHeight: textLineHeights.middle
+  },
+  large: {
+    containerPadding: scaleMobileSelection(8),
+    containerRadius: scaleMobileSelection(import_design_system.designSystemRadius.lg),
+    itemPaddingX: scaleMobileSelection(20),
+    itemPaddingY: scaleMobileSelection(8),
+    itemRadius: scaleMobileSelection(import_design_system.designSystemRadius.sm),
+    fontSize: import_design_system.designSystemFormControls.textSize.large,
+    itemHeight: textLineHeights.large + scaleMobileSelection(16),
+    thumbInset: scaleMobileSelection(8),
+    gap: scaleMobileSelection(8),
+    textLineHeight: textLineHeights.large
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MOBILE_SELECTION_SCALE,
+  capsuleTabsSizeMetrics,
+  scaleMobileSelection,
+  segmentedSizeMetrics,
+  tabsSizeMetrics
+});

package/lib/theme/types.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Theme types for x-taro-ui
+ * Following x-design-system specification
+ */
+/// <reference types="react" />
+import type { DesignSystemBaseColor, DesignSystemColorScheme } from './generated/design-system.generated';
+export declare type BaseColor = DesignSystemBaseColor;
+export declare type ColorScheme = DesignSystemColorScheme;
+export declare type ThemeMode = 'light' | 'dark' | 'system';
+export interface ThemeColors {
+    background: string;
+    foreground: string;
+    card: string;
+    'card-foreground': string;
+    popover: string;
+    'popover-foreground': string;
+    primary: string;
+    'primary-foreground': string;
+    secondary: string;
+    'secondary-foreground': string;
+    muted: string;
+    'muted-foreground': string;
+    accent: string;
+    'accent-foreground': string;
+    destructive: string;
+    'destructive-foreground': string;
+    border: string;
+    input: string;
+    ring: string;
+    'chart-1': string;
+    'chart-2': string;
+    'chart-3': string;
+    'chart-4': string;
+    'chart-5': string;
+    sidebar: string;
+    'sidebar-foreground': string;
+    'sidebar-primary': string;
+    'sidebar-primary-foreground': string;
+    'sidebar-accent': string;
+    'sidebar-accent-foreground': string;
+    'sidebar-border': string;
+    'sidebar-ring': string;
+    success: string;
+    warning: string;
+    danger: string;
+    white: string;
+    weak: string;
+    light: string;
+    text: string;
+    backgroundSecondary: string;
+    fill: string;
+    fillSecondary: string;
+}
+export interface Theme {
+    mode: 'light' | 'dark';
+    baseColor: BaseColor;
+    colorScheme: ColorScheme;
+    radius: number;
+    colors: ThemeColors;
+    cssVariables: Record<string, string>;
+}
+export interface ThemeConfig {
+    baseColor?: BaseColor;
+    colorScheme?: ColorScheme;
+    radius?: number | string;
+    colors?: Partial<ThemeColors>;
+    cssVariables?: Record<string, string | number>;
+}
+export interface ThemeContextType {
+    theme: Theme;
+    config: ThemeConfig;
+    setTheme: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+    setColorScheme: (scheme: ColorScheme) => void;
+    setBaseColor: (color: BaseColor) => void;
+    updateTheme: (config: Partial<ThemeConfig>) => void;
+}
+export interface SlotOverrideConfig {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface ComponentSlotOverrides {
+    [slotName: string]: SlotOverrideConfig;
+}
+export declare type SizeVariant = 'mini' | 'small' | 'middle' | 'large';
+export interface FormControlTokens {
+    height: number;
+    minHeight?: number;
+    textSize: number;
+    inlinePadding: number;
+    gap: number;
+    iconSize: number;
+}
+//# sourceMappingURL=types.d.ts.map