@ansh-ui/vue 0.2.0

package/dist/layout.d.cts

@@ -0,0 +1,729 @@
+import * as vue from 'vue';
+import { PropType, VNode } from 'vue';
+import { S as SlotContent } from './utils-IKPG3zcC.cjs';
+export { A as AppShell, N as NavItem, a as NavSection, S as Sidebar } from './sidebar-CQqEmpid.cjs';
+
+/**
+ * Layout primitives — the Vue counterpart of `@ansh-ui/react`'s layout components.
+ *
+ * These exist because every application rebuilds them, badly. The rebuilt versions hardcode gaps in
+ * pixels, so they don't respond to a density setting; they use margins, so they collapse
+ * unpredictably; and they don't handle the RTL case.
+ *
+ * Everything here takes a **token key**, not a raw value: `:gap="4"` means `--ansh-space-4`, so a
+ * layout is guaranteed to sit on the spacing scale. Passing an arbitrary string is still possible for
+ * the genuine one-off, but the type nudges toward the scale first.
+ *
+ * Every component here declares only its own props and renders with `inheritAttrs: false` plus a
+ * manual `class`/`style`/rest spread, so native attributes not declared as props (`id`, `data-*`, a
+ * `@click` listener) fall through onto the rendered element automatically — the same convention
+ * `Input` and `PopoverContent` use elsewhere in this package.
+ */
+/** A key into the spacing scale, or a raw CSS length for the rare exception. */
+type SpaceToken = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | (string & {});
+/**
+ * A CSS `align-items`/`justify-content` value, typed as a plain string rather than
+ * `CSSProperties['alignItems']`/`['justifyContent']`.
+ *
+ * The indexed-access csstype type is structurally correct but not **portable**: embedding it in an
+ * exported component's props makes TypeScript's declaration emitter need to name an internal
+ * `csstype` package type by its pnpm store path, which a consumer's project can't resolve and fails
+ * the build with TS2742 ("cannot be named without a reference to .pnpm/csstype@.../csstype"). A
+ * plain string loses autocomplete for the handful of valid values; the runtime behaviour — the
+ * string flows straight into the style property — is identical.
+ */
+type FlexAlign = string;
+interface StackProps {
+    as?: string;
+    /** Default `'vertical'` — the direction that needs a helper more often. */
+    direction?: 'horizontal' | 'vertical';
+    gap?: SpaceToken;
+    align?: FlexAlign;
+    justify?: FlexAlign;
+    wrap?: boolean;
+    /** Grow to fill the cross axis. */
+    stretch?: boolean;
+    /** Insert a hairline divider between children. */
+    divide?: boolean;
+}
+/**
+ * One-dimensional flex layout.
+ *
+ * ```vue
+ * <Stack direction="horizontal" :gap="3" align="center">
+ *   <Avatar :src="user.avatar" :name="user.name" />
+ *   <Stack :gap="0.5">
+ *     <strong>{{ user.name }}</strong>
+ *     <Text tone="secondary">{{ user.email }}</Text>
+ *   </Stack>
+ * </Stack>
+ * ```
+ */
+declare const Stack: vue.DefineComponent<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    direction: "horizontal" | "vertical";
+    gap: SpaceToken;
+    wrap: boolean;
+    align: string;
+    stretch: boolean;
+    justify: string;
+    divide: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Horizontal `Stack`, for readability at call sites. */
+declare const HStack: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    gap: SpaceToken;
+    wrap: boolean;
+    align: string;
+    stretch: boolean;
+    justify: string;
+    divide: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Vertical `Stack`, for symmetry with `HStack`. */
+declare const VStack: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stretch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    divide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    gap: SpaceToken;
+    wrap: boolean;
+    align: string;
+    stretch: boolean;
+    justify: string;
+    divide: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface GridProps {
+    as?: string;
+    /** Fixed column count, or `'auto'` for a responsive `auto-fill` track. */
+    columns?: number | 'auto';
+    /** Minimum column width when `columns="auto"`. Default `'16rem'`. */
+    minColumnWidth?: string;
+    gap?: SpaceToken;
+    /** Row gap, when it should differ from the column gap. */
+    rowGap?: SpaceToken;
+    align?: FlexAlign;
+}
+/**
+ * Two-dimensional layout.
+ *
+ * `columns="auto"` uses `repeat(auto-fill, minmax(min(N, 100%), 1fr))`. The inner `min()` is what
+ * stops the grid overflowing on a phone: without it, a 16rem minimum on a 15rem-wide viewport
+ * produces a track wider than the screen and a horizontal scrollbar.
+ */
+declare const Grid: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    columns: {
+        type: PropType<number | "auto">;
+        default: string;
+    };
+    minColumnWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    rowGap: {
+        type: PropType<SpaceToken>;
+        default: undefined;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    columns: {
+        type: PropType<number | "auto">;
+        default: string;
+    };
+    minColumnWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    gap: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+    rowGap: {
+        type: PropType<SpaceToken>;
+        default: undefined;
+    };
+    align: {
+        type: PropType<FlexAlign>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    gap: SpaceToken;
+    align: string;
+    columns: number | "auto";
+    minColumnWidth: string;
+    rowGap: SpaceToken;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface GridItemProps {
+    as?: string;
+    /** Columns to span. `'full'` spans the whole row. */
+    span?: number | 'full';
+    rowSpan?: number;
+}
+declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    span: {
+        type: PropType<number | "full">;
+        default: undefined;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    span: {
+        type: PropType<number | "full">;
+        default: undefined;
+    };
+    rowSpan: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    span: number | "full";
+    rowSpan: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface ContainerProps {
+    as?: string;
+    /** Max content width. Default `'lg'` (72rem). */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Horizontal padding. Default `6`. */
+    padding?: SpaceToken;
+}
+/** Centred, width-constrained page content. */
+declare const Container: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+        default: string;
+    };
+    padding: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+        default: string;
+    };
+    padding: {
+        type: PropType<SpaceToken>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    size: "full" | "sm" | "md" | "lg" | "xl";
+    as: string;
+    padding: SpaceToken;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label rendered in the middle of the rule. */
+    label?: SlotContent;
+}
+/**
+ * A rule.
+ *
+ * With a label it becomes a labelled separator — the "or continue with" divider on a sign-in form.
+ * `role="separator"` is set only when there's no label; with one, it's a heading-like element and
+ * announcing it as a separator loses the text.
+ *
+ * Renders a plain `<div>` regardless of what `as` a caller might pass, matching
+ * `@ansh-ui/react`'s `Divider` — which declares `as` on its props type via `BaseProps` but never
+ * actually reads it, always rendering a literal `<div>`. Not declaring `as` here reproduces that
+ * quirk exactly: an `as` attribute would simply fall through as an inert HTML attribute, same as it
+ * does in React.
+ */
+declare const Divider: vue.DefineComponent<vue.ExtractPropTypes<{
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    label: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    label: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    label: SlotContent;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface SpacerProps {
+    size?: SpaceToken;
+    /** Grow to absorb free space in a flex container. */
+    grow?: boolean;
+}
+/** Explicit empty space. `grow` pushes siblings apart in a flex row. */
+declare const Spacer: vue.DefineComponent<vue.ExtractPropTypes<{
+    size: {
+        type: PropType<SpaceToken>;
+        default: undefined;
+    };
+    grow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    size: {
+        type: PropType<SpaceToken>;
+        default: undefined;
+    };
+    grow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SpaceToken;
+    grow: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface CenterProps {
+    as?: string;
+}
+/** Centre a child on both axes. */
+declare const Center: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface AspectRatioProps {
+    as?: string;
+    /** Width ÷ height. `16 / 9` reads better than `1.777`. Default `16 / 9`. */
+    ratio?: number;
+}
+/**
+ * Reserve space at a fixed aspect ratio.
+ *
+ * Uses the `aspect-ratio` property rather than the padding-top hack. The reserved space is what
+ * matters: an image that loads without it shifts everything below, which is a Cumulative Layout
+ * Shift penalty and the most common cause of a failing Core Web Vitals score.
+ */
+declare const AspectRatio: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    ratio: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface ScrollAreaProps {
+    as?: string;
+    /** Max height before scrolling starts. */
+    maxHeight?: string;
+    axis?: 'y' | 'x' | 'both';
+    /** Fade the content at the scrollable edges. Default `true`. */
+    fade?: boolean;
+}
+/**
+ * A scroll container with styled scrollbars and edge fades.
+ *
+ * The native scrollbar is kept — a JavaScript-rendered one breaks keyboard scrolling, mobile
+ * momentum, and the OS "scroll bar is always visible" accessibility setting. It is only *styled*,
+ * via `scrollbar-width`/`scrollbar-color` with a `::-webkit-scrollbar` fallback.
+ *
+ * The edge fade is a mask that appears only when there is more content in that direction. It is
+ * driven by `animation-timeline: scroll()` where supported, so it costs nothing on the main thread
+ * and degrades to no fade where it isn't.
+ */
+declare const ScrollArea: vue.DefineComponent<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    axis: {
+        type: PropType<"y" | "x" | "both">;
+        default: string;
+    };
+    fade: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    axis: {
+        type: PropType<"y" | "x" | "both">;
+        default: string;
+    };
+    fade: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+    fade: boolean;
+    axis: "y" | "x" | "both";
+    maxHeight: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * A two-pane split with a draggable divider — the Vue counterpart of `@ansh-ui/react`'s `Resizable`.
+ *
+ * The layout every IDE, mail client and admin console needs, and the one most often shipped as
+ * mouse-only. The handle here is a real `role="separator"` with `aria-valuenow`, and arrow keys move
+ * it in 2% steps — WAI-ARIA calls this a window splitter and it is a documented pattern, not an
+ * invention.
+ *
+ * Sizes are percentages rather than pixels so the split survives a window resize proportionally.
+ * Dragging writes to a CSS custom property directly, bypassing Vue's renderer: a re-render per
+ * pointer move makes the drag feel heavy on a complex page, and the value is only committed to state
+ * on release.
+ *
+ * `size`/`update:size` follow this package's controlled-prop convention (see `Popover`'s
+ * `open`/`update:open`), so `v-model:size` works for the controlled case; `onSizeChange` from the
+ * React version becomes the `update:size` emit.
+ */
+interface ResizableProps {
+    direction?: 'horizontal' | 'vertical';
+    /** First pane's size as a percentage, `0`–`100`. Default `50`. */
+    defaultSize?: number;
+    size?: number;
+    /** Clamp, as percentages. Defaults `10` and `90`. */
+    minSize?: number;
+    maxSize?: number;
+    /** Snap points in percent, e.g. `[25, 50, 75]`. Within 3% the handle snaps. */
+    snapPoints?: readonly number[];
+    /** Accessible name for the handle — "Resize sidebar", not "Resize". */
+    label?: string;
+}
+declare const Resizable: vue.DefineComponent<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    defaultSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    snapPoints: {
+        type: PropType<readonly number[]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:size"[], "update:size", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    defaultSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    snapPoints: {
+        type: PropType<readonly number[]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:size"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: number;
+    label: string;
+    direction: "horizontal" | "vertical";
+    defaultSize: number;
+    minSize: number;
+    maxSize: number;
+    snapPoints: readonly number[];
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AspectRatio, type AspectRatioProps, Center, type CenterProps, Container, type ContainerProps, Divider, type DividerProps, Grid, GridItem, type GridItemProps, type GridProps, HStack, Resizable, type ResizableProps, ScrollArea, type ScrollAreaProps, type SpaceToken, Spacer, type SpacerProps, Stack, type StackProps, VStack };