fix(react): refine component behavior and themed demos (#99)

* fix: update select component

* chore: update docs

* chore: update  docs

* chore: docs

* chore: add changeset for react component fixes

Author: wangdicoder

.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.

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) => (

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>
 

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,

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 {

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>
   );
-}
+}

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>
   );
-}
+}

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>
     </>
   );
-}
+}

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>

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>
     </>
   );
-}
+}