@x33025/sveltely 0.1.1 → 0.1.3

package/dist/components/Library/WheelPicker/WheelPicker.svelte

@@ -6,7 +6,8 @@
 	type Props = {
 		columns: WheelColumnData[];
 		height?: number | string;
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	const toCssLength = (value: number | string | undefined) =>
 		value === undefined ? undefined : typeof value === 'number' ? `${value}px` : value;
@@ -23,7 +24,6 @@
 		const heightStyle = `--wheel-picker-height: ${resolvedHeight};`;
 		return rootStyle ? `${rootStyle} ${heightStyle}` : heightStyle;
 	});
-
 </script>
 
 <div class="wheel-picker vstack" style={pickerStyle} {...props}>
@@ -47,11 +47,7 @@
 				class="wheel-picker-column"
 				style={`--wheel-picker-column-flex: ${column.options.length <= 3 ? 0.85 : 1};`}
 			>
-				<WheelColumn
-					options={column.options}
-					value={column.value}
-					onChange={column.onChange}
-				/>
+				<WheelColumn options={column.options} value={column.value} onChange={column.onChange} />
 			</div>
 		{/each}
 	</div>
@@ -99,7 +95,7 @@
 		height: var(--wheel-picker-option-height);
 		transform: translateY(-50%);
 		border-radius: var(--sveltely-border-radius);
-		background: color-mix(in oklab, var(--color-zinc-100) 85%, white);
+		background: color-mix(in oklab, var(--sveltely-inactive-color) 85%, white);
 		pointer-events: none;
 		z-index: 0;
 	}
@@ -109,6 +105,6 @@
 		font-size: calc(var(--wheel-picker-font-size) * 0.75);
 		line-height: 1;
 		font-weight: 500;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 </style>

package/dist/components/Local/ComponentGrid.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
+	import Grid from '../Library/Grid';
+	import GridItem from '../Library/GridItem';
 	import HeroCard from './HeroCard.svelte';
 
 	type DemoEntry = {
@@ -17,38 +19,20 @@
 	let { demos }: Props = $props();
 </script>
 
-<div
-	class="component-grid grid gap-4 overflow-auto md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
-	style="padding: calc(var(--sveltely-padding-y) * 2) calc(var(--sveltely-padding-x) * 2);"
+<Grid
+	columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
+	autoRows={14}
+	gap={1}
+	paddingX="calc(var(--sveltely-padding-x) * 2)"
+	paddingY="calc(var(--sveltely-padding-y) * 2)"
+	overflow="auto"
 >
 	{#each demos as entry}
 		{@const DemoComponent = entry.component}
-		<HeroCard
-			title={entry.name}
-			description={entry.description}
-			columnSpan={entry.columnSpan ?? 1}
-			rowSpan={entry.rowSpan ?? 1}
-		>
-			<DemoComponent />
-		</HeroCard>
+		<GridItem columnSpan={entry.columnSpan ?? 1} rowSpan={entry.rowSpan ?? 1}>
+			<HeroCard title={entry.name} description={entry.description}>
+				<DemoComponent />
+			</HeroCard>
+		</GridItem>
 	{/each}
-</div>
-
-<style>
-	.component-grid :global(.hero-card) {
-		--sveltely-border-width: 1px;
-		min-height: 14rem;
-		border: 1px solid var(--sveltely-border-color);
-		border-radius: 0.75rem;
-		align-items: stretch;
-	}
-
-	.component-grid :global(.hero-card h1) {
-		font-size: 1rem;
-		line-height: 1.5rem;
-	}
-
-	.component-grid :global(.hero-card p) {
-		max-width: none;
-	}
-</style>
+</Grid>

package/dist/components/Local/HeroCard.svelte

@@ -1,61 +1,53 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import HStack from '../Library/HStack';
+	import VStack from '../Library/VStack';
 
 	type Props = {
 		title?: string;
 		description?: string;
 		children?: Snippet;
-		columnSpan?: 1 | 2;
-		rowSpan?: 1 | 2;
 	};
 
-	let {
-		title,
-		description = '',
-		children,
-		columnSpan = 1,
-		rowSpan = 1
-	}: Props = $props();
+	let { title, description = '', children }: Props = $props();
 </script>
 
-<div class="hero-card vstack shrink-0 gap-2" data-column-span={columnSpan} data-row-span={rowSpan}>
+<VStack
+	minHeight={14}
+	height="100%"
+	shrink={0}
+	align="stretch"
+	gap={0.5}
+	border="1px solid var(--sveltely-border-color)"
+	borderRadius={0.75}
+	background="var(--sveltely-background-color)"
+	paddingX={1.5}
+	paddingY={1.5}
+>
 	{#if title}
-		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
+		<h1 class="text-3xl font-semibold tracking-tight text-[var(--sveltely-primary-color)]">
+			{title}
+		</h1>
 		{#if description}
-			<p class="max-w-3xl text-sm text-zinc-600">{description}</p>
+			<p class="max-w-3xl text-sm text-[var(--sveltely-secondary-color)]">{description}</p>
 		{/if}
 	{/if}
-	<div
-		class="hero-card-content center flex"
-	>
+	<VStack grow shrink overflow="hidden" paddingX={0} paddingY={0}>
 		{#if children}
-			{@render children()}
+			<HStack minWidth="min-content" minHeight="100%" align="center" justify="center">
+				{@render children()}
+			</HStack>
 		{/if}
-	</div>
-</div>
+	</VStack>
+</VStack>
 
 <style>
-	.hero-card {
-		--hero-card-inset-x: calc(var(--sveltely-padding-x) * 2);
-		--hero-card-inset-y: calc(var(--sveltely-padding-y) * 2);
-		--hero-card-inset: max(var(--hero-card-inset-x), var(--hero-card-inset-y));
-		--sveltely-nested-inset: var(--hero-card-inset);
-		background: white;
-		padding: 1.5rem 1.5rem;
+	h1 {
+		font-size: 1rem;
+		line-height: 1.5rem;
 	}
 
-	.hero-card-content {
-		min-height: 0;
-		flex: 1 1 auto;
-	}
-
-	@media (min-width: 48rem) {
-		.hero-card[data-column-span='2'] {
-			grid-column: span 2;
-		}
-
-		.hero-card[data-row-span='2'] {
-			grid-row: span 2;
-		}
+	p {
+		max-width: none;
 	}
 </style>

package/dist/components/Local/HeroCard.svelte.d.ts

@@ -3,8 +3,6 @@ type Props = {
     title?: string;
     description?: string;
     children?: Snippet;
-    columnSpan?: 1 | 2;
-    rowSpan?: 1 | 2;
 };
 declare const HeroCard: import("svelte").Component<Props, {}, "">;
 type HeroCard = ReturnType<typeof HeroCard>;

package/dist/components/Local/StyleControls.svelte

@@ -10,8 +10,10 @@
 		inset?: number;
 		borderColor?: string;
 		primaryColor?: string;
+		secondaryColor?: string;
 		activeColor?: string;
 		inactiveColor?: string;
+		backgroundColor?: string;
 	};
 
 	let {
@@ -23,81 +25,110 @@
 		inset = $bindable(0.25),
 		borderColor = $bindable('#e4e4e7'),
 		primaryColor = $bindable('#18181b'),
+		secondaryColor = $bindable('#71717a'),
 		activeColor = $bindable('#18181b'),
-		inactiveColor = $bindable('#f4f4f5')
+		inactiveColor = $bindable('#18181b'),
+		backgroundColor = $bindable('#ffffff')
 	}: Props = $props();
 </script>
 
-<div class="vstack gap-3 text-sm text-zinc-700" style="--sveltely-border-radius: 0.75rem;">
-	<div class="font-semibold tracking-wide text-zinc-500 uppercase">Controls</div>
+<div
+	class="vstack gap-3 text-sm text-[var(--sveltely-primary-color)]"
+	style="--sveltely-border-radius: 0.75rem;"
+>
+	<div class="font-semibold tracking-wide text-[var(--sveltely-secondary-color)] uppercase">
+		Controls
+	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Font size</span>
-			<span class="text-zinc-500">{fontSize.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{fontSize.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={fontSize} min={0.5} max={2} step={0.05} />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Border radius</span>
-			<span class="text-zinc-500">{borderRadius.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{borderRadius.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={borderRadius} min={0} max={3} step={0.05} />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding X</span>
-			<span class="text-zinc-500">{paddingX.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingX.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={paddingX} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding Y</span>
-			<span class="text-zinc-500">{paddingY.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingY.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={paddingY} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Gap</span>
-			<span class="text-zinc-500">{gap.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{gap.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={gap} min={0} max={2} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Inset</span>
-			<span class="text-zinc-500">{inset.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{inset.toFixed(2)}rem</span>
 		</div>
 		<Slider bind:value={inset} min={0} max={1} step="any" />
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
-			<span class="font-medium">Border color</span>
-			<span class="text-zinc-500">{borderColor}</span>
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Primary color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{primaryColor}</span>
 		</div>
 		<input
-			bind:value={borderColor}
+			bind:value={primaryColor}
 			type="color"
 			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
-			<span class="font-medium">Primary color</span>
-			<span class="text-zinc-500">{primaryColor}</span>
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Secondary color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{secondaryColor}</span>
 		</div>
 		<input
-			bind:value={primaryColor}
+			bind:value={secondaryColor}
+			type="color"
+			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+		/>
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Background color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{backgroundColor}</span>
+		</div>
+		<input
+			bind:value={backgroundColor}
+			type="color"
+			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+		/>
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Border color</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{borderColor}</span>
+		</div>
+		<input
+			bind:value={borderColor}
 			type="color"
 			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Active color</span>
-			<span class="text-zinc-500">{activeColor}</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{activeColor}</span>
 		</div>
 		<input
 			bind:value={activeColor}
@@ -106,9 +137,9 @@
 		/>
 	</div>
 	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Inactive color</span>
-			<span class="text-zinc-500">{inactiveColor}</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{inactiveColor}</span>
 		</div>
 		<input
 			bind:value={inactiveColor}

package/dist/components/Local/StyleControls.svelte.d.ts

@@ -7,9 +7,11 @@ type Props = {
     inset?: number;
     borderColor?: string;
     primaryColor?: string;
+    secondaryColor?: string;
     activeColor?: string;
     inactiveColor?: string;
+    backgroundColor?: string;
 };
-declare const StyleControls: import("svelte").Component<Props, {}, "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "primaryColor" | "activeColor" | "inactiveColor">;
+declare const StyleControls: import("svelte").Component<Props, {}, "backgroundColor" | "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "primaryColor" | "secondaryColor" | "activeColor" | "inactiveColor">;
 type StyleControls = ReturnType<typeof StyleControls>;
 export default StyleControls;

package/dist/index.d.ts

@@ -2,25 +2,49 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export type { TooltipOptions } from './actions/tooltip';
+export { LayoutAlignment, LayoutJustification, LayoutOverflow, LayoutSize } from './style/layout';
+export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutOverflowValue, LayoutProps, LayoutSizeValue } from './style/layout';
+export { LabelOrientation } from './style/label';
+export type { LabelOrientationValue } from './style/label';
+export { ImageFit, ImageLoading } from './style/media';
+export type { ImageFitValue, ImageLoadingValue } from './style/media';
+export { ScrollAxis } from './style/scroll';
+export type { ScrollAxisValue } from './style/scroll';
+export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
+export type { TextAlignmentValue, TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export { default as Button } from './components/Library/Button';
 export { default as Checkbox } from './components/Library/Checkbox';
 export { default as GlowEffect } from './components/Library/GlowEffect';
+export { default as Grid } from './components/Library/Grid';
+export { default as GridItem } from './components/Library/GridItem';
+export { default as HStack } from './components/Library/HStack';
+export { default as Image } from './components/Library/Image';
+export { default as ImageMask } from './components/Library/ImageMask';
+export type { ImageMaskValue } from './components/Library/ImageMask';
+export { default as Label } from './components/Library/Label';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';
 export { default as Dropdown } from './components/Library/Dropdown';
+export { default as Divider } from './components/Library/Divider';
+export { default as ForEach } from './components/Library/ForEach';
 export { default as TimePicker } from './components/Library/TimePicker';
 export { default as WheelPicker } from './components/Library/WheelPicker';
 export { default as Slider } from './components/Library/Slider';
 export { default as Switch } from './components/Library/Switch';
 export { default as Sheet } from './components/Library/Sheet';
+export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';
 export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
-export { default as SearchInput } from './components/Library/SearchInput';
+export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export type { ScrollGeometry } from './components/Library/ScrollView';
+export { default as TokenSearchField } from './components/Library/TokenSearchField';
+export { default as VStack } from './components/Library/VStack';

package/dist/index.js

@@ -1,25 +1,42 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
+export { LayoutAlignment, LayoutJustification, LayoutOverflow, LayoutSize } from './style/layout';
+export { LabelOrientation } from './style/label';
+export { ImageFit, ImageLoading } from './style/media';
+export { ScrollAxis } from './style/scroll';
+export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export { default as Button } from './components/Library/Button';
 export { default as Checkbox } from './components/Library/Checkbox';
 export { default as GlowEffect } from './components/Library/GlowEffect';
+export { default as Grid } from './components/Library/Grid';
+export { default as GridItem } from './components/Library/GridItem';
+export { default as HStack } from './components/Library/HStack';
+export { default as Image } from './components/Library/Image';
+export { default as ImageMask } from './components/Library/ImageMask';
+export { default as Label } from './components/Library/Label';
 export { default as NavigationStack } from './components/Library/NavigationStack';
+export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';
 export { default as Pagination } from './components/Library/Pagination';
 export { default as Dropdown } from './components/Library/Dropdown';
+export { default as Divider } from './components/Library/Divider';
+export { default as ForEach } from './components/Library/ForEach';
 export { default as TimePicker } from './components/Library/TimePicker';
 export { default as WheelPicker } from './components/Library/WheelPicker';
 export { default as Slider } from './components/Library/Slider';
 export { default as Switch } from './components/Library/Switch';
 export { default as Sheet } from './components/Library/Sheet';
+export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';
 export { default as Calendar } from './components/Library/Calendar';
 export { default as AsyncButton } from './components/Library/AsyncButton';
-export { default as SearchInput } from './components/Library/SearchInput';
+export { default as SearchField } from './components/Library/SearchField';
 export { default as ScrollView } from './components/Library/ScrollView';
-export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export { default as TokenSearchField } from './components/Library/TokenSearchField';
+export { default as VStack } from './components/Library/VStack';

package/dist/style/index.css

@@ -7,15 +7,17 @@
 	:root {
 		--sveltely-font-size: 1rem;
 		--sveltely-border-radius: 0.75rem;
-		--sveltely-inset: 0px;
+		--sveltely-inset: 0.25rem;
 		--sveltely-nested-inset: var(--sveltely-inset);
 		--sveltely-padding-x: 0.75rem;
 		--sveltely-padding-y: 0.75rem;
 		--sveltely-gap: 0.5rem;
 		--sveltely-primary-color: var(--color-zinc-900);
-		--sveltely-active-color: var(--sveltely-primary-color);
-		--sveltely-inactive-color: var(--color-zinc-100);
-		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-primary-color) 5%, transparent);
+		--sveltely-secondary-color: var(--color-zinc-500);
+		--sveltely-active-color: var(--color-zinc-900);
+		--sveltely-inactive-color: var(--sveltely-active-color);
+		--sveltely-background-color: white;
+		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
 		--sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
 		--sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
 		--sveltely-border-radius-nested: clamp(
@@ -29,6 +31,8 @@
 	html,
 	body {
 		@apply size-full overflow-hidden;
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
 		-webkit-user-select: none;
 		user-select: none;
 	}
@@ -48,6 +52,14 @@
 		background-clip: padding-box;
 	}
 
+	button {
+		cursor: pointer;
+	}
+
+	button:disabled {
+		cursor: not-allowed;
+	}
+
 	input::-webkit-search-decoration,
 	input::-webkit-search-cancel-button,
 	input::-webkit-search-results-button,
@@ -88,23 +100,26 @@
 		@apply flex min-h-0 min-w-0 flex-row;
 	}
 
-	.spacer {
-		flex: 1 1 auto;
+	.button,
+	.async-button,
+	.segmented-picker,
+	.switch,
+	.checkbox,
+	.search-field,
+	.token-search-field,
+	.chip-input,
+	.dropdown,
+	.pagination,
+	.calendar,
+	.wheel-picker,
+	.time-picker,
+	.slider,
+	.spinner,
+	.image,
+	.image-mask,
+	.text-shimmer {
+		flex-shrink: 0;
 	}
-
-	.divider {
-		@apply bg-gray-200/70;
-	}
-}
-
-.hstack > .divider {
-	width: 1px;
-	align-self: stretch;
-}
-
-.vstack > .divider {
-	height: 1px;
-	width: 100%;
 }
 
 .overflow-auto > .vstack,

package/dist/style/label.d.ts

@@ -0,0 +1,6 @@
+export declare const LabelOrientation: {
+    readonly top: "top";
+    readonly left: "left";
+};
+export type LabelOrientationValue = (typeof LabelOrientation)[keyof typeof LabelOrientation];
+export type LabelOrientation = LabelOrientationValue;

package/dist/style/label.js

@@ -0,0 +1,4 @@
+export const LabelOrientation = {
+    top: 'top',
+    left: 'left'
+};

package/dist/style/layout.d.ts

@@ -0,0 +1,57 @@
+type StringWithAutocomplete<T extends string> = T | (string & {});
+export declare const LayoutSize: {
+    readonly full: "full";
+    readonly fit: "fit";
+};
+export declare const LayoutOverflow: {
+    readonly visible: "visible";
+    readonly hidden: "hidden";
+    readonly clip: "clip";
+    readonly auto: "auto";
+    readonly scroll: "scroll";
+};
+export declare const LayoutAlignment: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+    readonly stretch: "stretch";
+    readonly baseline: "baseline";
+};
+export declare const LayoutJustification: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+    readonly between: "between";
+    readonly around: "around";
+    readonly evenly: "evenly";
+};
+export type LayoutSizeValue = (typeof LayoutSize)[keyof typeof LayoutSize];
+export type LayoutOverflowValue = (typeof LayoutOverflow)[keyof typeof LayoutOverflow];
+export type LayoutAlignmentValue = (typeof LayoutAlignment)[keyof typeof LayoutAlignment];
+export type LayoutJustificationValue = (typeof LayoutJustification)[keyof typeof LayoutJustification];
+export type LayoutSize = StringWithAutocomplete<LayoutSizeValue> | number;
+export type LayoutOverflow = LayoutOverflowValue;
+export type LayoutAlignment = LayoutAlignmentValue;
+export type LayoutJustification = LayoutJustificationValue;
+export type LayoutProps = {
+    size?: LayoutSize;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    grow?: boolean | number;
+    shrink?: boolean | number;
+    basis?: number | string;
+    border?: boolean | string;
+    overflow?: LayoutOverflow;
+    align?: LayoutAlignment;
+    justify?: LayoutJustification;
+};
+export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
+    layoutProps: Partial<LayoutProps>;
+    restProps: Record<string, unknown>;
+};
+export declare const layoutStyle: (styles?: LayoutProps) => string;
+export {};