@max-ts/svelte 1.7.3 → 1.8.0

package/dist/components/Select/Separator/styles.css.js

@@ -1,4 +1,4 @@
-import "./../../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
+import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
 import "./../../../assets/src/components/Select/Separator/styles.css.ts.vanilla-DikOvXhH.css";
 
 //#region src/components/Select/Separator/styles.css.ts

package/dist/components/Select/Trigger/styles.css.js

@@ -1,5 +1,5 @@
-import "./../../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
-import "./../../../assets/src/components/Select/Trigger/styles.css.ts.vanilla-DqYy9T2T.css";
+import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
+import "./../../../assets/src/components/Select/Trigger/styles.css.ts.vanilla-BCDIWDu9.css";
 
 //#region src/components/Select/Trigger/styles.css.ts
 var __default__ = {

package/dist/components/Separator/styles.css.js

@@ -1,4 +1,4 @@
-import "./../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
+import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
 import "./../../assets/src/components/Separator/styles.css.ts.vanilla-KsA3TZd5.css";
 
 //#region src/components/Separator/styles.css.ts

package/dist/components/Slider/Slider.js

@@ -15,7 +15,9 @@ function Slider$1($$anchor, $$props) {
 		"value",
 		"orientation",
 		"class",
-		"size"
+		"size",
+		"trackClass",
+		"thumbClass"
 	]);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
@@ -39,7 +41,11 @@ function Slider$1($$anchor, $$props) {
 				var fragment_2 = $.comment();
 				var node_3 = $.first_child(fragment_2);
 				{
-					let $0 = $.derived(() => [__default__.thumb, __default__.thumbSizes[size()]]);
+					let $0 = $.derived(() => [
+						__default__.thumb,
+						__default__.thumbSizes[size()],
+						$$props.thumbClass
+					]);
 					$.component(node_3, () => Slider.Thumb, ($$anchor, SliderPrimitive_Thumb) => {
 						SliderPrimitive_Thumb($$anchor, {
 							"data-slot": "slider-thumb",
@@ -56,7 +62,11 @@ function Slider$1($$anchor, $$props) {
 			});
 			$.template_effect(() => {
 				$.set_attribute(span, "data-orientation", orientation());
-				$.set_class(span, 1, $.clsx([__default__.track, __default__.trackSizes[size()]]));
+				$.set_class(span, 1, $.clsx([
+					__default__.track,
+					__default__.trackSizes[size()],
+					$$props.trackClass
+				]));
 			});
 			$.append($$anchor, fragment_1);
 		};

package/dist/components/Slider/styles.css.js

@@ -1,5 +1,5 @@
-import "./../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
-import "./../../assets/src/components/Slider/styles.css.ts.vanilla-DAEoeJIB.css";
+import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
+import "./../../assets/src/components/Slider/styles.css.ts.vanilla-BwosySl4.css";
 
 //#region src/components/Slider/styles.css.ts
 var __default__ = {

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

@@ -3,4 +3,6 @@ import type { WithoutChildrenOrChild } from '../../types.ts';
 export type SliderSize = 'small' | 'medium' | 'large';
 export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
     size?: SliderSize;
+    trackClass?: string;
+    thumbClass?: string;
 };

package/dist/components/Spinner/styles.css.js

@@ -1,4 +1,4 @@
-import "./../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
+import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
 import "./../../assets/src/components/Spinner/styles.css.ts.vanilla-DRCCYbMQ.css";
 
 //#region src/components/Spinner/styles.css.ts

package/dist/components/Tabs/styles.css.js

@@ -1,5 +1,5 @@
-import "./../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
-import "./../../assets/src/components/Tabs/styles.css.ts.vanilla-DONNicjp.css";
+import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
+import "./../../assets/src/components/Tabs/styles.css.ts.vanilla-CZnsdQXL.css";
 
 //#region src/components/Tabs/styles.css.ts
 var __default__ = {

package/dist/components/Tooltip/Content/styles.css.js

@@ -1,5 +1,5 @@
-import "./../../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
-import "./../../../assets/src/components/Tooltip/Content/styles.css.ts.vanilla-D_b_jcxS.css";
+import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
+import "./../../../assets/src/components/Tooltip/Content/styles.css.ts.vanilla-TIsrH3sQ.css";
 
 //#region src/components/Tooltip/Content/styles.css.ts
 var __default__ = {

package/dist/components/Tooltip/Tooltip.js

@@ -9,7 +9,7 @@ import { Tooltip } from "bits-ui";
 var root_2 = $.from_html(`<!> <!>`, 1);
 function Tooltip$1($$anchor, $$props) {
 	$.push($$props, true);
-	let open = $.prop($$props, "open", 15, false), alignOffset = $.prop($$props, "alignOffset", 3, 0), sideOffset = $.prop($$props, "sideOffset", 3, 4), side = $.prop($$props, "side", 3, "top"), restProps = $.rest_props($$props, [
+	let open = $.prop($$props, "open", 15, false), alignOffset = $.prop($$props, "alignOffset", 3, 0), sideOffset = $.prop($$props, "sideOffset", 3, 4), side = $.prop($$props, "side", 3, "top"), triggerId = $.prop($$props, "triggerId", 3, null), payload = $.prop($$props, "payload", 3, null), restProps = $.rest_props($$props, [
 		"$$slots",
 		"$$events",
 		"$$legacy",
@@ -21,7 +21,9 @@ function Tooltip$1($$anchor, $$props) {
 		"sideOffset",
 		"side",
 		"arrow",
-		"arrowClass"
+		"arrowClass",
+		"triggerId",
+		"payload"
 	]);
 	Provider($$anchor, {
 		children: ($$anchor, $$slotProps) => {
@@ -42,7 +44,11 @@ function Tooltip$1($$anchor, $$props) {
 							children: ($$anchor, $$slotProps) => {
 								var fragment_3 = $.comment();
 								var node_2 = $.first_child(fragment_3);
-								$.snippet(node_2, () => $$props.children ?? $.noop);
+								$.snippet(node_2, () => $$props.children ?? $.noop, () => ({
+									open: open(),
+									triggerId: triggerId(),
+									payload: payload()
+								}));
 								$.append($$anchor, fragment_3);
 							},
 							$$slots: { default: true }

package/dist/components/Tooltip/types.d.ts

@@ -1,6 +1,6 @@
 import type { Tooltip } from 'bits-ui';
 import type { Snippet } from 'svelte';
-export type TooltipProps = Tooltip.RootProps & {
+export type TooltipProps<Payload = never> = Tooltip.RootProps & {
     content?: Snippet<[]> | string;
     arrow?: boolean;
     align?: Tooltip.ContentProps['align'];
@@ -9,4 +9,5 @@ export type TooltipProps = Tooltip.RootProps & {
     side?: Tooltip.ContentProps['side'];
     class?: string;
     arrowClass?: string;
+    payload?: [Payload] extends [never] ? null : Payload | null;
 };

package/dist/components/Typography/styles.css.js

@@ -1,4 +1,4 @@
-import "./../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
+import "./../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
 import "./../../assets/src/components/Typography/styles.css.ts.vanilla-RejbDOhi.css";
 
 //#region src/components/Typography/styles.css.ts

package/dist/components/Typography/types.d.ts

@@ -16,4 +16,5 @@ export type TypographyProps = {
     children?: Snippet<[]>;
     ref?: HTMLElement | null;
     class?: string;
+    style?: string;
 };

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export { Label } from './Label';
 export { Placeholder, type PlaceholderProps, type PlaceholderSize, } from './Placeholder';
 export { Popover, type PopoverProps } from './Popover';
 export { RangeInput, type RangeInputProps, type RangeInputSize, } from './RangeInput';
+export { ScalableContainer, type ScalableContainerProps, } from './ScalableContainer';
 export { Select } from './Select';
 export { Separator, type SeparatorProps, } from './Separator';
 export { Slider, type SliderProps } from './Slider';

package/dist/components/index.js

@@ -29,8 +29,9 @@ import { Item } from "./Item/index.js";
 import { Popover } from "./Popover/index.js";
 import Slider from "./Slider/Slider.js";
 import RangeInput from "./RangeInput/RangeInput.js";
+import ScalableContainer from "./ScalableContainer/ScalableContainer.js";
 import { Select } from "./Select/index.js";
 import { Tabs } from "./Tabs/index.js";
 import Tooltip from "./Tooltip/Tooltip.js";
 
-export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, Item, Label_1 as Label, Placeholder, Popover, RangeInput, Select, Separator, Slider, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };
+export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, Item, Label_1 as Label, Placeholder, Popover, RangeInput, ScalableContainer, Select, Separator, Slider, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };

package/dist/stories/ScalableContainer.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { ScalableContainer } from '../components';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ScalableContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScalableContainer = InstanceType<typeof ScalableContainer>;
+export default ScalableContainer;

package/dist/theme.css.d.ts

@@ -78,10 +78,10 @@ export declare const theme: {
         relaxed: `var(--${string})`;
         loose: `var(--${string})`;
     };
-    borderRadius: {
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
+    radius: {
+        small: `var(--${string})`;
+        medium: `var(--${string})`;
+        large: `var(--${string})`;
     };
 };
 export type Theme = typeof theme;

package/dist/theme.d.ts

@@ -79,10 +79,10 @@ declare const theme: {
     relaxed: `var(--${string})`;
     loose: `var(--${string})`;
   };
-  borderRadius: {
-    sm: `var(--${string})`;
-    md: `var(--${string})`;
-    lg: `var(--${string})`;
+  radius: {
+    small: `var(--${string})`;
+    medium: `var(--${string})`;
+    large: `var(--${string})`;
   };
 };
 type Theme = typeof theme;

package/dist/theme.js

@@ -1,4 +1,4 @@
-import "./assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
+import "./assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
 
 //#region src/theme.css.ts
 var theme = {
@@ -81,10 +81,10 @@ var theme = {
 		relaxed: "var(--lineHeight-relaxed)",
 		loose: "var(--lineHeight-loose)"
 	},
-	borderRadius: {
-		sm: "var(--borderRadius-sm)",
-		md: "var(--borderRadius-md)",
-		lg: "var(--borderRadius-lg)"
+	radius: {
+		small: "var(--radius-small)",
+		medium: "var(--radius-medium)",
+		large: "var(--radius-large)"
 	}
 };
 

package/dist/utils.d.ts

@@ -8,3 +8,4 @@ export type Spacing = {
 export declare const negativeSpacing: Spacing;
 export declare const spacing: Spacing;
 export declare const calculateSize: (value?: string | number) => string | undefined;
+export declare const createGetters: <T extends Record<string, unknown>>(obj: T) => { [K in keyof T]: () => T[K]; };

package/dist/utils.js

@@ -6,6 +6,17 @@ const spacing = (...keys) => {
 	return keys.map((key) => theme.spacing[key]).join(" ");
 };
 const calculateSize = (value) => typeof value === "number" ? `${value}px` : value;
+const createGetters = (obj) => {
+	const getters = {};
+	for (const key of Object.keys(obj)) Object.defineProperty(getters, key, {
+		get() {
+			return obj[key];
+		},
+		enumerable: true,
+		configurable: true
+	});
+	return getters;
+};
 
 //#endregion
-export { calculateSize, negativeSpacing, spacing };
+export { calculateSize, createGetters, negativeSpacing, spacing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/svelte",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "type": "module",
   "description": "Svelte component library.",
   "author": "Tsepelev Maksim",
@@ -13,12 +13,10 @@
     },
     "./package.json": "./package.json",
     "./theme": {
-      "svelte": "./dist/theme.js",
       "types": "./dist/theme.d.ts",
       "default": "./dist/theme.js"
     },
     "./utils": {
-      "svelte": "./dist/utils.js",
       "types": "./dist/utils.d.ts",
       "default": "./dist/utils.js"
     }
@@ -36,21 +34,21 @@
     "@internationalized/date": "^3.10.1",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-svelte": "^8.6.0",
-    "svelte": "^5.46.3"
+    "svelte": "^5.53.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",
     "@changesets/cli": "^2.29.8",
     "@chromatic-com/storybook": "^5.0.1",
     "@internationalized/date": "^3.11.0",
-    "@storybook/addon-a11y": "^10.2.10",
-    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
     "@storybook/addon-svelte-csf": "^5.0.11",
-    "@storybook/addon-vitest": "^10.2.10",
-    "@storybook/sveltekit": "^10.2.10",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/sveltekit": "^10.2.13",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.8",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.3.1",
     "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/rollup-plugin": "^1.5.1",
     "@vanilla-extract/vite-plugin": "^5.1.4",
@@ -59,8 +57,8 @@
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-svelte": "^8.6.0",
     "rollup-plugin-svelte": "^7.2.3",
-    "storybook": "^10.2.10",
-    "svelte": "^5.53.2",
+    "storybook": "^10.2.13",
+    "svelte": "^5.53.5",
     "svelte-check": "^4.4.3",
     "svelte-preprocess": "^6.0.3",
     "svelte2tsx": "^0.7.51",

package/dist/assets/src/components/Checkbox/styles.css.ts.vanilla-BMDAMChP.css

@@ -1,36 +0,0 @@
-.styles_checkboxBase__1w94fa80 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--spacing-4);
-  height: var(--spacing-4);
-  flex-shrink: 0;
-  border-radius: var(--borderRadius-sm);
-  border: 1px solid var(--colors-border);
-  background-color: transparent;
-  transition: box-shadow 150ms, background-color 150ms, border-color 150ms;
-  cursor: pointer;
-  outline: none;
-  color: var(--colors-foreground-primary);
-}
-.styles_checkboxBase__1w94fa80:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.styles_checkboxBase__1w94fa80:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--colors-primary) 50%, transparent);
-  border-color: var(--colors-primary);
-}
-.styles_checkboxBase__1w94fa80[data-state="checked"] {
-  background-color: var(--colors-primary);
-  border-color: var(--colors-primary);
-}
-.styles_checkboxBase__1w94fa80[aria-invalid="true"] {
-  box-shadow: 0 0 0 1px color-mix(in oklch, var(--colors-error) 20%, transparent);
-  border-color: var(--colors-error);
-}
-.styles_checkboxIndicator__1w94fa81 {
-  color: currentColor;
-  transition: none;
-}