@max-ts/svelte 1.10.0 → 1.10.2

package/dist/src/components/Drawer/types.d.ts

@@ -0,0 +1,26 @@
+import { WithElementRef, WithoutChildrenOrChild } from "../../types.js";
+import { Dialog } from "bits-ui";
+import { Snippet } from "svelte";
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/components/Drawer/types.d.ts
+type DrawerProps = Dialog.RootProps & {
+  notCloseable?: boolean;
+  shouldScaleBackground?: boolean;
+};
+type DrawerTriggerProps = Dialog.TriggerProps;
+type DrawerCloseProps = Dialog.CloseProps;
+type DrawerPortalProps = Dialog.PortalProps;
+type DrawerOverlayProps = Dialog.OverlayProps;
+type DrawerTitleProps = Dialog.TitleProps;
+type DrawerDescriptionProps = Dialog.DescriptionProps;
+type DrawerContentProps = WithoutChildrenOrChild<Dialog.ContentProps> & {
+  showCloseButton?: boolean;
+  swipeCloseThreshold?: number;
+  portalProps?: WithoutChildrenOrChild<DrawerPortalProps>;
+  children?: Snippet;
+};
+type DrawerHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+type DrawerFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+//#endregion
+export { DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPortalProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps };

package/dist/src/components/DropdownMenu/index.d.ts

@@ -0,0 +1,25 @@
+import CheckboxGroup from "./CheckboxGroup/CheckboxGroup.js";
+import CheckboxItem from "./CheckboxItem/CheckboxItem.js";
+import Portal from "./Portal/Portal.js";
+import Content from "./Content/Content.js";
+import DropdownMenu from "./DropdownMenu.js";
+import Group from "./Group/Group.js";
+import GroupHeading from "./GroupHeading/GroupHeading.js";
+import Item from "./Item/Item.js";
+import Label from "./Label/Label.js";
+import RadioGroup from "./RadioGroup/RadioGroup.js";
+import RadioItem from "./RadioItem/RadioItem.js";
+import Separator from "./Separator/Separator.js";
+import Shortcut from "./Shortcut/Shortcut.js";
+import Sub from "./Sub/Sub.js";
+import SubContent from "./SubContent/SubContent.js";
+import SubTrigger from "./SubTrigger/SubTrigger.js";
+import Trigger from "./Trigger/Trigger.js";
+import { DropdownMenuProps } from "./types.js";
+
+//#region src/components/DropdownMenu/index.d.ts
+declare namespace index_d_exports {
+  export { CheckboxGroup, CheckboxItem, Content, DropdownMenuProps, Group, GroupHeading, Item, Label, Portal, RadioGroup, RadioItem, DropdownMenu as Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger };
+}
+//#endregion
+export { index_d_exports };

package/dist/{components → src/components}/DropdownMenu/index.js

@@ -1,4 +1,4 @@
-import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
 import CheckboxGroup from "./CheckboxGroup/CheckboxGroup.js";
 import CheckboxItem from "./CheckboxItem/CheckboxItem.js";
 import Portal from "./Portal/Portal.js";

package/dist/src/components/DropdownMenu/types.d.ts

@@ -0,0 +1,6 @@
+import { DropdownMenu } from "bits-ui";
+
+//#region src/components/DropdownMenu/types.d.ts
+type DropdownMenuProps = DropdownMenu.RootProps;
+//#endregion
+export { DropdownMenuProps };

package/dist/src/components/Empty/index.d.ts

@@ -0,0 +1,14 @@
+import { EmptyMediaVariant } from "./types.js";
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/Empty/index.d.ts
+declare const Empty: {
+  Root: svelte_legacy0.LegacyComponentType;
+  Header: svelte_legacy0.LegacyComponentType;
+  Media: svelte_legacy0.LegacyComponentType;
+  Title: svelte_legacy0.LegacyComponentType;
+  Description: svelte_legacy0.LegacyComponentType;
+  Content: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { Empty };

package/dist/src/components/Empty/types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/components/Empty/types.d.ts
+type EmptyMediaVariant = 'default' | 'icon';
+//#endregion
+export { EmptyMediaVariant };

package/dist/{components → src/components}/Field/FieldError/FieldError.js

@@ -18,12 +18,11 @@ function FieldError($$anchor, $$props) {
 	]);
 	const hasContent = $.derived(() => {
 		if ($$props.children) return true;
-		if (!$$props.errors) return false;
-		if ($$props.errors.length === 1 && !$$props.errors[0]?.message) return false;
+		if (!$$props.errors?.length) return false;
 		return true;
 	});
 	const isMultipleErrors = $.derived(() => $$props.errors && $$props.errors.length > 1);
-	const singleErrorMessage = $.derived(() => $$props.errors && $$props.errors.length === 1 && $$props.errors[0]?.message);
+	const singleErrorMessage = $.derived(() => $$props.errors?.length === 1 ? $$props.errors[0] : void 0);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent_4 = ($$anchor) => {
@@ -55,11 +54,11 @@ function FieldError($$anchor, $$props) {
 					var li = root_6();
 					var text_1 = $.child(li, true);
 					$.reset(li);
-					$.template_effect(() => $.set_text(text_1, $.get(error).message));
+					$.template_effect(() => $.set_text(text_1, $.get(error)));
 					$.append($$anchor, li);
 				};
 				$.if(node_3, ($$render) => {
-					if ($.get(error)?.message) $$render(consequent_2);
+					if ($.get(error)) $$render(consequent_2);
 				});
 				$.append($$anchor, fragment_3);
 			});

package/dist/src/components/Field/index.d.ts

@@ -0,0 +1,18 @@
+import { FieldOrientation, FieldVariants } from "./types.js";
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/Field/index.d.ts
+declare const Field: {
+  Item: svelte_legacy0.LegacyComponentType;
+  Content: svelte_legacy0.LegacyComponentType;
+  Description: svelte_legacy0.LegacyComponentType;
+  Error: svelte_legacy0.LegacyComponentType;
+  Group: svelte_legacy0.LegacyComponentType;
+  Label: svelte_legacy0.LegacyComponentType;
+  Legend: svelte_legacy0.LegacyComponentType;
+  Separator: svelte_legacy0.LegacyComponentType;
+  Set: svelte_legacy0.LegacyComponentType;
+  Title: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { Field };

package/dist/src/components/Field/types.d.ts

@@ -0,0 +1,7 @@
+import { ComplexStyleRule } from "../../../node_modules/.pnpm/@vanilla-extract_css@1.18.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.js";
+
+//#region src/components/Field/types.d.ts
+type FieldOrientation = 'vertical' | 'horizontal' | 'responsive';
+type FieldVariants = Record<FieldOrientation, ComplexStyleRule>;
+//#endregion
+export { FieldOrientation, FieldVariants };

package/dist/src/components/Input/types.d.ts

@@ -0,0 +1,16 @@
+import { WithElementRef } from "../../types.js";
+import { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+
+//#region src/components/Input/types.d.ts
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type InputProps = WithElementRef<Omit<HTMLInputAttributes, 'type' | 'size'> & ({
+  type: 'file';
+  files?: FileList;
+} | {
+  type?: InputType;
+  files?: undefined;
+})> & {
+  size?: 'small' | 'medium' | 'large';
+};
+//#endregion
+export { InputProps, InputType };

package/dist/src/components/InputGroup/index.d.ts

@@ -0,0 +1,14 @@
+import { InputGroupAddonAlign, InputGroupButtonSize } from "./types.js";
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/InputGroup/index.d.ts
+declare const InputGroup: {
+  Root: svelte_legacy0.LegacyComponentType;
+  Addon: svelte_legacy0.LegacyComponentType;
+  Button: svelte_legacy0.LegacyComponentType;
+  Input: svelte_legacy0.LegacyComponentType;
+  Text: svelte_legacy0.LegacyComponentType;
+  Textarea: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { InputGroup };

package/dist/src/components/InputGroup/types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+
+//#region src/components/InputGroup/types.d.ts
+type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+type InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
+//#endregion
+export { InputGroupAddonAlign, InputGroupButtonSize };

package/dist/src/components/Item/index.d.ts

@@ -0,0 +1,18 @@
+import { ItemProps, ItemSize, ItemVariant } from "./types.js";
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/Item/index.d.ts
+declare const Item: {
+  Root: svelte_legacy0.LegacyComponentType;
+  Group: svelte_legacy0.LegacyComponentType;
+  Separator: svelte_legacy0.LegacyComponentType;
+  Header: svelte_legacy0.LegacyComponentType;
+  Footer: svelte_legacy0.LegacyComponentType;
+  Content: svelte_legacy0.LegacyComponentType;
+  Title: svelte_legacy0.LegacyComponentType;
+  Description: svelte_legacy0.LegacyComponentType;
+  Actions: svelte_legacy0.LegacyComponentType;
+  Media: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { Item };

package/dist/src/components/Item/types.d.ts

@@ -0,0 +1,16 @@
+import { WithElementRef } from "../../types.js";
+import { Snippet } from "svelte";
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/components/Item/types.d.ts
+type ItemVariant = 'default' | 'outline' | 'muted';
+type ItemSize = 'default' | 'small';
+interface ItemProps extends WithElementRef<HTMLAttributes<HTMLDivElement>> {
+  child?: Snippet<[{
+    props: Record<string, unknown>;
+  }]>;
+  variant?: ItemVariant;
+  size?: ItemSize;
+}
+//#endregion
+export { ItemProps, ItemSize, ItemVariant };

package/dist/src/components/Placeholder/index.d.ts

@@ -0,0 +1,2 @@
+import Placeholder from "./Placeholder.js";
+import { PlaceholderProps, PlaceholderSize } from "./types.js";

package/dist/src/components/Placeholder/types.d.ts

@@ -0,0 +1,15 @@
+import { Snippet } from "svelte";
+
+//#region src/components/Placeholder/types.d.ts
+type PlaceholderSize = 'small' | 'medium' | 'large';
+type PlaceholderProps = {
+  /** Название класса, применяется к корневому компоненту */class?: string; /** Ссылка на изображение */
+  imgSrc?: string; /** Описание изображения (атрибут alt) */
+  imgAlt?: string; /** Заголовок */
+  title: string; /** Описание */
+  description?: string; /** Действия */
+  actions?: Snippet<[]>; /** Задает общий размер компонента */
+  size?: PlaceholderSize;
+};
+//#endregion
+export { PlaceholderProps, PlaceholderSize };

package/dist/src/components/Popover/index.d.ts

@@ -0,0 +1,13 @@
+import { PopoverProps } from "./types.js";
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/Popover/index.d.ts
+declare const Popover: {
+  Root: svelte_legacy0.LegacyComponentType;
+  Content: svelte_legacy0.LegacyComponentType;
+  Trigger: svelte_legacy0.LegacyComponentType;
+  Close: svelte_legacy0.LegacyComponentType;
+  Portal: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { Popover };

package/dist/src/components/Popover/types.d.ts

@@ -0,0 +1,6 @@
+import { Popover } from "bits-ui";
+
+//#region src/components/Popover/types.d.ts
+type PopoverProps = Popover.RootProps;
+//#endregion
+export { PopoverProps };

package/dist/{components → src/components}/RangeInput/RangeInput.js

@@ -1,6 +1,6 @@
 import Typography from "../Typography/Typography.js";
-import { calculateSize } from "../../utils.js";
-import __default__ from "./styles.css.js";
+import { calculateSize } from "../../../utils.js";
+import { active, container, input, sizes, slider, text, track } from "./styles.css.js";
 import { formatNumber, parseFormattedNumber } from "./utils.js";
 import Slider from "../Slider/Slider.js";
 import "svelte/internal/disclose-version";
@@ -9,14 +9,13 @@ import * as $ from "svelte/internal/client";
 var root = $.from_html(`<div><!> <input type="text" inputmode="numeric" name="min"/> <!> <input type="text" inputmode="numeric" name="max"/> <!> <!></div>`);
 function RangeInput($$anchor, $$props) {
 	$.push($$props, true);
-	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), minValue = $.prop($$props, "minValue", 15), maxValue = $.prop($$props, "maxValue", 15), width = $.prop($$props, "width", 3, 180), step = $.prop($$props, "step", 3, 1), size = $.prop($$props, "size", 3, "medium"), ref = $.prop($$props, "ref", 15, null), restProps = $.rest_props($$props, [
+	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), value = $.prop($$props, "value", 15), width = $.prop($$props, "width", 3, 180), step = $.prop($$props, "step", 3, 1), size = $.prop($$props, "size", 3, "medium"), ref = $.prop($$props, "ref", 15, null), minInputId = $.prop($$props, "minInputId", 3, "range-input-min"), maxInputId = $.prop($$props, "maxInputId", 3, "range-input-max"), restProps = $.rest_props($$props, [
 		"$$slots",
 		"$$events",
 		"$$legacy",
 		"min",
 		"max",
-		"minValue",
-		"maxValue",
+		"value",
 		"width",
 		"step",
 		"unit",
@@ -24,49 +23,49 @@ function RangeInput($$anchor, $$props) {
 		"class",
 		"isActive",
 		"ref",
-		"onValueChange"
+		"onValueChange",
+		"onValueCommit",
+		"minInputId",
+		"maxInputId"
 	]);
 	let timerId;
 	const calculatedWidth = $.derived(() => calculateSize(width()));
-	let innerValue = $.state($.proxy([minValue() ?? min(), maxValue() ?? max()]));
-	let innerDisplayValue = $.derived(() => [formatNumber($.get(innerValue)[0]), formatNumber($.get(innerValue)[1])]);
-	$.user_effect(() => {
-		$.set(innerValue, [minValue() || min(), maxValue() || max()], true);
-	});
+	let innerMin = $.derived(() => formatNumber(value()?.[0] || min()));
+	let innerMax = $.derived(() => formatNumber(value()?.[1] || max()));
 	const adaptiveStep = $.derived(() => {
 		const range = max() - min();
 		return Math.max(step(), Math.ceil(range / 1e3));
 	});
 	function applyValues([newMin, newMax]) {
-		const clampedMin = Math.max(min(), Math.min(newMin, newMax));
-		const clampedMax = Math.min(max(), Math.max(newMax, newMin));
-		$.set(innerValue, [clampedMin, clampedMax], true);
-		minValue(clampedMin);
-		maxValue(clampedMax);
-		$$props.onValueChange?.([clampedMin, clampedMax]);
+		const newValue = [Math.max(min(), Math.min(newMin, newMax)), Math.min(max(), Math.max(newMax, newMin))];
+		value(newValue);
+		$$props.onValueChange?.(newValue);
 	}
 	function handleInput(e) {
 		clearTimeout(timerId);
 		timerId = setTimeout(() => {
 			const target = e.target;
-			let value = parseFormattedNumber(target.value.replace(/[^\d\s]/g, ""));
-			if (Number.isNaN(value)) value = target.name === "min" ? min() : max();
-			if (target.name === "min") applyValues([value, $.get(innerValue)[1]]);
-			else applyValues([$.get(innerValue)[0], value]);
+			let newValue = parseFormattedNumber(target.value.replace(/[^\d\s]/g, ""));
+			if (Number.isNaN(value())) newValue = target.name === "min" ? min() : max();
+			if (target.name === "min") applyValues([newValue, value()?.[1] || max()]);
+			else applyValues([value()?.[0] || min(), newValue]);
 		}, 700);
 	}
 	function handleKeyDown(e) {
 		if (e.key === "Enter") e.target.blur();
 	}
 	function handleSliderCommit(value) {
-		if (value.length === 2) applyValues(value);
+		$$props.onValueCommit?.(value);
+	}
+	function handleSliderChange(newValue) {
+		$$props.onValueChange?.(newValue);
 	}
 	var div = root();
 	$.attribute_effect(div, () => ({
 		class: [
-			__default__.container,
-			__default__.sizes[size()],
-			{ [__default__.active]: $$props.isActive },
+			container,
+			sizes[size()],
+			{ [active]: $$props.isActive },
 			$$props.class
 		],
 		...restProps,
@@ -75,7 +74,7 @@ function RangeInput($$anchor, $$props) {
 	var node = $.child(div);
 	Typography(node, {
 		get class() {
-			return __default__.text;
+			return text;
 		},
 		color: "muted",
 		variant: "caption",
@@ -86,12 +85,12 @@ function RangeInput($$anchor, $$props) {
 		},
 		$$slots: { default: true }
 	});
-	var input = $.sibling(node, 2);
-	$.remove_input_defaults(input);
-	var node_1 = $.sibling(input, 2);
+	var input$1 = $.sibling(node, 2);
+	$.remove_input_defaults(input$1);
+	var node_1 = $.sibling(input$1, 2);
 	Typography(node_1, {
 		get class() {
-			return __default__.text;
+			return text;
 		},
 		color: "muted",
 		variant: "caption",
@@ -107,7 +106,7 @@ function RangeInput($$anchor, $$props) {
 	var node_2 = $.sibling(input_1, 2);
 	Typography(node_2, {
 		get class() {
-			return __default__.text;
+			return text;
 		},
 		color: "muted",
 		variant: "caption",
@@ -120,6 +119,12 @@ function RangeInput($$anchor, $$props) {
 		$$slots: { default: true }
 	});
 	Slider($.sibling(node_2, 2), {
+		get trackClass() {
+			return track;
+		},
+		get class() {
+			return slider;
+		},
 		get min() {
 			return min();
 		},
@@ -132,32 +137,29 @@ function RangeInput($$anchor, $$props) {
 		get step() {
 			return $.get(adaptiveStep);
 		},
-		get class() {
-			return __default__.slider;
-		},
-		get trackClass() {
-			return __default__.track;
-		},
 		style: "position: absolute;",
 		type: "multiple",
 		onValueCommit: handleSliderCommit,
+		onValueChange: handleSliderChange,
 		get value() {
-			return $.get(innerValue);
+			return value();
 		},
 		set value($$value) {
-			$.set(innerValue, $$value, true);
+			value($$value);
 		}
 	});
 	$.reset(div);
 	$.bind_this(div, ($$value) => ref($$value), () => ref());
 	$.template_effect(() => {
-		$.set_class(input, 1, $.clsx(__default__.input));
-		$.set_value(input, $.get(innerDisplayValue)[0]);
-		$.set_class(input_1, 1, $.clsx(__default__.input));
-		$.set_value(input_1, $.get(innerDisplayValue)[1]);
+		$.set_attribute(input$1, "id", minInputId());
+		$.set_class(input$1, 1, $.clsx(input));
+		$.set_value(input$1, $.get(innerMin));
+		$.set_attribute(input_1, "id", maxInputId());
+		$.set_class(input_1, 1, $.clsx(input));
+		$.set_value(input_1, $.get(innerMax));
 	});
-	$.delegated("input", input, handleInput);
-	$.delegated("keydown", input, handleKeyDown);
+	$.delegated("input", input$1, handleInput);
+	$.delegated("keydown", input$1, handleKeyDown);
 	$.delegated("input", input_1, handleInput);
 	$.delegated("keydown", input_1, handleKeyDown);
 	$.append($$anchor, div);

package/dist/src/components/RangeInput/styles.css.js

@@ -0,0 +1,14 @@
+//#region src/components/RangeInput/styles.css.ts
+var active = "styles_active__14rk0zx2";
+var container = "styles_container__14rk0zx0";
+var input = "styles_input__14rk0zx7";
+var sizes = {
+	small: "styles_sizes_small__14rk0zx3",
+	medium: "styles_sizes_medium__14rk0zx4",
+	large: "styles_sizes_large__14rk0zx5"
+};
+var slider = "styles_slider__14rk0zx8";
+var text = "styles_text__14rk0zx6";
+var track = "styles_track__14rk0zx9";
+//#endregion
+export { active, container, input, sizes, slider, text, track };

package/dist/src/components/RangeInput/types.d.ts

@@ -0,0 +1,21 @@
+import { WithElementRef } from "../../types.js";
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/components/RangeInput/types.d.ts
+type RangeInputSize = 'small' | 'medium' | 'large';
+interface RangeInputProps extends WithElementRef<HTMLAttributes<HTMLDivElement>> {
+  value?: number[];
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  width?: number | string;
+  size?: RangeInputSize;
+  isActive?: boolean;
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+  minInputId?: string;
+  maxInputId?: string;
+}
+//#endregion
+export { RangeInputProps, RangeInputSize };

package/dist/src/components/ScalableContainer/types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/components/ScalableContainer/types.d.ts
+type ScalableContainerProps = {
+  initialScale?: number;
+  minScale?: number;
+  maxScale?: number;
+  showToolbar?: boolean;
+  onScaleChanged?: (scale: number) => void;
+  onPositionChanged?: (position: {
+    x: number;
+    y: number;
+  }) => void;
+} & HTMLAttributes<HTMLDivElement>;
+//#endregion
+export { ScalableContainerProps };

package/dist/src/components/Select/index.d.ts

@@ -0,0 +1,18 @@
+import * as svelte_legacy0 from "svelte/legacy";
+
+//#region src/components/Select/index.d.ts
+declare const Select: {
+  Root: svelte_legacy0.LegacyComponentType;
+  Trigger: svelte_legacy0.LegacyComponentType;
+  Label: svelte_legacy0.LegacyComponentType;
+  Portal: svelte_legacy0.LegacyComponentType;
+  ScrollUpButton: svelte_legacy0.LegacyComponentType;
+  ScrollDownButton: svelte_legacy0.LegacyComponentType;
+  Item: svelte_legacy0.LegacyComponentType;
+  Group: svelte_legacy0.LegacyComponentType;
+  Separator: svelte_legacy0.LegacyComponentType;
+  GroupHeading: svelte_legacy0.LegacyComponentType;
+  Content: svelte_legacy0.LegacyComponentType;
+};
+//#endregion
+export { Select };

package/dist/src/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+import Separator from "./Separator.js";
+import { SeparatorProps } from "./types.js";

package/dist/src/components/Separator/types.d.ts

@@ -0,0 +1,6 @@
+import { Separator } from "bits-ui";
+
+//#region src/components/Separator/types.d.ts
+type SeparatorProps = Separator.RootProps;
+//#endregion
+export { SeparatorProps };

package/dist/src/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+import Slider from "./Slider.js";
+import { SliderProps, SliderSize } from "./types.js";

package/dist/src/components/Slider/types.d.ts

@@ -0,0 +1,12 @@
+import { WithoutChildrenOrChild } from "../../types.js";
+import { Slider } from "bits-ui";
+
+//#region src/components/Slider/types.d.ts
+type SliderSize = 'small' | 'medium' | 'large';
+type SliderProps = WithoutChildrenOrChild<Slider.RootProps> & {
+  size?: SliderSize;
+  trackClass?: string;
+  thumbClass?: string;
+};
+//#endregion
+export { SliderProps, SliderSize };

package/dist/{components → src/components}/SliderInput/SliderInput.js

@@ -1,5 +1,5 @@
 import Typography from "../Typography/Typography.js";
-import { calculateSize } from "../../utils.js";
+import { calculateSize } from "../../../utils.js";
 import Slider from "../Slider/Slider.js";
 import __default__ from "./styles.css.js";
 import { formatNumber, parseFormattedNumber } from "./utils.js";
@@ -9,7 +9,7 @@ import * as $ from "svelte/internal/client";
 var root = $.from_html(`<div><input type="text" inputmode="numeric"/> <!> <!></div>`);
 function SliderInput($$anchor, $$props) {
 	$.push($$props, true);
-	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), value = $.prop($$props, "value", 15), width = $.prop($$props, "width", 3, 180), step = $.prop($$props, "step", 3, 1), size = $.prop($$props, "size", 3, "medium"), ref = $.prop($$props, "ref", 15, null), restProps = $.rest_props($$props, [
+	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), value = $.prop($$props, "value", 15), width = $.prop($$props, "width", 3, 180), step = $.prop($$props, "step", 3, 1), size = $.prop($$props, "size", 3, "medium"), ref = $.prop($$props, "ref", 15, null), id = $.prop($$props, "id", 3, "slider-input"), restProps = $.rest_props($$props, [
 		"$$slots",
 		"$$events",
 		"$$legacy",
@@ -24,22 +24,19 @@ function SliderInput($$anchor, $$props) {
 		"name",
 		"isActive",
 		"ref",
-		"onValueChange"
+		"onValueChange",
+		"onValueCommit",
+		"id"
 	]);
 	let timerId;
 	const calculatedWidth = $.derived(() => calculateSize(width()));
-	let innerValue = $.state($.proxy(value()));
-	let innerDisplayValue = $.derived(() => formatNumber($.get(innerValue) || min()));
-	$.user_effect(() => {
-		$.set(innerValue, value() || min(), true);
-	});
+	let innerDisplayValue = $.derived(() => formatNumber(value() || min()));
 	const adaptiveStep = $.derived(() => {
 		const range = max() - min();
 		return Math.max(step(), Math.ceil(range / 1e3));
 	});
 	function applyValues(newValue) {
 		const clampedValue = Math.max(min(), Math.min(max(), newValue));
-		$.set(innerValue, clampedValue, true);
 		value(clampedValue);
 		$$props.onValueChange?.(clampedValue);
 	}
@@ -47,16 +44,19 @@ function SliderInput($$anchor, $$props) {
 		clearTimeout(timerId);
 		timerId = setTimeout(() => {
 			const target = e.target;
-			let value = parseFormattedNumber(target.value.replace(/[^\d\s]/g, ""));
-			if (Number.isNaN(value)) value = min();
-			applyValues(value);
+			let newValue = parseFormattedNumber(target.value.replace(/[^\d\s]/g, ""));
+			if (Number.isNaN(newValue)) newValue = min();
+			applyValues(newValue);
 		}, 700);
 	}
 	function handleKeyDown(e) {
-		if (e.key === "Enter") applyValues($.get(innerValue) || min());
+		if (e.key === "Enter") e.target.blur();
 	}
 	function handleSliderCommit(value) {
-		applyValues(value);
+		$$props.onValueCommit?.(value);
+	}
+	function handleSliderChange(value) {
+		$$props.onValueChange?.(value);
 	}
 	var div = root();
 	$.attribute_effect(div, () => ({
@@ -107,11 +107,12 @@ function SliderInput($$anchor, $$props) {
 		},
 		type: "single",
 		onValueCommit: handleSliderCommit,
+		onValueChange: handleSliderChange,
 		get value() {
-			return $.get(innerValue);
+			return value();
 		},
 		set value($$value) {
-			$.set(innerValue, $$value, true);
+			value($$value);
 		}
 	});
 	$.reset(div);
@@ -119,6 +120,7 @@ function SliderInput($$anchor, $$props) {
 	$.template_effect(() => {
 		$.set_class(input, 1, $.clsx(__default__.input));
 		$.set_value(input, $.get(innerDisplayValue));
+		$.set_attribute(input, "id", id());
 		$.set_attribute(input, "name", $$props.name);
 	});
 	$.delegated("input", input, handleInput);