From a2689b4836a3e7a349ad848c5135af34175ed6bc Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 16:14:04 +1000
Subject: [PATCH 1/5] fix: update select component

---
 .../src/containers/theme-studio/index.tsx     |   6 +
 .../theme-studio/runtime-presets.ts           |  17 +-
 .../containers/theme-studio/theme-studio.scss |   2 +-
 .../react/src/popup/__tests__/popup.test.tsx  |  83 +++++++-
 packages/react/src/popup/popup.tsx            | 180 +++++++++++++++---
 .../src/select/__tests__/select.test.tsx      |  39 ++++
 packages/react/src/select/select.tsx          |  41 +++-
 .../react/src/split-button/style/index.scss   |  10 +-
 8 files changed, 335 insertions(+), 43 deletions(-)

diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
index 00129dcf..bd06bf93 100644
--- a/apps/docs/src/containers/theme-studio/index.tsx
+++ b/apps/docs/src/containers/theme-studio/index.tsx
@@ -156,6 +156,12 @@ const ThemeStudioPage = (): React.ReactElement => {
             <Select
               className="theme-studio__select"
               value={draft.presetId}
+              showSearch
+              filterOption={(inputValue, option) => {
+                const query = inputValue.toLowerCase();
+                const label = typeof option.label === 'string' ? option.label : '';
+                return label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
+              }}
               onChange={(value) => handlePresetChange(value)}
             >
               {THEME_EDITOR_PRESETS.map((preset) => (
diff --git a/apps/docs/src/containers/theme-studio/runtime-presets.ts b/apps/docs/src/containers/theme-studio/runtime-presets.ts
index c927a63f..346d2f90 100644
--- a/apps/docs/src/containers/theme-studio/runtime-presets.ts
+++ b/apps/docs/src/containers/theme-studio/runtime-presets.ts
@@ -18,7 +18,14 @@ function buildPresetDescription(source: TweakcnRuntimePresetSource): string {
     : 'Imported from tweakcn runtime preset.';
 }
 
-function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFields> {
+function readRuntimeStyle(styles: RuntimeStyles, key: string, fallbackStyles?: RuntimeStyles): string | undefined {
+  return styles[key] ?? fallbackStyles?.[key];
+}
+
+function mapRuntimeStylesToFields(
+  styles: RuntimeStyles,
+  typographyFallbackStyles?: RuntimeStyles,
+): Partial<ThemeEditorFields> {
   const radius = styles.radius ?? DEFAULT_FIELDS.radius;
   const ring = styles.ring ?? styles.primary ?? DEFAULT_FIELDS.ring;
   const statusPalette = deriveStatusPalette(styles);
@@ -62,9 +69,9 @@ function mapRuntimeStylesToFields(styles: RuntimeStyles): Partial<ThemeEditorFie
     sidebarAccentForeground: styles['sidebar-accent-foreground'] ?? DEFAULT_FIELDS.sidebarAccentForeground,
     sidebarBorder: styles['sidebar-border'] ?? DEFAULT_FIELDS.sidebarBorder,
     sidebarRing: styles['sidebar-ring'] ?? DEFAULT_FIELDS.sidebarRing,
-    fontSans: styles['font-sans'] ?? DEFAULT_FIELDS.fontSans,
-    fontMono: styles['font-mono'] ?? DEFAULT_FIELDS.fontMono,
-    letterSpacing: styles['letter-spacing'] ?? DEFAULT_FIELDS.letterSpacing,
+    fontSans: readRuntimeStyle(styles, 'font-sans', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontSans,
+    fontMono: readRuntimeStyle(styles, 'font-mono', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontMono,
+    letterSpacing: readRuntimeStyle(styles, 'letter-spacing', typographyFallbackStyles) ?? DEFAULT_FIELDS.letterSpacing,
     radius,
     shadowCard: buildShadow(styles),
     shadowFocus: `0 0 0 3px ${toRgba(ring, 0.24)}`,
@@ -78,7 +85,7 @@ function buildPresetFromRuntimeSource(source: TweakcnRuntimePresetSource): Theme
   const lightStyles = source.styles.light;
   const darkStyles = source.styles.dark;
   const lightFields = mapRuntimeStylesToFields(lightStyles);
-  const darkFields = mapRuntimeStylesToFields(darkStyles);
+  const darkFields = mapRuntimeStylesToFields(darkStyles, lightStyles);
 
   return {
     id: source.id,
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index fd11b4ae..b248d5ba 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -92,7 +92,7 @@
 }
 
 .theme-studio__topbar-actions .theme-studio__select {
-  min-width: 180px;
+  width: 220px;
 }
 
 .theme-studio__eyebrow {
diff --git a/packages/react/src/popup/__tests__/popup.test.tsx b/packages/react/src/popup/__tests__/popup.test.tsx
index b3703cfb..6c0f9b97 100644
--- a/packages/react/src/popup/__tests__/popup.test.tsx
+++ b/packages/react/src/popup/__tests__/popup.test.tsx
@@ -1,18 +1,73 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createPopper } from '@popperjs/core';
 import Popup from '../index';
 
+jest.mock('@popperjs/core', () => ({
+  createPopper: jest.fn(),
+}));
+
 describe('<Popup />', () => {
+  beforeEach(() => {
+    (createPopper as jest.Mock).mockImplementation(
+      (_target: HTMLElement, popup: HTMLElement, options) => {
+        const applyReactStyles = () => {
+          options.modifiers
+            .find((modifier: { name: string }) => modifier.name === 'reactApplyStyles')
+            ?.fn({
+              state: {
+                styles: {
+                  popper: {
+                    position: 'absolute',
+                    left: '37px',
+                    top: '575px',
+                    margin: '0px',
+                  },
+                  arrow: {
+                    position: 'absolute',
+                    left: '8px',
+                  },
+                },
+                attributes: {
+                  popper: {
+                    'data-popper-placement': 'bottom',
+                  },
+                  arrow: {},
+                },
+              },
+            });
+        };
+        return {
+          state: {
+            elements: {
+              popper: popup,
+            },
+          },
+          forceUpdate: jest.fn(applyReactStyles),
+          destroy: jest.fn(),
+        };
+      }
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should match the snapshot', () => {
     const { asFragment } = render(
-      <Popup content="Popup content"><button>Trigger</button></Popup>
+      <Popup content="Popup content">
+        <button>Trigger</button>
+      </Popup>
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render trigger element', () => {
     const { getByText } = render(
-      <Popup content="Content"><button>Trigger</button></Popup>
+      <Popup content="Content">
+        <button>Trigger</button>
+      </Popup>
     );
     expect(getByText('Trigger')).toBeInTheDocument();
   });
@@ -54,4 +109,28 @@ describe('<Popup />', () => {
 
     expect(screen.getByText('Controlled popup')).toBeInTheDocument();
   });
+
+  it('should keep popup content mounted during exit transition', () => {
+    const { rerender } = render(
+      <Popup visible={true} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    const openPopup = document.querySelector('.ty-popup') as HTMLDivElement;
+    expect(openPopup.style.left).toBe('37px');
+    expect(openPopup.style.top).toBe('575px');
+
+    rerender(
+      <Popup visible={false} trigger="manual" content={<div>Controlled popup</div>}>
+        <button>Trigger</button>
+      </Popup>
+    );
+
+    const closingPopup = document.querySelector('.ty-popup') as HTMLDivElement;
+    expect(closingPopup).toBeInTheDocument();
+    expect(screen.getByText('Controlled popup')).toBeInTheDocument();
+    expect(closingPopup.style.left).toBe('37px');
+    expect(closingPopup.style.top).toBe('575px');
+  });
 });
diff --git a/packages/react/src/popup/popup.tsx b/packages/react/src/popup/popup.tsx
index 7c0dd65e..557e6e52 100644
--- a/packages/react/src/popup/popup.tsx
+++ b/packages/react/src/popup/popup.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import { createPopper, Instance } from '@popperjs/core';
 import Transition, { AnimationName } from '../transition';
@@ -7,6 +14,65 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { Placement, PopupProps } from './types';
 
+type PopperElementName = 'popper' | 'arrow';
+
+interface PopperRenderState {
+  styles: Record<PopperElementName, React.CSSProperties>;
+  attributes: Record<PopperElementName, Record<string, string | boolean>>;
+}
+
+const initialPopperRenderState: PopperRenderState = {
+  styles: {
+    popper: {
+      position: 'absolute',
+      left: '0',
+      top: '0',
+    },
+    arrow: {
+      position: 'absolute',
+    },
+  },
+  attributes: {
+    popper: {},
+    arrow: {},
+  },
+};
+
+function toReactStyle(style: Partial<CSSStyleDeclaration> | undefined): React.CSSProperties {
+  return { ...(style as React.CSSProperties | undefined) };
+}
+
+function toReactAttributes(
+  attributes: Record<string, string | boolean> | undefined
+): Record<string, string | boolean> {
+  return { ...(attributes ?? {}) };
+}
+
+function shallowEqualRecord(
+  first: Record<string, unknown>,
+  second: Record<string, unknown>
+): boolean {
+  const firstKeys = Object.keys(first);
+  const secondKeys = Object.keys(second);
+  if (firstKeys.length !== secondKeys.length) return false;
+  return firstKeys.every((key) => first[key] === second[key]);
+}
+
+function isSamePopperRenderState(first: PopperRenderState, second: PopperRenderState): boolean {
+  return (
+    shallowEqualRecord(
+      first.styles.popper as Record<string, unknown>,
+      second.styles.popper as Record<string, unknown>
+    ) &&
+    shallowEqualRecord(
+      first.styles.arrow as Record<string, unknown>,
+      second.styles.arrow as Record<string, unknown>
+    ) &&
+    shallowEqualRecord(first.attributes.popper, second.attributes.popper) &&
+    shallowEqualRecord(first.attributes.arrow, second.attributes.arrow)
+  );
+}
+
 function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void {
   if (!ref) {
     return;
@@ -53,6 +119,8 @@ const Popup = (props: PopupProps): JSX.Element => {
   );
   const isControlled = 'visible' in props;
   const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
+  const [popperRenderState, setPopperRenderState] =
+    useState<PopperRenderState>(initialPopperRenderState);
   const popupVisible = isControlled ? !!visible : uncontrolledVisible;
   const targetRef = useRef<HTMLElement | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
@@ -60,6 +128,8 @@ const Popup = (props: PopupProps): JSX.Element => {
   const delayHidePopupTimer = useRef<number | undefined>(undefined);
   const popperRef = useRef<Instance | undefined>(undefined);
   const isDocumentClickListening = useRef(false);
+  const popperRenderStateRef = useRef(popperRenderState);
+  popperRenderStateRef.current = popperRenderState;
   const elementProps = {
     ref: (ref: HTMLElement | null) => {
       targetRef.current = ref;
@@ -176,7 +246,10 @@ const Popup = (props: PopupProps): JSX.Element => {
 
   useEffect(() => {
     removeDocumentClickListener();
-    if ((trigger === 'click' || trigger === 'contextmenu' || trigger === 'manual') && popupVisible) {
+    if (
+      (trigger === 'click' || trigger === 'contextmenu' || trigger === 'manual') &&
+      popupVisible
+    ) {
       document.addEventListener('click', documentOnClick, true);
       isDocumentClickListening.current = true;
     }
@@ -222,6 +295,15 @@ const Popup = (props: PopupProps): JSX.Element => {
     popperRef.current = undefined;
   }, [handlePopupOnMouseEnter, handlePopupOnMouseLeave, trigger]);
 
+  const updatePopperRenderState = useCallback((nextState: PopperRenderState): void => {
+    if (isSamePopperRenderState(popperRenderStateRef.current, nextState)) {
+      return;
+    }
+
+    popperRenderStateRef.current = nextState;
+    setPopperRenderState(nextState);
+  }, []);
+
   const initPopper = useCallback(
     (popupNode: HTMLDivElement): void => {
       if (!targetRef.current) {
@@ -255,6 +337,27 @@ const Popup = (props: PopupProps): JSX.Element => {
               adaptive: false,
             },
           },
+          {
+            name: 'applyStyles',
+            enabled: false,
+          },
+          {
+            name: 'reactApplyStyles',
+            enabled: true,
+            phase: 'afterWrite',
+            fn: ({ state }) => {
+              updatePopperRenderState({
+                styles: {
+                  popper: toReactStyle(state.styles.popper),
+                  arrow: toReactStyle(state.styles.arrow),
+                },
+                attributes: {
+                  popper: toReactAttributes(state.attributes.popper),
+                  arrow: toReactAttributes(state.attributes.arrow),
+                },
+              });
+            },
+          },
         ],
       });
 
@@ -275,15 +378,22 @@ const Popup = (props: PopupProps): JSX.Element => {
       offset,
       placement,
       trigger,
+      updatePopperRenderState,
     ]
   );
 
-  const setPopupNodeRef = useCallback((node: HTMLDivElement | null) => {
-    popupRef.current = node;
-    if (node && popupVisible) {
-      initPopper(node);
-    }
-  }, [initPopper, popupVisible]);
+  const setPopupNodeRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      popupRef.current = node;
+      if (!node) {
+        return;
+      }
+      if (popupVisible) {
+        initPopper(node);
+      }
+    },
+    [initPopper, popupVisible]
+  );
 
   const getAnimationName = () => {
     const mapping = {
@@ -357,19 +467,17 @@ const Popup = (props: PopupProps): JSX.Element => {
   }, [clearTimers, popupVisible]);
 
   useLayoutEffect(() => {
-    if (!popupVisible || !targetRef.current || !popupRef.current) {
+    if (!popupVisible) {
+      return;
+    }
+
+    if (!targetRef.current || !popupRef.current) {
       destroyPopper();
       return;
     }
 
     initPopper(popupRef.current);
-
-    return destroyPopper;
-  }, [
-    popupVisible,
-    destroyPopper,
-    initPopper,
-  ]);
+  }, [popupVisible, destroyPopper, initPopper]);
 
   useEffect(() => {
     return () => {
@@ -379,20 +487,32 @@ const Popup = (props: PopupProps): JSX.Element => {
     };
   }, [clearTimers, destroyPopper, removeDocumentClickListener]);
 
-  const renderContent = () => (
-    <Transition in={popupVisible} nodeRef={popupRef} animation={getAnimationName()}>
-      <div
-        {...otherProps}
-        className={cls}
-        ref={setPopupNodeRef}
-        style={popupInlineStyle}>
-        {content && arrow && (
-          <div data-popper-arrow className={`${prefixCls}__arrow`} />
-        )}
-        {content}
-      </div>
-    </Transition>
-  );
+  const renderContent = () => {
+    return (
+      <Transition
+        in={popupVisible}
+        nodeRef={popupRef}
+        animation={getAnimationName()}
+        onExited={destroyPopper}>
+        <div
+          {...otherProps}
+          {...popperRenderState.attributes.popper}
+          className={cls}
+          ref={setPopupNodeRef}
+          style={{ ...popperRenderState.styles.popper, ...popupInlineStyle }}>
+          {content && arrow && (
+            <div
+              data-popper-arrow
+              {...popperRenderState.attributes.arrow}
+              className={`${prefixCls}__arrow`}
+              style={popperRenderState.styles.arrow}
+            />
+          )}
+          {content}
+        </div>
+      </Transition>
+    );
+  };
 
   return (
     <>
diff --git a/packages/react/src/select/__tests__/select.test.tsx b/packages/react/src/select/__tests__/select.test.tsx
index 458b4570..6146a629 100644
--- a/packages/react/src/select/__tests__/select.test.tsx
+++ b/packages/react/src/select/__tests__/select.test.tsx
@@ -373,6 +373,45 @@ describe('<Select />', () => {
     expect(document.querySelector('.ty-select__empty')).toHaveTextContent('Nothing found');
   });
 
+  it('should preserve search text after closing without selecting', () => {
+    const { container } = render(
+      <Select showSearch notFoundContent="Nothing found">
+        <Option value="a">Apple</Option>
+      </Select>
+    );
+    const selector = container.querySelector('.ty-select__selector') as HTMLElement;
+    const selectEl = container.querySelector('.ty-select') as HTMLElement;
+
+    fireEvent.click(selector);
+    const searchInput = container.querySelector('.ty-select__search') as HTMLInputElement;
+    fireEvent.change(searchInput, { target: { value: 'xyz' } });
+    expect(document.querySelector('.ty-select__empty')).toHaveTextContent('Nothing found');
+
+    fireEvent.click(document.body);
+    expect(selectEl).not.toHaveClass('ty-select_open');
+    expect(container.querySelector('.ty-select__search')).toHaveValue('xyz');
+
+    fireEvent.click(selector);
+    expect(document.querySelector('.ty-select__empty')).toHaveTextContent('Nothing found');
+  });
+
+  it('should show the selected option label when reopening searchable single select', () => {
+    const { container } = render(
+      <Select showSearch>
+        <Option value="a">Apple</Option>
+        <Option value="b">Banana</Option>
+      </Select>
+    );
+    const selector = container.querySelector('.ty-select__selector') as HTMLElement;
+
+    fireEvent.click(selector);
+    fireEvent.click(getOptions()[1]);
+    expect(container.querySelector('.ty-select__selection-text')).toHaveTextContent('Banana');
+
+    fireEvent.click(selector);
+    expect(container.querySelector('.ty-select__search')).toHaveValue('Banana');
+  });
+
   // Sizes
   it('should apply size classes', () => {
     const { container: smContainer } = render(
diff --git a/packages/react/src/select/select.tsx b/packages/react/src/select/select.tsx
index 2c4ffb12..cb9cce65 100644
--- a/packages/react/src/select/select.tsx
+++ b/packages/react/src/select/select.tsx
@@ -48,6 +48,7 @@ const Select = (props: SelectProps): React.ReactElement => {
 
   const ref = useRef<HTMLDivElement | null>(null);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const wasOpenRef = useRef(false);
   const dropdownRef = useCallback(
     (node: HTMLUListElement | null) => {
       if (!node || !scrollToSelected) return;
@@ -168,6 +169,15 @@ const Select = (props: SelectProps): React.ReactElement => {
     [flatOptions, labelRender]
   );
 
+  const getSearchTextForValue = useCallback(
+    (val: string): string => {
+      const opt = flatOptions.find((o) => o.value === val);
+      const label = opt?.label ?? val;
+      return typeof label === 'string' || typeof label === 'number' ? String(label) : val;
+    },
+    [flatOptions]
+  );
+
   // Remove tag
   const handleRemoveTag = (val: string, e: React.MouseEvent): void => {
     e.stopPropagation();
@@ -294,11 +304,35 @@ const Select = (props: SelectProps): React.ReactElement => {
     if (!combo.isOpen || !showSearch || disabled) return;
 
     const frameId = requestAnimationFrame(() => {
-      searchInputRef.current?.focus();
+      const input = searchInputRef.current;
+      input?.focus();
+      if (!isMultiple && hasSomeValue && input?.value) {
+        input.select();
+      }
     });
 
     return () => cancelAnimationFrame(frameId);
-  }, [combo.isOpen, showSearch, disabled]);
+  }, [combo.isOpen, disabled, hasSomeValue, isMultiple, showSearch]);
+
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = combo.isOpen;
+    if (
+      wasOpen ||
+      !combo.isOpen ||
+      isMultiple ||
+      !showSearch ||
+      !hasSomeValue ||
+      searchValue
+    ) {
+      return;
+    }
+
+    const currentValue = Array.isArray(selectVal) ? selectVal[0] : selectVal;
+    if (currentValue) {
+      setSearchValue(getSearchTextForValue(currentValue));
+    }
+  }, [combo.isOpen, getSearchTextForValue, hasSomeValue, isMultiple, searchValue, selectVal, showSearch]);
 
   const hasValue = hasSomeValue;
 
@@ -476,7 +510,7 @@ const Select = (props: SelectProps): React.ReactElement => {
     }
 
     // Single mode
-    if (showSearch && combo.isOpen) {
+    if (showSearch && (combo.isOpen || searchValue)) {
       return (
         <input
           ref={searchInputRef}
@@ -530,7 +564,6 @@ const Select = (props: SelectProps): React.ReactElement => {
           }
 
           combo.closeDropdown();
-          setSearchValue('');
         }}
         content={renderOverlay()}>
         <div className={`${prefixCls}__selector`} onClick={handleSelectorClick}>
diff --git a/packages/react/src/split-button/style/index.scss b/packages/react/src/split-button/style/index.scss
index d732662d..185a3a34 100644
--- a/packages/react/src/split-button/style/index.scss
+++ b/packages/react/src/split-button/style/index.scss
@@ -1,7 +1,15 @@
 @use '@tiny-design/tokens/scss/variables' as *;
 
 .#{$prefix}-split-button {
-  &__dropdown-btn{
+  display: inline-flex;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  .#{$prefix}-btn {
+    float: none;
+  }
+
+  &__dropdown-btn {
     padding: 0 8px;
     min-width: auto;
   }

From 19e08b98f6e35a38182b4297c0c8c4c3c63d8379 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 16:30:49 +1000
Subject: [PATCH 2/5] chore: update docs

---
 packages/react/src/flex/demo/Align.tsx           |  4 ++--
 packages/react/src/flex/demo/Basic.tsx           | 12 ++++++++++--
 packages/react/src/grid/demo/Alignment.tsx       |  6 +++---
 packages/react/src/grid/demo/AlignmentGrid.tsx   |  2 +-
 packages/react/src/grid/demo/Basic.tsx           |  6 +++---
 packages/react/src/grid/demo/DashboardShell.tsx  | 14 +++++++-------
 packages/react/src/grid/demo/ExplicitColumns.tsx |  2 +-
 packages/react/src/grid/demo/Gutter.tsx          |  6 +++---
 packages/react/src/grid/demo/Offset.tsx          |  6 +++---
 packages/react/src/grid/demo/Order.tsx           |  6 +++---
 packages/react/src/grid/demo/Responsive.tsx      | 10 +++++-----
 packages/react/src/layout/demo/Basic.tsx         | 10 +++++-----
 packages/react/src/layout/demo/Sidebar.tsx       |  8 ++++----
 13 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/flex/demo/Align.tsx b/packages/react/src/flex/demo/Align.tsx
index 44b99274..87bdbba8 100644
--- a/packages/react/src/flex/demo/Align.tsx
+++ b/packages/react/src/flex/demo/Align.tsx
@@ -12,7 +12,7 @@ export default function AlignDemo() {
     width: '100%',
     height: 120,
     borderRadius: 6,
-    border: '1px solid #6e41bf',
+    border: '1px solid var(--ty-color-primary)',
   };
 
   return (
@@ -29,4 +29,4 @@ export default function AlignDemo() {
       </Flex>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/flex/demo/Basic.tsx b/packages/react/src/flex/demo/Basic.tsx
index ba75a153..1db08357 100644
--- a/packages/react/src/flex/demo/Basic.tsx
+++ b/packages/react/src/flex/demo/Basic.tsx
@@ -18,9 +18,17 @@ export default function BasicDemo() {
       </Radio.Group>
       <Flex vertical={vertical}>
         {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} style={{ ...baseStyle, backgroundColor: i % 2 ? '#6e41bf' : 'rgba(110, 65, 191, 0.75)' }} />
+          <div
+            key={i}
+            style={{
+              ...baseStyle,
+              backgroundColor: i % 2
+                ? 'var(--ty-color-primary)'
+                : 'color-mix(in srgb, var(--ty-color-primary) 75%, transparent)',
+            }}
+          />
         ))}
       </Flex>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/Alignment.tsx b/packages/react/src/grid/demo/Alignment.tsx
index efc14825..6acf5f7f 100644
--- a/packages/react/src/grid/demo/Alignment.tsx
+++ b/packages/react/src/grid/demo/Alignment.tsx
@@ -34,11 +34,11 @@ export default function AlignmentDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -68,4 +68,4 @@ export default function AlignmentDemo() {
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/AlignmentGrid.tsx b/packages/react/src/grid/demo/AlignmentGrid.tsx
index 481471ac..c2ede508 100644
--- a/packages/react/src/grid/demo/AlignmentGrid.tsx
+++ b/packages/react/src/grid/demo/AlignmentGrid.tsx
@@ -13,7 +13,7 @@ export default function AlignmentGridDemo() {
         padding: 16,
         border: '1px dashed var(--ty-color-border)',
         borderRadius: 12,
-        background: 'linear-gradient(180deg, rgba(110,65,191,0.06), rgba(110,65,191,0.01))',
+        background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 6%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 45%, transparent))',
       }}
     >
       <Button btnType="primary">Primary</Button>
diff --git a/packages/react/src/grid/demo/Basic.tsx b/packages/react/src/grid/demo/Basic.tsx
index 5c57c08d..e7d3f226 100644
--- a/packages/react/src/grid/demo/Basic.tsx
+++ b/packages/react/src/grid/demo/Basic.tsx
@@ -13,11 +13,11 @@ export default function BasicDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -42,4 +42,4 @@ export default function BasicDemo() {
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/DashboardShell.tsx b/packages/react/src/grid/demo/DashboardShell.tsx
index 59bfa1a1..e8ef56ea 100644
--- a/packages/react/src/grid/demo/DashboardShell.tsx
+++ b/packages/react/src/grid/demo/DashboardShell.tsx
@@ -12,7 +12,7 @@ const shellCardStyle: React.CSSProperties = {
 const metricStyle: React.CSSProperties = {
   ...shellCardStyle,
   minHeight: 144,
-  background: 'linear-gradient(180deg, rgba(110,65,191,0.1), rgba(110,65,191,0.02))',
+  background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 10%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
 };
 
 const sectionLabelStyle: React.CSSProperties = {
@@ -108,12 +108,12 @@ export default function DashboardShellDemo() {
             <Text type="secondary">Last 7 days</Text>
           </div>
           <Grid columns={6} gap={8} align="end" style={{ minHeight: 84 }}>
-            <div style={{ height: 42, borderRadius: 8, background: 'rgba(110,65,191,0.18)' }} />
-            <div style={{ height: 68, borderRadius: 8, background: 'rgba(110,65,191,0.24)' }} />
-            <div style={{ height: 54, borderRadius: 8, background: 'rgba(110,65,191,0.2)' }} />
-            <div style={{ height: 88, borderRadius: 8, background: 'rgba(110,65,191,0.28)' }} />
-            <div style={{ height: 60, borderRadius: 8, background: 'rgba(110,65,191,0.22)' }} />
-            <div style={{ height: 76, borderRadius: 8, background: 'rgba(110,65,191,0.26)' }} />
+            <div style={{ height: 42, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 18%, transparent)' }} />
+            <div style={{ height: 68, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 24%, transparent)' }} />
+            <div style={{ height: 54, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 20%, transparent)' }} />
+            <div style={{ height: 88, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 28%, transparent)' }} />
+            <div style={{ height: 60, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 22%, transparent)' }} />
+            <div style={{ height: 76, borderRadius: 8, background: 'color-mix(in srgb, var(--ty-color-primary) 26%, transparent)' }} />
           </Grid>
           <Text type="secondary">Wide content region spanning two columns on desktop.</Text>
         </Card>
diff --git a/packages/react/src/grid/demo/ExplicitColumns.tsx b/packages/react/src/grid/demo/ExplicitColumns.tsx
index 66ae38cb..af1d27b3 100644
--- a/packages/react/src/grid/demo/ExplicitColumns.tsx
+++ b/packages/react/src/grid/demo/ExplicitColumns.tsx
@@ -7,7 +7,7 @@ const panelStyle: React.CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'linear-gradient(180deg, rgba(110,65,191,0.12), rgba(110,65,191,0.02))',
+  background: 'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 12%, transparent), color-mix(in srgb, var(--ty-color-primary-bg) 70%, transparent))',
 };
 
 export default function ExplicitColumnsDemo() {
diff --git a/packages/react/src/grid/demo/Gutter.tsx b/packages/react/src/grid/demo/Gutter.tsx
index 30448d32..9243faa7 100644
--- a/packages/react/src/grid/demo/Gutter.tsx
+++ b/packages/react/src/grid/demo/Gutter.tsx
@@ -9,11 +9,11 @@ export default function GutterDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   const [gutter, setGutter] = React.useState(8);
@@ -46,4 +46,4 @@ export default function GutterDemo() {
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/Offset.tsx b/packages/react/src/grid/demo/Offset.tsx
index f139681a..d3570d59 100644
--- a/packages/react/src/grid/demo/Offset.tsx
+++ b/packages/react/src/grid/demo/Offset.tsx
@@ -13,11 +13,11 @@ export default function OffsetDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -35,4 +35,4 @@ export default function OffsetDemo() {
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/Order.tsx b/packages/react/src/grid/demo/Order.tsx
index 225044cb..4b5b3be3 100644
--- a/packages/react/src/grid/demo/Order.tsx
+++ b/packages/react/src/grid/demo/Order.tsx
@@ -9,11 +9,11 @@ export default function OrderDemo() {
   };
 
   const lighterBox = {
-    backgroundColor: '#6E41BFD6',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
   };
 
   const darkerBox = {
-    backgroundColor: '#6E41BFFA',
+    backgroundColor: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
   };
 
   return (
@@ -26,4 +26,4 @@ export default function OrderDemo() {
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/grid/demo/Responsive.tsx b/packages/react/src/grid/demo/Responsive.tsx
index 1310d90e..ff113605 100644
--- a/packages/react/src/grid/demo/Responsive.tsx
+++ b/packages/react/src/grid/demo/Responsive.tsx
@@ -15,18 +15,18 @@ export default function ResponsiveDemo() {
     <>
       <Row gutter={[16, 16]}>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 90%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 70%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 90%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
         <Col xs={24} sm={12} md={8} lg={6}>
-          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+          <div style={style('color-mix(in srgb, var(--ty-color-primary) 70%, transparent)')}>xs=24 sm=12 md=8 lg=6</div>
         </Col>
       </Row>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/layout/demo/Basic.tsx b/packages/react/src/layout/demo/Basic.tsx
index 30a9b98e..3b6f2827 100644
--- a/packages/react/src/layout/demo/Basic.tsx
+++ b/packages/react/src/layout/demo/Basic.tsx
@@ -7,7 +7,7 @@ export default function BasicDemo() {
   };
 
   const headerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     textAlign: 'center',
     height: '64px',
@@ -15,13 +15,13 @@ export default function BasicDemo() {
   };
 
   const footerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     textAlign: 'center',
   };
 
   const contentStyle = {
-    background: 'rgba(110, 65, 191, 0.98)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
     color: '#fff',
     minHeight: '120px',
     lineHeight: '120px',
@@ -29,7 +29,7 @@ export default function BasicDemo() {
   };
 
   const sidebarStyle = {
-    background: 'rgba(110, 65, 191, 0.84)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
     color: '#fff',
     textAlign: 'center',
     paddingTop: '30px',
@@ -73,4 +73,4 @@ export default function BasicDemo() {
       </Layout>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/layout/demo/Sidebar.tsx b/packages/react/src/layout/demo/Sidebar.tsx
index 79369c19..ead51fbd 100644
--- a/packages/react/src/layout/demo/Sidebar.tsx
+++ b/packages/react/src/layout/demo/Sidebar.tsx
@@ -6,13 +6,13 @@ export default function SidebarDemo() {
   const [collapsed, setCollapsed] = React.useState(false);
 
   const sidebarStyle = {
-    background: 'rgba(110, 65, 191, 0.84)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 84%, transparent)',
     color: '#fff',
     textAlign: 'center',
   };
 
   const headerStyle = {
-    background: 'rgba(110, 65, 191, 0.7)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 70%, transparent)',
     color: '#fff',
     height: '64px',
     lineHeight: '64px',
@@ -20,7 +20,7 @@ export default function SidebarDemo() {
   };
 
   const contentStyle = {
-    background: 'rgba(110, 65, 191, 0.98)',
+    background: 'color-mix(in srgb, var(--ty-color-primary) 98%, transparent)',
     color: '#fff',
     minHeight: '200px',
     lineHeight: '200px',
@@ -47,4 +47,4 @@ export default function SidebarDemo() {
       </Layout>
     </Layout>
   );
-}
\ No newline at end of file
+}

From f37f304ed7742eee4eedfba1d45e8a179b80c896 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 16:42:59 +1000
Subject: [PATCH 3/5] chore: update  docs

---
 packages/react/src/pop-confirm/demo/Basic.tsx  | 6 +++---
 packages/react/src/pop-confirm/demo/Icon.tsx   | 6 +++---
 packages/react/src/pop-confirm/demo/Locale.tsx | 6 +++---
 packages/react/src/pop-confirm/index.md        | 2 +-
 packages/react/src/pop-confirm/index.zh_CN.md  | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/pop-confirm/demo/Basic.tsx b/packages/react/src/pop-confirm/demo/Basic.tsx
index e177f1ce..e4c2d3a0 100644
--- a/packages/react/src/pop-confirm/demo/Basic.tsx
+++ b/packages/react/src/pop-confirm/demo/Basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopConfirm, Message } from '@tiny-design/react';
+import { PopConfirm, Message, Button } from '@tiny-design/react';
 
 export default function BasicDemo() {
   return (
@@ -7,9 +7,9 @@ export default function BasicDemo() {
       title="Are you sure to delete this?"
       onConfirm={() => Message.info('You clicked Yes')}
     >
-      <a href="#" style={{ color: '#6E41BF' }}>
+      <Button btnType="link">
         Delete
-      </a>
+      </Button>
     </PopConfirm>
   );
 }
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/demo/Icon.tsx b/packages/react/src/pop-confirm/demo/Icon.tsx
index 95c1e7b4..3fedd45a 100644
--- a/packages/react/src/pop-confirm/demo/Icon.tsx
+++ b/packages/react/src/pop-confirm/demo/Icon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopConfirm, Message } from '@tiny-design/react';
+import { PopConfirm, Message, Button } from '@tiny-design/react';
 import { IconQuestionFill } from '@tiny-design/icons';
 
 export default function IconDemo() {
@@ -9,9 +9,9 @@ export default function IconDemo() {
       icon={<IconQuestionFill color="#f00" />}
       onConfirm={() => Message.info('You clicked Yes')}
     >
-      <a href="#" style={{ color: '#6E41BF' }}>
+      <Button btnType="link">
         Delete
-      </a>
+      </Button>
     </PopConfirm>
   );
 }
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/demo/Locale.tsx b/packages/react/src/pop-confirm/demo/Locale.tsx
index b1c59e05..7490c409 100644
--- a/packages/react/src/pop-confirm/demo/Locale.tsx
+++ b/packages/react/src/pop-confirm/demo/Locale.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopConfirm, Message } from '@tiny-design/react';
+import { PopConfirm, Message, Button } from '@tiny-design/react';
 
 export default function LocaleDemo() {
   return (
@@ -9,9 +9,9 @@ export default function LocaleDemo() {
       cancelText="Cancel"
       onConfirm={() => Message.info('You clicked Yes')}
     >
-      <a href="#" style={{ color: '#6E41BF' }}>
+      <Button btnType="link">
         Delete
-      </a>
+      </Button>
     </PopConfirm>
   );
 }
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/index.md b/packages/react/src/pop-confirm/index.md
index d4568a74..071bf5f0 100755
--- a/packages/react/src/pop-confirm/index.md
+++ b/packages/react/src/pop-confirm/index.md
@@ -70,7 +70,7 @@ Set `icon` props to customize the icon.
 
 ## Props
 
-Inherits all [Popover](#/components/popover) props, plus:
+Inherits all [Popover](../components/popover) props, plus:
 
 | Property    | Description                  | Type                     | Default   |
 | ----------- | ---------------------------- | ------------------------ | --------- |
diff --git a/packages/react/src/pop-confirm/index.zh_CN.md b/packages/react/src/pop-confirm/index.zh_CN.md
index 239ef0f3..1b3b61d0 100644
--- a/packages/react/src/pop-confirm/index.zh_CN.md
+++ b/packages/react/src/pop-confirm/index.zh_CN.md
@@ -70,7 +70,7 @@ import { PopConfirm } from 'tiny-design';
 
 ## Props
 
-继承所有 [Popover](#/components/popover) 属性，以及：
+继承所有 [Popover](../components/popover) 属性，以及：
 
 | 属性        | 说明                     | 类型                     | 默认值    |
 | ----------- | ------------------------ | ------------------------ | --------- |

From ddb395f9a8c8e4e1b1e06a528fc397ca5c3a8443 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 16:49:38 +1000
Subject: [PATCH 4/5] chore: docs

---
 apps/docs/src/containers/theme-studio/preview-components.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
index d497f969..1dffbe93 100644
--- a/apps/docs/src/containers/theme-studio/preview-components.tsx
+++ b/apps/docs/src/containers/theme-studio/preview-components.tsx
@@ -130,6 +130,9 @@ const subscriptionsChartConfig: ChartConfig = {
   },
 };
 
+const currYear = new Date().getFullYear()
+const currMonth = new Date().getMonth()
+
 function MetricsStrip({
   items = [
     ['Total Revenue', '$15,231.89', '+20.1% from last month'],
@@ -386,7 +389,7 @@ function CardsPreview(): React.ReactElement {
         <div className="theme-studio__cards-bottom-pair">
           <Card className="theme-studio__cards-panel theme-studio__cards-panel_calendar">
             <Card.Content>
-              <Calendar value={new Date(2025, 5, 6)} fullscreen={false} />
+              <Calendar selectionMode="range" defaultRangeValue={[new Date(currYear, currMonth, 5), new Date(currYear, currMonth, 15)]} fullscreen={false} />
             </Card.Content>
           </Card>
 

From 75761a5a2bb3f4ad7561c9dd550810c00b98403f Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 10 Apr 2026 16:51:13 +1000
Subject: [PATCH 5/5] chore: add changeset for react component fixes

---
 .changeset/fix-react-component-demos.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-react-component-demos.md

diff --git a/.changeset/fix-react-component-demos.md b/.changeset/fix-react-component-demos.md
new file mode 100644
index 00000000..a76c8d63
--- /dev/null
+++ b/.changeset/fix-react-component-demos.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Fix React component behavior and update demos to follow theme tokens.