feat(stack): add Stack component (#1963)

types/Stack/Stack.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+
+type RestProps = SvelteHTMLElements["svelte:element"];
+
+export interface StackProps extends RestProps {
+  /**
+   * Specify the gap between items in the stack.
+   * The scale maps to Carbon layout values.
+   * Alternatively, specify a custom value (e.g., "200px").
+   * @default 1
+   */
+  gap?: StackScale | string;
+
+  /**
+   * Specify the orientation of the stack.
+   * @default "vertical"
+   */
+  orientation?: "vertical" | "horizontal";
+
+  /**
+   * Specify the tag name
+   * @default "div"
+   */
+  tag?: keyof HTMLElementTagNameMap;
+
+  [key: `data-${string}`]: any;
+}
+
+export default class Stack extends SvelteComponentTyped<
+  StackProps,
+  Record<string, any>,
+  { default: {} }
+> {}

types/index.d.ts

@@ -113,6 +113,7 @@ export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPl
 export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte";
 export { default as Slider } from "./Slider/Slider.svelte";
 export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte";
+export { default as Stack } from "./Stack/Stack.svelte";
 export { default as StructuredList } from "./StructuredList/StructuredList.svelte";
 export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte";
 export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte";