tera-system-ui 0.1.4 → 0.1.6

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

@@ -4,6 +4,12 @@ type SliderVariants = VariantProps<typeof styles>;
 export interface SliderProps extends SliderVariants {
     children?: any;
     class?: string;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    showTicks: boolean;
+    onchange: (value: number) => void;
 }
 export type SliderContextProps = {};
 export {};

package/dist/components/slider/Slider.svelte

@@ -38,13 +38,13 @@
         slider.addEventListener('touchstart', (e) => {
             sliderHandle.setAttribute('data-state', 'dragging');
             onDrag(e)
-            document.addEventListener('touchmove', onDrag);
+            document.addEventListener('touchmove', onDrag, { passive: false });
             document.addEventListener('touchend', () => {
                 document.removeEventListener('touchmove', onDrag);
                 toggleToolTip(false)
                 sliderHandle.removeAttribute('data-state');
             }, {once: true});
-        });
+        }, { passive: false });
 
         sliderHandle.addEventListener('pointerenter', (e) => {
             toggleToolTip(true)
@@ -72,16 +72,18 @@
 
     const calculateValue = (position) => {
         const sliderWidth = sliderRail.offsetWidth;
-
-        // calculate step size in px
-        const stepSize = sliderWidth / ((max - min) / step)
+        const totalSteps = (max - min) / step;
+        const stepSize = sliderWidth / totalSteps;
 
         // Clamp position within the slider width
         const clampedPosition = Math.max(0, Math.min(position, sliderWidth));
-        // Calculate nearest step position
+        // Calculate steps with decimal precision
         const stepCount = Math.round(clampedPosition / stepSize);
 
-        return min + stepCount
+        // Calculate the value with proper decimal precision
+        const value = min + (stepCount * step);
+        // Round to avoid floating-point precision errors
+        return Number(value.toFixed(10));
     };
 
     const onDrag = (event) => {

package/dist/utils/index.d.ts

@@ -1 +1 @@
-export { cn, observeVisibility } from './utils';
+export { cn, observeVisibility, styleToString } from './utils';

package/dist/utils/index.js

@@ -1 +1 @@
-export { cn, observeVisibility } from './utils';
+export { cn, observeVisibility, styleToString } from './utils';

package/dist/utils/utils.d.ts

@@ -2,3 +2,4 @@ import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function consoleLog(...params: any[]): void;
 export declare function observeVisibility(element: HTMLElement, callback: (isVisible: boolean, entry?: any) => void): () => void;
+export declare function styleToString(style: Record<string, any>): string;

package/dist/utils/utils.js

@@ -22,3 +22,19 @@ export function observeVisibility(element, callback) {
     // Return a function to stop observing
     return () => observer.disconnect();
 }
+export function styleToString(style) {
+    return Object.keys(style).reduce((acc, key) => {
+        if (style[key] === undefined || style[key] === null)
+            return acc;
+        // Convert camelCase to kebab-case
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        // Handle numbers by adding 'px' for certain properties
+        const cssValue = typeof style[key] === 'number' &&
+            !cssKey.includes('opacity') &&
+            !cssKey.includes('z-index') &&
+            !cssKey.includes('order')
+            ? `${style[key]}px`
+            : style[key];
+        return `${acc}${cssKey}:${cssValue};`;
+    }, '');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tera-system-ui",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",