feat(ui): toggle component and more

[VanishMax]

Changeset:

• Add Toggle UI component – adapt it from ui-deprecated
• Add medium density – new density type introduced in the DEX Figma, implemented in at least Tabs component
• Add xxs Text style – new typography type with 11px font-size
• Improve the styles of Tabs component – add support for medium density

Check here: https://penumbra-ui-preview--pr1913-fix-tab-styles-tf62cbwe.web.app/

[changeset-bot]

🦋 Changeset detected

Latest commit: a4e36a3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@penumbra-zone/ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Visit the preview URL for this PR (updated for commit a4e36a3):

https://penumbra-ui-preview--pr1913-fix-tab-styles-tf62cbwe.web.app

_{(expires Tue, 26 Nov 2024 10:17:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1}

[grod220]

question: can't we do this?

export type Density = 'sparse' | 'medium' | 'compact';

export type DensityProps = {
  density: Density;
  children?: ReactNode;
};

[grod220]

though if we specifically need those names as a field, we could also do this:

export type DensityPropType =
  | { sparse: true; medium?: never; compact?: never }
  | { medium: true; sparse?: never; compact?: never }
  | { compact: true; sparse?: never; medium?: never };

export type DensityProps = DensityPropType & {
  children?: ReactNode;
};

[VanishMax]

Density and Text components initially had this style of props that is more neat: <Density compact/>, <Text body/>. I personally don't mind the union type but it is already a bit too late to change – so many components depend on a shorter syntax.

Changed the types to the version from your second comment