@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/public/hooks/index.d.ts

@@ -1,5 +1,8 @@
 export { useCopyToClipboard } from "./useCopyToClipboard";
 export { useDisclosure } from "./useDisclosure";
 export { useKeyPress } from "./useKeyPress";
+export { useMatchMedia } from "./useMatchMedia";
 export { useOutsideClick } from "./useOutsideClick";
+export { usePrefersReducedMotion } from "./usePrefersReducedMotion";
+export { useScreenOrientation } from "./useScreenOrientation";
 export { useStep } from "./useStep";

package/public/hooks/index.js

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStep = exports.useOutsideClick = exports.useKeyPress = exports.useDisclosure = exports.useCopyToClipboard = void 0;
+exports.useStep = exports.useScreenOrientation = exports.usePrefersReducedMotion = exports.useOutsideClick = exports.useMatchMedia = exports.useKeyPress = exports.useDisclosure = exports.useCopyToClipboard = void 0;
 var useCopyToClipboard_1 = require("./useCopyToClipboard");
 Object.defineProperty(exports, "useCopyToClipboard", { enumerable: true, get: function () { return useCopyToClipboard_1.useCopyToClipboard; } });
 var useDisclosure_1 = require("./useDisclosure");
 Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return useDisclosure_1.useDisclosure; } });
 var useKeyPress_1 = require("./useKeyPress");
 Object.defineProperty(exports, "useKeyPress", { enumerable: true, get: function () { return useKeyPress_1.useKeyPress; } });
+var useMatchMedia_1 = require("./useMatchMedia");
+Object.defineProperty(exports, "useMatchMedia", { enumerable: true, get: function () { return useMatchMedia_1.useMatchMedia; } });
 var useOutsideClick_1 = require("./useOutsideClick");
 Object.defineProperty(exports, "useOutsideClick", { enumerable: true, get: function () { return useOutsideClick_1.useOutsideClick; } });
+var usePrefersReducedMotion_1 = require("./usePrefersReducedMotion");
+Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return usePrefersReducedMotion_1.usePrefersReducedMotion; } });
+var useScreenOrientation_1 = require("./useScreenOrientation");
+Object.defineProperty(exports, "useScreenOrientation", { enumerable: true, get: function () { return useScreenOrientation_1.useScreenOrientation; } });
 var useStep_1 = require("./useStep");
 Object.defineProperty(exports, "useStep", { enumerable: true, get: function () { return useStep_1.useStep; } });

package/public/hooks/useMatchMedia.d.ts

@@ -0,0 +1 @@
+export declare function useMatchMedia(query: string): boolean;

package/public/hooks/useMatchMedia.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("react");
+function useMatchMedia(query) {
+    const getMatches = (q) => {
+        if (typeof window !== "undefined") {
+            return window.matchMedia(q).matches;
+        }
+        return false;
+    };
+    const [matches, setMatches] = react_1.useState(getMatches(query));
+    react_1.useLayoutEffect(() => {
+        const mediaQueryList = window.matchMedia(query);
+        const onChange = (event) => setMatches(event.matches);
+        if (mediaQueryList) {
+            mediaQueryList.addListener(onChange);
+        }
+        return () => {
+            if (mediaQueryList) {
+                mediaQueryList.removeListener(onChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+exports.useMatchMedia = useMatchMedia;

package/public/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function usePrefersReducedMotion(): boolean;

package/public/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrefersReducedMotion = void 0;
+const useMatchMedia_1 = require("./useMatchMedia");
+function usePrefersReducedMotion() {
+    const hasNoPreference = useMatchMedia_1.useMatchMedia("(prefers-reduced-motion: no-preference)");
+    return !hasNoPreference;
+}
+exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/public/hooks/useScreenOrientation.d.ts

@@ -0,0 +1 @@
+export declare const useScreenOrientation: () => "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary" | undefined;

package/public/hooks/useScreenOrientation.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScreenOrientation = void 0;
+const react_1 = require("react");
+const useScreenOrientation = () => {
+    const getOrientation = () => {
+        if (typeof window !== "undefined") {
+            return window.screen.orientation.type;
+        }
+        return undefined;
+    };
+    const [orientation, setOrientation] = react_1.useState(getOrientation());
+    const updateOrientation = react_1.useCallback(() => {
+        setOrientation(getOrientation());
+    }, []);
+    react_1.useEffect(() => {
+        window.addEventListener("orientationchange", updateOrientation);
+        return () => {
+            window.removeEventListener("orientationchange", updateOrientation);
+        };
+    }, [updateOrientation]);
+    return orientation;
+};
+exports.useScreenOrientation = useScreenOrientation;

package/public/{style-dictionary → src/style-dictionary}/dist/tokens.css

@@ -81,6 +81,7 @@
   --color-purple-600: #604194;
   --color-white: #ffffff;
   --color-black: #000b11;
+  --color-brand-black: #132333;
   --color-screen: rgba(0, 0, 0, 0.25);
   --color-success: #54af68;
   --color-failure: #f25d54;

package/public/src/style-dictionary/dist/tokens.d.ts

@@ -0,0 +1,428 @@
+/**
+ * This tokens file was automatically generated by Style Dictionary
+ * Please do not edit this file directly; token definitions can be found in style-dictionary.config.js
+ */
+
+export declare const tokens: {
+  borderRadius: {
+    none: string;
+    px: string;
+    sm: string;
+    md: string;
+    "DEFAULT": string;
+    lg: string;
+    full: string;
+  };
+  borderWidth: {
+    0: string;
+    1: string;
+    2: string;
+    4: string;
+    8: string;
+    "DEFAULT": string;
+  };
+  color: {
+    lighten: {
+      100: string;
+      200: string;
+      300: string;
+    };
+    gray: {
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+    brandGreen: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    blue: {
+      0: string;
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    green: {
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    gold: {
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    red: {
+      100: string;
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    orange: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    pink: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    cyan: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    purple: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+    };
+    white: string;
+    black: string;
+    brandBlack: string;
+    screen: string;
+    success: string;
+    failure: string;
+    caution: string;
+    border: string;
+    placeholder: string;
+    link: string;
+  };
+  fontSize: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    bodySm: string;
+    body: string;
+    bodyLg: string;
+    icon: string;
+    iconSm: string;
+  };
+  fontWeight: {
+    regular: number;
+    medium: number;
+    bold: number;
+  };
+  height: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    25: string;
+    26: string;
+    27: string;
+    28: string;
+    29: string;
+    30: string;
+    31: string;
+    32: string;
+    33: string;
+    34: string;
+    35: string;
+    36: string;
+    37: string;
+    38: string;
+    39: string;
+    40: string;
+    41: string;
+    42: string;
+    43: string;
+    44: string;
+    45: string;
+    46: string;
+    47: string;
+    48: string;
+    49: string;
+    50: string;
+    51: string;
+    52: string;
+    53: string;
+    54: string;
+    55: string;
+    56: string;
+    57: string;
+    58: string;
+    59: string;
+    60: string;
+    61: string;
+    62: string;
+    63: string;
+    64: string;
+    auto: string;
+    px: string;
+    full: string;
+    screen: string;
+    appbar: string;
+    cell: string;
+  };
+  leading: {
+    none: number;
+    tight: number;
+    normal: number;
+    loose: number;
+  };
+  screenWidth: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  shadow: {
+    "DEFAULT": string;
+    up: string;
+    md: string;
+    lg: string;
+    inner: string;
+    glow: string;
+    none: string;
+    focus: string;
+    focusInside: string;
+    focusBrand: string;
+    popover: string;
+    buttonPrimary: string;
+    buttonSecondary: string;
+    paper: string;
+    tile: string;
+  };
+  spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    25: string;
+    26: string;
+    27: string;
+    28: string;
+    29: string;
+    30: string;
+    31: string;
+    32: string;
+    33: string;
+    34: string;
+    35: string;
+    36: string;
+    37: string;
+    38: string;
+    39: string;
+    40: string;
+    41: string;
+    42: string;
+    43: string;
+    44: string;
+    45: string;
+    46: string;
+    47: string;
+    48: string;
+    49: string;
+    50: string;
+    51: string;
+    52: string;
+    53: string;
+    54: string;
+    55: string;
+    56: string;
+    57: string;
+    58: string;
+    59: string;
+    60: string;
+    61: string;
+    62: string;
+    63: string;
+    64: string;
+  };
+  tracking: {
+    tight: string;
+    normal: string;
+    wide: string;
+  };
+  type: {
+    sans: string;
+    serif: string;
+    mono: string;
+  };
+  width: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+    16: string;
+    17: string;
+    18: string;
+    19: string;
+    20: string;
+    21: string;
+    22: string;
+    23: string;
+    24: string;
+    25: string;
+    26: string;
+    27: string;
+    28: string;
+    29: string;
+    30: string;
+    31: string;
+    32: string;
+    33: string;
+    34: string;
+    35: string;
+    36: string;
+    37: string;
+    38: string;
+    39: string;
+    40: string;
+    41: string;
+    42: string;
+    43: string;
+    44: string;
+    45: string;
+    46: string;
+    47: string;
+    48: string;
+    49: string;
+    50: string;
+    51: string;
+    52: string;
+    53: string;
+    54: string;
+    55: string;
+    56: string;
+    57: string;
+    58: string;
+    59: string;
+    60: string;
+    61: string;
+    62: string;
+    63: string;
+    64: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "3/4": string;
+    "1/5": string;
+    "2/5": string;
+    "3/5": string;
+    "4/5": string;
+    "1/6": string;
+    "5/6": string;
+    auto: string;
+    px: string;
+    full: string;
+    screen: string;
+    maxContent: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+  };
+  zIndex: {
+    0: number;
+    10: number;
+    20: number;
+    30: number;
+    40: number;
+    50: number;
+    auto: string;
+    below: number;
+    default: number;
+    popup: number;
+    dialog: number;
+    dropdown: number;
+    overlay: number;
+    menu: number;
+    modal: number;
+    toast: number;
+    max: number;
+  };
+};