@x33025/sveltely 0.1.1 → 0.1.2

package/dist/components/Local/HeroCard.svelte

@@ -1,61 +1,51 @@
 <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="white"
+	paddingX={1.5}
+	paddingY={1.5}
+>
 	{#if title}
 		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
 		{#if description}
 			<p class="max-w-3xl text-sm text-zinc-600">{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/index.d.ts

@@ -2,21 +2,43 @@ 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';
@@ -24,3 +46,4 @@ export { default as AsyncButton } from './components/Library/AsyncButton';
 export { default as SearchInput } from './components/Library/SearchInput';
 export { default as ScrollView } from './components/Library/ScrollView';
 export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export { default as VStack } from './components/Library/VStack';

package/dist/index.js

@@ -1,21 +1,37 @@
 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';
@@ -23,3 +39,4 @@ export { default as AsyncButton } from './components/Library/AsyncButton';
 export { default as SearchInput } from './components/Library/SearchInput';
 export { default as ScrollView } from './components/Library/ScrollView';
 export { default as TokenSearchInput } from './components/Library/TokenSearchInput';
+export { default as VStack } from './components/Library/VStack';

package/dist/style/index.css

@@ -7,7 +7,7 @@
 	: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;
@@ -48,6 +48,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 +96,26 @@
 		@apply flex min-h-0 min-w-0 flex-row;
 	}
 
-	.spacer {
-		flex: 1 1 auto;
+	.button,
+	.async-button,
+	.segmented-picker,
+	.switch,
+	.checkbox,
+	.search-input,
+	.token-search-input,
+	.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 {};

package/dist/style/layout.js

@@ -0,0 +1,128 @@
+export const LayoutSize = {
+    full: 'full',
+    fit: 'fit'
+};
+export const LayoutOverflow = {
+    visible: 'visible',
+    hidden: 'hidden',
+    clip: 'clip',
+    auto: 'auto',
+    scroll: 'scroll'
+};
+export const LayoutAlignment = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+export const LayoutJustification = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    between: 'between',
+    around: 'around',
+    evenly: 'evenly'
+};
+const LAYOUT_PROP_KEYS = new Set([
+    'size',
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'grow',
+    'shrink',
+    'basis',
+    'border',
+    'overflow',
+    'align',
+    'justify'
+]);
+const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+const toSize = (value) => {
+    if (value === 'full')
+        return '100%';
+    if (value === 'fit')
+        return 'fit-content';
+    return toRem(value);
+};
+const pushDeclaration = (declarations, name, value) => {
+    const resolved = toRem(value);
+    if (resolved === undefined)
+        return;
+    declarations.push(`${name}: ${resolved};`);
+};
+const pushFlexValue = (declarations, name, value) => {
+    if (value === undefined)
+        return;
+    declarations.push(`${name}: ${value === true ? 1 : value === false ? 0 : value};`);
+};
+const alignValues = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+const justifyValues = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly'
+};
+export const extractLayoutProps = (props) => {
+    const layoutProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (LAYOUT_PROP_KEYS.has(key)) {
+            layoutProps[key] = value;
+            continue;
+        }
+        restProps[key] = value;
+    }
+    return {
+        layoutProps,
+        restProps
+    };
+};
+export const layoutStyle = (styles) => {
+    if (!styles)
+        return '';
+    const declarations = [];
+    const resolvedSize = toSize(styles.size);
+    if (resolvedSize !== undefined) {
+        declarations.push(`width: ${resolvedSize};`, `height: ${resolvedSize};`);
+    }
+    pushDeclaration(declarations, 'width', styles.width);
+    pushDeclaration(declarations, 'height', styles.height);
+    pushDeclaration(declarations, 'min-width', styles.minWidth);
+    pushDeclaration(declarations, 'min-height', styles.minHeight);
+    pushDeclaration(declarations, 'max-width', styles.maxWidth);
+    pushDeclaration(declarations, 'max-height', styles.maxHeight);
+    pushFlexValue(declarations, 'flex-grow', styles.grow);
+    pushFlexValue(declarations, 'flex-shrink', styles.shrink);
+    pushDeclaration(declarations, 'flex-basis', styles.basis);
+    if (styles.border === true) {
+        declarations.push('border: 1px solid var(--sveltely-border-color);');
+    }
+    else if (typeof styles.border === 'string') {
+        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
+            ? styles.border
+            : `1px solid ${styles.border}`;
+        declarations.push(`border: ${borderValue};`);
+    }
+    if (styles.overflow !== undefined) {
+        declarations.push(`overflow: ${styles.overflow};`);
+    }
+    if (styles.align !== undefined) {
+        declarations.push(`align-items: ${alignValues[styles.align]};`);
+    }
+    if (styles.justify !== undefined) {
+        declarations.push(`justify-content: ${justifyValues[styles.justify]};`);
+    }
+    return declarations.join(' ');
+};

package/dist/style/media.d.ts

@@ -0,0 +1,12 @@
+export declare const ImageFit: {
+    readonly contain: "contain";
+    readonly cover: "cover";
+};
+export declare const ImageLoading: {
+    readonly eager: "eager";
+    readonly lazy: "lazy";
+};
+export type ImageFitValue = (typeof ImageFit)[keyof typeof ImageFit];
+export type ImageLoadingValue = (typeof ImageLoading)[keyof typeof ImageLoading];
+export type ImageFit = ImageFitValue;
+export type ImageLoading = ImageLoadingValue;

package/dist/style/media.js

@@ -0,0 +1,8 @@
+export const ImageFit = {
+    contain: 'contain',
+    cover: 'cover'
+};
+export const ImageLoading = {
+    eager: 'eager',
+    lazy: 'lazy'
+};

package/dist/style/scroll.d.ts

@@ -0,0 +1,7 @@
+export declare const ScrollAxis: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+    readonly both: "both";
+};
+export type ScrollAxisValue = (typeof ScrollAxis)[keyof typeof ScrollAxis];
+export type ScrollAxis = ScrollAxisValue;

package/dist/style/scroll.js

@@ -0,0 +1,5 @@
+export const ScrollAxis = {
+    vertical: 'vertical',
+    horizontal: 'horizontal',
+    both: 'both'
+};

package/dist/style/text-editor.d.ts

@@ -0,0 +1,34 @@
+export declare const TextAlignment: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly start: "start";
+    readonly end: "end";
+};
+export type TextAlignmentValue = (typeof TextAlignment)[keyof typeof TextAlignment];
+export type TextAlignment = TextAlignmentValue;
+export declare const TextInputMode: {
+    readonly none: "none";
+    readonly text: "text";
+    readonly tel: "tel";
+    readonly url: "url";
+    readonly email: "email";
+    readonly numeric: "numeric";
+    readonly decimal: "decimal";
+    readonly search: "search";
+};
+export declare const TextFieldType: {
+    readonly text: "text";
+    readonly email: "email";
+    readonly password: "password";
+    readonly url: "url";
+    readonly tel: "tel";
+};
+export type TextInputModeValue = (typeof TextInputMode)[keyof typeof TextInputMode];
+export type TextFieldTypeValue = (typeof TextFieldType)[keyof typeof TextFieldType];
+export type TextInputMode = TextInputModeValue;
+export type TextFieldType = TextFieldTypeValue;
+export type TextEditorProps = {
+    textAlign?: TextAlignment;
+};
+export declare const textEditorStyle: (props?: TextEditorProps, prefix?: string) => string;

package/dist/style/text-editor.js

@@ -0,0 +1,29 @@
+export const TextAlignment = {
+    left: 'left',
+    center: 'center',
+    right: 'right',
+    start: 'start',
+    end: 'end'
+};
+export const TextInputMode = {
+    none: 'none',
+    text: 'text',
+    tel: 'tel',
+    url: 'url',
+    email: 'email',
+    numeric: 'numeric',
+    decimal: 'decimal',
+    search: 'search'
+};
+export const TextFieldType = {
+    text: 'text',
+    email: 'email',
+    password: 'password',
+    url: 'url',
+    tel: 'tel'
+};
+export const textEditorStyle = (props, prefix = 'text-field') => {
+    if (!props?.textAlign)
+        return '';
+    return `--${prefix}-text-align: ${props.textAlign};`;
+};