import { SvelteComponentTyped } from "svelte"; import type { HTMLAttributes } from "svelte/elements"; /** * The stack scale maps to the following `@carbon/layout` values: * - 0 --> 0 (no gap) * - 1 --> 0.125rem * - 2 --> 0.25rem * - 3 --> 0.5rem * - 4 --> 0.75rem * - 5 --> 1rem * - 6 --> 1.5rem * - 7 --> 2rem * - 8 --> 2.5rem * - 9 --> 3rem * - 10 --> 4rem * - 11 --> 5rem * - 12 --> 6rem * - 13 --> 10rem */ export type StackScale = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13; type $RestProps = HTMLAttributes; type $Props = { /** * Specify the gap between items in the stack. * The scale maps to Carbon layout values. * Use 0 to omit any gap class. * Alternatively, specify a custom value (e.g., "200px" or "1.5rem"). * Custom values *must* be a string. * @default 1 */ gap?: StackScale | string; /** * Specify the orientation of the stack. * @default "vertical" */ orientation?: "vertical" | "horizontal"; /** * Specify the cross-axis alignment of items in the stack. * @default "stretch" */ align?: "start" | "center" | "end" | "stretch" | "baseline"; /** * Specify the main-axis alignment of items in the stack. * @default "start" */ justify?: | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly"; /** * Specify how items wrap onto multiple lines. * Only applies to horizontal stacks that overflow their container. * @default "nowrap" */ wrap?: "nowrap" | "wrap" | "wrap-reverse"; /** * Set to `true` to use `display: inline-flex` instead of `display: flex`. * @default false */ inline?: boolean; /** * Specify the tag name. * @default "div" */ tag?: keyof HTMLElementTagNameMap; children?: (this: void) => void; [key: `data-${string}`]: unknown; }; export type StackProps = Omit<$RestProps, keyof $Props> & $Props; export default class Stack extends SvelteComponentTyped< StackProps, Record, { default: Record } > {}