Add size examples & documentation

[FlyersPh9]

Changes

• Created code examples and added documentation for the following:
  • Autocomplete
  • ButtonGroup
  • Select
  • Slider
  • Table
• Added pre-existing Chip code example to Chip documentation.

Testing

• Added to demo pages.

[FlyersPh9]

Noticed that Select & NativeSelect are both documented within this page, so I didn't bother creating a NativeSelect.sizes.tsx.

[mayank99]

You can't use the same id for both sliders.

Suggest splitting this into two components (defined below and used in the default export), each with their own id.

[FlyersPh9]

Like this? 6f22da4

Should I do the same for Select.sizes.tsx?

stratakit/examples/mui/Select.sizes.tsx

Lines 14 to 17 in 6f22da4

	const smallId = React.useId();
	const smallLabel = "Favorite small animal:";
	const mediumId = React.useId();
	const mediumLabel = "Favorite medium animal:";

[mayank99]

Yes, that seems good, although I would keep the export default () => above the other two components (I think of it as frontloading the "big picture" view).

Doing the same in Select.sizes.tsx makes sense.

[FlyersPh9]

Moved default up in 7b9b0a4.
Did the same for Select in 883b3c7.

[mayank99]

I didn't know Table supported size="small". We should validate the design and make any adjustments (e.g. row heights and paddings) in another PR.

[FlyersPh9]

I swear it used to be dense instead of size for table, but I may be misremembering.

[GerardasB]

Should we add a size picker to this example (that defaults to "small") as it is not feasible to display multiple sizes at once?

[mayank99]

The default size is already shown elsewhere, so we could focus this on just the small size (and rename to Table.small.tsx).

[GerardasB]

Should the heading be renamed to ### Dense and only describe size="small"?

[mayank99]

Yeah, that could work. At least the wording should be adjusted to mention that the example only shows the small size.

[FlyersPh9]

Renamed documentation header & code sample, updated documentation in 83ea425.