@x33025/sveltely 0.1.10 → 0.1.11

package/dist/components/Library/Floating/Floating.svelte

@@ -359,7 +359,8 @@
 			'--sveltely-floating-inset: var(--sveltely-inset);',
 			`top: ${panelCoords.top}px;`,
 			`left: ${panelCoords.left}px;`,
-			`transform: ${panelTransform};`
+			`transform: ${panelTransform};`,
+			'box-shadow: var(--sveltely-shadow);'
 		];
 		if (computedPanelRadius) {
 			declarations.push(`border-radius: ${computedPanelRadius};`);

package/dist/components/Library/Grid/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Grid.svelte';
+export { default as GridItem } from './GridItem.svelte';

package/dist/components/Library/Grid/index.js

@@ -1 +1,2 @@
 export { default } from './Grid.svelte';
+export { default as GridItem } from './GridItem.svelte';

package/dist/components/Library/Sheet/Sheet.svelte

@@ -106,6 +106,7 @@
 	.sheet {
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
+		box-shadow: var(--sveltely-shadow);
 		padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);
 	}
 

package/dist/components/Library/TextEditor/TextEditor.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { textEditorStyle, type TextEditorProps } from '../../../style/text-editor';
+
+	type Props = {
+		value?: string;
+		rows?: number;
+		placeholder?: string;
+		spellcheck?: boolean;
+		autosize?: boolean;
+		className?: string;
+		onInput?: (event: Event) => void;
+		onKeyDown?: (event: KeyboardEvent) => void;
+		shouldFocus?: boolean;
+		focusPosition?: number | null;
+		onFocused?: () => void;
+	} & TextEditorProps;
+
+	let {
+		value = '',
+		rows = 1,
+		placeholder,
+		spellcheck,
+		autosize = false,
+		className = '',
+		onInput,
+		onKeyDown,
+		shouldFocus = false,
+		focusPosition = null,
+		onFocused,
+		textAlign
+	}: Props = $props();
+
+	let textarea: HTMLTextAreaElement | undefined;
+	const rootStyle = $derived(textEditorStyle({ textAlign }, 'text-editor'));
+
+	const resize = () => {
+		if (!autosize || !textarea) return;
+		textarea.style.height = 'auto';
+		textarea.style.height = `${textarea.scrollHeight}px`;
+	};
+
+	$effect(() => {
+		value;
+		resize();
+	});
+
+	$effect(() => {
+		if (!shouldFocus || !textarea) return;
+		requestAnimationFrame(() => {
+			if (!textarea) return;
+			textarea.focus();
+			const position = focusPosition ?? textarea.value.length;
+			textarea.setSelectionRange(position, position);
+			onFocused?.();
+		});
+	});
+</script>
+
+<textarea
+	bind:this={textarea}
+	{value}
+	{rows}
+	{placeholder}
+	{spellcheck}
+	style={rootStyle}
+	oninput={(event) => {
+		resize();
+		onInput?.(event);
+	}}
+	onkeydown={(event) => onKeyDown?.(event)}
+	class={`text-editor ${className}`}
+></textarea>
+
+<style>
+	.text-editor {
+		width: 100%;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		outline: none;
+		overflow: hidden;
+		padding: 0;
+		resize: none;
+		text-align: var(--text-editor-text-align, start);
+	}
+
+	.text-editor:where([rows='1']) {
+		min-height: 1lh;
+	}
+</style>

package/dist/components/Library/TextEditor/TextEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type TextEditorProps } from '../../../style/text-editor';
+type Props = {
+    value?: string;
+    rows?: number;
+    placeholder?: string;
+    spellcheck?: boolean;
+    autosize?: boolean;
+    className?: string;
+    onInput?: (event: Event) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    shouldFocus?: boolean;
+    focusPosition?: number | null;
+    onFocused?: () => void;
+} & TextEditorProps;
+declare const TextEditor: import("svelte").Component<Props, {}, "">;
+type TextEditor = ReturnType<typeof TextEditor>;
+export default TextEditor;

package/dist/components/Library/TextEditor/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TextEditor.svelte';

package/dist/components/Library/TextEditor/index.js

@@ -0,0 +1 @@
+export { default } from './TextEditor.svelte';

package/dist/components/Local/ComponentGrid.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
 	import Grid from '../Library/Grid';
-	import GridItem from '../Library/GridItem';
+	import { GridItem } from '../Library/Grid';
 	import HeroCard from './HeroCard.svelte';
 
 	type DemoEntry = {

package/dist/index.d.ts

@@ -16,11 +16,12 @@ 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 * from './components/Library/ArticleEditor';
 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 { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
@@ -41,6 +42,7 @@ 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 TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';

package/dist/index.js

@@ -8,11 +8,12 @@ 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 * from './components/Library/ArticleEditor';
 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 { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
@@ -32,6 +33,7 @@ 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 TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';

package/dist/style/index.css

@@ -20,6 +20,7 @@
 		--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-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
 		--sveltely-border-radius-nested: clamp(
 			0px,
 			calc(var(--sveltely-border-radius) - var(--sveltely-nested-inset)),

package/dist/style.css

@@ -15,8 +15,11 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -27,12 +30,19 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
+    --leading-tight: 1.25;
     --radius-md: 0.375rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -236,6 +246,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .block {
     display: block;
   }
@@ -260,6 +273,9 @@
   .inline-grid {
     display: inline-grid;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -328,6 +344,9 @@
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -346,6 +365,12 @@
   .resize {
     resize: both;
   }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -385,6 +410,13 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -392,6 +424,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -419,6 +458,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-gray-200\/70 {
     border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -428,9 +475,18 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
+  .border-zinc-200\/70 {
+    border-color: color-mix(in srgb, oklch(92% 0.004 286.32) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-zinc-200) 70%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -440,6 +496,9 @@
   .bg-zinc-200 {
     background-color: var(--color-zinc-200);
   }
+  .bg-zinc-950 {
+    background-color: var(--color-zinc-950);
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -452,31 +511,89 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .text-left {
     text-align: left;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
+  .text-\[16px\] {
+    font-size: 16px;
+  }
+  .text-\[17px\] {
+    font-size: 17px;
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
+  .leading-8 {
+    --tw-leading: calc(var(--spacing) * 8);
+    line-height: calc(var(--spacing) * 8);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -485,6 +602,14 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[-0\.03em\] {
+    --tw-tracking: -0.03em;
+    letter-spacing: -0.03em;
+  }
+  .tracking-\[-0\.025em\] {
+    --tw-tracking: -0.025em;
+    letter-spacing: -0.025em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -508,6 +633,15 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-zinc-100 {
+    color: var(--color-zinc-100);
+  }
+  .text-zinc-700 {
+    color: var(--color-zinc-700);
+  }
+  .text-zinc-950 {
+    color: var(--color-zinc-950);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -575,6 +709,104 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .marker\:text-\[15px\] {
+    & *::marker {
+      font-size: 15px;
+    }
+    &::marker {
+      font-size: 15px;
+    }
+    & *::-webkit-details-marker {
+      font-size: 15px;
+    }
+    &::-webkit-details-marker {
+      font-size: 15px;
+    }
+  }
+  .marker\:leading-7 {
+    & *::marker {
+      --tw-leading: calc(var(--spacing) * 7);
+      line-height: calc(var(--spacing) * 7);
+    }
+    &::marker {
+      --tw-leading: calc(var(--spacing) * 7);
+      line-height: calc(var(--spacing) * 7);
+    }
+    & *::-webkit-details-marker {
+      --tw-leading: calc(var(--spacing) * 7);
+      line-height: calc(var(--spacing) * 7);
+    }
+    &::-webkit-details-marker {
+      --tw-leading: calc(var(--spacing) * 7);
+      line-height: calc(var(--spacing) * 7);
+    }
+  }
+  .marker\:font-medium {
+    & *::marker {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+    &::marker {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+    & *::-webkit-details-marker {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+    &::-webkit-details-marker {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .marker\:text-zinc-500 {
+    & *::marker {
+      color: var(--color-zinc-500);
+    }
+    &::marker {
+      color: var(--color-zinc-500);
+    }
+    & *::-webkit-details-marker {
+      color: var(--color-zinc-500);
+    }
+    &::-webkit-details-marker {
+      color: var(--color-zinc-500);
+    }
+  }
+  .marker\:tabular-nums {
+    & *::marker {
+      --tw-numeric-spacing: tabular-nums;
+      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    }
+    &::marker {
+      --tw-numeric-spacing: tabular-nums;
+      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    }
+    & *::-webkit-details-marker {
+      --tw-numeric-spacing: tabular-nums;
+      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    }
+    &::-webkit-details-marker {
+      --tw-numeric-spacing: tabular-nums;
+      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    }
+  }
+  .placeholder\:text-zinc-300 {
+    &::placeholder {
+      color: var(--color-zinc-300);
+    }
+  }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
+  .last\:pb-0 {
+    &:last-child {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -638,6 +870,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       --sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
     }
+    --sveltely-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
     --sveltely-border-radius-nested: clamp(
 			0px,
 			calc(var(--sveltely-border-radius) - var(--sveltely-nested-inset)),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Library/GridItem/index.d.ts

@@ -1 +0,0 @@
-export { default } from './GridItem.svelte';

package/dist/components/Library/GridItem/index.js

@@ -1 +0,0 @@
-export { default } from './GridItem.svelte';