@opentrons/components 0.1.6-alpha.7 → 0.1.6-alpha.9

package/lib/helix-design-system/colors.d.ts

@@ -65,6 +65,17 @@ export declare const black80 = "#24313F";
 export declare const black70 = "#39495B";
 export declare const white = "#FFFFFF";
 export declare const blue50 = "#006CFA";
+/**
+ * Semi-opaques
+ * */
+export declare const transparentWhite80 = "#FFFFFFCC";
+export declare const transparentWhite50 = "#FFFFFF80";
+export declare const transparentBlack80 = "#16212D80";
+/**
+ * flex
+ */
+export declare const flex55 = "#0297CC";
+export declare const flex50 = "#00BDFF";
 /**
  * extras
  */

package/lib/helix-design-system/index.d.ts

@@ -1,2 +1,4 @@
 export * as COLORS from './colors';
 export * as BORDERS from './borders';
+export * as PRODUCT from './product';
+export * as STYLE from './style';

package/lib/helix-design-system/product/index.d.ts

@@ -0,0 +1 @@
+export * as TYPOGRAPHY from './typography';

package/lib/helix-design-system/product/typography.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Note: these values are only currently correct for desktop and should not be used on ODD.
+ */
+export declare const fontFamily = "Public Sans";
+export declare const fontWeightRegular = "400";
+export declare const fontWeightSemiBold = "600";
+export declare const fontWeightBold = "700";
+export declare const fontSizeDisplayBold = "2.4375rem";
+export declare const lineHeightDisplayBold = "3rem";
+export declare const fontFamilyDisplayBold = "Public Sans";
+export declare const fontWeightDisplayBold = "700";
+export declare const fontStyleDisplayBold = "700 2.4375rem/3rem Public Sans";
+export declare const fontFamilyHeadingLargeRegular = "Public Sans";
+export declare const fontSizeHeadingLargeRegular = "1.625rem";
+export declare const lineHeightHeadingLargeRegular = "2rem";
+export declare const fontWeightHeadingLargeRegular = "400";
+export declare const fontStyleHeadingLargeRegular = "400 1.625rem/2rem Public Sans";
+export declare const fontFamilyHeadingLargeBold = "Public Sans";
+export declare const fontSizeHeadingLargeBold = "1.625rem";
+export declare const lineHeightHeadingLargeBold = "2rem";
+export declare const fontWeightHeadingLargeBold = "700";
+export declare const fontStyleHeadingLargeBold = "700 1.625rem/2rem Public Sans";
+export declare const fontSizeHeadingMediumSemiBold = "1.4375rem";
+export declare const lineHeightHeadingMediumSemiBold = "1.75rem";
+export declare const fontFamilyHeadingMediumSemiBold = "Public Sans";
+export declare const fontWeightHeadingMediumSemiBold = "600";
+export declare const fontStyleHeadingMediumSemiBold = "600 1.4375rem/1.75rem Public Sans";
+export declare const fontStyleHeadingMediumBold = "700 1.4375rem/1.75rem Public Sans";
+export declare const fontSizeHeadingSmallRegular = "1.125rem";
+export declare const lineHeightHeadingSmallRegular = "1.5rem";
+export declare const fontFamilyHeadingSmallRegular = "Public Sans";
+export declare const fontWeightHeadingSmallRegular = "400";
+export declare const fontStyleHeadingSmallRegular = "400 1.125rem/1.5rem Public Sans";
+export declare const fontSizeHeadingSmallBold = "1.125rem";
+export declare const lineHeightHeadingSmallBold = "1.5rem";
+export declare const fontFamilyHeadingSmallBold = "Public Sans";
+export declare const fontWeightHeadingSmallBold = "700";
+export declare const fontStyleHeadingSmallBold = "700 1.125rem/1.5rem Public Sans";
+export declare const fontStyleHeadingSmallSemiBold = "600 1.125rem/1.5rem Public Sans";
+export declare const fontSizeBodyLargeSemiBold = "1rem";
+export declare const lineHeightBodyLargeSemiBold = "1.5rem";
+export declare const fontFamilyBodyLargeSemiBold = "Public Sans";
+export declare const fontWeightBodyLargeSemiBold = "600";
+export declare const fontStyleBodyLargeSemiBold = "600 1rem/1.5rem Public Sans";
+export declare const fontSizeBodyLargeRegular = "1rem";
+export declare const lineHeightBodyLargeRegular = "1.5rem";
+export declare const fontFamilyBodyLargeRegular = "Public Sans";
+export declare const fontWeightBodyLargeRegular = "400";
+export declare const fontStyleBodyLargeRegular = "400 1rem/1.5rem Public Sans";
+export declare const fontSizeBodyDefaultSemiBold = "0.875rem";
+export declare const lineHeightBodyDefaultSemiBold = "1.25rem";
+export declare const fontFamilyBodyDefaultSemiBold = "Public Sans";
+export declare const fontWeightBodyDefaultSemiBold = "600";
+export declare const fontStyleBodyDefaultSemiBold = "600 0.875rem/1.25rem Public Sans";
+export declare const fontSizeBodyDefaultRegular = "0.875rem";
+export declare const lineHeightBodyDefaultRegular = "1.25rem";
+export declare const fontFamilyBodyDefaultRegular = "Public Sans";
+export declare const fontWeightBodyDefaultRegular = "400";
+export declare const fontStyleBodyDefaultRegular = "400 0.875rem/1.25rem Public Sans";
+export declare const fontSizeCaptionBold = "0.8125rem";
+export declare const lineHeightCaptionBold = "1rem";
+export declare const fontFamilyCaptionBold = "Public Sans";
+export declare const fontWeightCaptionBold = "700";
+export declare const fontStyleCaptionBold = "700 0.8125rem/1rem Public Sans";
+export declare const fontSizeCaptionSemiBold = "0.8125rem";
+export declare const lineHeightCaptionSemiBold = "1rem";
+export declare const fontFamilyCaptionSemiBold = "Public Sans";
+export declare const fontWeightCaptionSemiBold = "600";
+export declare const fontStyleCaptionSemiBold = "600 0.8125rem/1rem Public Sans";
+export declare const fontSizeCaptionRegular = "0.8125rem";
+export declare const lineHeightCaptionRegular = "1rem";
+export declare const fontFamilyCaptionRegular = "Public Sans";
+export declare const fontWeightCaptionRegular = "400";
+export declare const fontStyleCaptionRegular = "400 0.8125rem/1rem Public Sans";
+export declare const fontSizeCodeRegular = "0.8125rem";
+export declare const lineHeightCodeRegular = "1.25rem";
+export declare const fontFamilyCodeRegular = "Reddit Mono";
+export declare const fontWeightCodeRegular = "400";
+export declare const fontStyleCodeRegular = "400 0.8125rem/1.25rem Reddit Mono";

package/lib/helix-design-system/style.d.ts

@@ -0,0 +1 @@
+export declare const floatDropShadow = "box-shadow: 0px 0px 6px 6px rgba(22, 33, 45, 0.25);";

package/lib/hooks/index.d.ts

@@ -10,3 +10,4 @@ export * from './useSelectDeckLocation';
 export * from './useSwipe';
 export * from './useTimeout';
 export * from './useToggle';
+export * from './useMenuHandleClickOutside';

package/lib/hooks/useConditionalConfirm.d.ts

@@ -33,8 +33,9 @@
  * }
  * ```
  */
-export declare const useConditionalConfirm: <T extends any[]>(handleContinue: (...args: T) => any, shouldBlock: boolean) => {
+export interface UseConditionalConfirmResult<T extends any[]> {
     confirm: (...args: T) => void;
     showConfirmation: boolean;
     cancel: () => unknown;
-};
+}
+export declare const useConditionalConfirm: <T extends any[]>(handleContinue: (...args: T) => any, shouldBlock: boolean) => UseConditionalConfirmResult<T>;

package/lib/hooks/useDrag.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
 export interface ElementPosition {
     width: number;
     height: number;

package/lib/hooks/useLongPress.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
 export interface UseLongPressResult {
     ref: MutableRefObject<null>;
     style: CSSProperties;

package/lib/hooks/useMenuHandleClickOutside.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface MenuHandleClickOutside {
+    menuOverlay: JSX.Element;
+    handleOverflowClick: React.MouseEventHandler<HTMLButtonElement>;
+    showOverflowMenu: boolean;
+    setShowOverflowMenu: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function useMenuHandleClickOutside(): MenuHandleClickOutside;
+export {};

package/lib/hooks/useSelectDeckLocation/index.d.ts

@@ -1,5 +1,4 @@
-import { CutoutConfig } from '@opentrons/shared-data';
-import type { DeckDefinition, ModuleLocation, RobotType } from '@opentrons/shared-data';
+import type { CutoutConfig, DeckDefinition, ModuleLocation, RobotType } from '@opentrons/shared-data';
 export type DeckLocationSelectThemes = 'default' | 'grey';
 export declare function useDeckLocationSelect(robotType: RobotType, theme?: DeckLocationSelectThemes): {
     DeckLocationSelect: JSX.Element;

package/lib/hooks/useSwipe.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, CSSProperties } from 'react';
+import type { MutableRefObject, CSSProperties } from 'react';
 interface UseSwipeResult {
     ref: MutableRefObject<null>;
     style: CSSProperties;

package/lib/icons/Icon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { ICON_DATA_BY_NAME } from './icon-data';
 import type { SvgProps } from '../primitives';
 export type IconName = keyof typeof ICON_DATA_BY_NAME;

package/lib/icons/ModuleIcon.d.ts

@@ -1,8 +1,8 @@
-import { IconName } from './Icon';
 import type { ModuleType } from '@opentrons/shared-data';
 import type { StyleProps } from '../primitives/types';
+export type ModuleIconName = 'ot-magnet-v2' | 'ot-heater-shaker' | 'ot-temperature-v2' | 'ot-magnet-v2' | 'ot-thermocycler' | 'ot-absorbance';
 export declare const MODULE_ICON_NAME_BY_TYPE: {
-    [type in ModuleType]: IconName;
+    [type in ModuleType]: ModuleIconName;
 };
 interface ModuleIconProps extends StyleProps {
     moduleType: ModuleType;