fix: unify input width

apps/docs/src/containers/theme-studio/editor-fields.tsx

@@ -10,22 +10,30 @@ export function swatchTextStyle(background: string, foreground: string): React.C
 }
 
 function parseSliderValue(value: string, unit?: 'px' | 'em' | 'rem'): number | undefined {
+  const trimmed = value.trim();
+
+  // CSS zero is unit-agnostic. Presets may serialize it as `0px` while the
+  // editor slider expects `rem`, so normalize all zero forms to numeric 0.
+  if (/^-?0(?:\.0+)?(?:px|em|rem)?$/.test(trimmed)) {
+    return 0;
+  }
+
   if (unit === 'px') {
-    const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+    const match = /^(-?\d+(?:\.\d+)?)px$/.exec(trimmed);
     return match ? Number(match[1]) : undefined;
   }
 
   if (unit === 'em') {
-    const match = /^(-?\d+(?:\.\d+)?)em$/.exec(value.trim());
+    const match = /^(-?\d+(?:\.\d+)?)em$/.exec(trimmed);
     return match ? Number(match[1]) : undefined;
   }
 
   if (unit === 'rem') {
-    const match = /^(-?\d+(?:\.\d+)?)rem$/.exec(value.trim());
+    const match = /^(-?\d+(?:\.\d+)?)rem$/.exec(trimmed);
     return match ? Number(match[1]) : undefined;
   }
 
-  const parsed = Number(value);
+  const parsed = Number(trimmed);
   return Number.isNaN(parsed) ? undefined : parsed;
 }
 

apps/docs/src/containers/theme-studio/theme-document-adapter.ts

@@ -245,9 +245,21 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'cascader.height.sm': fields.fieldHeightSm,
         'cascader.height.md': fields.fieldHeightMd,
         'cascader.height.lg': fields.fieldHeightLg,
+        'cascader.bg': fields.base,
+        'cascader.border': fields.input,
+        'cascader.border-hover': fields.ring,
+        'cascader.border-focus': fields.ring,
+        'cascader.shadow-focus': fields.shadowFocus,
+        'cascader.radius': fields.inputRadius,
         'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
         'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
         'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
+        'native-select.bg': fields.base,
+        'native-select.border': fields.input,
+        'native-select.border-hover': fields.ring,
+        'native-select.border-focus': fields.ring,
+        'native-select.shadow-focus': fields.shadowFocus,
+        'native-select.radius': fields.inputRadius,
         'checkbox.bg': fields.base,
         'checkbox.border': fields.input,
         'checkbox.border.hover': fields.ring,

packages/react/src/cascader/style/index.scss

@@ -3,7 +3,8 @@
 .#{$prefix}-cascader {
   position: relative;
   display: inline-block;
-  min-width: var(--ty-cascader-min-width);
+  width: 100%;
+  min-width: 0;
 
   &_disabled {
     opacity: var(--ty-cascader-opacity-disabled);

packages/react/src/date-picker/style/index.scss

@@ -5,6 +5,7 @@ $dp: #{$prefix}-date-picker;
 .#{$dp} {
   display: inline-flex;
   position: relative;
+  width: 100%;
   font-size: var(--ty-picker-input-font-size);
 
   // ---- Input ----

packages/react/src/grid/demo/AlignmentGrid.tsx

@@ -1,28 +1,72 @@
 import React from 'react';
-import { Button, Grid } from '@tiny-design/react';
+import { Grid, Radio } from '@tiny-design/react';
+import { DemoControlLabel, DemoControls, getDemoBlockStyle } from './shared';
+
+type AlignmentValue = 'start' | 'center' | 'end' | 'stretch';
 
 export default function AlignmentGridDemo() {
+  const [justify, setJustify] = React.useState<AlignmentValue>('stretch');
+  const [align, setAlign] = React.useState<AlignmentValue>('stretch');
+
   return (
-    <Grid
-      columns={3}
-      gap="sm"
-      align="center"
-      justify="center"
-      style={{
-        minHeight: 180,
-        padding: 16,
-        border: '1px dashed var(--ty-color-border)',
-        borderRadius: 12,
-        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 variant="solid" color="primary">
-        Primary
-      </Button>
-      <Button>Default</Button>
-      <Button variant="outline" color="primary">
-        Outline
-      </Button>
-    </Grid>
+    <div>
+      <DemoControls>
+        <div>
+          <DemoControlLabel>Justify</DemoControlLabel>
+          <Radio.Group value={justify} onChange={(val) => setJustify(val as AlignmentValue)}>
+            <Radio value="start">start</Radio>
+            <Radio value="center">center</Radio>
+            <Radio value="end">end</Radio>
+            <Radio value="stretch">stretch</Radio>
+          </Radio.Group>
+        </div>
+        <div>
+          <DemoControlLabel>Align</DemoControlLabel>
+          <Radio.Group value={align} onChange={(val) => setAlign(val as AlignmentValue)}>
+            <Radio value="start">start</Radio>
+            <Radio value="center">center</Radio>
+            <Radio value="end">end</Radio>
+            <Radio value="stretch">stretch</Radio>
+          </Radio.Group>
+        </div>
+      </DemoControls>
+      <Grid
+        columns={3}
+        gap="sm"
+        align={align}
+        justify={justify}
+        style={{
+          minHeight: 180,
+          padding: 16,
+          border: '1px dashed var(--ty-color-border)',
+          borderRadius: 12,
+          background: 'color-mix(in srgb, var(--ty-color-primary) 4%, transparent)',
+        }}>
+        <div
+          style={getDemoBlockStyle('strong', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          {justify}
+        </div>
+        <div
+          style={getDemoBlockStyle('base', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          {align}
+        </div>
+        <div
+          style={getDemoBlockStyle('soft', 64, {
+            minHeight: 64,
+            width: justify === 'stretch' ? undefined : 92,
+            justifyContent: 'center',
+          })}>
+          items
+        </div>
+      </Grid>
+    </div>
   );
 }

packages/react/src/grid/demo/AutoFit.tsx

@@ -1,17 +1,72 @@
 import React from 'react';
-import { Card, Grid } from '@tiny-design/react';
+import { Checkbox, Grid, Slider } from '@tiny-design/react';
+import type { SliderValue } from '@tiny-design/react';
+import { DemoBlock, DemoControlLabel, DemoControls } from './shared';
 
 export default function AutoFitDemo() {
+  const [minColumnWidth, setMinColumnWidth] = React.useState(180);
+  const [autoFit, setAutoFit] = React.useState(true);
+  const [count, setCount] = React.useState(5);
+
   return (
-    <Grid minColumnWidth={180} gap="sm">
-      {['Analytics', 'Revenue', 'Orders', 'Retention', 'Conversion'].map((title) => (
-        <Card key={title}>
-          <Card.Content>
-            <strong>{title}</strong>
-            <div style={{ marginTop: 8, color: 'var(--ty-color-text-secondary)' }}>Auto-fit cards without manual breakpoints.</div>
-          </Card.Content>
-        </Card>
-      ))}
-    </Grid>
+    <div>
+      <DemoControls>
+        <div>
+          <DemoControlLabel>Min column width: {minColumnWidth}px</DemoControlLabel>
+          <Slider
+            min={140}
+            max={260}
+            step={20}
+            value={minColumnWidth}
+            onChange={(val: SliderValue) => {
+              if (typeof val === 'number') {
+                setMinColumnWidth(val);
+              }
+            }}
+          />
+        </div>
+        <div>
+          <DemoControlLabel>Item count: {count}</DemoControlLabel>
+          <Slider
+            min={4}
+            max={8}
+            step={1}
+            value={count}
+            onChange={(val: SliderValue) => {
+              if (typeof val === 'number') {
+                setCount(val);
+              }
+            }}
+          />
+        </div>
+        <div>
+          <Checkbox
+            checked={autoFit}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAutoFit(e.currentTarget.checked)}>
+            Use auto-fit
+          </Checkbox>
+        </div>
+      </DemoControls>
+      <Grid minColumnWidth={minColumnWidth} autoFit={autoFit} gap="sm">
+        {[
+          ['Analytics', `${autoFit ? 'auto-fit' : 'auto-fill'} / ${minColumnWidth}px`],
+          ['Revenue', 'responsive tracks'],
+          ['Orders', 'reflow'],
+          ['Retention', 'no breakpoints'],
+          ['Conversion', 'fluid blocks'],
+          ['Traffic', 'auto placement'],
+          ['Pipeline', 'repeat tracks'],
+          ['Forecast', 'adaptive cells'],
+        ].slice(0, count).map(([title, detail], index) => (
+          <DemoBlock
+            key={title}
+            title={title}
+            detail={detail}
+            tone={index % 2 === 0 ? 'strong' : 'soft'}
+            minHeight={96}
+          />
+        ))}
+      </Grid>
+    </div>
   );
 }