oneslash-design-system 1.3.5 → 1.5.0

package/dist/components/alert.jsx

@@ -1,21 +1,18 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import IconButton from './iconButton';
-import useDarkMode from './useDarkMode';
-var bgColorMap = {
-    error: { light: '#F2C4C4', dark: '#5C1A1A' },
-    warning: { light: '#F5D5B0', dark: '#5C2E0A' },
-    info: { light: '#B8D9F0', dark: '#0A3A5C' },
-    success: { light: '#C4E2C5', dark: '#1A4A1D' },
-    default: { light: '#D1D1D1', dark: '#6D6D6D' },
+var bgClassMap = {
+    error: 'bg-light-error-alertBg dark:bg-dark-error-alertBg',
+    warning: 'bg-light-warning-alertBg dark:bg-dark-warning-alertBg',
+    info: 'bg-light-info-alertBg dark:bg-dark-info-alertBg',
+    success: 'bg-light-success-alertBg dark:bg-dark-success-alertBg',
+    default: 'bg-light-secondary-light dark:bg-dark-secondary-light',
 };
-var textColorMap = { light: '#000000', dark: '#eeeeee' };
 export default function Alert(_a) {
     var _b;
     var _c = _a.open, open = _c === void 0 ? true : _c, type = _a.type, message = _a.message, secondMessage = _a.secondMessage, onClose = _a.onClose, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'toast' : _e;
     var _f = useState(false), isVisible = _f[0], setIsVisible = _f[1];
     var _g = useState(false), shouldRender = _g[0], setShouldRender = _g[1];
-    var isDark = useDarkMode();
     useEffect(function () {
         if (open) {
             setShouldRender(true);
@@ -52,12 +49,9 @@ export default function Alert(_a) {
     };
     if (!shouldRender)
         return null;
-    var mode = isDark ? 'dark' : 'light';
-    var entry = (_b = bgColorMap[type]) !== null && _b !== void 0 ? _b : bgColorMap.default;
-    var backgroundColor = entry[mode];
-    var textColor = textColorMap[mode];
-    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-opacity duration-200 ease-out ".concat(isVisible ? 'opacity-100' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')} style={{ backgroundColor: backgroundColor }}>
-      <div className="flex items-start gap-2" style={{ color: textColor }}>
+    var bgClasses = (_b = bgClassMap[type]) !== null && _b !== void 0 ? _b : bgClassMap.default;
+    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ".concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0 scale-100' : variant === 'toast' ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+      <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
         <div className="flex flex-col text-left">
           <span className="text-body2">{message}</span>
           {secondMessage && (<span className="text-body2 opacity-70">{secondMessage}</span>)}

package/dist/components/button.jsx

@@ -108,8 +108,8 @@ export default function Button(_a) {
             textOnly: 'text-light-text-primary dark:text-dark-text-primary',
         },
         danger: {
-            primary: 'bg-light-error-main dark:bg-dark-error-main text-white dark:text-white',
-            secondary: 'bg-light-error-light dark:bg-dark-error-light text-light-error-main dark:text-dark-error-main',
+            primary: 'bg-light-error-main dark:bg-dark-error-main text-light-error-contrast dark:text-dark-error-contrast',
+            secondary: 'bg-light-error-alertBg dark:bg-dark-error-alertBg text-light-error-dark dark:text-dark-error-light',
             tertiary: 'bg-transparent border border-light-error-main dark:border-dark-error-main text-light-error-main dark:text-dark-error-main',
             textOnly: 'text-light-error-main dark:text-dark-error-main',
         },
@@ -123,7 +123,7 @@ export default function Button(_a) {
         },
         danger: {
             primary: 'hover:bg-light-error-dark hover:dark:bg-dark-error-dark',
-            secondary: 'hover:bg-light-error-main/20 dark:hover:bg-dark-error-main/20',
+            secondary: 'hover:bg-light-error-light/60 dark:hover:bg-dark-error-dark/60',
             tertiary: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
             textOnly: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
         },

package/dist/components/iconButton.d.ts

@@ -3,7 +3,7 @@ import * as LucideIcons from 'lucide-react';
 interface IconButtonProps {
     color: "primary" | "secondary" | "tertiary" | "iconOnly";
     state: "enabled" | "selected" | "disabled";
-    size: "large" | "medium" | "small";
+    size: "large" | "medium" | "small" | "tiny";
     iconName: keyof typeof LucideIcons;
     onClick?: any;
     loading?: boolean;

package/dist/components/iconButton.jsx

@@ -17,11 +17,13 @@ export default function IconButton(_a) {
         large: 'p-2', // 8px padding
         medium: 'p-1', // 4px padding
         small: 'p-1', // 4px padding
+        tiny: 'p-0.5', // 2px padding
     };
     var iconSizeClasses = {
         large: 'size-6', // 24px
         medium: 'size-6', // 24px
         small: 'size-5', // 20px
+        tiny: 'size-4', // 16px
     };
     // Base classes (padding and corner radius)
     var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");

package/dist/components/loadingScreen.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface LoadingSmallProps {
-    size?: 'large' | 'medium' | 'small';
+    size?: 'large' | 'medium' | 'small' | 'tiny';
 }
 export default function LoadingScreen(): React.JSX.Element;
 export declare function LoadingSmall({ size }: LoadingSmallProps): React.JSX.Element;

package/dist/components/loadingScreen.jsx

@@ -12,6 +12,7 @@ export function LoadingSmall(_a) {
         large: 'w-6 h-6 border-2', // 24px, border-2 for proportional thickness
         medium: 'w-6 h-6 border-2', // 24px, border-2
         small: 'w-5 h-5 border-2', // 20px, slightly thinner border
+        tiny: 'w-4 h-4 border-2', // 16px
     };
     return (<div className="flex justify-center items-center">
       <div className={"rounded-full border-t-transparent border-r-light-text-primary border-b-light-text-primary border-l-light-text-primary dark:border-t-transparent dark:border-r-dark-text-primary dark:border-b-dark-text-primary dark:border-l-dark-text-primary animate-spin ".concat(spinnerSizeClasses[size])}/>

package/dist/components/menuItem.d.ts

@@ -2,6 +2,7 @@ import React, { JSX } from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
+    icon?: React.ReactNode;
     userHandle?: string;
     userImgUrl?: string;
     label: string;
@@ -19,5 +20,5 @@ interface MenuItemProps {
     iconRight?: string;
     rightAction?: React.ReactNode;
 }
-export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, icon, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, rightAction, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -41,7 +41,7 @@ import UserImage from './userImage';
 import Tag from './tag';
 export default function MenuItem(_a) {
     var _this = this;
-    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction;
+    var href = _a.href, iconName = _a.iconName, icon = _a.icon, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight, rightAction = _a.rightAction;
     var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
     var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
@@ -101,7 +101,7 @@ export default function MenuItem(_a) {
             : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
       {/* Left group: icon/userImg + label with 8px gap */}
       <div className="flex items-center gap-2 min-w-0">
-        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : icon ? (<span className={"".concat(iconSize, " flex-shrink-0 flex items-center justify-center")}>{icon}</span>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
         <div className="flex flex-col min-w-0">
           <span className={"truncate ".concat(labelClass, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
             {label}

package/dist/components/modal.jsx

@@ -31,7 +31,7 @@ export default function Modal(_a) {
     };
     if (!isOpen)
         return null;
-    return (<div className="fixed bg-black bg-opacity-50 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
+    return (<div className="fixed bg-light-misc-scrim/40 dark:bg-dark-misc-scrim/40 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
       <div className={"bg-light-background-default dark:bg-dark-background-default rounded-[8px] ".concat(modalWidth, " flex flex-col")} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',

package/dist/components/tag.jsx

@@ -12,7 +12,7 @@ var colorConfig = {
     },
     success: {
         bg: 'bg-light-success-main dark:bg-dark-success-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-success-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-success-main dark:text-dark-success-main',
         border: 'border-light-success-main dark:border-dark-success-main',
         dot: 'bg-light-success-main dark:bg-dark-success-main',
@@ -20,7 +20,7 @@ var colorConfig = {
     },
     warning: {
         bg: 'bg-light-warning-main dark:bg-dark-warning-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-warning-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-warning-main dark:text-dark-warning-main',
         border: 'border-light-warning-main dark:border-dark-warning-main',
         dot: 'bg-light-warning-main dark:bg-dark-warning-main',
@@ -28,7 +28,7 @@ var colorConfig = {
     },
     error: {
         bg: 'bg-light-error-main dark:bg-dark-error-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-error-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-error-main dark:text-dark-error-main',
         border: 'border-light-error-main dark:border-dark-error-main',
         dot: 'bg-light-error-main dark:bg-dark-error-main',
@@ -36,7 +36,7 @@ var colorConfig = {
     },
     info: {
         bg: 'bg-light-info-main dark:bg-dark-info-main',
-        text: 'text-white dark:text-dark-text-primary',
+        text: 'text-light-info-contrast dark:text-dark-text-primary',
         textOnly: 'text-light-info-main dark:text-dark-info-main',
         border: 'border-light-info-main dark:border-dark-info-main',
         dot: 'bg-light-info-main dark:bg-dark-info-main',
@@ -77,7 +77,8 @@ export default function Tag(_a) {
         fontClasses = variant === 'textOnly' ? colorStyles.textOnly : colorStyles.text;
     }
     else if (isSelected) {
-        fontClasses = 'text-white';
+        // Selected tags sit on accent-main — use the accent contrast token
+        fontClasses = 'text-light-accent-contrast dark:text-dark-accent-contrast';
     }
     else {
         fontClasses = 'text-light-text-primary dark:text-dark-text-primary';

package/dist/components/tooltip.jsx

@@ -1,12 +1,16 @@
 'use client';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
+var VIEWPORT_MARGIN = 8;
 export default function Tooltip(_a) {
     var title = _a.title, children = _a.children, placement = _a.placement;
     var _b = useState(false), visible = _b[0], setVisible = _b[1];
     var _c = useState(placement !== null && placement !== void 0 ? placement : 'bottom'), position = _c[0], setPosition = _c[1];
+    var _d = useState(0), shiftX = _d[0], setShiftX = _d[1];
     var tooltipRef = useRef(null);
     var buttonRef = useRef(null);
-    useEffect(function () {
+    useLayoutEffect(function () {
+        if (!visible)
+            return;
         var handlePosition = function () {
             if (tooltipRef.current && buttonRef.current) {
                 var tooltipRect = tooltipRef.current.getBoundingClientRect();
@@ -15,18 +19,28 @@ export default function Tooltip(_a) {
                 if (placement) {
                     setPosition(placement);
                 }
-                else if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
-                    setPosition('top');
-                }
                 else {
-                    setPosition('bottom');
+                    var spaceBelow = window.innerHeight - buttonRect.bottom;
+                    var fitsBelow = spaceBelow >= tooltipRect.height + VIEWPORT_MARGIN;
+                    var fitsAbove = buttonRect.top >= tooltipRect.height + VIEWPORT_MARGIN;
+                    setPosition(!fitsBelow && fitsAbove ? 'top' : 'bottom');
                 }
+                // Keep the tooltip inside the viewport horizontally
+                var centerX = buttonRect.left + buttonRect.width / 2;
+                var half = tooltipRect.width / 2;
+                var minCenter = VIEWPORT_MARGIN + half;
+                var maxCenter = window.innerWidth - VIEWPORT_MARGIN - half;
+                setShiftX(Math.min(Math.max(centerX, minCenter), maxCenter) - centerX);
             }
         };
-        if (visible) {
-            handlePosition();
-        }
-    }, [visible, placement]);
+        handlePosition();
+        window.addEventListener('resize', handlePosition);
+        window.addEventListener('scroll', handlePosition, true);
+        return function () {
+            window.removeEventListener('resize', handlePosition);
+            window.removeEventListener('scroll', handlePosition, true);
+        };
+    }, [visible, placement, title]);
     var handleClick = function () {
         setVisible(false); // Hide tooltip on click
     };
@@ -36,7 +50,7 @@ export default function Tooltip(_a) {
                 bottom: position === 'top' ? '100%' : undefined,
                 top: position === 'bottom' ? '100%' : undefined,
                 left: '50%',
-                transform: 'translateX(-50%)',
+                transform: "translateX(calc(-50% + ".concat(shiftX, "px))"),
             }}>
             {title}
           </div>)}

package/dist/components/userImage.jsx

@@ -27,6 +27,8 @@ export default function UserImage(_a) {
     var seed = getColorSeed(userHandle);
     var hue = Math.abs(getHash(seed)) % 360;
     var saturation = grayscale ? 0 : 80;
+    // DESIGN-TOKEN EXCEPTION: avatar backgrounds are derived from a hash of the
+    // user handle (per-user identity color), so they cannot map to a static token.
     // Light mode: vibrant pastel
     var lightBg = "hsl(".concat(hue, ", ").concat(saturation, "%, 80%)");
     // Dark mode: darker, vibrant variant

package/dist/designTokens.d.ts

@@ -40,6 +40,8 @@ export namespace colors {
             let light_4: string;
             export { light_4 as light };
             export let alertBg: string;
+            let contrast_2: string;
+            export { contrast_2 as contrast };
         }
         export namespace warning {
             let main_4: string;
@@ -50,6 +52,8 @@ export namespace colors {
             export { light_5 as light };
             let alertBg_1: string;
             export { alertBg_1 as alertBg };
+            let contrast_3: string;
+            export { contrast_3 as contrast };
         }
         export namespace info {
             let main_5: string;
@@ -60,6 +64,8 @@ export namespace colors {
             export { light_6 as light };
             let alertBg_2: string;
             export { alertBg_2 as alertBg };
+            let contrast_4: string;
+            export { contrast_4 as contrast };
         }
         export namespace success {
             let main_6: string;
@@ -70,6 +76,8 @@ export namespace colors {
             export { light_7 as light };
             let alertBg_3: string;
             export { alertBg_3 as alertBg };
+            let contrast_5: string;
+            export { contrast_5 as contrast };
         }
         export namespace background {
             let _default: string;
@@ -106,6 +114,7 @@ export namespace colors {
         }
         export namespace misc {
             let divider: string;
+            let scrim: string;
         }
     }
     export namespace dark_7 {
@@ -116,8 +125,8 @@ export namespace colors {
             export { secondary_2 as secondary };
             let disabled_4: string;
             export { disabled_4 as disabled };
-            let contrast_2: string;
-            export { contrast_2 as contrast };
+            let contrast_6: string;
+            export { contrast_6 as contrast };
         }
         export { text_1 as text };
         export namespace accent_1 {
@@ -127,8 +136,8 @@ export namespace colors {
             export { dark_8 as dark };
             let light_8: string;
             export { light_8 as light };
-            let contrast_3: string;
-            export { contrast_3 as contrast };
+            let contrast_7: string;
+            export { contrast_7 as contrast };
         }
         export { accent_1 as accent };
         export namespace primary_3 {
@@ -158,6 +167,8 @@ export namespace colors {
             export { light_11 as light };
             let alertBg_4: string;
             export { alertBg_4 as alertBg };
+            let contrast_8: string;
+            export { contrast_8 as contrast };
         }
         export { error_1 as error };
         export namespace warning_1 {
@@ -169,6 +180,8 @@ export namespace colors {
             export { light_12 as light };
             let alertBg_5: string;
             export { alertBg_5 as alertBg };
+            let contrast_9: string;
+            export { contrast_9 as contrast };
         }
         export { warning_1 as warning };
         export namespace info_1 {
@@ -180,6 +193,8 @@ export namespace colors {
             export { light_13 as light };
             let alertBg_6: string;
             export { alertBg_6 as alertBg };
+            let contrast_10: string;
+            export { contrast_10 as contrast };
         }
         export { info_1 as info };
         export namespace success_1 {
@@ -191,6 +206,8 @@ export namespace colors {
             export { light_14 as light };
             let alertBg_7: string;
             export { alertBg_7 as alertBg };
+            let contrast_11: string;
+            export { contrast_11 as contrast };
         }
         export { success_1 as success };
         export namespace background_1 {
@@ -242,6 +259,8 @@ export namespace colors {
         export namespace misc_1 {
             let divider_1: string;
             export { divider_1 as divider };
+            let scrim_1: string;
+            export { scrim_1 as scrim };
         }
         export { misc_1 as misc };
     }

package/dist/designTokens.js

@@ -31,24 +31,28 @@ module.exports = {
                 dark: '#B22323',
                 light: '#F27777',
                 alertBg: '#F2C4C4',
+                contrast: '#FFFFFF',
             },
             warning: {
                 main: '#EF6C00',
                 dark: '#CC5302',
                 light: '#FFA732',
                 alertBg: '#F5D5B0',
+                contrast: '#FFFFFF',
             },
             info: {
                 main: '#0087D4',
                 dark: '#006BAB',
                 light: '#2CC1FF',
                 alertBg: '#B8D9F0',
+                contrast: '#FFFFFF',
             },
             success: {
                 main: '#328736',
                 dark: '#2A6B2D',
                 light: '#67C16B',
                 alertBg: '#C4E2C5',
+                contrast: '#FFFFFF',
             },
             background: {
                 default: '#e8e8e8',
@@ -77,6 +81,7 @@ module.exports = {
             },
             misc: {
                 divider: '#D1D1D1',
+                scrim: '#000000',
             },
         },
         // dark
@@ -108,24 +113,28 @@ module.exports = {
                 dark: '#B22323',
                 light: '#F27777',
                 alertBg: '#5C1A1A',
+                contrast: '#FFFFFF',
             },
             warning: {
                 main: '#FF8C0A',
                 dark: '#CC5302',
                 light: '#FFA732',
                 alertBg: '#5C2E0A',
+                contrast: '#FFFFFF',
             },
             info: {
                 main: '#00AFFF',
                 dark: '#006BAB',
                 light: '#2CC1FF',
                 alertBg: '#0A3A5C',
+                contrast: '#FFFFFF',
             },
             success: {
                 main: '#42A547',
                 dark: '#2A6B2D',
                 light: '#67C16B',
                 alertBg: '#1A4A1D',
+                contrast: '#FFFFFF',
             },
             background: {
                 default: '#262626',
@@ -154,6 +163,7 @@ module.exports = {
             },
             misc: {
                 divider: '#404040',
+                scrim: '#000000',
             },
         },
     },