fix: input styling and qa props (#1082)

Author: tenphi

.changeset/fix-textinput-style-extraction.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix style props like `width` being applied to inner `<input>` element instead of the wrapper in TextInput, NumberInput, SearchInput, PasswordInput, TextArea, and Switch components.

.changeset/qa-pascalcase.md

@@ -0,0 +1,8 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Standardize default `qa` (data-qa) values to PascalCase. Update selectors if you rely on these:
+
+- **FieldWrapper**: `Field_Message` → `FieldMessage`, `Field_Description` → `FieldDescription`
+- **Result**: `Result_Container` → `ResultContainer`

.cursor/rules/documentation.mdc

@@ -69,7 +69,10 @@ Customizes the [specific part] of the component.
 
 ### Style Properties
 
-These properties allow direct style application without using the `styles` prop: `width`, `height`.
+These properties allow direct style application without using the `styles` prop:
+
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
 
 ### Modifiers
 
@@ -169,7 +172,7 @@ This component supports all [Field properties](/field-properties.md) when used w
 - **Props List**: List all component-specific properties using the definition list format. Properties, types, defaults, and descriptions must match the `argTypes` defined in the corresponding `.stories.tsx` file. Format: `- **\`propName\`** \`type\` (default: \`value\`) — Description`
 - **Base Properties**: Link to `/docs/getting-started-base-properties--docs` instead of listing (unless `qa` has special behavior)
 - **Styling Properties**: Document `styles`/`*Styles` props. List sub-elements that can be overridden (check component's tasty styles)
-- **Style Properties**: List direct styling props (`width`, `height`, etc.) - see `src/tasty/styles/list.ts`
+- **Style Properties**: Managed by `pnpm audit-docs --fix-docs`. Groups props by category (Base, Position, Dimension, Block, Color, Text, Flow, Other). Do not edit manually.
 - **React Aria Properties**: Document any React Aria properties that need extra clarification
 
 ### Examples

.storybook/preview.jsx

@@ -31,6 +31,7 @@ export const parameters = {
           'Overview',
           'Usage',
           'Create Component',
+          'Utilities',
           'Base Properties',
           'Field Properties',
           'Complex Layout',

AGENTS.md

@@ -77,7 +77,7 @@ ComponentName/
 | `pnpm size` | Check bundle size limits |
 | `pnpm chromatic` | Visual regression tests |
 | `pnpm add-icons` | Add new icons from tabler |
-| `pnpm audit-docs` | Audit component API ↔ docs ↔ argTypes sync. Uses TS Compiler API for full type resolution. Options: `--component=Name` (single component), `--fix-stories` (auto-add/remove argTypes in `.stories.tsx`), `--json`, `--verbose`, `--all-props` |
+| `pnpm audit-docs` | Audit component API ↔ docs ↔ argTypes sync. Uses TS Compiler API for full type resolution. Options: `--component=Name` (single component), `--fix-stories` (auto-add/remove argTypes in `.stories.tsx`), `--fix-docs` (auto-update `### Style Properties` sections in `.docs.mdx`), `--json`, `--verbose`, `--all-props`. **Run after changing a component's API or adding a new component.** |
 
 ## Stack
 

docs/BaseProperties.md

@@ -63,7 +63,7 @@ Position and dimension styles: POSITION_STYLES, DIMENSION_STYLES, BLOCK_OUTER_ST
 ## Usage
 
 ```jsx
-<Button qa="submit-button" width="100%" padding="1x 2x">
+<Button qa="SubmitButton" width="100%" padding="1x 2x">
   Submit
 </Button>
 

docs/tasty

@@ -0,0 +1 @@
+../node_modules/@tenphi/tasty/docs