@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Local/StyleControls.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import Slider from '../Library/Slider';
+
+	type Props = {
+		fontSize?: number;
+		borderRadius?: number;
+		paddingX?: number;
+		paddingY?: number;
+		gap?: number;
+		inset?: number;
+		borderColor?: string;
+		primaryColor?: string;
+		activeColor?: string;
+		inactiveColor?: string;
+	};
+
+	let {
+		fontSize = $bindable(1),
+		borderRadius = $bindable(0.75),
+		paddingX = $bindable(0.75),
+		paddingY = $bindable(0.75),
+		gap = $bindable(0.5),
+		inset = $bindable(0.25),
+		borderColor = $bindable('#e4e4e7'),
+		primaryColor = $bindable('#18181b'),
+		activeColor = $bindable('#18181b'),
+		inactiveColor = $bindable('#f4f4f5')
+	}: 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-2">
+		<div class="hstack items-center justify-between gap-3 text-zinc-700">
+			<span class="font-medium">Font size</span>
+			<span class="text-zinc-500">{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">
+			<span class="font-medium">Border radius</span>
+			<span class="text-zinc-500">{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">
+			<span class="font-medium">Padding X</span>
+			<span class="text-zinc-500">{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">
+			<span class="font-medium">Padding Y</span>
+			<span class="text-zinc-500">{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">
+			<span class="font-medium">Gap</span>
+			<span class="text-zinc-500">{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">
+			<span class="font-medium">Inset</span>
+			<span class="text-zinc-500">{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>
+		<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">
+			<span class="font-medium">Primary color</span>
+			<span class="text-zinc-500">{primaryColor}</span>
+		</div>
+		<input
+			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">Active color</span>
+			<span class="text-zinc-500">{activeColor}</span>
+		</div>
+		<input
+			bind:value={activeColor}
+			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">Inactive color</span>
+			<span class="text-zinc-500">{inactiveColor}</span>
+		</div>
+		<input
+			bind:value={inactiveColor}
+			type="color"
+			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+		/>
+	</div>
+</div>

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

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

package/dist/index.d.ts

@@ -1,17 +1,26 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
-export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
-export { default as GlowEffect } from './components/GlowEffect.svelte';
-export { default as NavigationStack } from './components/NavigationStack';
-export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
-export { default as Pagination } from './components/Pagination.svelte';
-export { default as Slider } from './components/Slider.svelte';
-export { default as Sheet } from './components/Sheet';
-export { default as Spinner } from './components/Spinner.svelte';
-export { default as TextShimmer } from './components/TextShimmer.svelte';
-export { default as Tooltip } from './components/Tooltip.svelte';
-export { default as Popover } from './components/Popover';
-export { default as ChipInput } from './components/ChipInput.svelte';
-export { default as AsyncButton } from './components/AsyncButton.svelte';
-export { default as SearchInput } from './components/SearchInput.svelte';
-export { default as TokenSearchInput } from './components/TokenSearchInput.svelte';
+export { tooltip } from './actions/tooltip';
+export type { TooltipOptions } from './actions/tooltip';
+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 NavigationStack } from './components/Library/NavigationStack';
+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 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 Spinner } from './components/Library/Spinner';
+export { default as TextShimmer } from './components/Library/TextShimmer';
+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 ScrollView } from './components/Library/ScrollView';
+export { default as TokenSearchInput } from './components/Library/TokenSearchInput';

package/dist/index.js

@@ -1,17 +1,25 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
-export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
-export { default as GlowEffect } from './components/GlowEffect.svelte';
-export { default as NavigationStack } from './components/NavigationStack';
-export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
-export { default as Pagination } from './components/Pagination.svelte';
-export { default as Slider } from './components/Slider.svelte';
-export { default as Sheet } from './components/Sheet';
-export { default as Spinner } from './components/Spinner.svelte';
-export { default as TextShimmer } from './components/TextShimmer.svelte';
-export { default as Tooltip } from './components/Tooltip.svelte';
-export { default as Popover } from './components/Popover';
-export { default as ChipInput } from './components/ChipInput.svelte';
-export { default as AsyncButton } from './components/AsyncButton.svelte';
-export { default as SearchInput } from './components/SearchInput.svelte';
-export { default as TokenSearchInput } from './components/TokenSearchInput.svelte';
+export { tooltip } from './actions/tooltip';
+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 NavigationStack } from './components/Library/NavigationStack';
+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 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 Spinner } from './components/Library/Spinner';
+export { default as TextShimmer } from './components/Library/TextShimmer';
+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 ScrollView } from './components/Library/ScrollView';
+export { default as TokenSearchInput } from './components/Library/TokenSearchInput';

package/dist/style/index.css

@@ -4,9 +4,70 @@
 @custom-variant error-text (&[data-error='true'] .async-button-text);
 
 @layer base {
+	:root {
+		--sveltely-font-size: 1rem;
+		--sveltely-border-radius: 0.75rem;
+		--sveltely-inset: 0px;
+		--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-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(
+			0px,
+			calc(var(--sveltely-border-radius) - var(--sveltely-nested-inset)),
+			var(--sveltely-border-radius)
+		);
+		--sveltely-border-color: var(--color-zinc-200);
+	}
+
 	html,
 	body {
 		@apply size-full overflow-hidden;
+		-webkit-user-select: none;
+		user-select: none;
+	}
+
+	*,
+	*::before,
+	*::after {
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	input,
+	textarea,
+	select,
+	button {
+		-webkit-appearance: none;
+		appearance: none;
+		background-clip: padding-box;
+	}
+
+	input::-webkit-search-decoration,
+	input::-webkit-search-cancel-button,
+	input::-webkit-search-results-button,
+	input::-webkit-search-results-decoration {
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus,
+	textarea:-webkit-autofill,
+	textarea:-webkit-autofill:hover,
+	textarea:-webkit-autofill:focus,
+	select:-webkit-autofill,
+	select:-webkit-autofill:hover,
+	select:-webkit-autofill:focus {
+		-webkit-text-fill-color: inherit;
+		box-shadow: 0 0 0 1000px transparent inset;
+		transition: background-color 99999s ease-out 0s;
 	}
 }
 
@@ -36,331 +97,6 @@
 	}
 }
 
-@layer components {
-	.chip-input {
-		@apply gap-1;
-	}
-
-	.chip {
-		@apply rounded-full border border-transparent bg-zinc-100 px-2 py-1 text-xs whitespace-nowrap text-black;
-	}
-
-	.chip-selected {
-		@apply border-zinc-300;
-	}
-
-	.chip:hover,
-	.chip-hovered {
-		@apply bg-zinc-200;
-	}
-
-	.chip-input-field:hover {
-		@apply bg-zinc-100;
-	}
-
-	.chip-input-disabled {
-		@apply pointer-events-none;
-	}
-
-	.chip-input-disabled .chip {
-		@apply cursor-not-allowed opacity-50;
-	}
-
-	.chip-input-disabled .chip:hover {
-		@apply bg-zinc-100;
-	}
-
-	.chip-input-action {
-		@apply h-7 w-7 p-0;
-	}
-
-	.pagination-button {
-		@apply rounded-full bg-zinc-100 p-2;
-	}
-
-	.pagination-button:disabled {
-		@apply cursor-not-allowed opacity-50;
-	}
-
-	.pagination-input {
-		@apply rounded-full bg-zinc-100 px-3 py-1 outline-none;
-	}
-
-	.pagination {
-		@apply inline-flex w-fit gap-4;
-	}
-
-	.sidebar-toggle {
-		@apply rounded p-1.5 hover:bg-zinc-100;
-	}
-
-	.navigation-stack-sidebar-left {
-		@apply border-r border-zinc-200;
-	}
-
-	.navigation-stack-sidebar-right {
-		@apply border-l border-zinc-200;
-	}
-
-	.navigation-stack-sidebar-inner {
-		@apply bg-zinc-50;
-	}
-
-	.navigation-stack-toolbar {
-		@apply border-b border-zinc-200 bg-white;
-	}
-
-	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-left,
-	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-right {
-		@apply border-transparent;
-	}
-
-	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-inner {
-		@apply bg-transparent;
-	}
-
-	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {
-		@apply border-transparent bg-transparent;
-	}
-
-	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar-content {
-		@apply bg-transparent;
-	}
-
-	.navigation-stack-toolbar-shell[data-chrome='false'] .sidebar-toggle {
-		@apply hover:bg-transparent;
-	}
-
-	.popover {
-		@apply border border-gray-200 bg-white p-1 shadow-md;
-	}
-
-	.popover-item {
-		@apply rounded-md px-2 py-1;
-	}
-	.popover-item:hover {
-		@apply bg-zinc-200;
-	}
-	.sheet {
-		@apply rounded-md bg-white p-4 shadow-md;
-	}
-
-	.sheet-overlay {
-		@apply bg-black/20 backdrop-blur-sm;
-	}
-
-	.slider {
-		appearance: none;
-		height: 6px;
-		border-radius: 9999px;
-		background: transparent;
-		outline: none;
-		cursor: pointer;
-	}
-
-	.slider:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--color-gray-900) 35%, white);
-		outline-offset: 4px;
-	}
-
-	.slider:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.slider::-webkit-slider-runnable-track {
-		height: 6px;
-		border-radius: 9999px;
-		background: linear-gradient(
-			to right,
-			var(--color-zinc-900) 0%,
-			var(--color-zinc-900) var(--slider-pct),
-			var(--color-zinc-300) var(--slider-pct),
-			var(--color-zinc-300) 100%
-		);
-	}
-
-	.slider::-webkit-slider-thumb {
-		appearance: none;
-		width: 16px;
-		height: 16px;
-		border-radius: 9999px;
-		border: 2px solid var(--color-white);
-		background: var(--color-zinc-900);
-		box-shadow: var(--shadow-md);
-		margin-top: -5px;
-	}
-
-	.slider::-moz-range-track {
-		height: 6px;
-		border: none;
-		border-radius: 9999px;
-		background: var(--color-zinc-300);
-	}
-
-	.slider::-moz-range-progress {
-		height: 6px;
-		border: none;
-		border-radius: 9999px;
-		background: var(--color-zinc-900);
-	}
-
-	.slider::-moz-range-thumb {
-		width: 16px;
-		height: 16px;
-		border-radius: 9999px;
-		border: 2px solid var(--color-white);
-		background: var(--color-zinc-900);
-		box-shadow: var(--shadow-md);
-	}
-
-	.tooltip {
-		@apply rounded-sm bg-black px-2 py-1 text-xs whitespace-nowrap text-white;
-	}
-
-	.tooltip::before {
-		content: '';
-		position: absolute;
-		width: 8px;
-		height: 8px;
-		background: #000;
-		transform: rotate(45deg);
-		z-index: -1;
-	}
-
-	/* Arrow points down (tooltip is above trigger) */
-	.tooltip[data-anchor='top']::before {
-		bottom: -4px;
-		left: 50%;
-		margin-left: -4px;
-	}
-
-	/* Arrow points up (tooltip is below trigger) */
-	.tooltip[data-anchor='bottom']::before {
-		top: -4px;
-		left: 50%;
-		margin-left: -4px;
-	}
-
-	/* Arrow points right (tooltip is to the left of trigger) */
-	.tooltip[data-anchor='leading']::before {
-		right: -4px;
-		top: 50%;
-		margin-top: -4px;
-	}
-
-	/* Arrow points left (tooltip is to the right of trigger) */
-	.tooltip[data-anchor='trailing']::before {
-		left: -4px;
-		top: 50%;
-		margin-top: -4px;
-	}
-
-	.segmented-picker {
-		@apply gap-1 rounded-full bg-zinc-100 p-1;
-	}
-
-	.segmented-picker-disabled {
-		@apply opacity-50 grayscale;
-	}
-
-	.segmented-picker-button {
-		@apply rounded-full px-2.5 py-1;
-	}
-
-	.segmented-picker-button-active {
-		@apply bg-white shadow-xs;
-	}
-
-	.segmented-picker-button-disabled {
-		@apply cursor-not-allowed text-zinc-400;
-		pointer-events: none;
-	}
-
-	.segmented-picker-button-disabled-selected {
-		@apply bg-zinc-200 text-zinc-400 shadow-none;
-	}
-
-	.search-input {
-		@apply inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-xs transition-colors;
-	}
-
-	.search-input:focus-within {
-		@apply border-zinc-400;
-	}
-
-	.search-input[data-disabled='true'] {
-		@apply cursor-not-allowed opacity-60;
-	}
-
-	.search-input-icon {
-		@apply shrink-0 text-zinc-500;
-	}
-
-	.search-input-field {
-		@apply min-w-0 flex-1 bg-transparent outline-none;
-	}
-
-	.search-input-field::-webkit-search-cancel-button {
-		appearance: none;
-	}
-
-	.search-input-confirm {
-		@apply shrink-0 text-xs font-medium tracking-[0.18em] text-zinc-500 uppercase;
-	}
-
-	.token-search-input {
-		@apply min-w-0 rounded-full border border-zinc-200 text-sm text-zinc-900 transition-colors outline-none;
-		@apply px-3 py-[7px];
-	}
-
-	.token-search-input:focus-within {
-		@apply border-zinc-400;
-	}
-
-	.token-search-input-has-tokens {
-		@apply p-1;
-	}
-
-	.token-search-input[data-disabled='true'] {
-		@apply cursor-not-allowed opacity-60;
-	}
-
-	.token-search-input-icon {
-		@apply shrink-0 text-zinc-500;
-	}
-
-	.token-search-input-field {
-		@apply field-sizing-content min-w-0 flex-1 bg-transparent outline-none;
-	}
-
-	.token-search-input-field::-webkit-search-cancel-button {
-		appearance: none;
-	}
-
-	.token-search-input-token {
-		@apply inline-flex shrink-0 items-center gap-1 rounded-full border border-zinc-200 bg-zinc-100 px-2 py-0.5 text-zinc-700 transition-colors;
-	}
-
-	.token-search-input-token:hover:not(:disabled) {
-		@apply border-zinc-300 bg-zinc-200;
-	}
-
-	.token-search-input-token:disabled {
-		@apply cursor-not-allowed opacity-60;
-	}
-
-	.token-search-input-confirm {
-		@apply shrink-0 text-xs font-medium tracking-[0.18em] text-zinc-500 uppercase;
-	}
-}
-
-@layer theme {
-	:root {
-		--navigation-stack-sidebar-width: 16rem;
-	}
-}
-
 .hstack > .divider {
 	width: 1px;
 	align-self: stretch;

package/dist/style/surface.d.ts

@@ -0,0 +1,17 @@
+export type StyleProps = {
+    fontSize?: number | string;
+    paddingX?: number | string;
+    paddingY?: number | string;
+    gap?: number | string;
+    borderRadius?: number | string;
+    inset?: number | string;
+    background?: string;
+    borderColor?: string;
+    color?: string;
+};
+export type SurfaceStyles = StyleProps;
+export declare const extractStyleProps: <T extends Record<string, unknown>>(props: T) => {
+    styleProps: Partial<StyleProps>;
+    restProps: Record<string, unknown>;
+};
+export declare const surfaceStyle: (styles?: SurfaceStyles, prefix?: string) => string;

package/dist/style/surface.js

@@ -0,0 +1,54 @@
+const STYLE_PROP_KEYS = new Set([
+    'fontSize',
+    'paddingX',
+    'paddingY',
+    'gap',
+    'borderRadius',
+    'inset',
+    'background',
+    'borderColor',
+    'color'
+]);
+const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+const pushVar = (declarations, name, value) => {
+    const resolved = toRem(value);
+    if (resolved === undefined)
+        return;
+    declarations.push(`${name}: ${resolved};`);
+};
+export const extractStyleProps = (props) => {
+    const styleProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (STYLE_PROP_KEYS.has(key)) {
+            styleProps[key] = value;
+            continue;
+        }
+        restProps[key] = value;
+    }
+    return {
+        styleProps,
+        restProps
+    };
+};
+export const surfaceStyle = (styles, prefix = 'surface') => {
+    if (!styles)
+        return '';
+    const declarations = [];
+    pushVar(declarations, `--${prefix}-font-size`, styles.fontSize);
+    pushVar(declarations, `--${prefix}-padding-x`, styles.paddingX);
+    pushVar(declarations, `--${prefix}-padding-y`, styles.paddingY);
+    pushVar(declarations, `--${prefix}-gap`, styles.gap);
+    pushVar(declarations, `--${prefix}-border-radius`, styles.borderRadius);
+    pushVar(declarations, `--${prefix}-inset`, styles.inset);
+    if (styles.background !== undefined) {
+        declarations.push(`background: ${styles.background};`);
+    }
+    if (styles.borderColor !== undefined) {
+        declarations.push(`border-color: ${styles.borderColor};`);
+    }
+    if (styles.color !== undefined) {
+        declarations.push(`color: ${styles.color};`);
+    }
+    return declarations.join(' ');
+};