@spothero/ui 25.6.0 → 25.11.0

package/dist/theme/base/animation.d.ts

@@ -0,0 +1,217 @@
+/**
+ * Animation tokens for consistent motion throughout the application.
+ * Based on SpotHero Motion Guidelines:
+ * https://spothero.atlassian.net/wiki/spaces/PROD/pages/5029789787/Motion+SpotHero
+ */
+/**
+ * Duration tokens (in seconds for framer-motion compatibility)
+ */
+export declare const DURATION: {
+    /** 70ms - Micro-interactions such as buttons and toggles */
+    readonly SHORT_1: 0.07;
+    /** 110ms - Micro-interactions such as fade */
+    readonly SHORT_2: 0.11;
+    /** 150ms - Micro-interactions, small expansion, short distance movements */
+    readonly MEDIUM_1: 0.15;
+    /** 240ms - Expansion, system communication, toast */
+    readonly MEDIUM_2: 0.24;
+    /** 400ms - Large expansion, important system notifications */
+    readonly SLOW_1: 0.4;
+    /** 700ms - Background dimming and full-screen animations */
+    readonly SLOW_2: 0.7;
+};
+/**
+ * Duration tokens in milliseconds (for CSS transitions)
+ */
+export declare const DURATION_MS: {
+    /** 70ms - Micro-interactions such as buttons and toggles */
+    readonly SHORT_1: 70;
+    /** 110ms - Micro-interactions such as fade */
+    readonly SHORT_2: 110;
+    /** 150ms - Micro-interactions, small expansion, short distance movements */
+    readonly MEDIUM_1: 150;
+    /** 240ms - Expansion, system communication, toast */
+    readonly MEDIUM_2: 240;
+    /** 400ms - Large expansion, important system notifications */
+    readonly SLOW_1: 400;
+    /** 700ms - Background dimming and full-screen animations */
+    readonly SLOW_2: 700;
+};
+export declare const DURATION_DESCRIPTIONS: {
+    readonly SHORT_1: "Micro-interactions such as buttons and toggles";
+    readonly SHORT_2: "Micro-interactions such as fade";
+    readonly MEDIUM_1: "Micro-interactions, small expansion, short distance movements";
+    readonly MEDIUM_2: "Expansion, system communication, toast";
+    readonly SLOW_1: "Large expansion, important system notifications";
+    readonly SLOW_2: "Background dimming and full-screen animations";
+};
+/**
+ * Easing tokens as cubic-bezier arrays (for framer-motion)
+ */
+export declare const EASING: {
+    /** Snappy - Quick start, smooth finish. Good for UI interactions. */
+    readonly SNAPPY: readonly [0.16, 1, 0.3, 1];
+    /** Calm - Standard easing. Good for general transitions. */
+    readonly CALM: readonly [0.4, 0, 0.2, 1];
+    /** Linear - Constant speed. Good for progress indicators. */
+    readonly LINEAR: readonly [0, 0, 1, 1];
+};
+/**
+ * Easing tokens as CSS cubic-bezier strings
+ */
+export declare const EASING_CSS: {
+    /** Snappy - Quick start, smooth finish. Good for UI interactions. */
+    readonly SNAPPY: "cubic-bezier(0.16, 1, 0.3, 1)";
+    /** Calm - Standard easing. Good for general transitions. */
+    readonly CALM: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Linear - Constant speed. Good for progress indicators. */
+    readonly LINEAR: "linear";
+};
+export declare const EASING_DESCRIPTIONS: {
+    readonly SNAPPY: "Quick start, smooth finish. Good for UI interactions.";
+    readonly CALM: "Standard easing. Good for general transitions.";
+    readonly LINEAR: "Constant speed. Good for progress indicators.";
+};
+/**
+ * Pre-composed transition objects for common use cases with framer-motion
+ */
+export declare const TRANSITION: {
+    /** Quick micro-interaction (buttons, toggles) */
+    readonly MICRO: {
+        readonly duration: 0.07;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    /** Small fade transitions */
+    readonly FADE: {
+        readonly duration: 0.11;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    /** Small expansion or short movements */
+    readonly SMALL: {
+        readonly duration: 0.15;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    /** Medium expansion, toasts, system communication */
+    readonly MEDIUM: {
+        readonly duration: 0.24;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+    /** Large expansion, important notifications */
+    readonly LARGE: {
+        readonly duration: 0.4;
+        readonly ease: readonly [0.4, 0, 0.2, 1];
+    };
+    /** Full-screen animations, background dimming */
+    readonly FULL_SCREEN: {
+        readonly duration: 0.7;
+        readonly ease: readonly [0.4, 0, 0.2, 1];
+    };
+};
+export declare const TRANSITION_DESCRIPTIONS: {
+    readonly MICRO: "Quick micro-interaction (buttons, toggles)";
+    readonly FADE: "Small fade transitions";
+    readonly SMALL: "Small expansion or short movements";
+    readonly MEDIUM: "Medium expansion, toasts, system communication";
+    readonly LARGE: "Large expansion, important notifications";
+    readonly FULL_SCREEN: "Full-screen animations, background dimming";
+};
+export declare const ANIMATION_TOKENS: {
+    readonly DURATION: {
+        /** 70ms - Micro-interactions such as buttons and toggles */
+        readonly SHORT_1: 0.07;
+        /** 110ms - Micro-interactions such as fade */
+        readonly SHORT_2: 0.11;
+        /** 150ms - Micro-interactions, small expansion, short distance movements */
+        readonly MEDIUM_1: 0.15;
+        /** 240ms - Expansion, system communication, toast */
+        readonly MEDIUM_2: 0.24;
+        /** 400ms - Large expansion, important system notifications */
+        readonly SLOW_1: 0.4;
+        /** 700ms - Background dimming and full-screen animations */
+        readonly SLOW_2: 0.7;
+    };
+    readonly DURATION_MS: {
+        /** 70ms - Micro-interactions such as buttons and toggles */
+        readonly SHORT_1: 70;
+        /** 110ms - Micro-interactions such as fade */
+        readonly SHORT_2: 110;
+        /** 150ms - Micro-interactions, small expansion, short distance movements */
+        readonly MEDIUM_1: 150;
+        /** 240ms - Expansion, system communication, toast */
+        readonly MEDIUM_2: 240;
+        /** 400ms - Large expansion, important system notifications */
+        readonly SLOW_1: 400;
+        /** 700ms - Background dimming and full-screen animations */
+        readonly SLOW_2: 700;
+    };
+    readonly DURATION_DESCRIPTIONS: {
+        readonly SHORT_1: "Micro-interactions such as buttons and toggles";
+        readonly SHORT_2: "Micro-interactions such as fade";
+        readonly MEDIUM_1: "Micro-interactions, small expansion, short distance movements";
+        readonly MEDIUM_2: "Expansion, system communication, toast";
+        readonly SLOW_1: "Large expansion, important system notifications";
+        readonly SLOW_2: "Background dimming and full-screen animations";
+    };
+    readonly EASING: {
+        /** Snappy - Quick start, smooth finish. Good for UI interactions. */
+        readonly SNAPPY: readonly [0.16, 1, 0.3, 1];
+        /** Calm - Standard easing. Good for general transitions. */
+        readonly CALM: readonly [0.4, 0, 0.2, 1];
+        /** Linear - Constant speed. Good for progress indicators. */
+        readonly LINEAR: readonly [0, 0, 1, 1];
+    };
+    readonly EASING_CSS: {
+        /** Snappy - Quick start, smooth finish. Good for UI interactions. */
+        readonly SNAPPY: "cubic-bezier(0.16, 1, 0.3, 1)";
+        /** Calm - Standard easing. Good for general transitions. */
+        readonly CALM: "cubic-bezier(0.4, 0, 0.2, 1)";
+        /** Linear - Constant speed. Good for progress indicators. */
+        readonly LINEAR: "linear";
+    };
+    readonly EASING_DESCRIPTIONS: {
+        readonly SNAPPY: "Quick start, smooth finish. Good for UI interactions.";
+        readonly CALM: "Standard easing. Good for general transitions.";
+        readonly LINEAR: "Constant speed. Good for progress indicators.";
+    };
+    readonly TRANSITION: {
+        /** Quick micro-interaction (buttons, toggles) */
+        readonly MICRO: {
+            readonly duration: 0.07;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        /** Small fade transitions */
+        readonly FADE: {
+            readonly duration: 0.11;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        /** Small expansion or short movements */
+        readonly SMALL: {
+            readonly duration: 0.15;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        /** Medium expansion, toasts, system communication */
+        readonly MEDIUM: {
+            readonly duration: 0.24;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        /** Large expansion, important notifications */
+        readonly LARGE: {
+            readonly duration: 0.4;
+            readonly ease: readonly [0.4, 0, 0.2, 1];
+        };
+        /** Full-screen animations, background dimming */
+        readonly FULL_SCREEN: {
+            readonly duration: 0.7;
+            readonly ease: readonly [0.4, 0, 0.2, 1];
+        };
+    };
+    readonly TRANSITION_DESCRIPTIONS: {
+        readonly MICRO: "Quick micro-interaction (buttons, toggles)";
+        readonly FADE: "Small fade transitions";
+        readonly SMALL: "Small expansion or short movements";
+        readonly MEDIUM: "Medium expansion, toasts, system communication";
+        readonly LARGE: "Large expansion, important notifications";
+        readonly FULL_SCREEN: "Full-screen animations, background dimming";
+    };
+};
+export default ANIMATION_TOKENS;

package/dist/theme/base/colors.d.ts

@@ -1,18 +1,33 @@
 declare const colors: {
     readonly gray: {
-        readonly light: string;
-        readonly medium: string;
-        readonly dark: string;
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
+        light: string;
+        medium: string;
+        dark: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    readonly grey: {
+        light: string;
+        medium: string;
+        dark: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
     };
     readonly blue: {
         50: string;
@@ -120,6 +135,7 @@ declare const colors: {
             readonly light: string;
             readonly dark: "#ffffff";
         };
+        readonly brandText: "#ffffff";
     };
     readonly background: {
         readonly gray: string;

package/dist/theme/base/index.d.ts

@@ -3,5 +3,6 @@ export { default as colors } from './colors';
 export { default as shadows } from './shadows';
 export { default as zIndices } from './zindices';
 export { default as breakpoints } from './breakpoints';
+export { default as animationTokens } from './animation';
 export { fonts, fontSizes, fontWeights } from './typography';
 export { notificationBaseStyle, notificationStatusStyles, NOTIFICATION_STATUSES, } from './notifications';

package/dist/theme/base/notifications.d.ts

@@ -6,12 +6,12 @@ export declare const NOTIFICATION_STATUSES: {
 };
 export declare const notificationBaseStyle: {
     container: {
-        paddingY: number;
+        padding: number;
         borderRadius: string;
+        alignItems: string;
     };
     actionButton: {
         fontSize: string;
-        height: string;
         lineHeight: string;
         color: string;
         _hover: {
@@ -39,8 +39,8 @@ export declare const notificationBaseStyle: {
     };
     icon: {
         width: number;
-        marginRight: number;
         height: string;
+        flexShrink: number;
     };
     description: {
         lineHeight: number;

package/dist/types/forwardRefComponent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export type ForwardRefComponent<Element, Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Element>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "25.6.0",
+  "version": "25.11.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -80,7 +80,7 @@
     "babel-loader": "8.2.2",
     "babel-plugin-module-resolver": "5.0.0",
     "chalk": "4.1.0",
-    "classnames": "2.2.6",
+    "classnames": "2.3.2",
     "css-loader": "5.1.3",
     "eslint-loader": "4.0.2",
     "get-contrast-ratio": "0.2.1",
@@ -115,10 +115,10 @@
     "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/browserslist-config": "4.0.0",
     "@spothero/core": "7.0.1",
+    "@spothero/icons": "9.2.0",
     "@spothero/eslint-config": "6.1.0",
-    "@spothero/icons": "9.1.10",
-    "@spothero/prettier-config": "5.0.0",
     "@spothero/npm-publisher": "7.0.2",
+    "@spothero/prettier-config": "5.0.0",
     "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
@@ -133,7 +133,7 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "classnames": "2.2.6",
+    "classnames": "2.3.2",
     "framer-motion": "10.18.0",
     "lodash": "4.17.21",
     "prop-types": "15.7.2",
@@ -153,6 +153,7 @@
     "build": "pnpm run clean && rollup -c --configPlugin typescript",
     "release": "npm-release",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build -o ./docs/v2",
-    "publish-storybook": "pnpm run build-storybook"
+    "publish-storybook": "pnpm run build-storybook",
+    "type-check": "tsc --noemit"
   }
 }