oneslash-design-system 1.1.10 → 1.1.12

package/dist/components/timeStamp.jsx

@@ -0,0 +1,58 @@
+'use client';
+import React from 'react';
+export default function TimeStamp(_a) {
+    var createdAt = _a.createdAt, dateFormat = _a.dateFormat;
+    // absolute timestamp
+    var absoluteTimeStamp = function (createdAt) {
+        var date = new Date(createdAt);
+        var month = (date.getMonth() + 1).toString().padStart(2, '0');
+        var day = date.getDate().toString().padStart(2, '0');
+        var year = date.getFullYear();
+        var hours = date.getHours();
+        var minutes = date.getMinutes();
+        var formattedHours = hours.toString().padStart(2, '0');
+        var formattedMinutes = minutes.toString().padStart(2, '0');
+        var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        var dayOfWeek = daysOfWeek[date.getDay()];
+        return "".concat(month, "/").concat(day, "/").concat(year, " ").concat(dayOfWeek, " ").concat(formattedHours, ":").concat(formattedMinutes);
+    };
+    // relative timestamp
+    var relativeTimeStamp = function (createdAt) {
+        var date = new Date(createdAt);
+        var now = new Date();
+        var diff = now.getTime() - date.getTime();
+        var seconds = Math.floor(diff / 1000);
+        var minutes = Math.floor(seconds / 60);
+        var hours = Math.floor(minutes / 60);
+        var days = Math.floor(hours / 24);
+        var weeks = Math.floor(days / 7);
+        var months = Math.floor(days / 30);
+        var years = Math.floor(days / 365);
+        if (years > 0) {
+            return "".concat(years, " year").concat(years > 1 ? 's' : '', " ago");
+        }
+        else if (months > 0) {
+            return "".concat(months, " month").concat(months > 1 ? 's' : '', " ago");
+        }
+        else if (weeks > 0) {
+            return "".concat(weeks, " week").concat(weeks > 1 ? 's' : '', " ago");
+        }
+        else if (days > 0) {
+            return "".concat(days, " day").concat(days > 1 ? 's' : '', " ago");
+        }
+        else if (hours > 0) {
+            return "".concat(hours, " hour").concat(hours > 1 ? 's' : '', " ago");
+        }
+        else if (minutes > 0) {
+            return "".concat(minutes, " minute").concat(minutes > 1 ? 's' : '', " ago");
+        }
+        else {
+            return "".concat(seconds, " second").concat(seconds > 1 ? 's' : '', " ago");
+        }
+    };
+    var timeStamp = dateFormat === 'absolute' ? absoluteTimeStamp(createdAt) : relativeTimeStamp(createdAt);
+    return (<p className="text-caption text-light-text-secondary dark:text-dark-text-secondary">
+            {timeStamp}
+        </p>);
+}
+;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TooltipProps {
+    title: string;
+    children: React.ReactElement;
+}
+export default function Tooltip({ title, children }: TooltipProps): React.JSX.Element;
+export {};

package/dist/components/tooltip.jsx

@@ -0,0 +1,41 @@
+'use client';
+import React, { useState, useRef, useEffect } from 'react';
+export default function Tooltip(_a) {
+    var title = _a.title, children = _a.children;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var _c = useState('bottom'), position = _c[0], setPosition = _c[1];
+    var tooltipRef = useRef(null);
+    var buttonRef = useRef(null);
+    useEffect(function () {
+        var handlePosition = function () {
+            if (tooltipRef.current && buttonRef.current) {
+                var tooltipRect = tooltipRef.current.getBoundingClientRect();
+                var buttonRect = buttonRef.current.getBoundingClientRect();
+                // Check if there's enough space below; if not, place tooltip above
+                if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
+                    setPosition('top');
+                }
+                else {
+                    setPosition('bottom');
+                }
+            }
+        };
+        if (visible) {
+            handlePosition();
+        }
+    }, [visible]);
+    var handleClick = function () {
+        setVisible(false); // Hide tooltip on click
+    };
+    return (<div ref={buttonRef} onMouseEnter={function () { return setVisible(true); }} onMouseLeave={function () { return setVisible(false); }} onClick={handleClick} className="relative inline-block">
+      {children}
+      {visible && (<div ref={tooltipRef} className={"absolute whitespace-nowrap text-caption rounded-[8px] py-1 px-2 z-50\n              dark:bg-light-background-accent300 bg-dark-background-accent300 \n              dark:text-light-text-primary text-dark-text-primary\n\t\t\t\t\t\t\t".concat(position === 'bottom' ? 'mt-1' : 'mb-1')} style={{
+                bottom: position === 'top' ? '100%' : undefined,
+                top: position === 'bottom' ? '100%' : undefined,
+                left: '50%',
+                transform: 'translateX(-50%)',
+            }}>
+            {title}
+          </div>)}
+    </div>);
+}

package/dist/components/userImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface UserImageProps {
+    userHandle: string;
+    userImgUrl?: string;
+}
+export default function UserImage({ userHandle, userImgUrl, }: UserImageProps): React.JSX.Element;
+export {};

package/dist/components/userImage.jsx

@@ -0,0 +1,13 @@
+'use client';
+import React from 'react';
+export default function UserImage(_a) {
+    var userHandle = _a.userHandle, userImgUrl = _a.userImgUrl;
+    var defaultInitial = userHandle.charAt(0).toUpperCase();
+    return (<div className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden
+			bg-light-background-accent200 dark:bg-dark-background-accent200 
+			text-light-text-secondary dark:text-dark-text-secondary ">
+      {userImgUrl ? (<img src={userImgUrl} alt={userHandle} className="w-full h-full object-cover rounded-full"/>) : (<span className="text-body1">
+					{defaultInitial}
+				</span>)}
+    </div>);
+}

package/dist/designTokens.d.ts

@@ -0,0 +1,354 @@
+export namespace colors {
+    export namespace light {
+        export namespace text {
+            let primary: string;
+            let secondary: string;
+            let disabled: string;
+            let contrast: string;
+        }
+        export namespace accent {
+            export let main: string;
+            export let dark: string;
+            let light_1: string;
+            export { light_1 as light };
+            let contrast_1: string;
+            export { contrast_1 as contrast };
+        }
+        export namespace primary_1 {
+            let main_1: string;
+            export { main_1 as main };
+            let dark_1: string;
+            export { dark_1 as dark };
+            let light_2: string;
+            export { light_2 as light };
+        }
+        export { primary_1 as primary };
+        export namespace secondary_1 {
+            let main_2: string;
+            export { main_2 as main };
+            let dark_2: string;
+            export { dark_2 as dark };
+            let light_3: string;
+            export { light_3 as light };
+        }
+        export { secondary_1 as secondary };
+        export namespace error {
+            let main_3: string;
+            export { main_3 as main };
+            let dark_3: string;
+            export { dark_3 as dark };
+            let light_4: string;
+            export { light_4 as light };
+        }
+        export namespace warning {
+            let main_4: string;
+            export { main_4 as main };
+            let dark_4: string;
+            export { dark_4 as dark };
+            let light_5: string;
+            export { light_5 as light };
+        }
+        export namespace info {
+            let main_5: string;
+            export { main_5 as main };
+            let dark_5: string;
+            export { dark_5 as dark };
+            let light_6: string;
+            export { light_6 as light };
+        }
+        export namespace success {
+            let main_6: string;
+            export { main_6 as main };
+            let dark_6: string;
+            export { dark_6 as dark };
+            let light_7: string;
+            export { light_7 as light };
+        }
+        export namespace background {
+            let _default: string;
+            export { _default as default };
+            export let accent100: string;
+            export let accent200: string;
+            export let accent300: string;
+        }
+        export namespace action {
+            export let active: string;
+            export let hover: string;
+            export let selected: string;
+            export let disabledBackground: string;
+            let disabled_1: string;
+            export { disabled_1 as disabled };
+        }
+        export namespace actionBackground {
+            export let enabled: string;
+            export let hovered: string;
+            let selected_1: string;
+            export { selected_1 as selected };
+            let disabled_2: string;
+            export { disabled_2 as disabled };
+        }
+        export namespace actionOutlinedBorder {
+            let enabled_1: string;
+            export { enabled_1 as enabled };
+            let hovered_1: string;
+            export { hovered_1 as hovered };
+            let selected_2: string;
+            export { selected_2 as selected };
+            let disabled_3: string;
+            export { disabled_3 as disabled };
+        }
+        export namespace misc {
+            let divider: string;
+        }
+    }
+    export namespace dark_7 {
+        export namespace text_1 {
+            let primary_2: string;
+            export { primary_2 as primary };
+            let secondary_2: string;
+            export { secondary_2 as secondary };
+            let disabled_4: string;
+            export { disabled_4 as disabled };
+            let contrast_2: string;
+            export { contrast_2 as contrast };
+        }
+        export { text_1 as text };
+        export namespace accent_1 {
+            let main_7: string;
+            export { main_7 as main };
+            let dark_8: string;
+            export { dark_8 as dark };
+            let light_8: string;
+            export { light_8 as light };
+            let contrast_3: string;
+            export { contrast_3 as contrast };
+        }
+        export { accent_1 as accent };
+        export namespace primary_3 {
+            let main_8: string;
+            export { main_8 as main };
+            let dark_9: string;
+            export { dark_9 as dark };
+            let light_9: string;
+            export { light_9 as light };
+        }
+        export { primary_3 as primary };
+        export namespace secondary_3 {
+            let main_9: string;
+            export { main_9 as main };
+            let dark_10: string;
+            export { dark_10 as dark };
+            let light_10: string;
+            export { light_10 as light };
+        }
+        export { secondary_3 as secondary };
+        export namespace error_1 {
+            let main_10: string;
+            export { main_10 as main };
+            let dark_11: string;
+            export { dark_11 as dark };
+            let light_11: string;
+            export { light_11 as light };
+        }
+        export { error_1 as error };
+        export namespace warning_1 {
+            let main_11: string;
+            export { main_11 as main };
+            let dark_12: string;
+            export { dark_12 as dark };
+            let light_12: string;
+            export { light_12 as light };
+        }
+        export { warning_1 as warning };
+        export namespace info_1 {
+            let main_12: string;
+            export { main_12 as main };
+            let dark_13: string;
+            export { dark_13 as dark };
+            let light_13: string;
+            export { light_13 as light };
+        }
+        export { info_1 as info };
+        export namespace success_1 {
+            let main_13: string;
+            export { main_13 as main };
+            let dark_14: string;
+            export { dark_14 as dark };
+            let light_14: string;
+            export { light_14 as light };
+        }
+        export { success_1 as success };
+        export namespace background_1 {
+            let _default_1: string;
+            export { _default_1 as default };
+            let accent100_1: string;
+            export { accent100_1 as accent100 };
+            let accent200_1: string;
+            export { accent200_1 as accent200 };
+            let accent300_1: string;
+            export { accent300_1 as accent300 };
+        }
+        export { background_1 as background };
+        export namespace action_1 {
+            let active_1: string;
+            export { active_1 as active };
+            let hover_1: string;
+            export { hover_1 as hover };
+            let selected_3: string;
+            export { selected_3 as selected };
+            let disabledBackground_1: string;
+            export { disabledBackground_1 as disabledBackground };
+            let disabled_5: string;
+            export { disabled_5 as disabled };
+        }
+        export { action_1 as action };
+        export namespace actionBackground_1 {
+            let enabled_2: string;
+            export { enabled_2 as enabled };
+            let hovered_2: string;
+            export { hovered_2 as hovered };
+            let selected_4: string;
+            export { selected_4 as selected };
+            let disabled_6: string;
+            export { disabled_6 as disabled };
+        }
+        export { actionBackground_1 as actionBackground };
+        export namespace actionOutlinedBorder_1 {
+            let enabled_3: string;
+            export { enabled_3 as enabled };
+            let hovered_3: string;
+            export { hovered_3 as hovered };
+            let selected_5: string;
+            export { selected_5 as selected };
+            let disabled_7: string;
+            export { disabled_7 as disabled };
+        }
+        export { actionOutlinedBorder_1 as actionOutlinedBorder };
+        export namespace misc_1 {
+            let divider_1: string;
+            export { divider_1 as divider };
+        }
+        export { misc_1 as misc };
+    }
+    export { dark_7 as dark };
+}
+export namespace spacing {
+    let small: string;
+    let medium: string;
+    let large: string;
+}
+export namespace typography {
+    let family: string;
+    namespace h1 {
+        let weight: string;
+        let size: string;
+        let lineHeight: string;
+        let letterSpacing: string;
+    }
+    namespace h2 {
+        let weight_1: string;
+        export { weight_1 as weight };
+        let size_1: string;
+        export { size_1 as size };
+        let lineHeight_1: string;
+        export { lineHeight_1 as lineHeight };
+        let letterSpacing_1: string;
+        export { letterSpacing_1 as letterSpacing };
+    }
+    namespace h3 {
+        let weight_2: string;
+        export { weight_2 as weight };
+        let size_2: string;
+        export { size_2 as size };
+        let lineHeight_2: string;
+        export { lineHeight_2 as lineHeight };
+        let letterSpacing_2: string;
+        export { letterSpacing_2 as letterSpacing };
+    }
+    namespace h4 {
+        let weight_3: string;
+        export { weight_3 as weight };
+        let size_3: string;
+        export { size_3 as size };
+        let lineHeight_3: string;
+        export { lineHeight_3 as lineHeight };
+        let letterSpacing_3: string;
+        export { letterSpacing_3 as letterSpacing };
+    }
+    namespace h5 {
+        let weight_4: string;
+        export { weight_4 as weight };
+        let size_4: string;
+        export { size_4 as size };
+        let lineHeight_4: string;
+        export { lineHeight_4 as lineHeight };
+        let letterSpacing_4: string;
+        export { letterSpacing_4 as letterSpacing };
+    }
+    namespace h6 {
+        let weight_5: string;
+        export { weight_5 as weight };
+        let size_5: string;
+        export { size_5 as size };
+        let lineHeight_5: string;
+        export { lineHeight_5 as lineHeight };
+        let letterSpacing_5: string;
+        export { letterSpacing_5 as letterSpacing };
+    }
+    namespace subtitle1 {
+        let weight_6: string;
+        export { weight_6 as weight };
+        let size_6: string;
+        export { size_6 as size };
+        let lineHeight_6: string;
+        export { lineHeight_6 as lineHeight };
+        let letterSpacing_6: string;
+        export { letterSpacing_6 as letterSpacing };
+    }
+    namespace subtitle2 {
+        let weight_7: string;
+        export { weight_7 as weight };
+        let size_7: string;
+        export { size_7 as size };
+        let lineHeight_7: string;
+        export { lineHeight_7 as lineHeight };
+        let letterSpacing_7: string;
+        export { letterSpacing_7 as letterSpacing };
+    }
+    namespace body1 {
+        let weight_8: string;
+        export { weight_8 as weight };
+        let size_8: string;
+        export { size_8 as size };
+        let lineHeight_8: string;
+        export { lineHeight_8 as lineHeight };
+        let letterSpacing_8: string;
+        export { letterSpacing_8 as letterSpacing };
+    }
+    namespace body2 {
+        let weight_9: string;
+        export { weight_9 as weight };
+        let size_9: string;
+        export { size_9 as size };
+        let lineHeight_9: string;
+        export { lineHeight_9 as lineHeight };
+        let letterSpacing_9: string;
+        export { letterSpacing_9 as letterSpacing };
+    }
+    namespace caption {
+        let weight_10: string;
+        export { weight_10 as weight };
+        let size_10: string;
+        export { size_10 as size };
+        let lineHeight_10: string;
+        export { lineHeight_10 as lineHeight };
+        let letterSpacing_10: string;
+        export { letterSpacing_10 as letterSpacing };
+    }
+    namespace alignments {
+        let left: string;
+        let center: string;
+        let right: string;
+        let justify: string;
+    }
+}