fancy-ui-svelte 0.6.0 → 0.7.0

package/dist/utils/geometry.js

@@ -0,0 +1,250 @@
+/**
+ * Geometry Utilities
+ *
+ * Helpers for calculating positions, angles, distances, and directions.
+ * Used for hover effects, spotlights, and direction-aware components.
+ */
+// =============================================================================
+// Point Operations
+// =============================================================================
+/**
+ * Create a point object
+ */
+export function point(x, y) {
+    return { x, y };
+}
+/**
+ * Add two points
+ */
+export function addPoints(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y };
+}
+/**
+ * Subtract point b from point a
+ */
+export function subtractPoints(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+/**
+ * Scale a point by a factor
+ */
+export function scalePoint(p, factor) {
+    return { x: p.x * factor, y: p.y * factor };
+}
+/**
+ * Get the midpoint between two points
+ */
+export function midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+// =============================================================================
+// Distance & Angle Calculations
+// =============================================================================
+/**
+ * Calculate the distance between two points
+ */
+export function distance(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+/**
+ * Calculate the squared distance between two points (faster, no sqrt)
+ */
+export function distanceSquared(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return dx * dx + dy * dy;
+}
+/**
+ * Calculate the angle between two points in radians
+ */
+export function angle(from, to) {
+    return Math.atan2(to.y - from.y, to.x - from.x);
+}
+/**
+ * Calculate the angle between two points in degrees
+ */
+export function angleDegrees(from, to) {
+    return (angle(from, to) * 180) / Math.PI;
+}
+/**
+ * Convert radians to degrees
+ */
+export function radToDeg(radians) {
+    return (radians * 180) / Math.PI;
+}
+/**
+ * Convert degrees to radians
+ */
+export function degToRad(degrees) {
+    return (degrees * Math.PI) / 180;
+}
+/**
+ * Normalize an angle to 0-360 degrees
+ */
+export function normalizeAngle(degrees) {
+    return ((degrees % 360) + 360) % 360;
+}
+// =============================================================================
+// Mouse & Element Positions
+// =============================================================================
+/**
+ * Get mouse position relative to an element
+ */
+export function getRelativeMousePosition(event, element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+}
+/**
+ * Get mouse position as a percentage of element dimensions (0-1)
+ */
+export function getRelativeMousePercent(event, element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: (event.clientX - rect.left) / rect.width,
+        y: (event.clientY - rect.top) / rect.height,
+    };
+}
+/**
+ * Get mouse position centered on element (-0.5 to 0.5)
+ */
+export function getRelativeMouseCentered(event, element) {
+    const percent = getRelativeMousePercent(event, element);
+    return {
+        x: percent.x - 0.5,
+        y: percent.y - 0.5,
+    };
+}
+/**
+ * Get the center point of an element
+ */
+export function getElementCenter(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+    };
+}
+/**
+ * Get the center point of an element relative to itself
+ */
+export function getElementLocalCenter(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.width / 2,
+        y: rect.height / 2,
+    };
+}
+// =============================================================================
+// Direction Detection
+// =============================================================================
+/**
+ * Determine which direction mouse entered/exited an element
+ */
+export function getEntryDirection(event, element) {
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left - rect.width / 2;
+    const y = event.clientY - rect.top - rect.height / 2;
+    // Calculate direction based on angle
+    const angleRad = Math.atan2(y, x);
+    const angleDeg = normalizeAngle((angleRad * 180) / Math.PI);
+    if (angleDeg >= 315 || angleDeg < 45)
+        return "right";
+    if (angleDeg >= 45 && angleDeg < 135)
+        return "bottom";
+    if (angleDeg >= 135 && angleDeg < 225)
+        return "left";
+    return "top";
+}
+/**
+ * Get the opposite direction
+ */
+export function getOppositeDirection(direction) {
+    const opposites = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+    };
+    return opposites[direction];
+}
+/**
+ * Get the nearest corner to a point within an element
+ */
+export function getNearestCorner(point, size) {
+    const centerX = size.width / 2;
+    const centerY = size.height / 2;
+    const isTop = point.y < centerY;
+    const isLeft = point.x < centerX;
+    if (isTop && isLeft)
+        return "top-left";
+    if (isTop && !isLeft)
+        return "top-right";
+    if (!isTop && isLeft)
+        return "bottom-left";
+    return "bottom-right";
+}
+// =============================================================================
+// Rect & Bounds
+// =============================================================================
+/**
+ * Check if a point is inside a rectangle
+ */
+export function isPointInRect(p, rect) {
+    return (p.x >= rect.x && p.x <= rect.x + rect.width && p.y >= rect.y && p.y <= rect.y + rect.height);
+}
+/**
+ * Get the bounding rect of an element
+ */
+export function getRect(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+/**
+ * Expand a rect by a given amount
+ */
+export function expandRect(rect, amount) {
+    return {
+        x: rect.x - amount,
+        y: rect.y - amount,
+        width: rect.width + amount * 2,
+        height: rect.height + amount * 2,
+    };
+}
+// =============================================================================
+// Transforms
+// =============================================================================
+/**
+ * Calculate rotation transform based on mouse position
+ * Returns rotation values suitable for 3D transforms
+ */
+export function calculateTiltTransform(mousePos, elementSize, maxRotation = 15) {
+    const centerX = elementSize.width / 2;
+    const centerY = elementSize.height / 2;
+    const percentX = (mousePos.x - centerX) / centerX;
+    const percentY = (mousePos.y - centerY) / centerY;
+    return {
+        rotateX: -percentY * maxRotation,
+        rotateY: percentX * maxRotation,
+    };
+}
+/**
+ * Calculate spotlight position for gradient effects
+ */
+export function calculateSpotlightPosition(mousePos, elementSize) {
+    const percentX = (mousePos.x / elementSize.width) * 100;
+    const percentY = (mousePos.y / elementSize.height) * 100;
+    return {
+        x: `${percentX}%`,
+        y: `${percentY}%`,
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Utilities barrel export
+ */
+export { cn } from "../utils.js";
+export type { WithoutChild, WithoutChildren, WithoutChildrenOrChild, WithElementRef, } from "../utils.js";
+export { type SpringConfig, type AnimationOptions, springPresets, linear, easeIn, easeOut, easeInOut, easeInCubic, easeOutCubic, easeInOutCubic, easeOutBounce, easeOutElastic, easeOutBack, lerp, clamp, mapRange, springStep, isSpringAtRest, staggerDelay, getProgress, getDurationFromCSS, rafDebounce, rafThrottle, } from "./animation.js";
+export { type Point, type Size, type Rect, type Direction, type Corner, point, addPoints, subtractPoints, scalePoint, midpoint, distance, distanceSquared, angle, angleDegrees, radToDeg, degToRad, normalizeAngle, getRelativeMousePosition, getRelativeMousePercent, getRelativeMouseCentered, getElementCenter, getElementLocalCenter, getEntryDirection, getOppositeDirection, getNearestCorner, isPointInRect, getRect, expandRect, calculateTiltTransform, calculateSpotlightPosition, } from "./geometry.js";
+export { type RGB, type HSL, type OKLCH, type RGBA, hexToRgb, rgbToHex, parseHsl, hslToString, parseOklch, oklchToString, rgbToHsl, hslToRgb, lighten, darken, saturate, desaturate, shiftHue, complementary, interpolateColor, linearGradient, radialGradient, conicGradient, getRainbowColors, getThemeGradient, getCssVariable, setCssVariable, randomColor, isLightColor, getContrastColor, withAlpha, } from "./color.js";

package/dist/utils/index.js

@@ -0,0 +1,39 @@
+/**
+ * Utilities barrel export
+ */
+// Re-export existing utilities from parent
+export { cn } from "../utils.js";
+// Animation utilities
+export { 
+// Spring presets
+springPresets, 
+// Easing functions
+linear, easeIn, easeOut, easeInOut, easeInCubic, easeOutCubic, easeInOutCubic, easeOutBounce, easeOutElastic, easeOutBack, 
+// Animation helpers
+lerp, clamp, mapRange, springStep, isSpringAtRest, staggerDelay, getProgress, getDurationFromCSS, rafDebounce, rafThrottle, } from "./animation.js";
+// Geometry utilities
+export { 
+// Point operations
+point, addPoints, subtractPoints, scalePoint, midpoint, 
+// Distance & angle
+distance, distanceSquared, angle, angleDegrees, radToDeg, degToRad, normalizeAngle, 
+// Mouse & element positions
+getRelativeMousePosition, getRelativeMousePercent, getRelativeMouseCentered, getElementCenter, getElementLocalCenter, 
+// Direction detection
+getEntryDirection, getOppositeDirection, getNearestCorner, 
+// Rect & bounds
+isPointInRect, getRect, expandRect, 
+// Transforms
+calculateTiltTransform, calculateSpotlightPosition, } from "./geometry.js";
+// Color utilities
+export { 
+// Color parsing
+hexToRgb, rgbToHex, parseHsl, hslToString, parseOklch, oklchToString, 
+// Color conversion
+rgbToHsl, hslToRgb, 
+// Color manipulation
+lighten, darken, saturate, desaturate, shiftHue, complementary, interpolateColor, 
+// Gradient generation
+linearGradient, radialGradient, conicGradient, getRainbowColors, getThemeGradient, 
+// Color utilities
+getCssVariable, setCssVariable, randomColor, isLightColor, getContrastColor, withAlpha, } from "./color.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -26,6 +26,7 @@
   ],
   "files": [
     "dist/fancy-ui",
+    "dist/utils",
     "dist/utils.js",
     "dist/utils.d.ts",
     "dist/types.js",
@@ -63,6 +64,10 @@
     "@internationalized/date": "^3.10.1",
     "@lucide/svelte": "^0.562.0",
     "@playwright/test": "^1.58.2",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-svelte-csf": "^5.1.2",
+    "@storybook/sveltekit": "^10.4.6",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
@@ -87,6 +92,7 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
     "shiki": "^4.0.2",
+    "storybook": "^10.4.6",
     "svelte": "^5.45.6",
     "svelte-check": "^4.3.4",
     "tailwind-variants": "^3.2.2",
@@ -110,6 +116,8 @@
     "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset tag",
-    "package": "svelte-kit sync && svelte-package -i src/lib -o dist && node -e \"const fs=require('fs'); ['dist/builder','dist/server','dist/stores'].forEach(p=>fs.rmSync(p,{recursive:true,force:true}));\" && publint"
+    "package": "svelte-kit sync && svelte-package -i src/lib -o dist && node -e \"const fs=require('fs'); ['dist/builder','dist/server','dist/stores'].forEach(p=>fs.rmSync(p,{recursive:true,force:true}));\" && publint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }